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

              
                <nav class="navbar navbar-fixed-top" id="nav-bar">
  <div class="container-fluid">    
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><i class="far fa-sun"></i> Why Nut</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

<header id="home">
  <div class="text-box">
    <h1>For the sake of your health</h1>
    <p>Find out why we have the best nuts in the US</p>
    <a class="btn" href="#video">Watch Video</a>
    <a class="btn" href="#get-started">Get Started</a>
  </div>
</header>

<section class="section-features" id="features">
  <div class="row">
    <h2>Quality is concerned</h2>
  </div>  
  <div class="row">
    <div class="col-md-4 col-sm-4">
      <i class="fas fa-tree icon-p"></i>
      <h3>Grow in America</h3>
        <p>Ridiculus mattis. Elementum iaculis. Nisi dis ornare taciti rhoncus ultricies vivamus risus.</p>
    </div>
    <div class="col-md-4 col-sm-4">
      <i class="far fa-check-circle icon-p"></i>
      <h3>Raw and roasted</h3>
        <p>Vitae Platea nulla hymenaeos, magnis accumsan nec ad consequat nisi lobortis. Tortor taciti proin natoque non habitasse.</p>
    </div>    
    <div class="col-md-4 col-sm-4">
      <i class="fas fa-leaf icon-p"></i>
      <h3>100% organic</h3>
        <p>Quam enim. Etiam vel scelerisque laoreet natoque enim odio a dignissim urna commodo fames nullam nascetur.</p>
    </div>
 </div>            
</section>

<section class="section-products" id="products">
  <div class="row">
    <h2>Our nuts</h2>
  </div>
  <div class="row">
      <img  src="https://github.com/linh4/landing-page/blob/master/img/pistachio.jpg?raw=true" alt="Pistachio">
    <div class="box">
      <h3>Pistachio</h3>
        <p>Vitae Dictum venenatis. Penatibus.</p>
        <p>Justo malesuada.</p>
        <p>Penatibus amet mattis aenean.</p>
    </div>
  </div>
  <div class="row">
      <img src="https://github.com/linh4/landing-page/blob/master/img/almonds.jpg?raw=true" alt="Almond">
    <div class="box">
      <h3>Almond</h3>
        <p>Vitae Dictum venenatis. Penatibus.</p>
        <p>Justo malesuada.</p>
      <p>Penatibus amet mattis aenean.</p>
    </div>
  </div>
  <div class="row">
      <img src="https://github.com/linh4/landing-page/blob/master/img/pecans.jpg?raw=true" alt="Pecan">
    <div class="box">
      <h3>Pecan</h3>
        <p>Vitae Dictum venenatis. Penatibus.</p>
        <p>Justo malesuada.</p>
        <p>Penatibus amet mattis aenean.</p>
    </div>
 </div>
  <div class="row">
      <img src="https://github.com/linh4/landing-page/blob/master/img/walnuts.jpg?raw=true" alt="Walnut">
     <div class="box">
      <h3>Walnut</h3>
        <p>Vitae Dictum venenatis. Penatibus.</p>
        <p>Justo malesuada.</p>
        <p>Penatibus amet mattis aenean.</p> 
    </div>
  </div>
</section>

<section class="section-video" id="video">
  <div class="row">
    <h2>Health benefits of nuts</h2>
  </div>
  <div class="row">
    <div class="videoWrapper">
      <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/LiDJCXhg0NE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen align="center"></iframe>
    </div>
  </div>
</section>

<section class="section-plan" id="get-started">
  <div class="row">
    <h2>Subscription Boxes</h2>
  </div>
  <div class="row">
    <div class="col-sm-5 col-sm-offset-1">
      <div class="plan-box">
        <div>
          <h3>Sampler</h3>
          <p class="plan-price">$9.99 <span>/ month</span></p>
        </div>
        <ul>
          <li><i class="fas fa-check icon-s"></i> Lorem ipsum dolor</li>
          <li><i class="fas fa-check icon-s"></i> Curabitur sagittis dictum</li>
          <li><i class="fas fa-check icon-s"></i> Vestibulum at nisi </li>
          <li><i class="fas fa-check icon-s"></i> Donec ut nunc</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-5">
      <div class="plan-box">
        <div>
            <h3>Full Box</h3>
            <p class="plan-price">$35.99 <span>/ month</span></p>
        </div>
          <ul>
            <li><i class="fas fa-check icon-s"></i> Lorem ipsum dolor</li>
            <li><i class="fas fa-check icon-s"></i> Curabitur sagittis dictum</li>
            <li><i class="fas fa-check icon-s"></i> Vestibulum at nisi </li>
            <li><i class="fas fa-check icon-s"></i> Donec ut nunc</li>
          </ul>
     </div>
   </div>
  </div>
</section>


