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

              
                
<!-- Header Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<header>
  <div class="container"> <img src="https://jeffbredenkamp.neocities.org/geologo.png" alt="logo" class="logo">
    <div class="main_nav">
      <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
      <nav>
        <ul>
          <li><a class="smoothscroll" href="#about">About</a></li>
          <li><a class="smoothscroll" href="#features">Features</a></li>
          <li><a class="smoothscroll" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
    <div class="row hero">
      <div class="eight columns">
        <h1 class="header">Lorem Ipsum.</h1>
        <h2 class="subheader">At vero eos et accusamus et iusto odio dignissimos</h2>
        <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#"><img src="https://jeffbredenkamp.neocities.org/app-store-badge.png" class="appstorebutton btn" alt="Download on Apple Store"></a> <a href="#"><img src="https://jeffbredenkamp.neocities.org/google-play-badge.png" class="appstorebutton btn" alt="Download on Google Play"></a> </div>
      <div class="four columns"> <img src="https://jeffbredenkamp.neocities.org/phone2.png" class="phone device" alt="phone mockup"> </div>
    </div>
  </div>
</header>

<!-- About Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="about">
  <div class="container">
    <div class="eight columns">
      <div class="row">
        <h1>At vero eos et accusamus et iusto odio dignissimos.</h1>
      </div>
      <div class="row">
        <div class="six columns">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="six columns">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
    <div class="four columns"> <img src="https://jeffbredenkamp.neocities.org/geologo.png"> </div>
  </div>
</section>

<!-- Features Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="features">
  <div class="container">
    <div class="row">
      <div class="four columns">
        <div class="row">
          <div class="three columns"> <span class="typcn typcn-location-outline icon"></span> </div>
          <div class="nine columns">
            <h2>Location</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
        </div>
        <div class="row">
          <div class="three columns"> <span class="typcn typcn-lightbulb icon"></span> </div>
          <div class="nine columns">
            <h2>Ideas</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
        </div>
        <div class="row">
          <div class="three columns"> <span class="typcn typcn-spanner-outline icon"></span> </div>
          <div class="nine columns">
            <h2>Customisable</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
        </div>
      </div>
      <div class="four columns"> <img src="https://jeffbredenkamp.neocities.org/phone2.png" class="phoneFeature" alt="phone mockup"> </div>
      <div class="four columns">
        <div class="row">
          <div class="nine columns">
            <h2>Secure</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
          <div class="three columns"> <span class="typcn typcn-key-outline icon"></span> </div>
        </div>
        <div class="row">
          <div class="nine columns">
            <h2>Efficient</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
          <div class="three columns"> <span class="typcn typcn-battery-high icon"></span> </div>
        </div>
        <div class="row">
          <div class="nine columns">
            <h2>Powerful</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
          </div>
          <div class="three columns"> <span class="typcn typcn-flash-outline icon"></span> </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Contact Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section id="contact">
  <div class="container">
    <h1>Contact Us</h1>
    <div class="row">
      <form action="">
        <input type="text" placeholder="Name" name="name" required>
        <input type="email" placeholder="Email" name="email" required>
        <input type="number" placeholder="Telephone" name="number" required>
        <textarea placeholder="Message" name="message" required></textarea>
        <input type="submit" value="Send">
      </form>
    </div>
  </div>
</section>

<!-- Footer Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<footer>
  <div class="container">
    <div class="six columns"> <span class="typcn typcn-social-facebook socialIcons"></span> <span class="typcn typcn-social-twitter socialIcons"></span> <span class="typcn typcn-social-instagram socialIcons"></span> <span class="typcn typcn-social-linkedin socialIcons"></span> </div>
    <div class="six columns">
      <p>&copy; 2016</p>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800';
/* Global Styles
********************************************************************* */

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans';
	font-size: 16px;
	font-weight: 300;
	color: #525252;
}

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }

.column, .columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

.column, .columns {
  margin-left: 4%; }

.column:first-child, .columns:first-child {
  margin-left: 0; }

.one.column, .one.columns {
  width: 4.66667%; }

.two.columns {
  width: 13.33333%; }

.three.columns {
  width: 22%; }

.four.columns {
  width: 30.66667%; }

.five.columns {
  width: 39.33333%; }

.six.columns {
  width: 48%; }

.seven.columns {
  width: 56.66667%; }

.eight.columns {
  width: 65.33333%; }

.nine.columns {
  width: 74%; }

.ten.columns {
  width: 82.66667%; }

.eleven.columns {
  width: 91.33333%; }

.twelve.columns {
  width: 100%;
  margin-left: 0; }

.one-third.column {
  width: 30.66667%; }

.two-thirds.column {
  width: 65.33333%; }

.one-half.column {
  width: 48%; }

.offset-by-one.column, .offset-by-one.columns {
  margin-left: 8.66667%; }

.offset-by-two.column, .offset-by-two.columns {
  margin-left: 17.33333%; }

.offset-by-three.column, .offset-by-three.columns {
  margin-left: 26%; }

.offset-by-four.column, .offset-by-four.columns {
  margin-left: 34.66667%; }

.offset-by-five.column, .offset-by-five.columns {
  margin-left: 43.33333%; }

.offset-by-six.column, .offset-by-six.columns {
  margin-left: 52%; }

.offset-by-seven.column, .offset-by-seven.columns {
  margin-left: 60.66667%; }

.offset-by-eight.column, .offset-by-eight.columns {
  margin-left: 69.33333%; }

.offset-by-nine.column, .offset-by-nine.columns {
  margin-left: 78%; }

.offset-by-ten.column, .offset-by-ten.columns {
  margin-left: 86.66667%; }

.offset-by-eleven.column, .offset-by-eleven.columns {
  margin-left: 95.33333%; }

.offset-by-one-third.column, .offset-by-one-third.columns {
  margin-left: 34.66667%; }

.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
  margin-left: 69.33333%; }

.offset-by-one-half.column, .offset-by-one-half.columns {
  margin-left: 52%; }

.container:after, .row:after, .u-cf {
  content: "";
  display: table;
  clear: both; }

@media (max-width: 550px) {
  .column, .columns {
    margin-left: 0; }
  .container {
    width: 80%; }
  article {
    padding: 3rem 0; }
  .one.column, .one.columns {
    width: 100%; }
  .two.columns {
    width: 100%; }
  .three.columns {
    width: 100%; }
  .four.columns {
    width: 100%; }
  .five.columns {
    width: 100%; }
  .six.columns {
    width: 100%; }
  .seven.columns {
    width: 100%; }
  .eight.columns {
    width: 100%; }
  .nine.columns {
    width: 100%; }
  .ten.columns {
    width: 100%; }
  .eleven.columns {
    width: 100%; }
  .twelve.columns {
    width: 100%;
    margin-left: 0; }
  .one-third.column {
    width: 100%; }
  .two-thirds.column {
    width: 100%; }
  .one-half.column {
    width: 100%; } }

a {
	color: #FFFFFF;
}
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
/* Typography
********************************************************************* */

h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	margin: 0;
}
h1 {
	font-size: 44px;
}
/* Header Section
********************************************************************* */

header {
	background: #0469A7;
	min-height: 800px;
	padding: 0px 0 50px 0;
	box-sizing: border-box;
	background-image: url(https://jeffbredenkamp.neocities.org/bg.jpg);
	background-size: cover;
}
header h1 {
	font-size: 66px;
	color: #FFFFFF;
	padding-top: 70px;
	font-weight: 600;
}
header h2 {
	color: #FFFFFF;
}
header p {
	color: #FFFFFF;
}
.hero {
	margin-top: 80px;
}
.appstorebutton {
	display: inline-block;
	max-height: 50px;
	width: auto;
	padding-top: 40px;
	padding-right: 10px;
}
.phone {
	max-width: 220px;
	height: auto;
	float: right;
}
.logo {
	position: absolute;
	left: 20px;
	top: 20px;
	max-width: 100px;
	height: auto;
}
.main_nav {
	top: 0px;
	max-height: 50px;
	z-index: 999;
	width: 100%;
	padding-top: 10px;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	padding-bottom: 6px;
}
.socialIcons {
	color: #FFFFFF;
	font-size: 28px;
}

@media only screen and (max-width: 766px) {
.main_nav {
	padding-top: 10px;
}
}
.open-nav {
	max-height: 300px !important;
}
nav {
	width: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 766px) {
nav {
	width: 100%;
}
}
nav ul {
	list-style: none;
	overflow: hidden;
	text-align: right;
	padding: 0;
}

@media only screen and (max-width: 766px) {
nav ul {
	padding-top: 0px;
	margin-bottom: 22px;
	text-align: right;
	width: 100%;
}
}
nav ul li {
	display: inline-block;
	margin-left: 35px;
	line-height: 1.5;
	letter-spacing: 1px;
}

@media only screen and (max-width: 766px) {
nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
}
nav ul li:first-child {
	margin-top: 70px;
}
}
nav ul a {
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}
nav ul a:hover {
	color: #CFCFCF;
}
.mobile-toggle {
	display: none;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 30px;
}

@media only screen and (max-width: 766px) {
.mobile-toggle {
	display: block;
}
}
.mobile-toggle span {
	width: 30px;
	height: 4px;
	margin-bottom: 6px;
	background: #ffffff;
	display: block;
}
/* About Section
********************************************************************* */

#about {
	background: #F6F6F6;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
/* Features Section
********************************************************************* */

#features {
	padding: 80px 0 80px 0;
	min-height: 400px;
}
.phoneFeature {
	max-width: 220px;
	height: auto;
	display: block;
	margin: 0 auto;
}
#features h2 {
	padding-top: 20px;
}
/* Contact Section
********************************************************************* */

#contact {
	background: #F6F6F6;
	padding: 80px 0 80px 0;
	min-height: 400px;
}
form {
	font-family: 'Open Sans';
	box-sizing: border-box;
	margin-top: 50px;
}
textarea {
	float: left;
	width: 100%;
	max-width: 100%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.5rem;
	border-radius: 0.3rem;
	background: #ffffff;
	color: #525252;
	font-family: 'Open Sans';
	font-size: 18px;
}
input {
	float: left;
	width: 100%;
	max-width: 100%;
	border: none;
	margin: 0.5rem 0;
	padding: 0.5rem;
	border-radius: 0.3rem;
	background: #ffffff;
	color: #525252;
	font-family: 'Open Sans';
	font-size: 18px;
}
input[type=submit], textarea[type=submit] {
	background: #0D8CB0;
	color: #fff;
	width: auto;
}
input::placeholder, textarea::placeholder {
 color: #525252;
}
input.error, textarea.error {
	background: #AD4747;
	color: #fff;
}
input.error::placeholder, textarea.error::placeholder {
 color: black;
}
textarea {
	height: 10rem;
}
/* Footer Section
********************************************************************* */

footer {
	background-color: #424242;
	padding: 50px 0 50px 0;
}
footer p {
	color: #FFFFFF;
	text-align: right;
}
.icon {
	font-size: 48px;
}

/* Media Queries
********************************************************************* */

@media only screen and (max-width: 766px) {
header h1 {
	font-size: 46px;
	padding-top: 10px;
}
.hero {
	margin-top: 40px;
}
.appstorebutton {
	padding-top: 0px;
}
.logo {
	max-width: 70px;
}
}

@media only screen and (max-width: 550px) {
.mobile-toggle {
	right: 0px;
	top: 20px;
}
 .phone {
	display: none;
}
}

              
            
!

JS

              
                // Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.main_nav').removeClass('open-nav');
    } else {
        $('.main_nav').addClass('open-nav');
    }
});

$('.main_nav li a').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_nav').removeClass('open-nav');
    }
});



// Smooth Scrolling

jQuery(document).ready(function($) {

   $('.smoothscroll').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 800, 'swing', function () {
	        window.location.hash = target;
	    });
	});

});

TweenMax.from(".device", 0.8, {y: 50, opacity: 0, ease:Back.easeOut, delay: 1});
TweenMax.from(".header", 0.8, {opacity: 0, x: 30, delay: 0.2});
TweenMax.from(".subheader", 1, {opacity: 0, x: -30, delay: 0.6});
TweenMax.from(".paragraph", 1, {opacity: 0, delay: 1, y: 20});
TweenMax.from(".btn", 0.5, {y: 10, opacity: 0, delay: 1.6});  
              
            
!
999px

Console