2 - 14

<!DOCTYPE html>
<head>
<!--                         PAGE 002 : 2 - 14
                             by macithemes

                     don't remove credit and if you need help
                     don't be afraid to approach me. Enjoy!
-->

<!-- CREDITS:

                             Icons by ThemeHive
                         http://themehive.co/honeybee

-->
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<!--all in one page: by macithemes, hope you like!---->

    <title> My Playlist </title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">


    <style type="text/css">
* {box-sizing: border-box}

body {
    background-color: #fff; /*change background color*/
    font-size:11px;
    font-family: Avenir;
}


a {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: #000; /* change color of side nav links */
}

a:hover {
    text-decoration: none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    color: white;
}
.contain {
    margin: 10px;
    width: 750px;
    height: 809.36px;
    background: #333;
}
.album {
    position: relative;
    left: 585px;
    top: 120px;
    width: 290px;
    height: 251px;

}

.th-left-curve {
    position: relative;
    left: 580px;
    bottom: 150px;
    color: #383738;

}

.th-menu-3 {
    position: relative;
    left: 860px;
    bottom: 147px;
    color: #383738;
    font-size: 15px;
}

h1, h4 {
    position: relative;
    text-align:center;
    top: 125px;
    left: 350px;

}

h4 {
    font-family: Avenir Next Condensed;
    margin-top: -10px;
}

#sminute {
    position:relative;
    left: 600px;
    top: 119px;
}
h5, h6 {
    color: #A6A5A5;
    display: -webkit-inline-box;
    position: relative;
    padding-left: 230px;
    left: -240px;
}
.progress-bar {
    background-color: #C1B08B; /* change gold color */
    width: 100px;
    height: 4px;
    margin-top: -25px;
    margin-left: 20px;
}
.progress-bar2 {
    background-color: #F2F2F2; /* change light color */
    width:100px;
    height: 4px;
    margin-top: -4px;
    margin-left: 120px;
}
#play-btns {
    position:relative;
    left: 615px;
    top: 113px;
    font-size: 20px;

}
.th-next-1 {
    color: #333; /* change left & right arrow color */
    padding: 40px;

}
.next-rotate {
    transform: rotate(180deg);
}
.th-pause-o {
    color: #C1B08B; /* change pause color */
    font-size: 22px;
}

#song-list {
    border: none;
    position: relative;
    left: 580px;
    top: -30px;
    width: 330px;


}

.song-info {
    position:relative;
    left: 10px;
    top: 130px;
    margin-top: -20px;

}

.song-info h5 {
    color: #A6A6A6;
    font-family: Helvatica Neue;
    position: relative;
    bottom: -10px;
    left: -230px;
    font-weight: lighter;
}
.song-info h3 {
   color: #333333;
   font-family: Helvatica Neue;
   font-size: 9px;
   position: relative;
   top: 40px;
}
.song-info h6 {
    color: #A6A6A6;
    font-family: Helvatica Neue;
    position: relative;
    float: right;
    left: -65px;
    top: 35px;
}
.th-butterfly-o { /* credit dont remove */
    color: #333;
    position: relative;
    left: 720px;
    top: 66px;
}

</style>
</head>
<body>
<!-----------------------  LEFT BACKGROUND ------------------------------>
<div class="contain">

<!------------------------ IPHONE X TEMPLATE ---------------------------->
  <img class="iphone" src="https://i.imgur.com/veuiGJD.png" style="position:absolute;margin-left: 400px;margin-top:-70px;width: 689px;
height: 1089.36px;" />

 <span class="th th-left-curve"></span>
  <span class="th th-menu-3"></span>
  <!------------------------ ALBUM/SONG PICTURE --------------------------->
  <img class="album" src="https://is4-ssl.mzstatic.com/image/thumb/Music127/v4/12/12/ab/1212ab7f-f2a8-3718-6e9f-6250bf58252c/5056167100218_1.jpg/600x600bf.jpg" />
  <!----------- SONG --------->
  <h1> The Other </h1>
  <!-------- ARTIST --------->
  <h4> Lauv </h4>

  <!----------------------- SONG MINUTE ----------------------------------->
  <div id="sminute">
     <!----- LEFT MINUTES --------->
      <h5>2:43</h5>
      <!----- RIGHT MINUTES --------->
     <h6> 3:09 </h6>
      <div class="progress-bar"></div>
      <div class="progress-bar2"></div>
  </div>

  <!-------------- PLAY BUTTONS ----------------->
  <div id="play-btns">
      <span class="th next-rotate th-next-1"></span>
      <span class="th th-pause-o"></span>
      <span class="th th-next-1"></span>
  </div>
  <div id="song-list">
  <!------------------------ SONG GROUPS --------------------------------->
  <div class="song-info">
      <h6>3:39</h6>
      <h3> Feel So Fine </h3>
      <h5> Taeyeon </h5>
      <div style="border-bottom: 1px solid #E4E4E4;width:280px;"></div>
  </div>

<!------- SECOND GROUP -------->
  <div class="song-info">
      <h6>3:12</h6>
      <h3> I'm Your Girl </h3>
      <h5> Khan </h5>
      <div style="border-bottom: 1px solid #E4E4E4;width:280px;"></div>
  </div>
  <!------- THIRD GROUP -------->
  <div class="song-info">
      <h6> 3:09 </h6>
      <h3> The Other </h3>
      <h5> Lauv </h5>
      <div style="border-bottom: 1px solid #E4E4E4;width:280px;"></div>
  </div>
  <!------- FOURTH GROUP -------->
  <div class="song-info">
      <h6> 3:05 </h6>
      <h3> Love Alone </h3>
      <h5> Mokita </h5>
      <div style="border-bottom: 1px solid #E4E4E4;width:280px;"></div>
  </div>
  </div> <!--- end of song-list -->
   <a href="https://macithemes.tumblr.com"><span class="the th-butterfly-o"></span></a>
 </div><!--contain class--->

</body>
</html>