Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
 
* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    display: flex;
    background-color: #fff;
    flex-direction: column;
    height: 100%;
    margin: 0;
    font-family: Lato, sans-serif;
    color: #222;
    font-size: 0.9em;
}
main {
    flex: 1 0 auto;
    display: flex;
}
aside {
    flex: 0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: #f2f2f2;
}
aside i.fa {
    font-size: 0.9em;
}
section.content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}
section.content .music-head {
    flex: 0 0 280px;
    display: flex;
    padding: 40px;
    background-color: #4e4e4e;
}
section.content .music-head  .catty-music{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    font-weight: 300;
    color: #fff;
    padding-left: 50px;
}
.catty-music div:nth-child(1){
    margin-bottom: auto;
}
.catty-music div:nth-child(2){
    margin-top: 0;
}
.catty-music div:nth-child(2) i.fa{
    font-size: 0.9em;
    padding: 0 0.7em;
    font-weight: 300;
}
.catty-music div:nth-child(1) p:first-child{
    font-size: 1.8em;
    margin: 0 0 10px;
}
.catty-music div:nth-child(1) p:not(:first-child){
    font-size: 0.9em;
    margin: 2px 0;
}
section.content .music-list {
    flex: 1 0 auto;
    list-style-type: none;
    padding: 5px 10px 0px;
}
li {
    display: flex;
    padding: 0 20px;
    min-height: 50px;
}
li p {
    flex: 0 0 25%;
}
li span.catty-cloud {
    border: 1px solid black;
    font-size: 0.6em;
    padding: 3px;
}
li:nth-child(2n) {
    background-color: #f2f2f2;
}
footer {
    display: flex;
    flex: 0 0 90px;
    padding: 10px;
    color: #fff;
    background-color: rgba(61, 100, 158, .9);
}
.catty-music-small {
    display: flex;
    margin-right: auto;
}
.catty-music-small img{
    padding-right: 10px;
    width: 100px;
}
.catty-music-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
}
/*
========================================================
Mobile responsiveness
=========================================================
*/
@media screen and (max-width: 64em) {
    .sm-hide {
        display:none;
    }
    .sm-text-center {
        text-align: center;
    }
    .sm-text-right {
        text-align: right;
    }
    section.content .music-head {
        flex: 0 0 auto; /*auto compute height*/
        display: flex;
        flex-direction: column; /*stack image and music details vertically*/
        align-items: center; /*center items. left-to-right*/
        padding: 40px 0;
        background-color: #4e4e4e;
    }
    section.content .music-head  .catty-music{
        padding: 0; /*remove the spacing.*/
    }
    /*album art*/
    .music-head img {
        width: 150px;
    }
    /*album details*/
    .catty-music div:nth-child(1) p:first-child{
        margin: 20px 0;
        font-size: 1em;
    }
    /*song lists*/
    li p {
        flex: 0 0 50%;
    }
    /*music control*/
    .catty-music-controls {
        justify-content: space-around;
    }
}
Output 300px

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

Dismiss x
public
Bin info
ohansemmanuelpro
0viewers