Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
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
​
 
/**
  * 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;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers