cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .card
  .apple-stuff
    i.fa.fa-wifi
     .date
        |12:00 AM
    i.fa.fa-battery-3.battery
  .picture-section
    h3
      | Now Playing
    .band
      .overlay
  .slider
  .time
    //- .start
    //-   |0.00
    //- .end
    //-   | 3.35
  .song-title
    .artist
      |Phish
    .song
      |Suzy Greenberg
  .playlist-controls
    .circle
    //- i.fa.fa-backward#backward
    .play-song
      i.fa.fa-play#play
    //- i.fa.fa-forward#forward
  .song-list
    .line
    .line.two
    .line.three
    .line.four
    table
      tr#billy(data-title="billyBreathes")
        td.num 1
        td.title Billy Breathes
        td.length 3:00
      
      tr#hood(data-title="harryHood")
        td.num 2
        td.title Harry Hood
        td.length 2:54
      
      tr#suzy(data-title="suzyGreenberg")
        td.num 3
        td.title Suzy Greenberg
        td.length 2:54
      
      tr#divided(data-title="themeFromTheBottom")
        td.num 4
        td.title Theme From The Bottom
        td.length 2:54
    .social
      a(href="https://twitter.com/McGreenBeats" target="_blank")
       i.fa.fa-twitter
      a(href="https://www.linkedin.com/in/mattcgreenberg" target="_blank")
       i.fa.fa-linkedin
      a(href="https://codepen.io/mattgreenberg/" target="_blank")
       i.fa.fa-codepen   
  .volume
    i.fa.fa-volume-off#volume-off
    i.fa.fa-volume-up#volume-up
    .slider-volume
  .slide-up
    i.fa.fa-chevron-up

  
  
            
          
!
            
              @import bourbon
@import neat

$black: black
$white: rgba(255,255,255,0.8)
$gray: #9b9b9b
$blueback: #282b34
$blue: #292c35
$lightblue: #292c35
$gray: #8e8f93
$green: #769778
$purple: #827cc2

