cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              .page-wrapper

  .toolbar        
    

    
      
      
  .grid-wrapper
    .grid-item
      .grid-item-inner
        h3.tile-heading Lorem ipsum dolor
    .grid-item.logo
      a(href="#")
        p.icon-logo <i class="zmdi zmdi-apple"></i>
    .grid-item
      a(href="#")
        p.icon-shop <i class="zmdi zmdi-shopping-basket"></i>
    .grid-item.article-link(data-tab="article-1")
      .grid-item-inner
        h3.tile-heading Lorem ipsum dolor
        p.tile-text Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum exercitationem tenetur accusamus suscipit neque ea necessitatibus nostrum earum commodi id 
        a.go-link(href="#")
          p.icon-go <i class="zmdi zmdi-arrow-right"></i>
    .grid-item
      a(href="#")
        p.icon-menu <i class="zmdi zmdi-menu"></i>
    .grid-item.article-link(data-tab="article-2")
      .grid-item-inner
        //- h3.tile-heading Lorem ipsum dolor
        p.tile-text Lorem ipsum dolor sit amet, consectetur adipisicing elit
    .grid-item
    
    .grid-item
      a.fullscreen.grid-item-inner(href="#")
        p.icon-fullscreen <i class="zmdi zmdi-arrow-right-top"></i>
        p.icon-exit-fullscreen.hide <i class="zmdi zmdi-arrow-left-bottom"></i>



  nav.nav.hide
    .nav-inner
      a(href="#")
        p.icon-menu-close <i class="zmdi zmdi-close"></i>
      ul
        li.icon-apple <i class="zmdi zmdi-apple"></i>
        a(href="#", data-tab="shop")
          li Shop
        a(href="#")
          li Link 2
        a(href="#")
          li Link 3



  section#shop.page.hide
    .page-inner
      header
        h2 Shop
      section.shop-wrapper
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $13.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $9.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $20.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $2.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $99.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase
        .shop-item
          img(src="https://placehold.it/800x1200")
          p.shop-item-price $139.99
          h4.shop-item-header Lorem ipsum dolor
          p.shop-item-summary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.
          button.shop-item-button Purchase


  section#about.page.hide
    .page-inner
      header
        h2 About
      article
        p.page-intro Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quam, asperiores in sapiente labore, harum quis quidem quo ratione illo magnam illum eum corporis, ipsam sunt numquam iste unde earum. Excepturi repellendus dignissimos accusamus, nobis harum reprehenderit tempora placeat similique ipsam minima nisi labore magni id, cum voluptatem praesentium, reiciendis.

      section.accordion
        details(role="group") 
          summary.accordion-heading Contact Info
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!
        details(role="group") 
          summary.accordion-heading Apple and the Environment
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!
        details(role="group") 
          summary.accordion-heading Newsroom
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!
        details(role="group") 
          summary.accordion-heading Supplier Responsibility
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!
        details(role="group") 
          summary.accordion-heading Apple Job Creation
          p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!

  article#article-1.page.hide
    header
      img.featured-image(src="https://unsplash.it/1500?image=1068")
    .page-inner
      h2.featured-headline Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio
      article.featured-article
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?

        .featured-image-strip
          .featured-image-strip-inner
            img(src="https://unsplash.it/1500?image=479")
            img(src="https://unsplash.it/1500?image=447")
            img(src="https://unsplash.it/1500?image=434")
          p.direction-arrows <i class="zmdi zmdi-swap"></i>

        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.


  article#article-2.page.hide
    header
      img.featured-image(src="https://unsplash.it/1500?image=1027")
    .page-inner
      h2.featured-headline Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio
      article.featured-article
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?

        .featured-image-strip
          .featured-image-strip-inner
            img(src="https://unsplash.it/1500?image=424")
            img(src="https://unsplash.it/1500?image=407")
            img(src="https://unsplash.it/1500?image=375")
            img(src="https://unsplash.it/1500?image=365")
            img(src="https://unsplash.it/1500?image=257")
          p.direction-arrows <i class="zmdi zmdi-swap"></i>

        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.
        
  a.page-close(href="#")
    p.icon-page-close.hide <i class="zmdi zmdi-close"></i>
            
          
!
            
              body
  margin: 0
  font-family: 'Pragati Narrow', sans-serif
  
.page-wrapper
  max-width: 425px
  margin: auto
  position: relative

.grid-wrapper
  display: grid
  grid-template-columns: repeat(4, 1fr)
  grid-template-rows: repeat(4, 100px) 1fr
  align-content: stretch
  height: 90vh

.grid-item
  position: relative
  background:
    color: red
  color: white
  display: flex
  justify-content: center
  align-items: center
  
  p
    margin: 0

  &:nth-child(1)
    grid-column: 2 / span 3
    grid-row: 1
    background: linear-gradient(rgba(black, 0.2), rgba(black, 0.2)), url(https://unsplash.it/1500?image=479)
      color: blue
      size: cover
      position: center center
      repeat: no-repeat
    text-align: right
    // align-items: flex-end

  &:nth-child(5)
    background:
      color: black
    
  &:nth-child(2)
    background:
      color: black
    color: white
    
  &:nth-child(3)
    background:
      color: rgba(blue, 0.7)
    color: white
  
  &:nth-child(4)
    grid-column: 1 / span 4
    grid-row: 2 / span 2
    background:
      color: orange
      image: linear-gradient(rgba(blue, 0.3), rgba(blue, 0.3)), url(https://unsplash.it/1500?image=1068)
      size: cover
      position: center
      repeat: no-repeat
    padding: 1rem
    
  &:nth-child(6)
    grid-column: 1 / span 2
    grid-row: 4 / span all
    background:
      color: pink
      image: url(https://unsplash.it/1500?image=1027)
      size: cover
      position: center
      repeat: no-repeat
    align-items: flex-end
    padding: 1rem
    
  &:nth-child(7)
    grid-column: 3 / span 2
    grid-row: 4 / -1
    background:
      color: pink
      image: url(https://unsplash.it/1500?image=580)
      size: cover
      position: center
      repeat: no-repeat
    
  &:nth-child(8)
    background:
      color: rgba(white, 0.3)
    grid-column: 4 / span 1
    grid-row: 1
    height: 40px
    width: 40px
    justify-self: end
    
.icon-menu,
.icon-shop
  font-size: 1.5rem
  padding: .5rem .5rem 0 .5rem
  color: white
  
.icon-shop
  font-size: 1.2rem
    
.icon-logo
  font-size: 1.4rem
  color: white
  
.go-link
  position: absolute
  right: 1rem
  bottom: 1rem
  width: 1.5rem
  border: 1px solid white
  text-align: center
  color: white
  
  
.tile-heading
  font-weight: 400
  font-size: 1.2rem
  margin: 0
  line-height: 1
  margin-bottom: .5rem
  
.tile-text
  font-size: .9rem
  line-height: 1
  
  
// navigation

.nav
  position: fixed
  top: 0
  left: 50%
  transform: translateX(-50%)
  background:
    color: black
  color: white
  width: 100vw
  height: 100%
  display: flex
  justify-content: center
  max-width: 425px
  
  ul
    list-style: none
    padding: 0
    
    a
      font-size: 1.5rem
      text-decoration: none
      color: white
    
    li
      padding: 1rem 0
      
    .icon-apple
      text-align: center
      font-size: 3rem
      
.icon-menu-close
  position: absolute
  bottom: 0
  left: 50%
  transform: translateX(-50%)
  font-size: 2rem
  color: white
  z-index: 100
  
.hide
  display: none
  
// Shop

.page
  position: fixed
  top: 0
  left: 50%
  transform: translateX(-50%)
  width: 100vw
  height: 100vh
  overflow-y: auto
  background: white
  max-width: 425px
  
  img
    width: 100%
  
.page-inner
  padding: 1rem
  margin-bottom: 3rem
  
.page-intro
  line-height: 1.2

.shop-wrapper
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-gap: 1rem
  
.shop-item
  margin-bottom: 2rem
  img
    width: 100%
    
.shop-item-header
  margin: 0
    
.shop-item-price
  font-size: 1.5rem
    
.shop-item-summary
  line-height: 1.2
  margin: .5rem 0 2rem
  
.shop-item-button
  border: 1px solid black
  background:
    color: transparent
  // color: white
  padding: .7rem 1rem
  width: 100%
  
  
// About

.accordion-heading
  font-size: 1.2rem

details[open]  
  summary::before
    transform: rotate(90deg) // rotates the arrow before the question
  summary
    outline: 1px solid #ccc

summary
  display: block // required to remove default triangles in Firefox
 
  // hides the default triangle before the summary
  &::-webkit-details-marker
    display: none
  
  // replace the default triangle with a new symbol
  &:before
    display: inline-block // allows rotating the pseudo element
    content: '\203A'
    margin-right: .5rem
    font-weight: bold
    font-size: 1.2rem
    // transition: all 300ms ease // creates animation for rotating marker
  outline: none
  padding: 0 .3rem
  
  
.fade-in
  animation: fadeIn 300ms ease
  opacity: 1
  
@keyframes fadeIn
  0%
    opacity: 0
  100%
    opacity: 1
  
// Featured articles

.featured-headline
  line-height: 1.2
  
.featured-article
  line-height: 1.3
  
.featured-image-strip
  margin: 2rem 0 0
  
.featured-image-strip-inner
  display: flex
  width: 100%
  overflow-x: auto  
  
  img
    height: 100%
    
.direction-arrows
  text-align: right
  margin: 0
  font-size: 1.5rem
  color: #ccc
  
.icon-page-close
  position: absolute
  top: 1rem
  right: 1rem
  margin: 0
  font-size: 1.5rem
  width: auto
  color: black
  z-index: 100
  
.bottom-dock
  position: fixed
  bottom: 0
  left: 50%
  transform: translateX(-50%)
  font-size: 2rem
  margin: 0
  z-index: 100
  
.fullscreen
  // position: fixed
  // top: 0
  // left: 50%
  // transform: translateX(-50%)
  color: black
  // font-size: .8rem
  
  p
    margin: 0
    
            
          
!
            
              // Launch fullscreen
function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

$('.icon-fullscreen').on('click', function () {
  $(this).addClass('hide');
  launchIntoFullscreen(document.documentElement);
  $('.icon-exit-fullscreen').removeClass('hide');
  $('.grid-wrapper').css({
    'height' : '100vh'
  });
});


// Exit fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

$('.icon-exit-fullscreen').on('click', function () {
  $(this).addClass('hide');
  exitFullscreen(document.documentElement);
  $('.icon-fullscreen').removeClass('hide');
  $('.grid-wrapper').css({
    'height' : '90vh'
  });
});


$('.icon-menu').on('click', function () {
  $('.nav').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});

$('.icon-menu-close').on('click', function() {
  $('.nav').addClass('hide').removeClass('fade-in');
  $('.icon-page-close').addClass('hide');
});

$('.icon-shop').on('click', function () {
  $('#shop').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});

$('.logo').on('click', function() {
  $('#about').removeClass('hide').addClass('fade-in');
  $('.icon-page-close').removeClass('hide');
});
  
$('.icon-page-close').on('click', function () {
  $('.page, .icon-page-close').addClass('hide');
});

// menu links

$('.nav a').on('click', function () {
  var tabID = $(this).attr('data-tab');
  $('.icon-page-close, #' + tabID).removeClass('hide');
  $('.nav').addClass('hide');
});

// article links

$('.article-link').on('click', function () {
  var tabID = $(this).attr('data-tab');
  $('.icon-page-close, #' + tabID).removeClass('hide').addClass('fade-in');
});


            
          
!
999px
Loading ..................

Console