Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Catty Music</title>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
​
</head>
<body>
​
    <main>
        <aside class="sm-hide">
            <i class="fa fa-bars"></i>
            <i class="fa fa-home"></i>
            <i class="fa fa-search"></i>
            <i class="fa fa-volume-up"></i>
            <i class="fa fa-user"></i>
            <i class="fa fa-spotify"></i>
            <i class="fa fa-cog"></i>
            <i class="fa fa-soundcloud"></i>
        </aside>
​
        <section class="content">
            <div class="music-head">
                <img src="http://i.imgur.com/xDSTaej.jpg" />
                <section class="catty-music">
                    <div>
                        <p class="sm-text-center">CattyBoard Top 100 Single Charts (11.06.36)</p>
                        <p class="sm-hide">Unknown Artist</p>
                        <p class="sm-hide">2016 . Charts . 100 songs</p>
                    </div>
​
                    <div class="sm-text-center">
                        <i class="fa fa-play"> &nbsp;Play all</i>
                        <i class="fa fa-plus"> &nbsp;Add to</i>
                        <i class="fa fa-ellipsis-h">&nbsp;&nbsp;More</i>
                    </div>
                </section>
            </div>
            <ul class="music-list">
                <li>
                    <p>1. One Dance</p>
                    <p class="sm-hide">Crake feat CatKid &amp; Cyla</p>
                    <p class="sm-text-right">2:54</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
​
                <li>
                    <p>2. Panda</p>
                    <p class="sm-hide">Cattee</p>
                    <p class="sm-text-right">4:06</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
​
                <li>
                    <p>3. Can't Stop the Feeling!</p>
                    <p class="sm-hide">Catin Cimberlake</p>
                    <p class="sm-text-right">3:56</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
​
                <li>
                    <p>4. Work From Home</p>
                    <p class="sm-hide">Cat Harmony feat Colla</p>
                    <p class="sm-text-right">3:34</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
              <li>
                    <p>5. One Dance</p>
                    <p class="sm-hide">Crake feat CatKid &amp; Cyla</p>
                    <p class="sm-text-right">2:54</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
​
                <li>
                    <p>6. Panda</p>
                    <p class="sm-hide">Cattee</p>
                    <p class="sm-text-right">4:06</p>
                    <p class="sm-hide"><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
                </li>
            </ul>
        </section>
    </main>
​
    <footer>
​
        <div class="catty-music-small">
            <img src="http://i.imgur.com/xDSTaej.jpg" class="sm-hide">
            <div>
                <p>If It Ain't Love</p>
                <p>Catson Derulo</p>
            </div>
        </div>
​
        <div class="catty-music-controls">
            <i class="fa fa-step-backward"></i>
            <i class="fa fa-pause"></i>
            <i class="fa fa-step-forward"></i>
            <i class="fa fa-rotate-right sm-hide"></i>
            <i class="fa fa-random sm-hide"></i>
        </div>
​
    </footer>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ohansemmanuelpro
0viewers