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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              div(class="slides-container")
  button(class="btn btn__absolute btn__prev btn--muted") Back
  button(class="btn btn__absolute btn__next btn--highlighted") Next
  section(class="slide slide-1")
    article(class="slide__inner slide--left")
      .container.container--slide-1
        .container__logo
          i.material-icons trending_up
        .container__stripe.container__stripe--long
        .container__stripe.container__stripe--short
    article(class="slide__inner slide--right")
      h1 Challenges
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora alias!
  section(class="slide slide-2")
    article(class="slide__inner slide--left")
      .card.card--profile
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Kevin Badge
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 413
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 221
            .card__data__stats.card--profile__data__stats
              span Admin
      .card.card--profile.profile--pink
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Billy Bob
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 13
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 21
            .card__data__stats.card--profile__data__stats
              span Developer
      .card.card--profile.profile--yellow
        .card__logo.card--profile__logo
          i(class="material-icons") person
        .card__info.card--profile__info
          h5.card__info__name.card--profile__info__name Kate Mate
          .card__data.card--profile__data
            .card__data__stats.card--profile__data__stats 
              i(class="material-icons") work
              span 13
            .card__data__stats.card--profile__data__stats
              i(class="material-icons") home
              span 21
            .card__data__stats.card--profile__data__stats
              span CTO
    article(class="slide__inner slide--right")
      h1 Peers
      p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora!
  section(class="slide slide-3")
    article(class="slide__inner slide--left")
      .container.container--slide-3
        header.header--slide-3
          nav.header__nav
            .header__nav__logo 
              p LOGO
            .header__nav__cta Lorem
          .header__hero
            .header__hero__table
            .header__hero__chair
        main.main--slide-3
          section.section--about
            h5 About
            .section__stripe
            .section__stripe
          section.section--testimonials
            .section__logo
              i(class="material-icons") person
            .section__info
              .section__stripe.section__info__stripe
              .section__stripe.section__info__stripe
    article(class="slide__inner slide--right")
      h1 Landing page
      p  Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!
  section(class="slide slide-4")
    article(class="slide__inner slide--left")
      .card.card--store
        .card__logo
          i(class="material-icons") mic
        .card__info
          h5.card__info__name.store__info Microphones
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 15.95
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 12 left
      .card.card--store
        .card__logo
          i(class="material-icons") laptop
        .card__info
          h5.card__info__name.store__info Computers
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 315
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 9 left
      .card.card--store
        .card__logo
          i(class="material-icons") phone_iphone
        .card__info
          h5.card__info__name.store__info Mobile phones
          .card__data 
            p.card__data__supplier James
            p.card__data__callout Grab it soon...
        .card__price
          p.card__price__price € 215
          button(class="btn btn__storage btn--active") Buy
          p.card__price__storage 4 left
      
    article(class="slide__inner slide--right")
      h1 Store
      p  Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!
section(class="pagination") 
      
    
  
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Open+Sans'
//mixins
@mixin vertical-align($position: relative)
  position: $position
  top: 50%
  transform: translateY(-50%)
// apply a natural box layout model to all elements, but allowing components to change 
html
  box-sizing: border-box
  -webkit-font-smoothing: antialiased
*, *:before, *:after 
  box-sizing: inherit
//styles for slide container unit
.slides-container
  position: relative
  width: 800px
  height: 450px
  margin: 50px auto
  font-family: 'Open Sans', sans-serif
  border: 1px solid #eee
  box-shadow: 0px 0px 15px 1px rgba(235,235,235,1)
//Basic layout styles for a slide
.slide
  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
//style for a half of a style
.slide__inner
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  height: 100%
  width: 50%
  float: left
//left side styles
.slide--left
  background: #eee
//right side styles
.slide--right
  position: relative
  background: #fff
  padding: 3%
  animation: fadeUp 1s forwards
  h1
    width: 100%
    margin-bottom: 5px
    font-weight: 400
    font-size: 24px
    text-align: left
    letter-spacing: 0.4px
  p
    font-size: 14px
    color: #666
    line-height: 1.8
//styles for buttons 
.btn
  height: 30px
  width: 60px
  font-weight: 400
  letter-spacing: 0.6px
  border-radius: 5px
  border: 0
  outline: none
.btn__absolute
  position: absolute
  z-index: 10
//active button for next
.btn--highlighted
  bottom: 40px
  right: 60px
  background-color: #10a5de
  color: #fff
//muted button for previous
.btn--muted
  bottom: 40px
  right: 120px
  background-color: transparent
  color: #ddd
//container unit for pagination dots
.pagination
  height: 10px
  max-width: 140px
  display: flex
  justify-content: center
  margin: 0 auto
  clear: both
.paginationDot
  width: 10px
  height: 10px
  margin: 0 3px
  border: 2px solid #ddd
  border-radius: 50%
  transition: 0.4s all
.paginationDot--active
  background: #10a5de
  border-color: #10a5de

//First slide's slide--left styles
.slide-1 .slide--left
  background: rgba(117,208,205,1)
.container
  height: 250px
  width: 200px
  background: white
.container__logo
  display: flex
  justify-content: center
  align-items: center
  width: 130px
  height: 130px
  margin: 30px auto
  border-radius: 50%
  background: rgba(117,208,205,1)
  box-shadow: 0px 0px 0px 5px rgba(229,229,229,1)
  animation: 0.8s bounceUp forwards
  .material-icons
    font-size: 72px
    color: rgba(255,255,255,0.8)
    animation: 0.6s bounceUpOnce 0s forwards
.container__stripe, .section__stripe
  height: 10px
  margin: 13px auto
  border-radius: 10px
  background: rgba(229,229,229,1)
.container__stripe--long
  width: 0
  animation: 0.3s growRightLong 0.7s forwards
.container__stripe--short
  width: 0
  animation: 0.3s growRightShort 0.7s forwards
    
//Second slide slide--left styles
.slide-2 .slide--left
  background: rgba(131,206,219,1)
.card
  height: 76px
  width: 80%
  padding: 5px
  margin: 6px 0
  border-radius: 3px
  background: white
  > *
    float: left
.card--profile  
  &:nth-child(2)
    animation-delay: 0.3s
  &:last-child
    animation-delay: 0.6s
.card--profile
  box-shadow: -5px 5px 0px 0px rgba(235,235,235,0.4)
  opacity: 0
  animation: fadeRight 1s forwards
.profile--yellow .card--profile__logo
  background: rgba(239,226,176,1)
.profile--pink .card--profile__logo
  background: rgba(200,191,231,1)
.card__logo, .section__logo
  width: 21%
  background: rgba(131,206,219,1)
  text-align: center
  border-radius: 4px
  height: 100%
  i
    color: rgba(255,255,255,0.7)
    font-size: 62px
    padding: 0
    margin: 0
.card__logo i
  @include vertical-align()
.card__info, .section__info
  width: 79%
  padding: 2%
.card__info__name
  margin: 6px 0 2px
  letter-spacing: 0.5px
  color: rgba(44,168,218,1)
.card__data__stats
  display: inline-block
  margin-right: 5px
  i, span
    font-size: 12px
    margin-right: 2px
  i
    color: #444
  span
    color: #777
//Third slide styles
.slide-3 .slide--left
  background: rgba(131,206,219,1)
.container--slide-3
  width: 80%
  height: 90%
  animation: fadeUp 0.3s forwards
  overflow: hidden
.header--slide-3
  height: 50%
  animation: .5s slideInRight forwards
.header__nav
  position: relative
  height: 50px
.header__nav__logo
  position: absolute
  z-index: 10
  top: 15%
  left: 20px
  width: 20%
  height: 70px
  border-radius: 6px
  background: rgba(247,123,131,1)
  p
    font-weight: 600
    color: white
    text-align: center
    font-size: 14px
    line-height: 70px
    letter-spacing: 1px
    margin: 0
.header__nav__cta
  position: absolute
  top: 15%
  right: 20px
  width: 15%
  padding: 2px 7px
  border-radius: 4px
  background: rgba(77,198,132,1)
  color: white
  font-size: 11px
.header__hero
  position: relative
  overflow: hidden
  height: 75%
  background: rgba(231,239,247,1)
.header__hero__table
  position: absolute
  z-index: 20
  bottom: -5%
  left: 0
  right: 0
  height: 40%
  transform: rotate(-2deg)
  background: rgba(214,222,222,1)
.header__hero__chair
  position: absolute
  bottom: 30%
  right: 20%
  width: 40%
  height: 40%
  transform: rotate(-2deg)
  border-radius: 5px
  box-shadow: -5px -5px 0px 0px rgba(247,247,247,1)
  background: rgba(239,239,239,1)
.section--about
  padding: 0 5%
  margin-bottom: 20px
  transform: translateX(100%)
  animation: .5s slideInLeft 0.2s forwards
  .section__stripe:last-child
    width: 40%
    margin: 0
  h5
    font-size: 12px
    margin: 10px 0 0
.section--testimonials
  padding: 2% 5%
  clear: both
  transform: translateX(-100%)
  animation: .5s slideInRight 0.4s forwards
  > *
    float: left
.section__logo
  border-radius: 10px
.section__info
  padding: 0 5%
.section__info__stripe:last-child
  width: 70%
  margin: 0
  
//Fourth slide styles
.slide-4 .slide--left
  background: rgba(117,208,205,1)
.card--store
  animation: 1.5s fadeRight forwards
.card--store .card__logo i
  font-size: 36px
  color: #666
.card--store .card__info
  width: 55%
.store__info
  margin: 0
  color: #333
.card--store .card__data
  width: 60%
.card__data__supplier, .card__data__callout
  margin: 0
  padding: 0
  font-size: 11px
.card__data__supplier
  color: #d6d6d6
.card__price
  position: relative
  float: left
  width: 24%
  background: rgba(231,255,247,1)
.card__price__price
  font-size: 13px
  margin: 15px 0 0
  padding: 0
  color: #333
  font-weight: 600
  text-align: center
.card__price__storage
  position: absolute
  right: -10px
  top: -10px
  width: 35px
  height: 15px
  background: #000
  color: white
  font-size: 10px
  text-align: center
.btn__storage
  height: 24px
  margin: 5px auto
  color: white
  background: rgba(77,198,132,1)
  display: block
//keyframes for different onload animations
@keyframes fadeUp
  0%
    opacity: 0
    transform: translateY(10px)
  100%
    opacity: 1
    transform: translateY(00)
@keyframes bounceUp
  0%
    transform: translateY(100%)
  60%
    transform: translateY(-18%)
  70%
    transform: translateY(8%)
  85%
    transform: translateY(-6%)
  100%
    transform: translateY(0%)
@keyframes bounceUpOnce
  0%
    transform: translateY(0%)
  35%
    transform: translateY(45%)
  70%
    transform: translateY(-16%)
  90%
    transform: translateY(10%)
  100%
    transform: translateY(0%)
@keyframes growRightLong
  from
    width: 0%
  to
    width: 60%
@keyframes growRightShort
  from
    width: 0%
  to
    width: 35%
@keyframes fadeRight
  0%
    opacity: 0
    transform: translateX(-30%)
  50%
    transform: translateX(0%)
  100%
    opacity: 1
@keyframes slideInRight
  0%
    transform: translateX(-100%)
  100%
    transform: translateX(0%)
  
@keyframes slideInLeft
  0%
    transform: translateX(100%)
  100%
    transform: translateX(0%)
    
  
      
    
            
          
!
            
              $(document).ready(function(){
  //basic variables for slide information
  var currentIndex = 0, //first slide
  slides = $('.slide'),
  slidesLength = slides.length; //how many slides
  $('.btn__prev').hide(); //hide previous button
  createDots(slidesLength); //funtion for creating pagination dots
  function cycleSlides(current) { //function which handles slide traversing
    var slide = $('.slide').eq(current);
    slides.hide();
    slide.show();
  }
  function markDots(position){  //function to add active class to active dot
    $('.paginationDot').removeClass('paginationDot--active');
    $('.paginationDot:nth-child(' + position + ')').addClass('paginationDot--active');
  }
  markDots(1);  //add active class to the first dot
  cycleSlides(currentIndex);
  $('.btn__next').on('click', function(){ //function for 'next' button
    $('.btn__prev').show(); //show the previous button
    currentIndex += 1 //increment the value of current slide
    cycleSlides(currentIndex);  //call slide handle function
    if(currentIndex > slidesLength-2){  //if it second to last slide show 'done' instead of 'next'
      $('.btn__next').html('Done');
      $('.btn__next').attr("disabled", true);
    } else{
      $('.btn__next').attr("disabled", false);
    }
    cycleSlides(currentIndex);
    markDots(currentIndex+1);
  });
 $('.btn__prev').on('click', function(){  //function for previous slide
   $('.btn__next').attr("disabled", false);
   currentIndex -= 1;
   if(currentIndex <= 0){
     $('.btn__prev').hide();
   } 
   else if(currentIndex >= slidesLength -2){
     $('.btn__next').html('Next');
   }
   cycleSlides(currentIndex);
   markDots(currentIndex+1);
 })
});
function createDots(length){  //function to create pagination dots
    for(i=0;i<=length-1;i++){
      $('.pagination').append('<div class="paginationDot"></div>');
    }
  }
            
          
!
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.

Console