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

              
                <body data-spy="scroll" data-target=".navbar" data-offset="50">
  <nav id="bootstrap_menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header"><a class="navbar-brand" href="#name">Hugh Winchester</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span>
          <span class="icon-bar"></span>
            </button>
      </div>
      <div class="navbar-collapse collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>


  <div class="top container text-center">
    <h1 class="title" id="name">Hugh Winchester</h1></div>
  <div class="text-center">
    <h1 class="header" id="about">About</h1>
    <p class="containr-fluid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit lectus mi, quis fringilla purus elementum ut. Nunc ullamcorper consectetur luctus. Suspendisse ultricies mi augue, eu maximus enim imperdiet quis. Vivamus diam nulla, venenatis
      non laoreet ac, facilisis et odio. Aliquam ac aliquet nulla. In eget lorem justo. Aenean pretium nibh scelerisque eros vehicula, ut tincidunt nulla imperdiet. Etiam cursus risus purus, vitae eleifend ex ullamcorper vel. Maecenas ut felis nulla.
      Etiam sollicitudin aliquet malesuada. Donec scelerisque nunc et libero pellentesque, a faucibus est cursus. Aenean sollicitudin sapien eget mi consectetur, ut auctor tellus condimentum. Aenean est neque, consectetur sed.</p>
  </div>
  <div class="text-center container-fluid">
    <h1 class="header" id="portfolio">Portfolio</h1>
    <div class="row">
      <div class="col-md-3 col-md-offset-2">
        <div class="card panel">
          <div class="card">
            <p data-height="265" data-theme-id="0" data-slug-hash="pEZbPJ" data-default-tab="result" data-user="hughwin" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/hughwin/pen/pEZbPJ/">Random Quote Machine</a> by Hugh Winchester (<a href="https://codepen.io/hughwin">@hughwin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
            <h4 class="card-title">Random Quote Machine</h4>
            <p class="card-text">A simple little machine that retrieves a quote from an API, and allows a user to tweet the quote if they like. </p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-md-offset-2">
        <div class="card panel">
          <div class="card">
            <p data-height="265" data-theme-id="0" data-slug-hash="wzdZPN" data-default-tab="result" data-user="hughwin" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/hughwin/pen/wzdZPN/">Weather application</a> by Hugh Winchester (<a href="https://codepen.io/hughwin">@hughwin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
            <h4 class="card-title">Weather Application</h4>
            <p class="card-text">An application which shows the user the weather in their area. The information is accessed by an API.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-2">
        <div class="card panel">
          <div class="card">
            <p data-height="265" data-theme-id="0" data-slug-hash="LRLAqE" data-default-tab="result" data-user="hughwin" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/hughwin/pen/LRLAqE/">Wikipedia viewer</a> by Hugh Winchester (<a href="https://codepen.io/hughwin">@hughwin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
            <h4 class="card-title">Wikipedia Viewer</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ante lacus, elementum tempus lectus nec, faucibus porttitor est. In tincidunt.</p>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-md-offset-2">
        <div class="card panel">
          <div class="card">
            <p data-height="265" data-theme-id="0" data-slug-hash="qaXNBB" data-default-tab="result" data-user="hughwin" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/hughwin/pen/qaXNBB/">Twitch TV Viewer</a> by Hugh Winchester (<a href="https://codepen.io/hughwin">@hughwin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
            <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
            <h4 class="card-title">Twitch Tv Viewer</h4>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis aliquet urna, nec maximus lacus tincidunt quis. Nam mattis ex. </p>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
  <div class="text-center">
    <h1 class="header" id="contact">Contact</h1>
  </div>
  <!-- Footer -->
  <footer class="social text-center">
    <a href="https://www.facebook.com/hugh.winchester"><i class="fa fa-facebook-official"></i></a>
    <a href=""><i class="fa fa-github"></i></a>
    <a href="https://uk.linkedin.com/in/hughwinchester"><i class="fa fa-linkedin"></i></a>

  </footer>
</body>
              
            
!

CSS

              
                
.navbar-nav {
    margin: 1;
    padding: 7.5px 15px;
    overflow:hidden;
}

#bootstrap_menu.navbar-default .navbar-brand {
  color: rgba(119, 119, 119, 1);
}

#bootstrap_menu.navbar-default {
  font-size: 25px;
  background-color: rgba(255, 255, 255, 1);
  border-bottom-width: 0;
}

#bootstrap_menu.navbar-default .navbar-nav>li>a {
  color: rgba(119, 119, 119, 1);
  background-color: rgba(255, 255, 255, 1);
}

#bootstrap_menu.navbar-default .navbar-nav>li>a:hover,
#bootstrap_menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(51, 51, 51, 1);
  background-color: rgba(187, 197, 199, 1);
}

#bootstrap_menu.navbar-default .navbar-nav>.active>a,
#bootstrap_menu.navbar-default .navbar-nav>.active>a:hover,
#bootstrap_menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(36, 193, 224, 1);
}

#bootstrap_menu.navbar-default .navbar-toggle {
  border-color: #24c1e0;
}

#bootstrap_menu.navbar-default .navbar-toggle:hover,
#bootstrap_menu.navbar-default .navbar-toggle:focus {
  background-color: #24c1e0;
}

#bootstrap_menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #24c1e0;
}

#bootstrap_menu.navbar-default .navbar-toggle:hover .icon-bar,
#bootstrap_menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}

.top {
  background: linear-gradient(135deg, #1DE9B6 0%, #2979FF 100%);
  font-familt: 'Lato', sans-serif;
  color: white;
  height: 100vh;
  width: 100vw;
  padding-top: 250px;
  padding-bottom: 200px;
  overflow:hidden;
  
}

.header {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 70px;
  overflow:hidden;
}

.title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 80px;
  font-size: 8vw;
  overflow:hidden;
}

p {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  overflow:hidden;
}

html,
body {
  
  height: 100%;
  font-family: 'Josefin Sans', sans-serif;
  max-width: 100% !important;
}

.panel {
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
  overflow: hidden;
  transition: box-shadow 0.5s;
}

.panel:hover {
  box-shadow: 5px 0px 40px rgba(0, 0, 0, .2);
  overflow:hidden;
}

.fa {
  font-size: 75px;
  color: grey;
}

.social .fa-facebook-official:hover {
  color: rgb(29, 230, 184);
}

.social .fa-github:hover {
  color: rgb(33, 200, 204);
}

.social .fa-linkedin:hover {
  color: rgb(37, 159, 230);
}

.container {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
              
            
!

JS

              
                 $(document).ready(function()

   {
     $('#name').hide();
     $('#name').delay(1500).fadeIn(1500);
       // hide .navbar first
     $(".navbar").hide();

     // fade in .navbar
     $(function() {
       $(window).scroll(function() {

         // set distance user needs to scroll before we start fadeIn
         if ($(this).scrollTop() > 500) {
           $('.navbar').fadeIn();
         } else {
           $('.navbar').fadeOut();
         }
       });
     });

     $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
       // Make sure this.hash has a value before overriding default behavior
       if (this.hash !== "") {
         // Prevent default anchor click behavior
         event.preventDefault();

         // Store hash
         var hash = this.hash;

         // Using jQuery's animate() method to add smooth page scroll
         // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
         $('html, body').animate({
           scrollTop: $(hash).offset().top
         }, 900, function() {

           // Add hash (#) to URL when done scrolling (default click behavior)
           window.location.hash = hash;
         });
       } // End if
     });
   });
              
            
!
999px

Console