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.

            
              <div class='main-wrapper'>
  
  <div class='hero-image'>
    <div class='hero-content'>
      <div class='hc-label'>The Italian Dolomites</div>
      <div class='hc-desc'>Interview with Andy Free about his trip to the dolomites in Italy</div>
      <div class='hc-footer'>
        <div class='hcf-comments'><span class='amount'>168</span>Comments</div>
        <div class='hcf-divider'></div>
        <div class='hcf-shares'><span class='amount'>26.842</span>Shares</div>
        <div class='hcf-toggle'>
          <p class='hcft-label'>More Articles</p>
          <div class='hcft-icon-holder'>
            <i class='hcft-icon closed fa fa-chevron-down'></i>
            <i class='hcft-icon opened fa fa-times'></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class='scroll-content'>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>01</div>
        <div class='article-info'>
          <div class='ai-label'>Visiting Vester Peak</div>
          <div class='ai-desc'>Everything you should know about hiking in the mountains</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>24</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>128</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-1'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>02</div>
        <div class='article-info'>
          <div class='ai-label'>Trailing Together</div>
          <div class='ai-desc'>Walking among the nature in the Rocky Mountain National Park, Colorado</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>458</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>110</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-2'></div>
      </div>
    </div>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>03</div>
        <div class='article-info'>
          <div class='ai-label'>The Magic Pond</div>
          <div class='ai-desc'>The scenery is set like a Monet painting</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>1640</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>86.451</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-3'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>04</div>
        <div class='article-info'>
          <div class='ai-label'>Beach Essentials</div>
          <div class='ai-desc'>What should you bring to the beach, and what beaches should you visit?</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>58</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>1.359</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-4'></div>
      </div>
    </div>
    <div class='sc-row'>
      <div class='content-article'>
        <div class='article-number'>05</div>
        <div class='article-info'>
          <div class='ai-label'>Romantic Camping</div>
          <div class='ai-desc'>We went to Norway to find out just how romantic it can be sleeping under the stars</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>14</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>36</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-5'></div>
      </div>
      <div class='content-article'>
        <div class='article-number'>06</div>
        <div class='article-info'>
          <div class='ai-label'>Cave Explorers</div>
          <div class='ai-desc'>In USA there's over a thousand caves. We list everyone that you should visit.</div>
          <div class='ai-footer'>
            <div class='aif-comments'><span class='amount'>3590</span>Comments</div>
            <div class='aif-divider'></div>
            <div class='aif-shares'><span class='amount'>129.547</span>Shares</div>
          </div>
        </div>
        <div class='article-image ca-6'></div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Oxygen:400,300,700)

$content-padding: 40px
$nav-height: 60px
$hero-stop: 40%
$hero-speed: .5s

.ca-1
  background: url('https://farm1.staticflickr.com/571/21101592188_f5da31c3f5_o.jpg') no-repeat center center
  
.ca-2
  background: url('https://i.redd.it/ool7yp323aux.jpg') no-repeat center center
  
.ca-3
  background: url('https://i.redd.it/cz572ctve9ux.jpg') no-repeat center center
  
.ca-4
  background: url('https://i.redd.it/etwqy45ntqcx.jpg') no-repeat center center
  
.ca-5
  background: url('https://farm6.staticflickr.com/5692/21342201074_aef835df8d_k.jpg') no-repeat center center
  
.ca-6
  background: url('https://i.redd.it/co3a6ufwmuqx.jpg') no-repeat center center

*
  margin: 0
  padding: 0
  box-sizing: border-box

.clear-after
  &:after
    content: ''
    display: block
    clear: both
  
body
  text-rendering: auto
  -webkit-font-smoothing: antialiased
  font-family: Oxygen
  color: white
  
