New Year's Playlist

<link href="https://fonts.googleapis.com/css?family=Muli:400,700|Montseratt:800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#gold-playlist{
  width: 450px;
  background: #111;
  position: relative;
  margin: 0px solid;
  overflow: hidden;
  padding-bottom: 105px;
  border-radius: 5px;
}

#gold-playlist .list{
  position: relative;
  top: 30px;
  margin-top: 15px;
  width: 370px;
  height: 90px;
  background: #1d1d1d;
  border-radius: 10px;
}

#gold-playlist .avatar{
  position: relative;
  top: 0px;
  left: -140px;
  width: 90px;
  height: 90px;
  border-radius: 100px;
  opacity: 0.9;
}
#gold-playlist img{
  width: 90px;
  opacity: 0.9;
}

#gold-playlist .title{
  font-family: 'Muli', sans-serif;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  top: -71px;
  left: 45px;
  width: 260px;
  height: 30px;
  color: #bbb;
  letter-spacing: 0px;
  line-height: 10px;
}
#gold-playlist .singer{
  font-family: 'Muli', sans-serif;
  font-size: 9px;
  font-weight: 400;
  position: relative;
  top: -86px;
  left: 45px;
  width: 260px;
  height: 10px;
  color: #777;
  letter-spacing: 0px;
  line-height: 10px;
}
#gold-playlist .bar{
  position: relative;
  top: -77px;
  left: 45px;
  width: 140px;
  height: 2px;
  background: #555;
  border-left: 80px solid #999;
}
#gold-playlist .bar2{
  position: relative;
  top: -77px;
  left: 45px;
  width: 140px;
  height: 2px;
  background: #555;
  border-left: 80px solid #555;
}
#gold-playlist .buttons{
  position: relative;
  top: -68px;
  left: 45px;
  width: 260px;
  height: 10px;
  line-height: 10px;
}

#gold-playlist .mini{
  position: relative;
  top: -121px;
  left: 160px;
  width: 260px;
  height: 0px;
  line-height: 10px;
}

#gold-playlist .header{
  position: relative;
  top: 0px;
  width: 450px;
  height: 240px;
  background: url(https://78.media.tumblr.com/32fb68a7ea69e39ada06729fc4ad0635/tumblr_o7fgmeVQz01tmnlt2o1_500.gif);
  background-size: 450px;
  overflow: hidden;
  border-bottom: 0.5px solid #333;
}
#gold-playlist .dark{
  position: absolute;
  top: 0px;
  width: 450px;
  height: 240px;
  background: #000;
  overflow: hidden;
  opacity: 0.7;
}

#gold-playlist .maintext{
  font-family: 'Montseratt', sans-serif;
  font-size: 85px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 63px;
  left: 10px;
  width: 450px;
  height: 10px;
  color: #D4AC0D;
  letter-spacing:1px;
  line-height: 100px;
}

#gold-playlist .subtext{
  font-family: 'Montseratt', sans-serif;
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 107px;
  left: 47px;
  width: 400px;
  height: 10px;
  color: #ccc;
  letter-spacing: 8px;
  line-height: 100px;
}
#gold-playlist .smoltext{
  font-family: 'Montseratt', sans-serif;
  font-size: 25px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 21px;
  left: 31px;
  width: 400px;
  height: 10px;
  color: #ccc;
  letter-spacing: 1px;
  line-height: 100px;
}
#gold-playlist .dots{
  position: absolute;
  top: 195px;
  left: 33px;
  width: 400px;
  height: 10px;
}

#gold-playlist .cred a{
  text-decoration: none;
  position: relative;
  top: 60px;
  left: 10px;
  width: 450px;
  height: 10px;
  color: #666;
  font-family: 'Muli', sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 10px;
  background: #111;
  padding: 8px;
}

#gold-playlist .line{
  position: relative;
  top: 75px;
  left: 0px;
  width: 370px;
  height: 10px;
  border-top: 0.5px solid #333;
  background: #111;
  line-height: 10px;
}

</style>

<center>
<div id="gold-playlist">

    <div class="header"></div>

    <div class="dark">
      <div class="smoltext">new year's</div>
      <div class="maintext">top</div>
      <div class="subtext">playlist</div>

      <div class="dots">
         <i class="fa fa-circle" style="font-size:8px;color:#D4AC0D;"></i>
         <i class="fa fa-circle-o" style="font-size:8px;color:#ddd;margin-left:3px;"></i>
         <i class="fa fa-circle-o" style="font-size:8px;color:#ddd;margin-left:3px;"></i>
      </div>
    </div>

    <div class="list">
        <div class="avatar">
        <img src="https://upload.wikimedia.org/wikipedia/en/b/b5/ImagineDragonsEvolve.jpg">
        </div>

        <div class="title">Believer<br></div>
        <div class="singer">Imagine Dragons</div>
        <div class="mini">
          <i class="fa fa-heart" style="font-size:8px;color:#D4AC0D;margin-right:5px;"></i>
          <i class="fa fa-random" style="font-size:8px;color:#555;"></i>
        </div>
        <div class="bar2"></div>
        <div class="buttons">
          <i class="fa fa-backward" style="font-size:11px;color:#555;margin-right:17px;"></i>
          <i class="fa fa-play" style="font-size:13px;color:#D4AC0D;"></i>
          <i class="fa fa-forward" style="font-size:11px;color:#555;margin-left:12px;"></i>
        </div>
   </div>

    <div class="list">
        <div class="avatar"><img src="https://tesco.scene7.com/is/image/tesco/242-4647_PI_66650MN"></div>

        <div class="title">Castle On The Hill<br></div>
        <div class="singer">Ed Sheeran</div>
        <div class="mini">
          <i class="fa fa-heart" style="font-size:8px;color:#555;margin-right:5px;"></i>
          <i class="fa fa-random" style="font-size:8px;color:#555;"></i>
        </div>
        <div class="bar2"></div>
        <div class="buttons">
          <i class="fa fa-backward" style="font-size:11px;color:#555;margin-right:17px;"></i>
          <i class="fa fa-play" style="font-size:13px;color:#D4AC0D;"></i>
          <i class="fa fa-forward" style="font-size:11px;color:#555;margin-left:12px;"></i>
        </div>
    </div>

    <div class="list">
         <div class="avatar"><img src="http://www.breatheheavy.com/wp-content/uploads/2017/08/pink-what-about-us-cover.jpg"></div>

        <div class="title">What About Us<br></div>
        <div class="singer">P!nk</div>
        <div class="mini">
          <i class="fa fa-heart" style="font-size:8px;color:#D4AC0D;margin-right:5px;"></i>
          <i class="fa fa-random" style="font-size:8px;color:#555;"></i>
        </div>
        <div class="bar"></div>
        <div class="buttons">
          <i class="fa fa-backward" style="font-size:11px;color:#555;margin-right:17px;"></i>
          <i class="fa fa-pause" style="font-size:13px;color:#D4AC0D;"></i>
          <i class="fa fa-forward" style="font-size:11px;color:#555;margin-left:12px;"></i>
        </div>
    </div>

    <div class="list">
         <div class="avatar"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/e2/Harry_Styles_-_Sign_of_the_Times_%28Official_Single_Cover%29.png/220px-Harry_Styles_-_Sign_of_the_Times_%28Official_Single_Cover%29.png"></div>

        <div class="title">Sign of the Times<br></div>
        <div class="singer">Harry Styles</div>
        <div class="mini">
          <i class="fa fa-heart" style="font-size:8px;color:#D4AC0D;margin-right:5px;"></i>
          <i class="fa fa-random" style="font-size:8px;color:#555;"></i>
        </div>
        <div class="bar2"></div>
        <div class="buttons">
          <i class="fa fa-backward" style="font-size:11px;color:#555;margin-right:17px;"></i>
          <i class="fa fa-play" style="font-size:13px;color:#D4AC0D;"></i>
          <i class="fa fa-forward" style="font-size:11px;color:#555;margin-left:12px;"></i>
        </div>
    </div>

    <div class="list">
         <div class="avatar"><img src="https://upload.wikimedia.org/wikipedia/en/5/57/Something_Just_Like_This.png"></div>

        <div class="title">Something Just Like This<br></div>
        <div class="singer">The Chainsmokers & Coldplay</div>
        <div class="mini">
          <i class="fa fa-heart" style="font-size:8px;color:#555;margin-right:5px;"></i>
          <i class="fa fa-random" style="font-size:8px;color:#555;"></i>
        </div>
        <div class="bar2"></div>
        <div class="buttons">
          <i class="fa fa-backward" style="font-size:11px;color:#555;margin-right:17px;"></i>
          <i class="fa fa-play" style="font-size:13px;color:#D4AC0D;"></i>
          <i class="fa fa-forward" style="font-size:11px;color:#555;margin-left:12px;"></i>
        </div>
    </div>

    <div class="line"></div>
    <div class="cred"><a href="https://shine.jcink.net/index.php?showuser=29444">2017 Hanie ©</a></div>

</div>
</center>