<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="music-player-container is-playing"> <div class="music-player"> <div class="player-content-container"> <h1 class="artist-name">Incubus</h1><!-- /.track-title --> <h2 class="album-title">Make Yourself</h2><!-- /.album-title --> <h3 class="song-title">"Stellar"</h3><!-- /.song-title --> <div class="music-player-controls"> <div class="control-back"></div><!-- /.control-back --> <div class="control-play"></div><!-- /.control-play --> <div class="control-forwards"></div><!-- /.control-forwards --> </div><!-- /.music-player-controls --> </div><!-- /.player-content-container --> </div><!-- /.music-player --> <div class="album"> <div class="album-art"></div><!-- /.album-art --> <div class="vinyl"></div><!-- /.vinyl --> </div><!-- /.album-art --> </div><!-- /.music-player --> <script> (function($) { $(document).ready(function() { // Pause/Play functionality var playButton = $('.control-play'), album = $('.album'); playButton.on('click', function() { $('.music-player-container').toggleClass('is-playing'); }); }); })(jQuery); </script>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,700); *, *:before, *:after { box-sizing: border-box; } body { background-color: #fef29c; color: #515044; font-family: 'Raleway', sans-serif; } .music-player-container { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; height: 370px; position: absolute; min-width: 460px; left: 50%; top: 50%; } .music-player-container:after { -webkit-filter: blur(8px); filter: blur(8px); background-color: rgba(0, 0, 0, 0.8); bottom: -2px; content: ' '; display: block; height: 10px; left: 19px; position: absolute; transform: rotate(-3deg); width: 70%; z-index: 0; } .music-player { background-color: #fff; height: 370px; padding: 40px 250px 40px 40px; position: absolute; text-align: right; width: 460px; z-index: 3; } .player-content-container { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: relative; } .artist-name { font-size: 28px; font-weight: normal; margin: 0 0 0.75em 0; } .album-title { font-weight: 200; font-size: 24px; margin: 0 0 1.75em 0; } .song-title { font-size: 18px; font-weight: 200; margin: 0 0 1.5em 0; } .album { box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65); height: 315px; margin-left: 250px; margin-top: 27px; position: relative; width: 315px; z-index: 10; } .album-art { background: #fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/incubus-make-yourself.jpg") center/cover no-repeat; height: 315px; position: relative; width: 315px; z-index: 10; } .vinyl { -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; animation: spin 2s linear infinite; -webkit-transition: all 500ms; -moz-transition: all 500ms; transition: all 500ms; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/vinyl.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/incubus-make-yourself.jpg"); background-position: center, center; background-size: cover, 40% auto; background-repeat: no-repeat; border-radius: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); height: 300px; left: 0; position: absolute; top: 5px; width: 300px; z-index: 5; will-change: transform, left; } .is-playing .vinyl { left: 52%; } .music-player-controls { text-align: center; } [class^="control-"] { -webkit-filter: brightness(95%); filter: brightness(95%); border-radius: 100%; display: inline-block; height: 44px; margin: 0 3px; width: 44px; } [class^="control-"]:hover { -webkit-filter: brightness(85%); filter: brightness(85%); cursor: pointer; } .control-play { background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/play.svg") center/cover no-repeat; } .is-playing .control-play { background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/pause.svg") center/cover no-repeat; } .control-forwards { background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/forwards.svg") center/cover no-repeat; } .control-back { background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/backwards.svg") center/cover no-repeat; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }