<!--HTML--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100|Montserrat:400,700' rel='stylesheet' type='text/css'><style>
#waffles {height: 600px; width: 450px; position: relative; background: red; border: 10px solid #eef0e6; box-shadow: 0px 0px 10px rgba(0,0,0,0.3)}
.wafflesh {height: 120px; background-color: #9da7b8; width: 450px; position: absolute; top: 0px;}
.wafflesh1 {height: 80px; width: 80px; border: 8px solid #eef0e6; box-shadow: 0px 0px 5px rgba(0,0,0,0.3); position: absolute; background-size: cover; background-repeat: no-repeat; top: 13px; left: 14px; background-blend-mode: multiply}
.wafflesh2 {height: 20px; font-family: montserrat; text-transform: uppercase; color: #6a7587; letter-spacing: 3px; padding-bottom: 3px; font-size: 9px; position: absolute; width: 300px; border-bottom: 1px dotted #6a7587; right: 10px; top: 15px; line-height: 25px; text-align: right}
.wafflesh3 {height: 50px; width: 330px; text-shadow: 2px 2px 10px rgba(0,0,0,0.1); color: #eef0e6; text-transform: lowercase; font-family: roboto slab; position: absolute; right: 10px; top: 50px; font-size: 45px; text-align: left; letter-spacing: -3px; line-height: 30px }
.wafflesh3::first-letter {color: #516583}
.wafflesf {height: 40px; width: 450px; line-height: 40px; background-color: #9da7b8; position: absolute; bottom: 0px; color: #eef0e6; font-family: montserrat; letter-spacing: 3px; font-size: 9px; text-align: center; text-transform: uppercase}
.wafflesm {width: 430px; height: 420px; background-image: url(http://i.imgur.com/RXxfq8F.png); position: absolute; top: 120px; background-color: rgba(61, 54, 57, 0.96);background-blend-mode: multiply; padding: 5px; border: 5px solid transparent; overflow: auto}
.wafflesm td {padding-bottom:  10px; border-bottom: 1px solid #eef0e6; width: }
.waffless {height: 120px; width: 120px; position: relative; overflow: hidden; margin: 3px 5px 3px 4px; background-size: cover; background-repeat: no-repeat}
.waffless1 {background: rgba(61,54,57, 0.8); height:120px; width: 120px; position: absolute; top: 0px;  z-index: 2;}
.waffless .waffless1 {top: -120px; -webkit-transition: 0.4s ease}
.waffless:hover .waffless1 {top: 0px}
.waffless1a {height: 40px; width: 100px; background-color: #516583; position: absolute; top: 10px; left: 10px; font-size: 14px; line-height: 40px; color: #eef0e6; text-align: center}
.waffless1b {position: absolute; height: 15px; font-family: montserrat; text-transform: uppercase; text-align: center; line-height: 15px; width: 100px; left: 10px; color: #eef0e6; font-size: 7px; background: #516583; text-transform: uppercase}
.wafflesm::-webkit-scrollbar {width:0px}
</style>


<center>
<div id="waffles">
 <div class="wafflesh">
   <div class="wafflesh2">c`mon</div>
   <div class="wafflesh3">HONEYDANCE</div>
 </div>
 <div class="wafflesm">
   <table cellspacing="8px">
     <tr>

     <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/25437.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=YQHsXMglC9A"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">HELLO</div>
           <div class="waffless1b" style="top: 75px">ADELE</div>
           <div class="waffless1b" style="top: 95px">25</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2543g.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=t2NgsJrrAyM"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">ALIVE</div>
           <div class="waffless1b" style="top: 75px">SIA</div>
           <div class="waffless1b" style="top: 95px">One Million Bullets</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2544f.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=eYoINidnLRQ"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Spanish Sahara</div>
           <div class="waffless1b" style="top: 75px">Foals</div>
           <div class="waffless1b" style="top: 95px">Total Life Forever</div>
         </div>
       </div>
     </td>

      </tr>
<tr>

       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2545b.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=f2JuxM-snGc"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Team</div>
           <div class="waffless1b" style="top: 75px">Lorde</div>
           <div class="waffless1b" style="top: 95px">Pure Heroine</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2546P.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=DK_0jXPuIr0"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">What Do You Mean?</div>
           <div class="waffless1b" style="top: 75px">Justin Bieber</div>
           <div class="waffless1b" style="top: 95px">Purpose</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2547e.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=ao4o-XRU_KM&feature=youtu.be"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Ghost</div>
           <div class="waffless1b" style="top: 75px">Halsey</div>
           <div class="waffless1b" style="top: 95px">Badlands</div>
         </div>
       </div>
     </td>

      </tr>
<tr>

       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2547S.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=bpOSxM0rNPM"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Do I Wanna Know?</div>
           <div class="waffless1b" style="top: 75px">Arctic Monkeys</div>
           <div class="waffless1b" style="top: 95px">AM</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/2549K.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=aNzCDt2eidg"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Skinny Love</div>
           <div class="waffless1b" style="top: 75px">Birdy </div>
           <div class="waffless1b" style="top: 95px">Birdy</div>
         </div>
       </div>
     </td>
     
       <td>
       <div class="waffless" style="background-image:url(http://funkyimg.com/i/254cY.png)">
         <div class="waffless1">
           <a href="https://www.youtube.com/watch?v=QcOnwLr9b50"><div class="waffless1a"><i class="fa fa-play" style="line-height: 40px"></i></div></a>
           <div class="waffless1b" style="top: 55px">Nature Boy</div>
           <div class="waffless1b" style="top: 75px">aurora</div>
           <div class="waffless1b" style="top: 95px">All My Demons...</div>
         </div>
       </div>
     </td>

      </tr>
   </table>
 </div>
 <div class="wafflesf">let`s go, honey</div>
</div>
</center>