Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ 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

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

              
                html(lang="en-us")
head
  meta(charset="utf-8")
  meta(http-equiv="X-UA-Compatible", cntnt="IE=edge")
  title= name
  meta(name="viewport", cntnt="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0")
  meta(name="description", cntnt= description)
  link(rel="stylesheet", href="css/#{name}.min.css")
  link(rel="stylesheet", href="css/theme.min.css")
body
  .ml
    .ml-pnl.ml-flp--md.ml-flp
      .ml-pnl__cntnt.ml-flp__cntnt
        img.ml-flp__pnl.ml-flp__pnl--frnt(src="img/photo-1.jpg")
        .ml-flp__pnl.ml-flp__pnl--bck.bg--green
          p Here is a flpped image...
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--green
        h1 Here is a masonry layout.
    .ml-pnl.ml-clstr.ml-clstr--hrz
      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
        .ml-pnl.ml-clstr__sgmnt
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
      .ml-clstr__sgmnt.ml-clstr__sgmnt--rw
        .ml-pnl.ml-clstr__sgmnt.ml-clstr__sgmnt--hlf
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--red.tx--white
            p.
              Some cool pics.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--purple
        h3 That's pretty cool, thanks for showing me.
    .ml-pnl.ml-clstr.ml-clstr--vrt
      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn.ml-clstr__sgmnt--hlf
        .ml-pnl.ml-clstr__sgmnt
          img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-2.jpg")
      .ml-clstr__sgmnt.ml-clstr__sgmnt--clmn
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--blue.tx--white
            p.
              This is an image, it's quite nice.
        .ml-pnl.ml-clstr__sgmnt
          .ml-pnl__cntnt.bg--blue.tx--white
            a Click here to find out more.
    .ml-pnl.ml-pnl--fcs
      .ml-pnl__cntnt.tx--white.bg--green
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--red
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend. Pellentesque lorem elit, dignissim interdum massa id, malesuada rutrum ligula. Suspendisse tempor quis mauris eu facilisis. Phasellus non volutpat diam, non dapibus ligula. Ut non molestie ex, nec sagittis mi. Curabitur suscipit tellus id dolor pretium blandit. Cras tristique tristique pharetra.
    .ml-pnl
      .ml-pnl__cntnt.tx--white.bg--green
        h2 Some post about something
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex. Sed sed augue eu neque tristique commodo. Mauris aliquet tortor sollicitudin nibh molestie, id egestas nisl sollicitudin. Aliquam erat volutpat. Donec quis ultrices ligula. Cras sed purus risus. Curabitur quis eros eu tortor semper eleifend.
    .ml-pnl
      img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml-pnl.ml-pnl--fcs
      .ml-pnl__cntnt.tx--white.bg--blue
        p.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu justo ex. Praesent mollis augue sagittis eros pharetra feugiat. Phasellus dignissim est lacus. Sed nec imperdiet dolor, sit amet mattis ex.
    .ml-pnl.ml-pnl--pls
      img.ml-pnl__cntnt.ml-pnl__cntnt--img(src="img/photo-1.jpg")
    .ml__fcs-crtn

              
            
!

CSS

              
                /**
  * driveway.css - pure CSS masonry layouts aid.
*/
.ml {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-column-count: 1;
     -moz-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
  position: relative;
}
.ml--fcs .ml-pnl {
  position: relative;
}
.ml--fcs .ml-pnl:hover {
  z-index: 3;
}
.ml--fcs .ml-pnl:hover ~ .ml__fcs-crtn {
  display: block;
}
.ml__fcs-crtn {
  background-color: #000;
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0.75;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
}
.ml * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media (min-width: 768px) {
  .ml {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
  }
}
@media (min-width: 1200px) {
  .ml {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}
.ml-pnl {
  margin: 0;
  padding: 5px;
}
.ml-pnl--fcs {
  position: relative;
}
.ml-pnl--fcs:hover {
  z-index: 3;
}
.ml-pnl--fcs:hover ~ .ml__fcs-crtn {
  display: block;
}
.ml-pnl--pls {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transition: -webkit-transform 0.25s ease 0s;
  transition: -webkit-transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s;
  transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
}
.ml-pnl--pls:hover {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
}
@media (min-width: 768px) {
  .ml-pnl {
    -webkit-column-break-inside: avoid;
       page-break-inside: avoid;
            break-inside: avoid;
  }
}
.ml-pnl__cntnt {
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;
  width: 100%;
}
.ml-pnl__cntnt--img {
  max-width: 100%;
  padding: 0;
}
.ml-flp {
  -webkit-perspective: 1000;
          perspective: 1000;
}
.ml-flp:hover .ml-flp__cntnt {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.ml-flp--md {
  height: 300px;
}
.ml-flp__pnl {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 10px;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
.ml-flp__pnl--frnt {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  z-index: 2;
}
.ml-flp__pnl--bck {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.ml-flp__cntnt {
  height: 100%;
  overflow: visible;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}
.ml-clstr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}
.ml-clstr--vrt {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr--vrt {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.ml-clstr--hrz {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ml-clstr__sgmnt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.ml-clstr__sgmnt--rw {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr__sgmnt--rw {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.ml-clstr__sgmnt--clmn {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 768px) {
  .ml-clstr__sgmnt--hlf {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
  .ml-clstr__sgmnt--qrt {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
  }
}

/**
  * Color styles
*/
.tx--white {
  color: #fff;
}
.bg--red {
  background-color: #e74c3c;
}
.bg--green {
  background-color: #26a65b;
}
.bg--purple {
  background-color: #8e44ad;
}
.bg--blue {
  background-color: #1e8bc3;
}
img {
  max-height: 300px;
  background-color: #f93;
}

              
            
!

JS

              
                
              
            
!
999px

Console