<section id="contact">
  <div class="row">
    <h2>Contact us</h2>
  </div>
  <div class="row">
    <form method="post" action="#" class="contact-form">
      <div class="row">
        <div class="col-md-3">
          <label for="name">Name</label>
        </div>
      <div class="col-md-9">
        <input type="text" name="name" id="name" placeholder="Your name" required>
        </div>
      </div>
      <div class="row">
            <div class="col-md-3">
              <label for="email">Email</label>
            </div>
          <div class="col-md-9">
            <input type="email" name="email" id="email" placeholder="Your email" required>
            </div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <label for="message">Messages</label>
        </div>
        <div class="col-md-9">
          <textarea name="message" id="message" placeholder="Your message"></textarea>
        </div>
      </div>
      <div class="row">
        <div class="sub">
          <input type="submit" value="Send it">
        </div>
      </div>
    </form>
  </div>
</section>

<footer>
   <div class="row">
    <div class="col-sm-4">
      <ul class="footer-nav">
        <h4>About</h4>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Shipping Information</a></li>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Terms Of Service</a></li>
      </ul>
   </div>
    
   <div class="col-sm-4 col-sm-offset-4">
      <ul class="footer-nav">
        <h4>Contact</h4>
        <li><i class="fas fa-clock" aria-hidden="true"></i> Mon - Sun 9AM - 10PM EST</li>
        <li><i class="fas fa-phone" aria-hidden="true"></i> 1-111-222-333</li>
        <li><i class="fas fa-envelope" aria-hidden="true"></i> why-nut&#64;whynut.com</li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="contact">
      <a href="https://github.com/linh4" target="_blank">
        <span class="icon"><i class="fab fa-github"></i></span></a>
      <a href="https://codepen.io/linh4/" target="_blank">
        <span class="icon"><i class="fab fa-codepen"></i></span></a>
      <a href="https://www.freecodecamp.org/linh4" target="_blank">
        <span class="icon"><i class="fab fa-free-code-camp"></i></span></a>
    </div>
  </div>
  <p>&copy 2018 Linh Huynh</p>
</footer>    
                  
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Muli:300,400|Philosopher:400,700');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #fff;
  color: #3e4546;
  font-family: 'Muli', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p {
  font-size: 90%;
  line-height: 1.7;
}

.row {
  max-width: 90%;
  margin: 0 auto;
}

section {
    padding: 20px 0 40px 0;
}



/*---------- NAV ----------*/
.navbar {
  margin-bottom: 0;
  border: 0;
  font-size: 20px;
  background-color: #ed7669;
  overflow: hidden;
  text-decoration: none;
}

