<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"> Play all</i>
<i class="fa fa-plus"> Add to</i>
<i class="fa fa-ellipsis-h"> More</i>
</div>
</section>
</div>
<ul class="music-list">
<li>
<p>1. One Dance</p>
<p class="sm-hide">Crake feat CatKid & 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 & 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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |