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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 id="top" class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <h1 class="pull-left"><a href="/">Cuda</a></h1>
    <ul class="nav nav-pills pull-right">
      <li  role="presentation" class="active"><a href="#home">Home</a></li>
      <li role="presentation"><a href="#services">About</a></li>
      <li role="presentation"><a href="#portfolio">Work</a></li>
      <li role="presentation"><a href="#feedback">Blog</a></li>
      <li role="presentation"><a href="#contact">Contact</a></li>
    </ul>
      </div>
  </div>
</nav>

<section id="home">
  <div class="container text-center">
    <h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
    <a class="action-button" href="#team">Work with us!</a>  
  </div>
</section>
  
<section id="services">
  <div class="container text-center">
    <h1>Services we provide</h1>
      <hr>
    <p>We are working with both individuals and businesses from all over the globe to create awesome websites and applications.</p>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/5ZeKsLg.png" alt="Flag icon">
        <h2>Branding</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/dO55wah.png" alt="Crayon icon">
        <h2>Design</h2>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/nOQJR9b.png" alt="Gears icon">
        <h2>Development</h2>
        <p>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium.</p>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/kUUzpxF.png" alt="Rocket icon">
        <h2>Rocket science</h2>
        <p>Et harum quidem rerum est et expedita distinctio. Nam libero tempore.</p>
      </div>
    </div>
  </div>
</section>

<section id="team">
  <div class="container text-center">
    <h1>Meet our beautiful team</h1>
      <hr>
    <p>We are a small team of designers and developers, who help brands with big ideas.</p>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive img-circle" src="http://r.fod4.com/c=sq/s=w200,pd1/o=80/http://p.fod4.com/p/channels/szqxk/profile/Bwcsu1YQ9G15niiGsKmi_anne-hathaway-head-shot.jpg" alt="Anne Hathaway">
        <adress>
          Anne Hathaway<br>
          <small>CEO / Marketing Guru</small>
        </adress>
        <p>Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
        <p>
          <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        </p>
     </div>
     <div class="col-md-3 col-sm-6">
       <img class="img-responsive img-circle" src="https://gl-images.condecdn.net/image/8NeDjDBxrXe/crop/200/square" alt="Kate Upton">
       <adress>
          Kate Upton<br>
          <small>Creative Director</small>
        </adress>
       <p>Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non diam proident.</p>
       <p>
         <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
         <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
         <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
       </p>
     </div>
     <div class="col-md-3 col-sm-6">
       <img class="img-responsive img-circle" src="http://fanaru.com/olivia-wilde/image/180855-olivia-wilde-olivia-wilde.jpg" alt="Olivia Wilde">
       <adress>
          Olivia Wilde<br>
          <small>Lead Designer</small>
        </adress>
       <p>Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem nesciunt.</p>
       <p>
         <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
         <i class="fa fa-twitter" aria-hidden="true"></i>
         <i class="fa fa-envelope" aria-hidden="true"></i>
       </p>
     </div>
     <div class="col-md-3 col-sm-6">
       <img class="img-responsive img-circle" src="https://3.bp.blogspot.com/-2MPoDCriIKI/UA5vBHBAphI/AAAAAAAABGE/pUvyXcVwsEI/s1600/600full-ashley-greene_large.jpg alt="Ashley Greene"">
       <adress>
          Ashley Greene<br>
          <small>SEO / Developer</small>
        </adress>
       <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
       <p>
         <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
         <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
         <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
         <a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
       </p>
     </div> 
    </div>
  </div>
</section>

<section id="skills">
  <div class="container text-center">
    <h1>We got skills!</h1>
      <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br> tempor incididunt ut labore et dolore magna aliqua.</p>
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/VzbtJpC.png" alt="90%">
        <h2>Web design<h2>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/sJRo3zl.png" alt="75%">
        <h2>HTML / CSS<h2>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/98KZBNP.png" alt="70%">
        <h2>Graphic design<h2>
      </div>
      <div class="col-md-3 col-sm-6">
        <img class="img-responsive" src="https://i.imgur.com/DHXC0Bi.png" alt="85%">
        <h2>UI / UX<h2>
      </div>
    </div>
  </div>
</section>

<section id="portfolio">
  <div class="container text-center">
    <h1>Our portfolio</h1>
      <hr>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet<br> consectetur, adipisci velit, sed quia non numquam</p>
    <ul class="nav-bottom nav nav-pills">
      <li role="presentation"><a href="#">All</a></li>
      <li role="presentation"><a href="#">Web</a></li>
      <li role="presentation"><a href="#">Apps</a></li>
      <li role="presentation"><a href="#">Icons</a></li>
     </ul>
     <div class="row">
       <div class="col-md-6 col-sm-6">
         <img class="img-responsive" src="https://i.imgur.com/9qry93U.png" alt="Project">
         <h2>Isometric perspective mock-up</h2>
       </div>
       <div class="col-md-6 col-sm-6">
          <img class="img-responsive" src="https://i.imgur.com/Y8a0WnM.png" alt="Project">
         <h2>Time zone app ui</h2>
       </div>
     </div>
     <div class="row">
       <div class="col-md-6 col-sm-6">
         <img class="img-responsive" src="https://i.imgur.com/CEczhmH.png" alt="Project">
         <h2>Viro media players ui</h2>
       </div>
       <div class="col-md-6 col-sm-6">
         <img class="img-responsive" src="https://i.imgur.com/YaFCEV0.png" alt="Project">
         <h2>Blog / magazine flat ui kit</h2>
       </div>
     </div>
       <a class="action-button" href="#portfolio">Load more projects</a>
  </div>
</section>

<section id="feedback">
  <div class="container">
    <h1 class="text-center">What people say about us</h1>
      <hr>
    <p class="text-center">Our clients love us!</p> 
    <div class="row">
      <div class="col-sm-1 col-sm-offset-1 col-xs-3">
        <img class="img-responsive img-circle" src="http://www.stalkcelebs.com/img-folder/2016/07/chanel-iman-at-2016-maxim-hot-100-party-in-los-angeles----july-30-2016_t_431071054.jpg" alt="Photo">
      </div>
      <div class="col-sm-4 col-xs-9">
        <q>Nullam dapibus blandit orci, viverra gravida dui lobortis eget. Maecenas fringilla urna eu nisl scelerisque.</q>
        <address>
          Chanel Iman<br> 
          <small>CEO of Pinterest</small>
        </adress>
      </div>
      <div class="col-sm-1 col-sm-offset-1 col-xs-3">
        <img class="img-responsive img-circle" src="http://images4.fanpop.com/image/photos/17900000/Adriana-adriana-lima-17921677-100-100.jpg" alt="Photo">
      </div>
      <div class="col-sm-4 col-xs-9">
        <q>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</q>
        <address>
          Chanel Iman<br> 
          <small>CEO of Pinterest</small>
        </adress>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-1 col-sm-offset-1 col-xs-3">
      <img class="img-responsive img-circle" src="https://hips.hearstapps.com/cosmouk.cdnds.net/16/21/2048x2048/square-1464114185-anne-hathaway-at-the-premiere-of-alice-through-the-looking-glass.jpg?resize=100:*" alt="Photo">
      </div>
      <div class="col-sm-4 col-xs-9">
      <q>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.</q>
        <address>
          Chanel Iman<br> 
          <small>CEO of Pinterest</small>
        </adress>
      </div>
      <div class="col-sm-1 col-sm-offset-1 col-xs-3">
        <img class="img-responsive img-circle" src="http://s3.party.pl/styl-gwiazd/emma-stone-403351-GALLERY_THUM.jpg" alt="Photo">
      </div>
      <div class="col-sm-4 col-xs-9">
        <q>Phasellus non purus vel arcu tempor commodo. Fusce semper, purus vel luctus molestie, risus sem cursus neque.</q>
        <address>
          Chanel Iman<br> 
          <small>CEO of Pinterest</small>
        </adress>
      </div>
    </div>
  </div>
</section>