.navbar:hover {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

.nav li a:link,
.nav li a:visited {
  text-align: left;
  text-decoration: none;
  color: #fff;
  font-size: 17px;
  background-color: transparent;
}

@media screen and (min-width: 768px){
  .nav li a:after {
    display: block;
    content: "";
    border-bottom: solid 2px #f8eee7;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    transform-origin: 100% 50%;
  }

  .nav li a:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
  }

  .icon-bar {
    display: block;
    width: 15px;
    height: 5px;
    background-color: #49274a;
    margin: 6px 0;
    box-shadow: 0 2px rgba(0, 0, 0, 0.5);
}

  .navbar-brand:link,
  .navbar-brand:visited {
    font-size: 26px;
    color: #fff;
    margin-bottom: 3px;
  }

  .navbar-brand:hover {
    color: #FCD757;
  }

/*------- HEADER ------------*/

header {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://github.com/linh4/landing-page/blob/master/img/nutbackground-min.jpg?raw=true);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
  text-align: center;
  color: #fff;
  width: 100%;
  text-align: center;
}

.text-box {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

h1 {
  font-family: 'Philosopher', sans-serif;
  font-size: 250%;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: 2px;
  color: #fff;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
}

.text-box p {
  text-align: center;
  font-style: italic;
  margin-bottom: 30px;
}

/*-----BUTTON ------*/
.btn:link,
.btn:visited,
input[type=submit] {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  border-radius: 150px;
   -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  background: #ee8478;
  border: 2px solid #eb685a;
  color: #fff; 
  font-size: 90%;
  margin-right: 20px;
}

.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
  background-color: #eb685a;
  color: #fff;
  transition: 0.3s;
}

/*----------- FEATURE SECTION -------*/

.section-features {
  text-align: center;
}

h2 {
  font-size: 180%;
  word-spacing: 2px;
  font-style: bold;
  letter-spacing: 1px;
  color: #b23528;
  text-transform: uppercase;
  text-align: center;
}

h2:after {
  display: block;
  height: 2px;
  background-color: #fad7d3;
  content: "";
  width: 100px;
  margin: 0 auto;
  margin-top: 30px;
}

h3 {
  font-size: 110%;
  margin-bottom: 15px;
  text-transform: uppercase;
  color: #9aa4a5;
}

.icon-p {
  margin-top: 30px;
  font-size: 250%;
  color: #ed7669;
}

/*------- NUT SECTION -----------*/

.section-products {
  text-align: center;
  background-color: #f4f4f4;
}

.box {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.box h3 {
  text-align: center;
  margin: 2px 0 7px 0;
}

.section-products h2:after {
  margin-bottom: 30px;
}

.section-products img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid #f2c9c5;
  transition: transform 0.7s;
  margin: 20px 100px 30px 0;
  transform: scale(1.07);
}

.section-products img:hover {
  transform: scale(1);
  border: 0;
}

/*-----VIDEO SECTION -----*/

.section-video .row {
  width: 70%;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 30px 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

/*---------- SUBSCRIPTION ----------*/
.section-plan {
  background-color: #f4f4f4;
}

.plan-box {
  background-color: #fff;
  border-radius: 5px;
  width: 90%;
  margin-left: 5%;
  -webkit-box-shadow: 0 2px 2px #efefef;
  box-shadow: 0 2px 2px #efefef;
  margin-top: 30px;
}

.plan-box div {
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.plan-box div:first-child {
  background-color: #fcfcfc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.plan-price {
  font-size: 200%;
  margin-bottom: 10px;
  color: #e95a4b;
  -webkit-text-stroke: 0.35px;
}

.plan-price span {
  font-size: 30%;
}

.plan-box ul li {
  list-style: none;
  font-size: 80%;
  padding-top: 20px;
}

.plan-box ul li:last-child {
  padding-bottom: 20px;
}

.icon-s {
  display: inline-block;
  text-align: center;
  color: #ed7669;
  font-size: 80%;
  margin-right: 10px;
  margin-left: 15px;
  vertical-align: middle;
}

/*--------- CONTACT ------------*/
.contact-form {
  width: 80%;
  margin: 0 auto;
}

label {
  margin-top: 15px;
  font-weight: inherit;
}

input[type=text],
input[type=email],
textarea {
  width: 100%;
  padding: 7px;
  border-radius: 3px;
  border: 1px solid #f5d6d3;
  margin-top: 10px;
}

textarea {
    height: 100px;
}

.sub {
  width: 100%;
  text-align: center;
  margin: 20px auto;
}

::-webkit-input-placeholder {
  color: #e95a4b;
  font-size: 90%;
  font-style: italic;
}

/*--------FOOTER -------*/

footer {
  padding: 20px;
  background-color: #889495;
  text-align: center;
  color: #fff;
}

.footer-nav {
  list-style: none;
  font-size: 80%;
}

.footer-nav h4,
.contact {
  font-size: 120%;
}

footer p {
  font-size: 75%;
}

footer a:link,
footer a:visited {
  color: #fed1d3;
  transition: 0.3s;
  margin-top: 5px;;
}

footer a:hover,
footer a:active {
  color: #fd9fa4;
  text-decoration: none;
}

hr {
  width: 60%;
  margin: 10px auto;
}

@media only screen and (max-width: 767px) {
   section { padding: 30px 0; }
  
  .navbar-toggle {
    margin: 0 4px 0 0;
  }
  
  .text-box {
    padding: 0 4%;
    width: 80%;
  }
  
  .nav li a:hover {
    color: #FCD757;
}
  
  body { font-size: 16px; }
  section { padding: 30px 0; }
   
  
  h1 {
    font-size: 180%;
    padding: 10px;
    margin-top: 0;
  }  
  
  .section-products .row {
    width: 90%;
    text-align: center;
}
  
  .section-products img {
    width: 120px;
    height: 120px;
    margin-right: 30px;
  }
  
  .contact-form {
  width: 90%;
}
  
  input[type=text],
  input[type=email],
  textarea {
    margin-top: 0;
}  
}


@media screen and (max-width: 480px) {
   section { padding: 25px 0; }
  
  .btn:link,
  .btn:visited {
    display: block;
    font-size: 70%;
    margin: 0 auto 5px auto;
    width: 50%;
    padding: 10px 15px;
}

  h1 {
    margin: 0;
    font-size: 160%;
  }
  
  .text-box p {
    font-size: 80%;
    margin-bottom: 8px;
  }
  
  
  h2 {
    margin-top: 40px;
  }
  
 .box {
    display: block;
    text-align: center;
    margin: 0;
  }
  
  .section-products img {
    display: block;
    margin: 20px auto;
  }

  
}
              
            
!

JS

              
                $(document).ready(function() {
  
  $('.navbar-collapse ul li a').click(function(){
   /* always close responsive nav after click */
  $('.navbar-toggle:visible').click();
    }); 
  
 $('a[href*="#"]:not([href="#"])').click((e) => {
    const target = $(e.target.hash);

    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top - 50
      }, 1000);

      return false;
    }
  });
});
              
            
!
999px

Console