Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

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

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 class="header">
    <div class="container">
      <h1 class="site-title">Super Cool Website!</h1>
    <span class="site-tagline">Because flexbox is super cool!</span>
  </div>
</header>
<nav class="main-nav">
  <div class="container">
    <ul>
      <li class="mobile-button"><a href="#">Menu</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Methods</a></li>
    <li><a href="#">Results</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  </div>
</nav>

<section class="content">
  <div class="full-bleed cool-photo"></div>

  <article class="post">
    <div class="container">
        <h2>This is the super cool section title</h2>
      <div class="columns">
        <div class="item">
          <h4 class="item-title">This is the post title</h4>
          <img src="http://lorempixel.com/600/150/nature" alt="Sample Image" class="item-image" />
          <p>Frankly, it's ludicrous to have these interlocking bodies and not...interlock. My Uncle Rory was the stodgiest taxidermist you've ever met by day. But I haven't spent any money! I was all... dead and frugal. The only way some people can find a purpose in life is by becoming obsessed with demons. Should I start this program over? It's a real burn, being right so often. Can't call to mom, can't say a word. Nobody could do that much decoupage without calling on the powers of darkness. I'll never leave. Not even if you kill me. If I could make you purtier, I would.</p> </div>

        <div class="item">
          <h4 class="item-title">This is the post title</h4>
          <p>Everybody started singing and dancing. I've got four brothers, none of them Democrats. They need to take seven and they might take yours. Any self-respecting demon should be living in a pit of filth or a nice crypt. Who's calling me? Everybody I know lives here. Can't even shout, can't even cry. And I'm a huge fan of the way you lose control and turn into an enormous green rage monster. I wanna hurt you, but I can't resist the sinister attraction of your cold and muscular body! In their resting state, our actives are as innocent and vulnerable as children.</p>
         <img src="http://lorempixel.com/600/200/cats" alt="Sample Image" class="item-image" /></div>
      </div>
    </div>   
  </article>  

  <div class="full-bleed cool-photo2"></div>
  
  <article class="post"> 
    <div class="container">
    
    <h3>This is another section sub-title</h3>
    
    <div class="columns thirds">
      <div class="item"> <h4 class="item-title">This is the post title</h4>
          <img src="http://lorempixel.com/400/100/nature" alt="Sample Image" class="item-image" />
        <p>From beneath you, it devours. Y'all see the man hanging out of the spaceship with the really big gun? No, Angel, it's not you. If I was blind, I would see you. Yes, I'd forgotten you're moonlighting as a criminal mastermind now.</p>  
      <p>The human body can be drained of blood in 8.6 seconds given adequate vacuuming systems. Actually, I was fired from a fry-cook opportunity. I'm a comfortador also. Oh my god, I find lentils completely incomprehensible. The human mind is like Van Halen; if you just pull out one piece and keep replacing it, it just degenerates.</p>
        <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div>
        
     </div>
      
      <div class="item">
          <h4 class="item-title">This is the post title</h4>
        <p>I saw their production of 'Giselle' in 1890. I wept like a baby, and I was evil! And zombies don't eat brains anyway, unless instructed to by their zombie master. It's about power and it's about women and you just hate those two words in the same sentence, don't you? She is the slayer. I recognize the council has made a decision, but given that it's a stupid-ass decision, I've elected to ignore it.</p>
         <p><img src="http://lorempixel.com/400/100/cats" alt="Sample Image" class="item-image" />
        </p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div></div>

      <div class="item">
        
          <h4 class="item-title">This is the post title</h4>
         <img src="http://lorempixel.com/400/100/fashion" alt="Sample Image" class="item-image" />
        <p>Everybody started singing and dancing. I saw their production of 'Giselle' in 1890. I wept like a baby, and I was evil! So, are we gonna sing army songs or something? I am obsolete. This must be what old people feel like, and Blockbuster. In their resting state, our actives are as innocent and vulnerable as children. I'm a rogue demon hunter now. Hey I could whip up a love slave any day I wanted. Oh my god, I find lentils completely incomprehensible. Well we could grind our enemies into talcum powder with a sledgehammer but, gosh, we did that last night.</p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div></div>

      <div class="item">
        
          <h4 class="item-title">This is the post title</h4>
        <p>It's funny how the Earth never opens up and swallows you when you want it to. Why can't you just masturbate like the rest of us? It's a real burn, being right so often. They need to take seven and they might take yours. We're old friends from Navy. Friends from Old Navy. I worked retail, he'd come in, buy slacks My entire existence was constructed by a sociopath in a sweater vest; what do you suggest I do?</p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div>
      </div>

      <div class="item">
        
          <h4 class="item-title">This is the post title</h4>
         <img src="http://lorempixel.com/400/100/nightlife" alt="Sample Image" class="item-image" />
        <p>Stay away from hyena people, or any loser athletes, or if you see anyone who's invisible. From beneath you, it devours. Somebody put her tiny little thinking cap on! We'll have to call it early quantum state phenomenon.</p> 
      <p>Only way to fit 5000 species of mammal on the same boat. I've seen the best and the worst of you. The only thing Willow was ever good for, the only thing I ever had going for me were those moments, just moments, where Tara would look at me and I was wonderful. We've got a bunch of fighters with nothing to hit, a wicca who won't-a, and the brains of our operation wears oven mitts. They rampaged through half the known world until Angel got his soul.</p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div></div>

      <div class="item">
        
          <h4 class="item-title">This is the post title</h4>
        <p>Oh my god you will never believe what happened at school today. We're old friends from Navy. Friends from Old Navy. I worked retail, he'd come in, buy slacks I'm not planning on presiding over the end of Western Civilization. She is the slayer. Everyone's a hero in their own way, in their own not that heroic way. Stay away from hyena people, or any loser athletes, or if you see anyone who's invisible. These endless days are finally ending in a blaze. What, you think this isn't real just because of all the vampires, and demons, and ex-vengeance demons, and the sister that used to be a big ball of universe-destroying energy? They need to take seven and they might take yours. I swallowed a bug.</p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div>
      </div>

      <div class="item">
          <h4 class="item-title">This is the post title</h4>
        <p>Love keeps her in the air when she ought to fall down. Bunnies aren't just cute like everybody supposes. And I understand with perfect clarity exactly what you are. Occasionally, I'm callous and strange. You can't spend the rest of your life waiting for Xander to wake up and smell the hottie.</p>
      <div class="social">
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-google"></i></a>
          <a href="#"><i class="fa fa-envelope"></i></a>
        </div>
      </div>
    </div>
  </div>
  </article>
</section>

<footer class="footer">
  <div class="container">
    <p>Footer Text, Yo. Made with love by <a href="http://cssgirl.com">Lindsey Di Napoli</a></p>
  </div>
</footer>
!

CSS 

              
                @import "compass/css3";

//Just a ltitle layout demo using flexbox. Color pallete found on Kuler - https://color.adobe.com/Theme-33-color-theme-5523423/

//Dummy text from Whedonipsum - www.commercekitchen.com/whedon-ipsum/

//Color definitions
$lightblue: #D7F7FE;
$darkblue: #1A577F;
$medblue: #1F729C;
$salmon: #FF6067;
$hellayellow: #F7EE1A;

//Typography
$base-font-size: 16px;
$base-font-family: 'Nunito', sans-serif;
$heading-font-family: 'Righteous', sans-serif;

//Convert px to em
@function em($px, $base: $base-font-size) {
  @return ($px / $base) * 1em;
}

body {
  background: $lightblue;
  font-family: $base-font-family;
  color: #222;
}

* {
  transition: all .65s ease;
  box-sizing: border-box;
  
}

//Centering Content 
.container {
  max-width: 75em;
  margin: 0 auto;
}

//Setting up the header so the "logo" and tagline site on each side of the header using flexbox. At 700px, they will stack.
.header {
  background: $salmon;
  color: white;
  padding: em(10px);
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .site-title, .site-tagline {
    font-weight: 400;
  }
  @media (max-width: 700px) {
    .site-title, .site-tagline {
      width: 100%;
      text-align: center;
    }
    .site-title {
      margin: 0;
    }
  }
}

.site-title, h1, h2, h3 {
  font-family: $heading-font-family;
  font-size: em(42px);
  color: darken($lightblue, 75%);
}
h3 {
  font-size: em(32px);
  color: desaturate($salmon, 10%);
}
.site-title {
  color: white;
}
.site-tagline {
  font-size: em(18px);
  font-style: italic;
}

// Navigation, including mobile version
.main-nav {
  background: $hellayellow;
  color: white;
  //transition: none;
  a {
    color: $darkblue;
    text-decoration: none;
  }
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    a {
      padding: em(15px) em(35px);
      display: flex;
      text-transform: uppercase;
      &:hover, &:focus {
        background: lighten($hellayellow, 25%);
        color: lighten($darkblue, 25%);
      }
    }
    .mobile-button a {
      position: absolute;
      left: -99999em;
    }
  }
  
  @media (max-width: 700px) {
    ul {
      flex-wrap: wrap;
       justify-content: flex-start;
      a {
        position: absolute;
        left: -99999em;
      }
      &.open {
        li {
          width: 100%;
          &.mobile-button a {
          	background: tint($hellayellow, 50%);
          	color: darken($medblue, 20%);
          }
        }
        a {
          position: static;
          
        }
      }
      .mobile-button {
        a {
          position: static;
        }
      }
    }
    a {
      width: 100%;
    }
  }
}

//Setting up full-bleed images, shrinking the height on smaller viewports 
.full-bleed {
  background-size: cover;
  min-height: 300px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width:700px) {
  .full-bleed {
    min-height: 175px;
  }
}

.cool-photo {
  background-image: url(http://lorempixel.com/1300/400/abstract)
}
.cool-photo2 {
  background-image: url(http://lorempixel.com/1300/400/food)
}

.post {
  padding: em(30px);
}

// Setting up our columns/grids. The first section has two columns side by side. The second section has a grid of 3 columns, that reduces down to two columns and then full width as browser is scaled down.
.columns {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    padding: em(25px);
    max-width: 47%;
    background: lighten($medblue, 45%);
    color: $darkblue;
    border-bottom: 5px solid $hellayellow;
    margin-bottom: em(35px);
    position: relative;
    overflow: hidden;
    .item-title {
      color: darken($lightblue, 85%);
      font-size: 24px;
      margin: 0 0 5px 0;
      font-family: $heading-font-family;
    }
    .item-image {
      max-width: 100%;
    }
    &:hover, &:focus {
      background: lighten($medblue, 58%);
      border-bottom-color: $salmon;
      .social {
        position: absolute;
        bottom: -21px;
        height: auto;
        z-index: 5;
        padding: 10px 0;
        .fa {
          color: $salmon;
          padding: 0 em(5px);
          &:hover {
            color: tint($darkblue, 40%);
          }
        }
      }
    }
  }
  @media (max-width: 660px) {
    .item {
      max-width: 100%;
      width: 100%;
    }
  }
   &.thirds {
     .item {
        max-width: 31%;
     }
     
     @media (max-width: 770px) {
       .item {
         max-width: 48%;
       }
       @media (max-width: 660px) {
       .item {
         max-width: 100%;
         width: 100%;
       }
     }
     }
    }
  .social {
    position: absolute;
    bottom: -60px;
    height: 0;
    z-index: -1;
    font-size: em(28px);
  }
}

.footer {
  background: $salmon;
  color: white;
  padding: em(15px);
  text-align: center;
  font-size: em(13px);
  a {
    color: $hellayellow;
    text-decoration: none;
    border-bottom: 1px solid;
  }
}

//With love <3 by Lindsey Di Napoli - CSSgirl
!

JS 

              
                /* Applying the "open" class when you click the Menu button, which triggers the mobile menu to open/close; Toggle Menu/Close menu text. */
$(document).ready(function() {
  $('.mobile-button a').click(function(e) {
	$(this).parent().parent().toggleClass('open');
  $(this).html($(this).html() == 'Close Menu' ? 'Menu' : 'Close Menu');
    e.preventDefault();
  });
});
!
999px

Console