html, body
  font-family: Roboto
  width: 100%
  margin: 0
  padding: 0
  background: $blueback


  .card
    height: 38em
    position: relative
    width: 25em
    margin: 0 auto
    border-radius: 10px
    margin-top: 1em
    background: $blue
    box-shadow: 0px 0px 20px 5px shade($blueback, 20%)
    font-family: Roboto
    overflow: hidden
    
      
    .apple-stuff
      padding: 2% 2%
      color: $white
      border-radius: 10px 10px 0px 0px
      .date
        display: inline
        position: absolute
        font-family: Roboto
        left: 50%
        font-weight: 300
        font-size: 0.8em
        margin-top: -0.8em
        +transform(translateX(-50%))   
      .battery
        margin-left: 21em
    .picture-section
      h3
        text-align: center
        color: $white
        font-size: 0.9em
        letter-spacing: 0.1em
        margin-top: 0.3em
        font-weight: 300
      
      .band
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/trey.png) no-repeat top center
        background-size: cover
        width: 100%
        height: 20em
        +filter(brightness(40%) opacity(60%) blur(1px))
        +transition(0.2s)
        &:hover
          +filter(brightness(30%) opacity(65%) blur(1px))
        .overlay
          +linear-gradient(rgba(255,255,255,0.4) 70%, $blue)
          position: absolute
          left: 0
          top: 0
          opacity: 0
          height: 48%
          width: 100%
          +transition(0.7s)
          &.active
            opacity: 1
            +transition(1.3s)
    .slider
      position: relative
      z-index: 100
      background: $gray
      border: none
      border-radius: 0px
      height: 5px
      width: 100%
      cursor: pointer
      .ui-slider-range
        background: $green
      .ui-slider-handle
        width: 3px
        margin-left: 0px
        height: 15px
        top: 1px
        &:focus
          outline: none
          background: white
    .time
      position: relative
      color: rgba(255,255,255,0.8)
      font-size: 0.8em
      font-weight: 300
      padding: 2%
      .start
        display: inline-block
      .end
        display: inline-block
        margin-left: 25.5em
    .song-title
      text-align: center
      margin-top: -0.4em
      
      .artist
        color: $white
      .song
        color: rgba(255,255,255,0.6)
        font-weight: 300
        font-size: 0.9em
        margin-top: 0.1em
    .playlist-controls
      text-align: center
      margin-top: 1.8em
      +transition(0.7s cubic-bezier(.87,-.41,.19, 1.10))
      &.active
        margin-top: -13em
        +transition(0.7s cubic-bezier(.87,-.41,.19, 1.10))
        .circle
          top: 13.5em
          background: rgba(255,255,255,0.03)
      
      .circle
        position: absolute
        height: 4em
        width: 4em
        background: rgba(255,255,255,0.07)
        border-radius: 50%
        margin-left: 10.4em
        top: 28.5em
        +transition(0.7s cubic-bezier(.87,-.41,.19,1.10))
      #backward
        margin-left: 2em
        margin-right: 2em
        color: $gray
        font-size: 1.5em
        position: relative
        z-index: 5
        cursor: pointer
        +transition(0.2s)
        &:hover
          color: $white
      .play-song
        display: inline-block
        #play
          font-size: 2em
          color: $white
          position: relative
          z-index: 5
          left: 0px
          top: 2px
          cursor: pointer
          +transition(0.2s)
          &:hover
            color: $purple
        
      #forward
        margin-left: 2em
        margin-right: 2em
        color: $gray
        font-size: 1.5em
        cursor: pointer
        position: relative
        z-index: 5
        +transition(0.2s)
        &:hover
          color: $white
    .song-list
      width: 100%
      position: absolute
      height: 20em
      bottom: -53%
      z-index: 100
      background: $blue
      +transition(0.7s)
      &.active
        bottom: 0%
        
      .line
        width: 95%
        height: 1px
        background: rgba(255,255,255,0.1)
        position: absolute
        left: 50%
        +transform(translateX(-50%))
        margin-top: 3.4em
        &.two
          margin-top: 6.4em
        &.three
          margin-top: 9.2em
        &.four
          margin-top: 12em
      
      table
        color: rgba(255,255,255,0.55)
        padding: 0 2%
        position: relative
        .line
          width: 80%
          height: 5px
          background: $white
          position: absolute
          z-index: 10000
        tr
          cursor: pointer
          &:hover
            td
              color: $purple

          td
            padding-top: 1.5em
            +transition(0.2s)
          .num
            font-size: 0.7em
            position: relative
            top: 5px
            font-weight: 300
          .title
            padding-left: 3em
            display: inline-block
            color: $white
            width: 300px
            font-weight: 300
          .length
            padding-left: 4em
            font-size: 0.7em
            position: relative
            top: 5px
            font-weight: 300
    .volume
      i
        display: inline-block
        position: absolute
        color: rgba(255,255,255,0.3)
        margin-top: -0.5em
        +transition(0.2s)
        cursor: pointer
        &:hover
          color: $white
        &#volume-off
          margin-left: 2.5em
        &#volume-up
          margin-left: 21.7em
          
      .slider-volume
        position: relative
        z-index: 10
        background: rgba(0,0,0,0.3)
        border: none
        border-radius: 0px
        height: 3px
        width: 60%
        left: 50%
        +transform(translateX(-50%))
        margin-top: 2.7em

        cursor: pointer
        .ui-slider-range
          background: $purple
        .ui-slider-handle
          display: none
          &:focus
            outline: none
            background: white
    .slide-up
      position: absolute
      bottom: 0%
      left: 50%
      +transform(translateX(-50%) translateY(-50%))
      z-index: 1000
      i
        margin-left: 50%
        font-size: 1.3em
        cursor: pointer
        color: $white
        +transform(translateX(-50%))
        +transition(0.3s)
        &:hover
          color: $purple
.social
  text-align: center
  margin-top: 3em
  i
    color: $white
    margin-left: 1em
    margin-right: 1em
    +transition(0.2s)
    &:hover
      color: $gray
      +transform(rotate(20deg))
    
  
      
            
          
!
            
              #variables
themeFromTheBottom = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/07_Theme_from_the_Bottom_(1).mp3'], volume: window.volume)

billyBreathes = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/10_Billy_Breathes_(1)_(1).mp3'], volume: window.volume)

harryHood = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/harry-hood-small.mp3'], volume: window.volume)

suzyGreenberg = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/suzy_greenberg_small.mp3'], volume: window.volume)

window.open = true
window.volume = 0.5
window.position = 0
window.duration = 40.8
playlist = [suzyGreenberg]
window.currentSong = playlist[0]
window.add = null




changeSong = (song) ->
  console.log(song)
  window.currentSong.stop()
  window.currentSong.pos(0)
  window.position = 0
  $(".slider").slider("value", 0) 
  window.currentSong = song
  $(".play-song > i").removeClass('fa-play')
  $(".play-song > i").addClass('fa-pause')
  window.open = false
  song.play()

updatePositionSlider = () -> 
  window.position += 1

playSong = (song) ->
  song.play()
  window.add = setInterval(updatePositionSlider, 1000)
  

pauseSong = (song) ->
  song.pause()
  clearInterval(window.add)

changeVolume = (song) ->
  song.volume(window.volume)

changePosition = (song) ->
  song.pos(window.position)

updateSlider = () ->
  $(".slider").slider("value", window.position) 

  

    


$ ->
  
  $(".slider").slider({
    min: 0
    range: "min"
    max: window.duration
    value: 0
    slide: (event, ui) ->
      window.position = ui.value
      console.log ui.value
      changePosition(window.currentSong)
    })
  setInterval(updateSlider, 1000)
  
  $("#volume-off").click ->
    currentSong.volume(0)
    $(".slider-volume").slider("value", 0)
  
  $("#volume-up").click ->
    currentSong.volume(1)
    $(".slider-volume").slider("value", 100)
    
     
  
  
  $(".slider-volume").slider({
    min: 0
    range: "min"
    max: 100
    value: 50
    slide: (event, ui) ->
      console.log "hey"
      window.volume = (ui.value) / 100
      changeVolume(window.currentSong)
      
    })
  
  $("#play").click ->
    if window.open
      playSong(window.currentSong)
      $(".play-song > i").removeClass('fa-play')
      $(".play-song > i").addClass('fa-pause')
      window.open = !window.open 
    else
      pauseSong(window.currentSong)
      $(".play-song > i").removeClass('fa-pause')
      $(".play-song > i").addClass('fa-play')
      window.open = !window.open
  slideUp = true
  
  $(".slide-up").click ->
    if slideUp
      $(".song-list, .playlist-controls, .overlay").addClass("active")
      $(".slide-up").html("<i class='fa fa-chevron-down'></i>")
      slideUp = !slideUp
    else
      $(".song-list, .playlist-controls, .overlay").removeClass("active")
      $(".slide-up").html("<i class='fa fa-chevron-up'></i>")
      slideUp = !slideUp
  
  $("tr").click ->
    if $(@).attr('data-title') is "billyBreathes"
      changeSong(billyBreathes)
      $(".slider").slider("option","max", 331.6) 
      window.duration = 331.6
      $(".song").html("Billy Breathes")
    else if $(@).attr('data-title') is "harryHood"
      $(".song").html("Harry Hood")
      window.duration = 40.8
      $(".slider").slider("option","max", 40.8) 
      changeSong(harryHood)
    else if $(@).attr('data-title') is "suzyGreenberg"
      $(".song").html("Suzy Greenberg")
      window.duration = 40.8
      $(".slider").slider("option","max", 40.8)
      changeSong(suzyGreenberg)
    else if $(@).attr('data-title') is "themeFromTheBottom"
      changeSong(themeFromTheBottom)
      $(".song").html("Theme From The Bottom")
      $(".slider").slider("option", "max", 382.2)
      window.duration = 382.2
    
    $(".song-list, .playlist-controls, .overlay").removeClass("active")
    $(".slide-up").html("<i class='fa fa-chevron-up'></i>")
    slideUp = !slideUp
  
    
      
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console