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.

            
              <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<body data-spy="scroll" data-target=".navbar" data-offset="50">

  <nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar menu-bar-top"></span>
          <span class="icon-bar menu-bar-middle"></span>
          <span class="icon-bar menu-bar-bottom"></span>
        </button>
        <a class="navbar-brand">Jon Selig</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">Home</a></li>
          <li><a href="#info">Info</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div id="home" class="col-xs-12">
        <h1 class="text-center">HOME</h1>
        <div class="col-xs-12 col-xs-offset-0 col-md-4 col-md-offset-4">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac
            habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent
            taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div id="info" class="col-xs-12">
        <h1 class="text-center">INFO</h1>
        <div class="col-xs-12 col-xs-offset-0 col-md-4 col-md-offset-4">
          <p> Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum
            et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing
            malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div id="projects" class="col-xs-12">
        <h1 class="text-center">PROJECTS</h1>
        <div class="col-xs-12 col-xs-offset-0 col-md-4 col-md-offset-4">
          <span class="project-span">
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
          </span>
          <span class="project-span">
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
          </span>
          <span class="project-span">
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
            <a href="https://www.google.com/">
              <img class="project-link" src="http://jselig.xyz/images/google.jpg" />
            </a>
          </span>
        </div>
      </div>
    </div>
    <div class="row">
      <div id="contact" class="col-xs-12">
        <h1 class="text-center">CONTACT</h1>
        <div class="row">
          <div class="col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
              <button class="btn btn-primary btn-contact">
                <i class="fa fa-github"></i> GitHub 
                <a href="#"></link></a>
              </button>
              <button class="btn btn-primary btn-contact">
                <i class="fa fa-linkedin-square"></i> LinkedIn
                <a href="#"></link></a>
              </button>
              <button class="btn btn-primary btn-contact">
                <i class="fa fa-send"></i> Email
                <a href="#"></link></a>
              </button> 
              <button class="btn btn-primary btn-contact">
                <i class="fa fa-graduation-cap"></i> freeCodeAcademy
                <a href="#"></link></a>
              </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              /* COLORS
white: #feffff
blue:  #98dafc
brown: #daad86
black: #312c32
gray:  #e1e3e4
*/
body {
  font-family: Roboto;
}

h1 {
  font-family: Oswald;
  color: white;
}

#home, #info, #projects, #contact {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  padding-top: 50px;
  min-height: 110vh;
}
#home {
  color: black;
  background: url("http://jselig.xyz/images/sand.jpg") no-repeat center center fixed;
}
#info {
  background: url("http://jselig.xyz/images/mountain.jpg") no-repeat center center fixed;
}
#projects {
  background: url("http://jselig.xyz/images/grass.jpg") no-repeat center center fixed;
}
#contact {
  background: url("http://jselig.xyz/images/lake.jpg") no-repeat center center fixed;
  min-height: 100vh;
}
@media screen and (max-width:768px) {
  #home {
    background: url("http://jselig.xyz/images/sand-small.jpg") no-repeat center center scroll;
  }
  #info {
    background: url("http://jselig.xyz/images/mountain.jpg") no-repeat center center scroll;
  }
  #projects {
    background: url("http://jselig.xyz/images/grass.jpg") no-repeat center center scroll;
  }
  #contact {
    background: url("http://jselig.xyz/images/lake.jpg") no-repeat center center scroll;
  }
}
/* navbar-custom styles */

.navbar-custom {
  font-family: Oswald;
} /* Set navbar font-family */

.navbar-custom .navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }
} /*Make navbar-toggle button transparent */
.navbar-custom .navbar-toggle .menu-bar-top,
.navbar-custom .navbar-toggle .menu-bar-middle,
.navbar-custom .navbar-toggle .menu-bar-bottom {
	-webkit-transition: 0.2s ease; transition: 0.2s ease;
} /* Give navbar spans transition times */
/* Make navbar-toggle spans look like a down arrow when hovering over
  when collapsed, and always when expanded */
.navbar-custom .navbar-toggle .menu-bar-top{
  margin-left: 0%;
  width: 22px;
}
.navbar-custom .navbar-toggle .menu-bar-middle{
  margin-left: 20%;
  width: 60%;
  margin-right: 20%;
}
.navbar-custom .navbar-toggle .menu-bar-bottom{
  margin-left: 40%;
  width: 20%;
  margin-right: 40%;
}
/* Make navbar-toggle spans have their full width when collapsed and not
  hovered over */
.navbar-custom .navbar-toggle.collapsed .menu-bar-top {
  margin-left: 0%;
  width: 22px;
}
.navbar-custom .navbar-toggle.collapsed .menu-bar-middle {
  margin-left: 0%;
  width: 22px;
}
.navbar-custom .navbar-toggle.collapsed .menu-bar-bottom {
  margin-left: 0%;
  width: 22px;
}

.navbar-custom .navbar-nav > .active > a{
  background-color:#98dafc;
}
.navbar-custom .navbar-nav > li > a:hover{
  background-color: #e1e3e4;
}
.project-span {
  display: inline;
  text-align: center;
}
.project-link {
  width: 47%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 5%;
  margin-top: 5%;
}
@media screen and (max-width:768px) {
  .project-link {
    
  }
}

.btn-contact {
  padding: 15px 20px 20px 15px;
  margin-top: 2%;
  margin-bottom: 2%;
  font-size: 20px;
  line-height: 1.3333333;
  border-radius: 6px;
  background-color: #feffff;
  border: transparent;
  width: 100%;
  color: #312c32;
  -webkit-transition: 0.2s ease; transition: 0.2s ease;
}

.btn-contact:hover {
  background-color: #e1e3e4;
  color: #312c32;
  width: 110%;
  margin-left: -5%;
}

.btn-contact .fa {
  color: #98dafc;
}
            
          
!
            
              $(document).on('click','.navbar-custom .navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});
            
          
!
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