<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Exo+2:500' rel='stylesheet' type='text/css'>
    <title>Scotch Player</title>
  </head>
  <body>
    <div id="content">

    </div>
  </body>
</html>
*, *:before, *:after {
  box-sizing: border-box;
}


body{
  margin: 0;
  font-family: 'Exo 2', sans-serif;
}

.scotch_music{
  position: relative;
  margin: 0 auto;
  margin-top: 20px;
}

.search div, .search input {
  width: 100%;
}

.search input {
  border: none;
  border-bottom: 2px solid rgb(243, 139, 114);
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
}

.details h3{
  text-align: center;
  padding: 50px 10px;
  margin: 0;
  color: white;
}

.player{
  text-align: center;
  margin-top: 60px;
}

.player div{
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}


.player .player__backward button, .player .player__forward button{
  background: transparent;
  border: 1px solid rgb(243, 139, 114);
  color: rgb(243, 139, 114);
  width: 75px;
  height: 75px;
  border-radius: 100%;
  font-size: 35px;
  outline: none;
}

.player .player__backward button{
  border-left: none;
}

.player .player__forward button{
  border-right: none;
}

.player .player__main button:hover, .player .player__backward button:hover, .player .player__forward button:hover{
  color: rgba(243, 139, 114, 0.7);
  border: 1px solid rgba(243, 139, 114, 0.7);
}

.player .player__main {
  border: 1px solid rgb(243, 139, 114);
}

.player .player__main button {
  color: rgb(243, 139, 114);
  background: transparent;
  width: 75px;
  height: 75px;
  border: none;
  font-size: 35px;
  outline: none;
}

.progress{
  text-align: center;
  margin-top: 100px;
    color: white;
}

.progress progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;

  width: 390px;
  height: 20px;
  margin-left: 4px;
  margin-right: 4px;
}

.progress progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.progress progress[value]::-webkit-progress-value {
    background-color: rgb(243, 139, 114);
    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

.footer{
  color: white;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #524C4C;
}

.footer p{
  text-align: center;
}

.footer .logo{
  height: 25px;
  width: auto;
}
.footer .soundcloud{
  height: 25px;
  width: auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://od.lk/s/ODFfNjQ3MDA2NF8/bundle.js