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

              
                .grid-wrapper

  // Navigation/Header
  
  header.masthead
    .masthead-inner
      header.site-title
        h1 Company X
      nav.main-nav
        ul.menu
          li 
            a(href="#") About
          li 
            a(href="#") Services
          li 
            a(href="#") Contact
          li 
            a(href="#") Sign In

  // Hero Image

  section.hero
    .hero-inner
      h2 Some Amazing Text Goes Here

  // 3-Up Features

  section.features
    .features-inner
      article.features-group
        .features-image
          img(src="https://unsplash.it/600/400?image=700")
        .features-text
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum unde officiis consectetur atque cum obcaecati nostrum hic, et ratione consequatur laborum itaque ipsam quo consequuntur, nisi assumenda natus laboriosam sapiente.
      article.features-group
        .features-image
          img(src="https://unsplash.it/600/400?image=740")
        .features-text
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum unde officiis consectetur atque cum obcaecati nostrum hic, et ratione consequatur laborum itaque ipsam quo consequuntur, nisi assumenda natus laboriosam sapiente.
      article.features-group
        .features-image
          img(src="https://unsplash.it/600/400?image=800")
        .features-text
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum unde officiis consectetur atque cum obcaecati nostrum hic, et ratione consequatur laborum itaque ipsam quo consequuntur, nisi assumenda natus laboriosam sapiente.

  // Call Out

  section.callout
    .callout-inner
      h3 Lorem ipsum dolor sit, amet consectetur adipisicing elit, cupiditate illo
      
      
  // Blog

  section#blog
    .blog-inner
      .blog-grid
        .blog-image
          img(src="https://unsplash.it/600/300?image=400")
        .blog-text
          p.blog-summary Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis beatae provident obcaecati quos culpa cum tenetur similique, ex accusantium veniam!
          a.button(href="#") Read More
        .blog-image
          img(src="https://unsplash.it/600/300?image=350")
        .blog-text
          p.blog-summary Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis beatae provident obcaecati quos culpa cum tenetur similique, ex accusantium veniam!
          a.button(href="#") Read More
        .blog-image
          img(src="https://unsplash.it/600/300?image=320")
        .blog-text
          p.blog-summary Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis beatae provident obcaecati quos culpa cum tenetur similique, ex accusantium veniam!
          a.button(href="#") Read More
      .blog-cta
        a.button.ghost-button(href="#") More stories on our blog
    

  // Footer

  footer#footer
    .footer-inner
      .footer-grid
        .footer-group
          .footer-heading
            h4 Company
          .footer-links
            ul
              li 
                a(href="#") Link1
              li 
                a(href="#") Link2
              li 
                a(href="#") Link3
                
        .footer-group
          .footer-heading
            h4 Store
          .footer-links
            ul
              li 
                a(href="#") Link1
              li 
                a(href="#") Link2
              li 
                a(href="#") Link3
                
        .footer-group
          .footer-heading
            h4 About
          .footer-links
            ul
              li 
                a(href="#") Link1
              li 
                a(href="#") Link2
              li 
                a(href="#") Link3
                
        .footer-group
          .footer-heading
            h4 Products
          .footer-links
            ul
              li 
                a(href="#") Link1
              li 
                a(href="#") Link2
              li 
                a(href="#") Link3
                
        .footer-group
          .footer-heading
            h4 Services
          .footer-links
            ul
              li 
                a(href="#") Link1
              li 
                a(href="#") Link2
              li 
                a(href="#") Link3
              
            
!

CSS

              
                body
  margin: 0
  font-family: 'Noto Sans', sans-serif
  background: #f9f9f9
  
.button
  padding: .5rem 1rem
  background:
    color: #333
  color: white
  text-decoration: none
  font-size: .9rem
  display: inline-block
  border-radius: 3px
  transition: background-color 200ms ease
  
  &:hover
    background:
      color: rgba(#333, 0.8)
    
.ghost-button
  background: transparent
  border: 3px solid #333
  color: #333
  text-transform: uppercase
  font-weight: 700
  transition: background-color 200ms ease, color 200ms ease
  padding: 1rem
  
  &:hover
    background: #333
    color: white
    
  
// Set up 12-col grid

.grid-wrapper
  display: grid
  grid-template-columns: repeat(12, 100px) // fixed width
  grid-template-columns: repeat(12, 1fr) // fluid width
  grid-template-rows: auto
  grid-column-gap: 30px
  
.masthead,
.hero,
.features,
.callout,
#blog,
#footer
  grid-column: 1 / -1
  
// Navigation/Header

.masthead
  background: 
    color: #333
  color: #fff

.masthead-inner
  text-align: center
    
@media (min-width: 600px)
  .masthead-inner
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    align-items: center
    padding: .5rem 1rem

.site-title  
  h1
    margin: 0
  
.menu
  list-style: none
  padding: 0
  margin: 0
  display: flex
  justify-content: center
  padding: 1rem 0
  
  a
    color: #fff
    text-decoration: none
    
    &:hover
      color: rgba(#fff, 0.8)
  
  li
    margin: 0 .5rem

// Hero

.hero
  background:
    image: url(https://unsplash.it/2000/1500?image=1067)
    position: center
    size: cover
    repeat: no-repeat
  height: 50vh
  display: flex
  // justify-content: center
  align-items: center
  
// color overlay
.hero
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://unsplash.it/2000/1500?image=1067)
    position: center
    size: cover
    repeat: no-repeat
  
.hero-inner
  max-width: 80vw
  margin: auto
  padding-left: 2rem
  
  h2
    font-size: 2.5rem
    text-align: center
    color: #fff
    line-height: 1.2
    
@media (min-width: 600px)
  .hero-inner
    max-width: 50vw
    margin: 0
    
    h2
      text-align: left
    
// 3-Up Features

.features
  padding: 2rem
  
@media (min-width: 500px)
  .features
    padding: 4rem
  
@media (min-width: 500px)
  .features-inner
    display: flex
    max-width: 800px
    margin: auto
    
.features-group
  padding-bottom: 2rem
  
@media (min-width: 500px)
  .features-group
    flex: 0 1 30vw
    padding-bottom: 0

    &:nth-child(2)
      margin: 0 2rem
  
.features-image
  img
    width: 100%

// Call Out

.callout
  // background: #333
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=1019)
    position: center center
    size: cover
    repeat: no-repeat
  color: white
  padding: 4rem 1rem
  display: flex
  justify-content: center
  align-items: center
  
.callout-inner
  text-align: center
  
  h3
    font-size: 2rem

// Blog

#blog
  padding: 2rem 0
  
@media (min-width: 700px)
  #blog
    padding: 5rem 0

.blog-inner
  max-width: 800px
  margin: auto
  padding: 0 1rem
  
.blog-grid
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: auto
  // grid-column-gap: 30px
  grid-row-gap: 1rem
  
@media (min-width: 700px)
  .blog-grid
    display: grid
    grid-template-columns: 300px 1fr
    grid-template-rows: auto
    grid-column-gap: 30px
    grid-row-gap: 3rem

.blog-image
  img
    width: 100%
    
.blog-text
  margin-bottom: 2rem
    
.blog-summary
  margin-top: 0
  
.blog-cta
  margin: 2rem 0 0
  
  a
    font-size: .8rem
    
@media (min-width: 700px)
  .blog-cta
    margin: 3rem 0 0
    text-align: center
    
    a
      font-size: 1rem
    
// Footer

#footer
  background:
    color: #333
  color: white
  // padding: 2rem 1rem
  display: flex
  justify-content: center
  align-items: center
  text-align: center

@media (min-width: 400px)
  #footer
    display: block
    text-align: left
  
@media (min-width: 400px)
  .footer-grid
    display: grid
    grid-template-columns: repeat(2, 1fr)
    grid-template-rows: auto
    grid-gap: 1rem
    justify-items: center
    max-width: 1000px
    margin: auto
    
@media (min-width: 768px)
  .footer-grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    grid-template-rows: auto
    grid-gap: 1rem
    justify-items: center
    max-width: 1000px
    margin: auto
  
@media (min-width: 1000px)
  .footer-grid
    display: grid
    grid-template-columns: repeat(5, 1fr)
    grid-template-rows: auto
    grid-gap: 1rem
    justify-items: center
    max-width: 1000px
    margin: auto
  
.footer-heading
  h4
    font-weight: 400
    font-size: 1.2rem
  
@media (min-width: 1170px)
  .footer-group
    width: 200px
  
.footer-links
  ul
    list-style: none
    padding: 0
    
    li
      padding: .5rem 0
        
      a
        color: white
        transition: color 200ms ease
        
        &:hover
          color: rgba(white, 0.8)
              
            
!

JS

              
                
              
            
!
999px

Console