<section id="contact">
  <div class="container text-center">
    <h1>Get in touch</h1>
      <hr>
    <p>1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</p>
    <form>
      <div class="row">
        <div class="col-md-5 col-md-offset-1"> 
          <input type="text" required class="form-control" placeholder="Your Name" onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#fff';">
        </div>
        <div class="col-md-5">
          <input type="text" required class="form-control" placeholder="Your Email" onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#fff';">
        </div>
      </div>
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <textarea class="form-control" placeholder="Your Message" onfocus="if(this.value==this.defaultValue) this.value=''; this.style.color = '#fff';"></textarea>
        </div>
      </div>
        <a class="action-button" href="#">Send message</a>       
      </form>     
    </div>  
  </section>
  
 <div class="social-media">
   <div class="container">
     <footer>
       <a href="#">Facebook</a>
       <a href="#">Twitter</a>
       <a href="#">Google+</a>   
       <a href="#">LinkedIn</a>
       <a href="#">Behance</a>
       <a href="#">Dribbble</a>
       <a href="#">GitHub</a>
     </footer>
   </div>
 </div>
              
            
!

CSS

              
                * {
  font-family: 'Titillium Web', sans-serif;
}

section {
  padding-top: 120px;
  padding-bottom: 120px;
}

h1 {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0;
}

 hr {
   width: 87px;
   border: none;
   height: 4px;
   color: #14a58c; 
   background-color: #14a58c;
}

p {
  font-size: 18px;
  margin-top: 24px;
}

.action-button {
  display: inline-block;
  border: none;
  text-transform: uppercase;
  box-shadow: 0 6px #c86a40;
  background: #eb7d4b;
  padding: 27px 82px 23px 82px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none !important;
}

.action-button:hover {
  box-shadow: 0 4px #c86a40;
  background: #eb7d4b;    
  transform: translateY(2px);
  color: white;
}
  
.action-button:active {
  background-color: #eb7d4b;
  transform: translateY(6px);
  box-shadow: none;
}
  
.action-button:focus { 
  color: white;
  outline: 0 !important;
}

.navbar {
  margin-top: 60px;
  font-size: 16px;
  margin: 0;
  padding: 40px;
  background: #87509c;
  transition: all 0.4s ease;
  
  h1 a {
    display: inline-block;
    background: url('https://i.imgur.com/68JOo4e.png') no-repeat;
    width: 117px;
    height: 37px;
    margin-top: 20px;
    text-indent: -3000px;
  }
  
  ul {
    padding: 20px;
   
    li {
      a, a:visited {
        outline: none;
        text-transform: uppercase;
        color: white;
        font-size: 16px;
        background: none !important;
      }
      
      a:hover {
         background-color: #643a79 !important;
      }
    }
    
    li.active {
      a, a:visited, a:hover, a:focus {
         background-color: #643a79 !important;
      }
    }
  }
}

.navbar.shrink {
  padding: 0 40px;
  box-shadow: 0 3px 5px #643a79;
}

#home {
  background-color: #87509c;
  color: white;
    
  h1 {   
    text-transform: none;
    margin: 120px 0 62px 0;
  }
  
  .action-button:hover {
    box-shadow: 0 4px #c86a40;
    background: #eb7d4b;    
    transform: translateY(2px);
    color: white;
  }
  
  .action-button:active {
    background-color: #eb7d4b;
    transform: translateY(6px);
    box-shadow: none;
  }
  
  .action-button:focus { 
    color: white;
    outline:0 !important;
  }
}

#services {
  background-color: #17c2a4;  
  color: white;
  
  .row {
   img {
     display: block;
     margin: 80px auto 50px auto;
   }
  
  h2 {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
  }
    
   p {
     font-size: 16px;
     margin: 24px auto 0 auto;
     font-weight: 300;
    }
   }
  }

#team {
  background-color: #e7f1f8;
  color: #3c4761;
  
  hr {
    color: #c8d9e5; 
    background-color: #c8d9e5;
  }
    
   .row {  
     color: #27283d;
     
     img {
       width: 200px;
       height: 200px;
       display: block;
       margin: 80px auto 0 auto;
     }

     adress {
       font-size: 24px;
       font-weight: 700;
       display: block;
       margin: 40px 0 20px 0;

     small {
       font-size: 16px;
       color: #30bae7;
     }
   }
     
     p {
       font-size: 16px;
       margin-top: 30px;
       font-weight: 300;
    }
     
     .fa {
       height: 32px;
       width: 32px;
       border-radius: 50%;
       background: #bdd1df;
       color: #fff;
       font-size: 17px;
       padding-top: 7px;
       margin: 0 5px 0 5px;
    }
     
     .fa:hover {
      background: #17c2a4;
      transition: all 1s;
      text-decoration: none;
    }
  }
}

