Skip to content

Instantly share code, notes, and snippets.

@desenmeng

desenmeng/index.html

Created May 16, 2017 06:58
Show Gist options
  • Save desenmeng/a49dcda93b526682c8a44f6edba75224 to your computer and use it in GitHub Desktop.
Save desenmeng/a49dcda93b526682c8a44f6edba75224 to your computer and use it in GitHub Desktop.
Download ZIP
Catty Music // source http://jsbin.com/wubudog
Raw
index.html
<!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">
<style id="jsbin-css">
* {
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;
}
}
</style>
</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>
</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>
<script id="jsbin-source-html" type="text/html"><!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>
</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>
</script>
<script id="jsbin-source-css" type="text/css">* {
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;
}
}
</script>
</body>
</html>
Raw
jsbin.wubudog.css
* {
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment