Imgur Super Comment

A small concept of Imgur Super Comments

by thelifeisyours

HTML

<script src="https://kit.fontawesome.com/52192c190c.js"></script>
<div id="header">
</div>
<div id="main">
  <div id="comments">

    <!-- START OF SUPER COMMENT SECTION -->

    <div class="comment">
      <div class="usertext super">
        <div class="author">
          <a class="comment-username" href="#">TheLifeIsYours</a>
          <div class="points ml1_2em">873 pts</div>
          <div class="time ml1_2em">6 hr</div>
          <div class="super_text ml1_2em"><a class="super_link" href="#super">Super Comment</a></div>
          <div class="options ml1_2em"></div>
        </div>
        <div class="comment-text">
          I love this post! Here buy your doggo some treats! <span class="super_decoration tier_2"><i class="fas fa-paw"></i></span>
        </div>
      </div>
    </div>

    <div class="comment">
      <div class="usertext super">
        <div class="author">
          <a class="comment-username" href="#">TheLifeIsYours</a>
          <div class="points ml1_2em">462 pts</div>
          <div class="time ml1_2em">6 hr</div>
          <div class="super_text ml1_2em"><a class="super_link" href="#super">Super Comment</a></div>
          <div class="options ml1_2em"></div>
        </div>
        <div class="comment-text">
          The cutest pupper I've ever seen!!! <span class="super_decoration tier_1"><i class="fas fa-paw"></i></span>
        </div>
      </div>
    </div>

    <!-- END OF SUPER COMMENTS SECTION -->

    <div class="comment">
      <div class="usertext">
        <div class="author">
          <a class="comment-username" href="#">TheLifeIsYours</a>
          <div class="points ml1_2em">92 pts</div>
          <div class="time ml1_2em">6 hr</div>
          <div class="options ml1_2em"></div>
        </div>
        <div class="comment-text">
          The world have never seen the might of such a good boi before!
        </div>
      </div>
    </div>

    <div class="comment">
      <div class="usertext">
        <div class="author">
...

CSS

body {
  background: #141518;
  color: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

a {
  color: #7789ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@font-face {
  font-family: imgur;
  src: url("https://s.imgur.com/include/fonts/imgur.woff?7");
}

#header {
  width: 100%;
  height: 3em;
  background: #34373c;
  border-bottom: solid 1px rgba(0, 0, 0, 0.7);
  box-shadow: 2px 0px 7px 1px rgba(0, 0, 0, 0.7);
  margin-bottom: 2em;
  z-index: 999;
}

#main {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#comments {
  width: 728px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.comment {
  position: relative;
  background: #34373c;
  cursor: pointer;
  max-width: 100%;
  min-width: 100%;
  border-radius: 6px 6px 6px 0;
  margin-bottom: 1em;
}

.usertext {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  min-height: 3em;
  padding: 9px 12px 11px 15px;
}

/* Normal Comment Tab */
.usertext::after {
  content: '';
  position: absolute;
  bottom: -0px;
  left: -10px;
  border: solid;
  border-width: 10px 10px 0 0;
  border-color: transparent #34373c;
}

/* SUPER COMMENT RELATED STYLING
-----------------------------------------------------------*/
.super_decoration {
  font-size:1.4em;
  margin:0.2em;
}

.tier_2 {
  color: #adf12d;
}

.tier_1 {
  color: #ffd700;
}


.super::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 6px 6px 6px 0;
  background: linear-gradient(90deg, #1bb86e 0%, #6c6ae6 25%, #34308c 50%, #3e3cb1 75%, #1bb86e 100%);
  background-size: 200%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: super_spin 5s linear infinite;
}

@keyframes super_spin {
  100% {
    background-position: 200% 0;
  }
}

/* Super Comment Tab */
.super::after {
  content: '';
  position: absolute;
  bottom: -2px;
 ...