.main-wrapper
  position: relative
  width: 100vw
  height: 100vh
  overflow: hidden
  
  .hero-image
    z-index: 3
    position: relative
    width: 100%
    height: 100%
    background: url('https://c1.staticflickr.com/1/632/21136101110_1dde1c1a7e_o.jpg') no-repeat center center fixed 
    background-size: cover
    box-shadow: 0 5px 60px 10px rgba(black, .75)
    transition: all $hero-speed ease
    &.browsing-content
      height: $hero-stop
      background-position: center -150px
      &:after
        opacity: 1
        height: 100%
      .hcft-icon
        &.closed
          opacity: 0 !important
      .hcft-icon
        &.opened
          opacity: 1 !important
    &:after
      content: ''
      display: block
      position: absolute
      background: linear-gradient(0deg, rgba(black, 1), rgba(black, 0))
      height: 50%
      width: 100%
      bottom: 0
      left: 0
      opacity: 0.65
      transition: all $hero-speed ease
    .hero-content
      position: absolute
      z-index: 4
      width: 100%
      padding: $content-padding
      bottom: 0
      .hc-label
        font-size: 44px
        text-transform: uppercase
        font-weight: 700
      .hc-desc
        font-size: 22px
        text-transform: uppercase
        font-weight: 300
      .hc-footer
        @extend .clear-after
        margin-top: calc(#{$content-padding} / 1.5)
        line-height: 32px
        font-size: 14px
        .hcf-divider
          float: left
          margin: 7px 10px
          height: 18px
          width: 1px
          background-color: white
        .hcf-comments,
        .hcf-shares
          float: left
          text-transform: uppercase
          .amount
            margin-right: 5px
            font-weight: 700
        .hcf-toggle
          float: right
          .hcft-label
            float: left
            line-height: 32px
            margin-right: 10px
            text-transform: uppercase
          .hcft-icon-holder
            float: left
            position: relative
            width: 32px
            height: 32px
            text-align: center
            background-color: rgba(black, .25)
            transition: background-color .25s ease
            &:hover
              background-color: rgba(black, .5)
            .hcft-icon
              cursor: pointer
              line-height: 32px
              width: 32px
              left: 0
              position: absolute
              font-size: 14px
              transition: all $hero-speed ease
              &.closed
                opacity: 1
              &.opened
                opacity: 0
                
  .scroll-content
    position: absolute
    top: $hero-stop
    left: 0
    width: 100%
    overflow: auto
    height: calc(100% - #{$hero-stop})
    .sc-row
      @extend .clear-after
      z-index: 1
      .content-article
        float: left
        cursor: pointer
        width: 50%
        height: 360px
        overflow: hidden
        position: relative
        &:after
          content: ''
          display: block
          position: absolute
          background: linear-gradient(0deg, rgba(black, .85), rgba(black, 0.1))
          height: 100%
          width: 100%
          bottom: 0
          left: 0
          opacity: 1
          transition: opacity .25s ease
        &:hover
          &:after
            opacity: 0
          .article-image
            transform: scale(1.1) !important
        .article-image
          width: 100%
          height: 100%
          background-size: cover
          transform: scale(1)
          transition: all .25s ease
        .article-number
          z-index: 2
          position: absolute
          top: $content-padding
          left: $content-padding
          font-size: 20px
          font-weight: 700
          letter-spacing: 2px
        .article-info
          z-index: 2
          position: absolute
          bottom: 0
          padding: $content-padding
          text-transform: uppercase
          .ai-label
            font-size: 20px
            font-weight: 700
            margin-bottom: calc(#{$content-padding} / 4)
          .ai-desc
            font-size: 16px
            font-weight: 300
          .ai-footer
            @extend .clear-after
            line-height: 20px
            margin-top: calc(#{$content-padding} / 4)
            .aif-comments, .aif-shares
              float: left
              font-size: 14px
              .amount
                font-weight: 700
                margin-right: 5px
            .aif-divider
              float: left
              height: 14px
              margin: 3px 10px
              width: 1px
              background-color: white
              
        
        
    
            
          
!
            
              $('.hcft-icon').click(function() {
  $('.hero-image').toggleClass('browsing-content');
});
            
          
!
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