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

              
                nav.nav
  ul
    li.logo <i class="zmdi zmdi-hq"></i>
    a(href="#")
      li.menu-open <i class="zmdi zmdi-menu"></i> 
      li.menu-close <i class="zmdi zmdi-close"></i>
      
.image
  section.article
    .article-inner
      header.article-head
        h1 Never Be Afraid to Scale the Heights
      .article-subhead
        h2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nisi harum cumque labore odio cum modi. Modi labore explicabo architecto dolores! Rem quidem veniam, aliquam.
      .article-text
        p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad accusamus dolorum consequuntur excepturi, beatae voluptate dolores quisquam non quo fugit reiciendis repellat quia corrupti vitae eligendi facilis voluptates nobis, quae earum numquam. Eligendi error nulla maxime soluta ipsa dicta ea eaque perferendis et. Quos, recusandae, aspernatur. Officia tenetur ducimus nulla voluptas aliquid, harum iste repellat beatae sint facilis nihil dolore tempora quibusdam labore tempore soluta commodi repellendus, provident similique! Blanditiis odit, expedita illo, dolorum nostrum, distinctio asperiores nesciunt doloribus sit voluptatem ex, sapiente consectetur dolore pariatur voluptate. Vel maxime deserunt quisquam perspiciatis autem dicta, nihil assumenda corporis a rem officia.

        p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad accusamus dolorum consequuntur excepturi, beatae voluptate dolores quisquam non quo fugit reiciendis repellat quia corrupti vitae eligendi facilis voluptates nobis, quae earum numquam. Eligendi error nulla maxime soluta ipsa dicta ea eaque perferendis et. Quos, recusandae, aspernatur. Officia tenetur ducimus nulla voluptas aliquid, harum iste repellat beatae sint facilis nihil dolore tempora quibusdam labore tempore soluta commodi repellendus, provident similique! Blanditiis odit, expedita illo, dolorum nostrum, distinctio asperiores nesciunt doloribus sit voluptatem ex, sapiente consectetur dolore pariatur voluptate. Vel maxime deserunt quisquam perspiciatis autem dicta, nihil assumenda corporis a rem officia.

        p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad accusamus dolorum consequuntur excepturi, beatae voluptate dolores quisquam non quo fugit reiciendis repellat quia corrupti vitae eligendi facilis voluptates nobis, quae earum numquam. Eligendi error nulla maxime soluta ipsa dicta ea eaque perferendis et. Quos, recusandae, aspernatur. Officia tenetur ducimus nulla voluptas aliquid, harum iste repellat beatae sint facilis nihil dolore tempora quibusdam labore tempore soluta commodi repellendus, provident similique! Blanditiis odit, expedita illo, dolorum nostrum, distinctio asperiores nesciunt doloribus sit voluptatem ex, sapiente consectetur dolore pariatur voluptate. Vel maxime deserunt quisquam perspiciatis autem dicta, nihil assumenda corporis a rem officia.
        
section.menu
  section.latest
    h2.menu-section-header Latest Articles
    ul.media
      li.latest-group
        .latest-image
          img(src="https://unsplash.it/300?image=1001")
        .latest-summary
          a.title-link(href="")
            h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!
          a.read-more(href="#") continue reading <i class="zmdi zmdi-chevron-right"></i>
      li.latest-group
        .latest-image
          img(src="https://unsplash.it/300?image=1012")
        .latest-summary
          a.title-link(href="")
            h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!
          a.read-more(href="#") continue reading <i class="zmdi zmdi-chevron-right"></i>
      li.latest-group
        .latest-image
          img(src="https://unsplash.it/300?image=1013")
        .latest-summary
          a.title-link(href="")
            h3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, asperiores tenetur enim.
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nam, neque harum aliquid alias cupiditate ut, quos nihil commodi, sapiente ad cumque magni minus doloremque!
          a.read-more(href="#") continue reading <i class="zmdi zmdi-chevron-right"></i>
      li.latest-group
        a.read-more(href="#") View All Articles <i class="zmdi zmdi-chevron-right"></i>
          
  section.categories
    h2.menu-section-header Categories
    ul.categories-list
      li.categories-group
        a(href="#").categories-header Category 1
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut magni dolorem sunt quisquam repudiandae quasi voluptatibus, nisi optio illo accusamus.
      li.categories-group
        a(href="#").categories-header Category 2
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, adipisci. Quos debitis officia labore corrupti commodi neque est numquam optio!
      li.categories-group
        a(href="#").categories-header Category 3
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum incidunt officia commodi doloremque esse magnam dolor ut recusandae reiciendis tenetur.
      li.categories-group
        a(href="#").categories-header Category 4
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut magni dolorem sunt quisquam repudiandae quasi voluptatibus, nisi optio illo accusamus.
      li.categories-group
        a(href="#").categories-header Category 5
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, adipisci. Quos debitis officia labore corrupti commodi neque est numquam optio!
      li.categories-group
        a(href="#").categories-header Category 6
        .categories-summary
          p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum incidunt officia commodi doloremque esse magnam dolor ut recusandae reiciendis tenetur.
  section.about
    h2.menu-section-header About
    ul.about-list
      li.about-text
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil laboriosam dolor eaque sapiente debitis repudiandae laudantium ratione odit! Doloribus suscipit fugiat voluptas maxime dolor illo quos debitis quibusdam architecto consequatur officia reprehenderit eum, deserunt quis? Non perferendis, quae, eos distinctio, eum beatae animi libero enim velit autem rerum aliquam harum.
        
      li
        ul.profile-list
          li.profile-group
            .profile-image
              img(src="http://fillmurray.com/300/300")
            .profile-meta
              .profile-name
                h3 John Doe
                h4.profile-title | Founder/CEO
              .profile-summary
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo
              .profile-social
                p 
                  a(href="#") <i class="zmdi zmdi-facebook-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-twitter-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-linkedin-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-email"></i>
          li.profile-group
            .profile-image
              img(src="http://fillmurray.com/300/300")
            .profile-meta
              .profile-name
                h3 Jane Doe
                h4.profile-title | CFO
              .profile-summary
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo
              .profile-social
                p 
                  a(href="#") <i class="zmdi zmdi-facebook-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-twitter-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-linkedin-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-email"></i>
          li.profile-group
            .profile-image
              img(src="http://fillmurray.com/300/300")
            .profile-meta
              .profile-name
                h3 Bill Guy
                h4.profile-title | Designer
              .profile-summary
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, explicabo
              .profile-social
                p 
                  a(href="#") <i class="zmdi zmdi-facebook-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-twitter-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-linkedin-box"></i>
                p 
                  a(href="#") <i class="zmdi zmdi-email"></i>
              
            
!

CSS

              
                body
  margin: 0
  color: rgba(white, 0.8)
  font-family: 'Roboto', sans-serif
  
.nav
  position: fixed
  top: 0
  right: 0
  z-index: 50
  
  ul
    list-style: none
    padding: 0
    margin: 0
    
    a
      color: rgba(white, 0.7)
      text-decoration: none
      
      &:hover
        color: white
      
    @media (min-width: 500px)
      ul
        list-style: none
        padding: 0
        margin: 0
        display: flex
        align-items: center
        
    li
      margin: 1rem 1rem 0
      font-size: 2rem
      text-align: center
        
    @media (min-width: 500px)
      li
        margin: 1rem
        font-size: 2rem
      
  .menu-open
    font-size: 1.5rem
    
  .menu-close
    display: none
    color: black
    
@media (min-width: 500px)
  .nav
    position: fixed
    top: 0
    right: 1rem
    z-index: 50
    
.menu
  position: fixed
  top: 0
  left: 100vw
  height: 100vh
  width: 100%
  overflow-y: auto
  background: linear-gradient(rgba(#f9f9f9, 0.5), rgba(#f9f9f9, 0.5)),  url(https://www.toptal.com/designers/subtlepatterns/patterns/lightpaperfibers.png)
    size: cover
    repeat: no-repeat
  z-index: 25
  color: black
  transition: all 500ms ease

@media (min-width: 768px)
  .menu
    display: flex
    justify-content: space-between
    
    
.menu-in
  animation: menuSlideIn 500ms ease 
  left: 0
    
@keyframes menuSlideIn
  0%
    transform: translateX(100vw)
    opacity: 0
  100%
    transform: translateX(0)
    opacity: 1
  
.menu-section-header
  // margin-bottom: 2rem
  
  h2
    margin: 0
  
.categories,
.about,
.latest
  overflow-y: auto

@media (min-width: 768px)
  .categories,
  .about,
  .latest
    // height: 100vh
    overflow-y: auto
    
    &::-webkit-scrollbar
      display: none
    
.categories
  padding: 1rem
  flex: 0 1 33%

@media (min-width: 768px)
  .categories
    padding: 1rem
    flex: 0 1 33%
    border-right: 1px solid rgba(black, 0.15)
    border-left: 1px solid rgba(black, 0.15)
  
.about,
.latest
  padding: 1rem
  flex: 0 1 33%
  
.media
  list-style: none
  padding: 0
  
.latest-group
  margin-bottom: 2rem
  padding-bottom: 2rem
  border-bottom: 1px solid rgba(black, 0.1)
  
  &:last-child
    border: 0
    margin-bottom: 0
    padding-bottom: 0
  
@media (min-width: 400px)
  .latest-group
    display: flex
    margin-bottom: 2rem
    padding-bottom: 2rem
    border-bottom: 1px solid rgba(black, 0.1)
 
@media (min-width: 768px)
  .latest-group
    display: block
    margin-bottom: 2rem
    padding-bottom: 2rem
    border-bottom: 1px solid rgba(black, 0.1)
  
@media (min-width: 1368px)
  .latest-group
    display: flex
    margin-bottom: 2rem
    padding-bottom: 2rem
    border-bottom: 1px solid rgba(black, 0.1)
    
.latest-image
  margin-bottom: 1rem
  img
    width: 100%
   
@media (min-width: 400px)  
  .latest-image
    margin-right: 1rem

    img
      width: 180px
    
@media (min-width: 768px)  
  .latest-image
    margin-right: 1rem

    img
      width: 100%
  
@media (min-width: 1368px)  
  .latest-image
    margin-right: 1rem

    img
      width: 180px
    
.latest-summary
  display: flex
  flex-direction: column
  justify-content: space-between
  
  p,
  h3
    margin: 0 0 1rem
    
.title-link
  text-decoration: none
    
.read-more
  text-decoration: none

  i
    margin-left: .5rem
   
@media (min-width: 1368px)
  .read-more
    text-align: right
      
.categories-header
  text-decoration: none
    
.categories-list,
.about-list,
.profile-list
  list-style: none
  padding: 0
  

.categories-group,
.about-text
  border-bottom: 1px solid rgba(black, 0.1)
  margin-bottom: 1rem
  padding-bottom: 1rem
  
.categories-group
  &:last-child
    border: 0
    margin-bottom: 0
    padding-bottom: 0
  
.about-list
  margin-bottom: 0

.profile-group
  margin: 2rem 0 3rem
  
@media (min-width: 400px)
  .profile-group
    margin: 2rem 0 3rem
    display: flex
  
@media (min-width: 768px)
  .profile-group
    display: block
    margin: 2rem 0
  
@media (min-width: 1368px)
  .profile-group
    display: flex
    margin: 2rem 0 0
    
.profile-image
  img
    width: 100%
    margin-bottom: 1rem

@media (min-width: 400px)
  .profile-image
    margin-right: 1rem
  
.profile-name
  display: flex
  align-items: center
  
  h3
    margin: 0 .5rem 0 0
   
.profile-meta
  margin: 0

@media (min-width: 768px)
  .profile-meta
    margin: 1rem 0
  
.profile-title
  margin: 0
  font-weight: 400
  font-size: 1rem
  
@media (min-width: 1368px)
  .profile-title
    margin: 0
  
.profile-social
  display: flex
  font-size: 1.5rem
  
  p
    margin: 0 1rem 0 0
    
  
.image
  background:
    image: linear-gradient(90deg, rgba(black, 0.7), rgba(black, 0)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/nathan-anderson-111072_cr.jpg)
    size: cover
    position: left center
    repeat: no-repeat
  height: 100vh
  position: fixed
  top: 0
  left: 0
  overflow-y: auto

.article-inner
  // width: 100%
  padding: 1rem
  overflow-y: auto
  padding-bottom: 5rem
  
@media (min-width: 600px)
  .article-inner
    width: 60%
    padding: 2rem 5rem
    
@media (min-width: 1200px)
  .article-inner
    width: 50%
    padding: 0 2rem
    
.article-head
  
  h1
    font-size: 3rem
    text-transform: uppercase
    line-height: 1.1
  
  @media (min-width: 400px)
    h1
      font-size: 4rem
    
  @media (min-width: 900px)
    h1
      font-size: 5rem
    
.article-subhead
  font-family: 'Roboto Condensed', sans-serif
  
  h2
    font-weight: 400
    font-size: 1.3rem
    margin: 2rem 0 3rem
    
  @media (min-width: 900px)
    h2
      font-size: 1.5rem
    
  @media (min-width: 900px)
    h2
      font-size: 2rem
    
.article-text
  line-height: 1.4
  font-weight: 400
  // font-size: .9rem
              
            
!

JS

              
                $('.menu-open').on('click', function() {
  $(this).hide();
  $('.logo').hide();
  $('.menu').addClass('menu-in');
  $('.menu-close').show();
});

$('.menu-close').on('click', function() {
  $(this).hide();
  $('.menu').removeClass('menu-in');
  $('.menu-open').show();
  $('.logo').show();
});
              
            
!
999px

Console