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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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
          background: rgba(0,0,0,0.7)
          position: absolute
          left: 0
          top: 0
          opacity: 0
          height: 48%
          width: 100%
          +transition(0.7s)
          &.active
            opacity: 1
            height: 100%
            +transition(1s)
    .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) ->
  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
      changePosition(window.currentSong)
    })
  setInterval(updateSlider, 100)
  
  $("#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) ->
      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 
      setInterval(updateSlider, 100)
    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")
      setInterval(updateSlider, 100)
    else if $(@).attr('data-title') is "harryHood"
      $(".song").html("Harry Hood")
      window.duration = 40.8
      setInterval(updateSlider, 100)
      $(".slider").slider("option","max", 40.8) 
      changeSong(harryHood)
      setInterval(updateSlider, 100)
    else if $(@).attr('data-title') is "suzyGreenberg"
      $(".song").html("Suzy Greenberg")
      window.duration = 40.8
      setInterval(updateSlider, 100)
      $(".slider").slider("option","max", 40.8)
      changeSong(suzyGreenberg)
      setInterval(updateSlider, 100)
    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
      setInterval(updateSlider, 100)
    
    $(".song-list, .playlist-controls, .overlay").removeClass("active")
    $(".slide-up").html("<i class='fa fa-chevron-up'></i>")
    slideUp = !slideUp
  
    
      
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console