Sass-Audio

index.html

<div class="wrapper">
  <p class="header">Sass-Audio</p>
  <div class="player-win">
    <p class="top-title1">PLAYING FROM PLAYLIST</p>
    <p class="top-title2">Queen - The Best Of</p>
    <div class="cover"><img src="https://bit.ly/2qTiPcc" /></div>
    <p class="title-track">Under Pressure</p>
    <p class="title-band">Queen, David Bowie</p>
    <div class="button-row">
      <button>
      <i class="fas fa-backward"></i>
      </button>
      <button id="playButton">
      <i class="fas fa-play"></i>
      </button>
      <button>
      <i class="fas fa-forward"></i>
      </button>
    </div>
    <div class="bottom-row">
      <a href="https://youtu.be/a01QQZyl-_I" target="_blank" class="share"><i class="share-line far fa-share-square"></i>
        <i class="share-full fas fa-share-square"></i>
      </a>
      <a href="#" class="fav"><i class="far fa-heart heart-line"></i>
        <i class="fas fa-heart heart-full"></i>
      </a>
    </div>
  </div>
  <p>@Merkund</p>
</div>

sass-audio.markdown

Sass-Audio

Music player widget, made with HTML5 & Sass

A Pen by Anno H. on CodePen.

License.

script.js

// Not now, I guess ¯\_(ツ)_/¯ 

style.sass

//Colours
$cherry: #ff1744
$grey: #8d8d8d
$light-grey: #aeaeae
$white: #fff

//Fonts
@import url('https://fonts.googleapis.com/css?family=Karla:400,700')
$title-text: 'Karla', sans-serif, 

//CSS Resets
html,
body 
  align-items: center
  display: flex
  height: 100vh
  justify-content: center
  margin: auto

//MAIN
html 
  min-height: 100%

body 
  font-family: $title-text
  background-color: $cherry
  color: $white
  
.header 
  font-size: 2em  
  
.wrapper
  width: 100vmin
  
.wrapper > p
  text-align: center
  
.player-win
  margin: auto
  margin-bottom: 10px
  position: relative
  display: flex
  flex-direction: column
  height: 25em
  width: 15em
  background-color: $white
  overflow: hidden
  border-radius: 10px
  box-shadow: 0 0 25px 0px rgba(0, 0, 0, 0.2)
  
.top-title1, .top-title2
  color: #000
  text-align: center
  margin: 0

.top-title1
  font-size: 0.75em
  margin-top: 15px
  
.top-title2
  font-size: 0.85em
  margin-top: 2.5px
  font-weight: 700
  
.cover
  margin: 15px
  text-align: center
  
img
  height: 180px
  width: 180px
  box-shadow: 0 8px 20px -6px $grey
  
.title-track, .title-band
  color: #000
  text-align: center
  margin: 0
  
.title-track
  font-weight: 700
  font-size: 1em
  
.title-band
  font-size: 0.95em
  
.button-row
  margin: 0 auto
  margin-top: 15px
  display: flex
  width: 10em
  
button
  margin: auto
  border: none
  
button:focus
  outline: none
  
.fas, .far
  color: $light-grey
  
.fa-backward,
.fa-play,
.fa-forward
  font-size: 3em
  
.far,
.fa-heart,
.share-full  
  font-size: 1.2em
  
.fas:active, 
.far:active
  color: $grey
  
.bottom-row
  margin: 15px auto
  width: 12em
  display: flex
  justify-content: space-between 
  
a
  text-decoration: none
  
.share:hover .share-line,
.share .share-full
  display: none
  
.share:hover .share-full
  display: inline
  
.fav:hover .heart-line,
.fav .heart-full
  display: none
  
.fav:hover .heart-full
  display: inline