Skip to content

Instantly share code, notes, and snippets.

@abhshkdz

abhshkdz/muzi_widget.html

Last active December 19, 2015 07:09
Show Gist options
  • Save abhshkdz/5916998 to your computer and use it in GitHub Desktop.
Save abhshkdz/5916998 to your computer and use it in GitHub Desktop.
Download ZIP
Music Widget: http://cdpn.io/zvGqf
Raw
muzi_widget.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Cards">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Muzi Widget</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div class="container">
<div class="card">
<div class="poster" style="background: url(https://dl.dropboxusercontent.com/u/19398876/img/adele.jpg) center center; background-size: cover;"></div>
<div class="dashboard">
<div class="info">
<div class="title">
Rolling in the Deep
</div>
<div class="artist">
Adele
</div>
<div class="time">
<div class="time-done">01:25</div>
<div class="progress">
<div></div>
</div>
<div class="time-total">03:50</div>
</div>
</div>
<div class="controls">
<div class="rewind-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/rewind-icon-white.png" alt="">
</div>
<div class="pause-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/pause-icon-white.png" alt="">
</div>
<div class="forward-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/fast-forward-icon-white.png" alt="">
</div>
</div>
</div>
</div>
<div class="flap">
<ul class="icons">
<li class="shuffle-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/shuffle-icon-white.png" alt="">
</li>
<li class="repeat-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/repeat-3-icon-white.png" alt="">
</li>
<li class="share-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/share-icon-white.png" alt="">
</li>
<li class="favorite-button active">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/favorite-icon-red.png" alt="">
</li>
</ul>
</div>
</div>
<div class="container">
<div class="card">
<div class="poster" style="background: url(https://dl.dropboxusercontent.com/u/19398876/img/daft-punk.jpg) center center; background-size: cover;"></div>
<div class="dashboard">
<div class="info">
<div class="title">
Give Life Back to Music
</div>
<div class="artist">
Daft Punk
</div>
<div class="time">
<div class="time-done">01:47</div>
<div class="progress">
<div></div>
</div>
<div class="time-total">04:54</div>
</div>
</div>
<div class="controls">
<div class="rewind-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/rewind-icon-white.png" alt="">
</div>
<div class="pause-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/pause-icon-white.png" alt="">
</div>
<div class="forward-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/fast-forward-icon-white.png" alt="">
</div>
</div>
</div>
</div>
<div class="flap">
<ul class="icons">
<li class="shuffle-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/shuffle-icon-white.png" alt="">
</li>
<li class="repeat-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/repeat-3-icon-white.png" alt="">
</li>
<li class="share-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/share-icon-white.png" alt="">
</li>
<li class="favorite-button">
<img src="https://dl.dropboxusercontent.com/u/19398876/img/favorite-icon-white.png" alt="">
</li>
</ul>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Raw
style.css
@font-face{font-family:HelveticaNeueLTPro-UltLt;src:url("https://dl.dropboxusercontent.com/u/19398876/img/font/HelveticaNeueLTPro-Th.otf")}
@font-face{font-family:HelveticaNeueLTPro-Th;src:url("https://dl.dropboxusercontent.com/u/19398876/img/font/HelveticaNeueLTPro-UltLt.otf")}
body{text-align:center;padding-top:100px;background:#eee;font-family:HelveticaNeueLTPro-UltLt}
div.container{display:inline-block;margin:0 50px}
div.card{background:#fff;width:250px;height:350px;box-shadow:0 2px 10px rgba(0,0,0,0.53);display:inline-block}
div.poster{height:250px;width:250px;overflow:hidden}
div.dashboard{height:180px;margin:-80px 0 0 0}
div.info{height:80px;background:rgba(0,0,0,0.6);bottom:0;color:#fff;text-align:center}
div.title{padding-top:10px;font-size:17px;line-height:25px}
div.artist{font-size:13px;height:13px}
div.time{margin-top:5px}
div.time-done,div.time-total{font-size:9px;height:9px;display:inline-block;margin:0 3px}
div.progress{display:inline-block;background-color:rgba(149,165,166,0.3);-webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;margin:auto;margin-top:1px;width:70%;padding:0}
div.progress div{background-color:#e74c3c;width:40%;height:7px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}
div.controls{text-align:center;margin-top:20px;height:50px;background:#fff;bottom:0}
div.pause-button{margin:0 3px;display:inline-block;height:50px;width:50px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:rgba(189,195,199,0.5);text-align:center}
div.pause-button img{margin:15px 0 0 0;height:20px;width:20px}
div.rewind-button,div.forward-button{margin:-10px 0 0 0;display:inline-block;height:30px;width:30px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:rgba(189,195,199,0.5);text-align:center}
div.rewind-button img,div.forward-button img{margin:7px 0 0 0;height:15px;width:15px}
div.pause-button:hover,div.rewind-button:hover,div.forward-button:hover{background:rgba(0,0,0,0.8);cursor:pointer}
div.flap{color:#fff;height:140px;width:35px;background:rgba(0,0,0,0.8);box-shadow:0 2px 10px rgba(0,0,0,0.53);margin-top:-335px;margin-left:18px;float:right}
ul.icons{list-style:none;padding-left:9px}
ul.icons li{height:30px}
ul.icons img{width:15px;height:15px;-moz-opacity:.3;-khtml-opacity:.3;opacity:.3}
ul.icons img:hover{-moz-opacity:1;-khtml-opacity:1;opacity:1;cursor:pointer}
ul.icons li.favorite-button img{margin-top:3px}
ul.icons li.active img{-moz-opacity:1;-khtml-opacity:1;opacity:1}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment