Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class='container' id='container'>
  <div class='hero' id='hero'>
    <div class='hero-content'>
      <h1>NOT ALL THOSE WHO WANDER ARE <span class='highlight'>LOST</span>.<br>
      <span>YOUR <span class='highlight'>STORY</span> STARTS HERE.</span></h1>
      <div class='description'>Lorem ipsum dolor sit amet, possim electram cum ad, noster nemore mea ad. Ex qui velit fabulas verterem, ut vix inani dicit iudicabit, ex congue utamur posidonium eam. Ea usu mundi malorum blandit. Mea honestatis adversarium ne, sit te noster omittam.</div>
      <div class'buttons'><button id='scroll-button'>START EXPLORING</button>
      </div>
    </div>
            <i class='fa fa-angle-double-down' id='scroll-icon'></i>

    <div class='gradient-overlay'></div>
  </div>
  <div class='flex-wrapper'>
  <div class='section'>
<div class='gradient-2-overlay'></div>
    <div class='col-left' id='col-left'>
      <h2> SO YOU LIKE TO <span class='highlight-secondary'>TRAVEL</span>?</h2>
         <div class='paragraph'>Lorem ipsum dolor sit amet, elementum curabitur ac vel lacus vulputate, vivamus tellus ante rutrum dictum. Risus morbi eros etiam vel, ipsum nec porttitor, sit wisi eu dictum in curae ipsum. <br><br>Non in wisi tellus, proin in id, consectetuer wisi et orci gravida et augue, amet arcu. Tortor lectus nulla vitae lectus vestibulum, vel a nulla erat, tempor ipsum quis vestibulum malesuada quam dictum, et scelerisque mattis justo, nec euismod nisl. Vitae viverra a. Ante sed dolor, augue a lorem neque eu, sed aliquet euismod fermentum. Vitae justo fringilla at, vivamus natoque ultrices, elit vivamus vitae fermentum volutpat tellus per, sed elit massa in, sint torquent duis dolor lacus diam in. Ultrices vitae at sed enim pellentesque, leo purus magna sit pulvinar sit, vitae dui dui, diam nunc eget non, lectus sit nulla libero gravida. Sed lacinia augue. </div>
    </div>
    <div class='col-right' id='col-right'>
      <div class='col-right-overlay'></div>
      Lorem ipsum dolor sit amet, possim electram cum ad, noster nemore mea ad. Ex qui velit fabulas verterem.
      <div class='input-container'>
    <input type='text' placeholder='Your name'/>  
    <input type='email' placeholder='Email' />
        <button class='full-width'>Count Me In!</button>
      </div>
    </div>
  </div>
  </div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Yantramanav:400,500,700,900);

body,
html {
  margin:0;
  padding:0;
  font-family:yantramanav;
}
body {
  font-size:16px;
}
h1 {
  color:#fff;
  font-size:4vw;
  font-weight:900;
  margin:0;
  line-height:1em;
}
h2 {
  font-size:3vw;
  color:#ddd;
  margin:0;
  margin-bottom:16px;
  margin-bottom:1rem;
}
.container {
  
}

button {
 border:none;
  font-size:16px;
  font-size:1rem;
  border-radius:20px;
  border:2px solid #46cE93;
 background:transparent;
  color:#fff;
  cursor:pointer;
  font-weight:700;
  margin-right:25px;
 padding:10px 20px 10px 20px;
}
button:focus {
  outline:none;
}
button:hover {
  background:rgba(0,0,0,0.1);
}
.section {
  padding:0px 200px 100px 0px;
  box-sizing:border-box;
 background:url('https://dl.dropboxusercontent.com/s/xaf5d30fctjo90v/snow-landscape-nature-sky.jpeg')  center top no-repeat;
  background-size:cover;
  min-height:100vh;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  width:100%;
  position:relative;
  -webkit-box-align:center;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  overflow:hidden;
}
.fa-angle-double-down {
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  bottom:20px;
  width:10px;
  font-size:2.5vw;
  color:#aaa;
  z-index:11;
  opacity:1;
  filter:alpha(opacity=100);
  cursor:pointer;
  -webkit-animation:glow 4s infinite;
          animation:glow 4s infinite;
}
.hero {
  height:100vh;
  background: url('https://dl.dropboxusercontent.com/s/nehoxww6wzljj1k/pexels-photo-71269.jpeg?dl=0') center bottom no-repeat;
  position:relative;
  background-size:cover;
}
.highlight {
  color:#66EEB3;
}
.highlight-secondary {
  color:#BB3D7C;
}
.hero-content {
  padding:0px 100px 50px 100px;
  position:absolute;
  height:50vh;
  top:0;
  bottom:0;
  margin-top:auto;
  margin-bottom:auto;
  z-index:10;
}
.gradient-overlay {
  height:100%;
  width:100%;
  background:-webkit-linear-gradient(#718588 20%, #353535);
  background:linear-gradient(#718588 20%, #353535);
  opacity:0.6;
  filter:alpha(opacity=60);
  z-index:1;
  position:absolute;
  top:0;
  left:0;
}

.gradient-2-overlay {
  height:100%;
  width:100%;
  background:-webkit-linear-gradient(rgba(32,32,32,1) 10%, rgba(0,0,0,0.5));
  background:linear-gradient(rgba(32,32,32,1) 10%, rgba(0,0,0,0.5));
  opacity:1;
  filter:alpha(opacity=100);
  left:0;
  top:0;
  position:absolute;
  z-index:10;
}
.input-container {
  margin-top:32px;
  margin-top:2rem;
}
.flex-wrapper {
  display:flex;
  flex-direction: column;
  height: 100%;
}
input {
  opacity:0.6;
  filter:alpha(opacity=60);
  background:rgba(0,0,0,0.3);
  font-size:16px;
  font-size:1rem;
  padding:10px;
  margin-bottom:8px;
  margin-bottom:.5rem;
  color:#fff;
  box-sizing:border-box;
  width:100%;
  border:none;
}
input:focus {
  opacity:1;
  filter:alpha(opacity=100);
  background:rgba(0,0,0,0.4);
  outline:none;
}
input:last-of-type {
  margin-bottom:32px;
  margin-bottom:2rem;
}
.description {
  width:50%;
  margin-top:32px;
  margin-top:2rem;
  margin-bottom:32px;
  margin-bottom:2rem;
  color:#f5f5f5;
  letter-spacing:0px;
  letter-spacing:0.05rem;
  positon:relative;
    line-height:1.5em;
  z-index:15;

}
.col-left {
  width:100%;
  float:left;
  padding-left:100px;
  position:relative;
  box-sizing:border-box;
  opacity:0;
  filter:alpha(opacity=0);
  z-index:15;
}
.fade-in-left {
      -webkit-animation:fade-in-left 1.2s forwards;
              animation:fade-in-left 1.2s forwards;
}
.fade-in-bottom {
      -webkit-animation:fade-in-bottom 1.2s forwards;
              animation:fade-in-bottom 1.2s forwards;
}
.col-right {
  width:500px;
  padding:25px;
  margin-left:10%;
  color:#eee;
  -webkit-transform:translateX(0px);
      -ms-transform:translateX(0px);
          transform:translateX(0px);
  background:transparent;
  border: 3px solid #eee;
  box-sizing:border-box;
  height:350px;
  position:relative;
  z-index:15;
    opacity:0;
    filter:alpha(opacity=0);
}
.full-width {
  width:100%;
}
.col-right-overlay {
  position:absolute;
  width:100%;
  height:100%;
  left:-2%;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  box-sizing:border-box;
  border:4px solid #66EEB3;
  -webkit-transform:rotate(3deg) scale(1.01);
      -ms-transform:rotate(3deg) scale(1.01);
          transform:rotate(3deg) scale(1.01);
}
.paragraph {
  color:#ddd;
    letter-spacing:0px;
    letter-spacing:0.05rem;
  line-height:1.5em;
 width:100%;
  text-align:justify;
}

@-webkit-keyframes glow {
  0% {
    opacity:1;
    filter:alpha(opacity=100);
  }
  
  50% {
    opacity:0.3;
    filter:alpha(opacity=30);
    -webkit-transform:translateY(10px);
            transform:translateY(10px);

  }
}

@keyframes glow {
  0% {
    opacity:1;
    filter:alpha(opacity=100);
  }
  
  50% {
    opacity:0.3;
    filter:alpha(opacity=30);
    -webkit-transform:translateY(10px);
            transform:translateY(10px);

  }
}
@-webkit-keyframes fade-in-left {
  0% {opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(-20px);transform:translateX(-20px)};
  100% {opacity:1;filter:alpha(opacity=100);-webkit-transform:translateX(0px);transform:translateX(0px)};
}
@keyframes fade-in-left {
  0% {opacity:0;filter:alpha(opacity=0);-webkit-transform:translateX(-20px);transform:translateX(-20px)}
  100% {opacity:1;filter:alpha(opacity=100);-webkit-transform:translateX(0px);transform:translateX(0px)}
}
@-webkit-keyframes fade-in-bottom {
  0% {opacity:0;filter:alpha(opacity=0);-webkit-transform:translateY(20px);transform:translateY(20px)}
  100% {opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0px);transform:translateY(0px)}
}
@keyframes fade-in-bottom {
  0% {opacity:0;filter:alpha(opacity=0);-webkit-transform:translateY(20px);transform:translateY(20px)}
  100% {opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0px);transform:translateY(0px)}
}
@media (max-width:1000px) {
  h2 {
    font-size:2rem;
  }
    h1 {
    font-size:2.5rem;
  }
  .fa-angle-double-down {
    font-size:2rem;
  }
  .section {
    -webkit-flex-flow:column;
        -ms-flex-flow:column;
            flex-flow:column;
    background:-webkit-linear-gradient(#1f1f1f, #151515);
    background:linear-gradient(#1f1f1f,#151515);
      -webkit-box-pack:center;
      -webkit-justify-content:center;
          -ms-flex-pack:center;
              justify-content:center;
    padding-left:100px;
    padding-right:100px;
    padding-top:50px;
  }
  .col-left {
    padding-left:0px;
  }
  .description {
    width:100%;
  }
  .col-right {
    margin-left:0;
    width:90%;
    margin-top:50px;
  }
}

@media (max-width:680px) {
  .section {
    padding-left:20px;
    padding-right:20px;
  }
  .hero-content {
    padding-left:20px;
    padding-right:20px;
    margin-top:100px;
  }
}
@media (max-height:600px) {
  .hero-content {
    top:0;
    margin-top:50px;
  }
}
              
            
!

JS

              
                var scrollCount = 0;
document.getElementById('scroll-icon').addEventListener('click',function(){
  window.requestAnimationFrame(function(){
        scrollCount = window.pageYOffset;
   scrollDown() 
  });
});
document.getElementById('scroll-button').addEventListener('click',function(){
  window.requestAnimationFrame(function(){
        scrollCount = window.pageYOffset;
   scrollDown() 
  });
});

function scrollDown(){
  scrollCount += 25;
  if (window.pageYOffset < document.getElementById('hero').clientHeight){
  window.scrollTo(0,scrollCount);
  window.requestAnimationFrame(function(){
    scrollDown();
  });
  }
  else {
  }
};

window.onscroll = function(){
  if (window.pageYOffset > 500) {
        document.getElementById('col-left').classList.add('fade-in-left')
       window.setTimeout(function(){
          document.getElementById('col-right').classList.add('fade-in-bottom')
       },500)
  }
}
              
            
!
999px

Console