#skills { 
  color: #3c4761;
  
  hr {
    color: #c8d9e5; 
    background-color: #dfe8ed;
  }
  
  .row {
    img {
      margin: 80px auto 32px auto;
    }
    
    h2 {
      font-size: 24px;
      font-weight: 700;
      text-transform: uppercase; 
      margin: 0;
    }
  }
}

#portfolio {
  background-color: #ffdd99;
  color: #393939;
  
  hr {
    color: #e5c37f; 
    background-color: #e5c37f;
  }
  
  .nav {
    margin: 45px 0 60px 0;
    display: flex;
    justify-content: center;
    
    a {
      padding: 12px 30px;
      margin: 0 5px 0 5px;
    }
   }
   
  .nav-pills>li.active>a, li>a:hover, li>a:focus {
    background: white; 
  }
  
  a {
    background-color: #ebc985;   
    text-transform: uppercase;
    color: #393939;
    font-size: 18px;
  }

 a:hover {
    background: white;
  }
  
  img {
    margin: 0 auto;
  }
  
  h2 {
    font-size: 18px;
    margin: 30px 0 65px 0;
    text-transform: uppercase;
  }
  
  .action-button {
   box-shadow: 0 6px #14a58c;
   background: #17c2a4;
   color: #ffffff;
  }
  
  .action-button:hover {
    box-shadow: 0 4px #14a58c;
    background: #17c2a4;
 }
  
  .action-button:active {
    background-color: #17c2a4;
    box-shadow: none;
 }
}

#feedback {
  background-color: #d74680;
  padding-bottom: 0;
  color: white;
  
  hr {
    color: #b73c6d; 
    background-color: #b73c6d;
  }
  
  p {
    margin-bottom: 80px;
  }
  
  img {
    width: 100px;
  }
  
  .row {   
    q {
      margin: 0 auto 20px auto;
      font-size: 21px;
      font-style: italic;
    }
    
    address {
      margin: 0 auto;
      text-transform: uppercase;
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 120px;
    }
    
    small {
      font-size: 18px;
      color: #ffdd99;
    }
  }
}

#contact {
  background-color: #3c5499;
  padding: 0 auto !important;
  color: white;
  
  hr {
    color: #273a71; 
    background-color: #273a71;
  }
  
  p {
    margin-bottom: 80px;
  }
  
  input {
    background-color: #273a71;
    border: none;
    margin-bottom: 27px;
    padding: 25px 0 25px 25px;
  }
  
  input::placeholder, textarea::placeholder {
    color: white;
    font-size: 18px;
  }
  
  textarea {
    background-color: #273a71;
    border: none;
    display: block;
    margin: 0 auto;
    height: 200px;
    padding: 20px 0 0 25px;
  }
  
  .action-button {
    box-shadow: 0 6px #299ec5;
    background: #30bae7;
    margin-top: 59px;
  }
  
  .action-button:hover {
    box-shadow: 0 4px #299ec5;
    background: #30bae7;
 }
  
  .action-button:active {
    background-color: #30bae7;
    box-shadow: none;
 }
}

.social-media {
  background-color: #344b8e;
  
   footer {
    margin: 0 auto;
    margin: 22px 0;
    display: flex;
    justify-content: center;
  }
  
  a {
    color: white;
    font-size: 24px;
    text-transform: capitalize;
    font-weight: 600;
    margin: 0 22px;
  }
  
  a:hover, a:focus {
    color: #30bae7;
    text-decoration: none;
  }
}
              
            
!

JS

              
                $('body').scrollspy({offset: 120, target: '.navbar-fixed-top'})

$(function() {
  $('body').on('click', 'a', function(event) {
    event.preventDefault();
    var newPosition = $($(this).attr('href')).offset().top - 83;
   
    if ($(this).attr('href') === '#home') {
      newPosition = 0;
    }
    
    $('html, body').stop().animate({
      scrollTop: newPosition
    }, 1000, 'easeInOutExpo');
  });
});

$(window).scroll(function() {
  if ($(document).scrollTop() > 20) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
              
            
!
999px

Console