<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Music PLayer CSS + HTML</title>
  <link rel="stylesheet" href="css/estilos.css">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
</head>
<body>
  
  <section class="container">
    
    <div id="player">
      
      <div class="caratula">
        <img src="https://4.bp.blogspot.com/_NsAexvbcSn0/ST20kHuQRSI/AAAAAAAAA8s/Y3G2PNLdKdU/s400/Teleradio_cover.jpg">
        <div class="more">
          <div class="icon-info"></div>
        </div>
        <div class="bio">
          <h2>Teleradio Donoso</h2>
          <p>Teleradio Donoso fue una banda chilena de indie rock y pop rock formada en 2005, Formada inicialmente por Alex Anwandter (Voz , Guitarra & teclados), Martín del Real (Guitarra & Coros), Juan Pablo Wasaff (Batería & Coros) y Cristóbal Fredes (bajo) quien fue remplazado por Ignacio Aedo.</p>
        </div>
      </div>

      <div class="time">
        <div class="progress"></div>
      </div>

      <div class="info">
          <div class="love">
            <div class="icon-heart"></div>
            <div class="icon-star-empty"></div>
          </div>
        <div class="elapsed">2:40</div>
        <h2>Teleradio Donoso</h2>
        <h3>Amar en el campo</h3>
      </div>

      <div class="controls">
        <ul>
          <li><div class="icon-backward btn"></div></li>
          <li><div class="icon-pause btn"></div></li>
          <li class="play"><div class="icon-play btn"></div></li>
          <li><div class="icon-stop btn"></div></li>
          <li><div class="icon-forward btn"></div></li>
        </ul>
      </div>

    </div>


  </section>


</body>
</html>

@-webkit-keyframes playing {
  0% {
    width: 0%; }

  100% {
    width: 100%; } }

@-moz-keyframes playing {
  0% {
    width: 0%; }

  100% {
    width: 100%; } }

@-o-keyframes playing {
  0% {
    width: 0%; }

  100% {
    width: 100%; } }

@keyframes playing {
  0% {
    width: 0%; }

  100% {
    width: 100%; } }

* {
  box-sizing: border-box; }

body {
  background-color: #f6fafb;
  font-size: 16px; }

.container {
  width: 300px;
  margin: auto;
  display: block;
  margin-top: 1em; }

#player {
  background-color: #ecf0f1;
  display: block;
  overflow: hidden;
  padding: 0 0 1em 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: #d8dcdd 0 5px 10px;
  -moz-box-shadow: #d8dcdd 0 5px 10px;
  box-shadow: #d8dcdd 0 5px 10px; }

.info {
  padding: 1em;
  position: relative;
  font-family: 'Merriweather Sans';
  color: #8b9195; }

.love {
  position: absolute;
  top: .5em;
  right: 1em; }

.caratula {
  width: 300px;
  overflow: hidden;
  height: 220px;
  position: relative; }
  .caratula img {
    width: 100%;
    position: relative; }

.controls {
  padding: 1em; }
  .controls ul li {
    display: inline-block;
    margin-right: .17em;
    padding: .9em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7f8c8d), color-stop(100%, #95a5a6));
    background-image: -webkit-linear-gradient(top, #7f8c8d, #95a5a6);
    background-image: -moz-linear-gradient(top, #7f8c8d, #95a5a6);
    background-image: -o-linear-gradient(top, #7f8c8d, #95a5a6);
    background-image: linear-gradient(top, #7f8c8d, #95a5a6);
    text-align: center;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
    .controls ul li:hover {
      cursor: pointer;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1abc9c), color-stop(100%, #16a085));
      background-image: -webkit-linear-gradient(top, #1abc9c, #16a085);
      background-image: -moz-linear-gradient(top, #1abc9c, #16a085);
      background-image: -o-linear-gradient(top, #1abc9c, #16a085);
      background-image: linear-gradient(top, #1abc9c, #16a085); }

.play {
  padding: 1.6em !important; }

.time {
  width: 100%;
  background-color: #ced2d3;
  height: 8px;
  display: block;
  overflow: hidden; }

.progress {
  -webkit-animation: playing 60s infinite;
  /* Safari 4+ */
  -moz-animation: playing 60s infinite;
  /* Fx 5+ */
  -o-animation: playing 60s infinite;
  /* Opera 12+ */
  animation: playing 60s infinite;
  display: block;
  height: 8px;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #d35400), color-stop(100%, #f1c40f));
  background-image: -webkit-linear-gradient(left, #d35400, #f1c40f);
  background-image: -moz-linear-gradient(left, #d35400, #f1c40f);
  background-image: -o-linear-gradient(left, #d35400, #f1c40f);
  background-image: linear-gradient(left, #d35400, #f1c40f); }

.icon-heart {
  color: #e74c3c; }

.icon-star-empty {
  color: #babebf; }

h2 {
  font-size: 1.4em;
  margin-bottom: .2em;
  text-shadow: white 1px 1px 0;
  font-weight: 700; }

h3 {
  font-size: 1em;
  font-weight: 400;
  color: #a9afb3; }

.elapsed {
  margin-bottom: 1em;
  font-size: .8em;
  color: #c2c8cc; }

.btn {
  font-size: 1em;
  color: #ecf0f1; }

.more {
  background-color: #1abc9c;
  padding: 1em;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  color: white;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px; }
  .more:hover + .bio {
    width: 100%;
    height: 100%;
    padding: 1.5em; }

.bio {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0%;
  background-color: #1abc9c;
  overflow: hidden;
  color: white;
  font-family: 'Roboto';
  font-weight: 100;
  font-size: .8em;
  line-height: 1.5em;
  text-align: center;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in; }
  .bio h2 {
    font-family: 'Roboto';
    text-shadow: none;
    font-weight: 400;
    margin-bottom: .5em; }

// I'm @marceloag on Twitter ;)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.