Created
September 7, 2018 14:18
-
-
Save englishextra/5ac4158584c8c5775beab60879cfc64f to your computer and use it in GitHub Desktop.
// source https://jsbin.com/loronibali
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en-us"></html> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta http-equiv="X-UA-Compatible" cntnt="IE=edge"/> | |
| <title></title> | |
| <meta name="viewport" cntnt="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"/> | |
| <meta name="description"/> | |
| <link rel="stylesheet" href="css/.min.css"/> | |
| <link rel="stylesheet" href="css/theme.min.css"/> | |
| <style id="jsbin-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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="ml"> | |
| <div class="ml-pnl ml-flp--md ml-flp"> | |
| <div class="ml-pnl__cntnt ml-flp__cntnt"><img src="img/photo-1.jpg" class="ml-flp__pnl ml-flp__pnl--frnt"/> | |
| <div class="ml-flp__pnl ml-flp__pnl--bck bg--green"> | |
| <p>Here is a flpped image...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-pnl"> | |
| <div class="ml-pnl__cntnt tx--white bg--green"> | |
| <h1>Here is a masonry layout.</h1> | |
| </div> | |
| </div> | |
| <div class="ml-pnl ml-clstr ml-clstr--hrz"> | |
| <div class="ml-clstr__sgmnt ml-clstr__sgmnt--rw"> | |
| <div class="ml-pnl ml-clstr__sgmnt"><img src="img/photo-2.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div> | |
| </div> | |
| <div class="ml-clstr__sgmnt ml-clstr__sgmnt--rw"> | |
| <div class="ml-pnl ml-clstr__sgmnt ml-clstr__sgmnt--hlf"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div> | |
| <div class="ml-pnl ml-clstr__sgmnt"> | |
| <div class="ml-pnl__cntnt bg--red tx--white"> | |
| <p>Some cool pics.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-pnl"> | |
| <div class="ml-pnl__cntnt tx--white bg--purple"> | |
| <h3>That's pretty cool, thanks for showing me.</h3> | |
| </div> | |
| </div> | |
| <div class="ml-pnl ml-clstr ml-clstr--vrt"> | |
| <div class="ml-clstr__sgmnt ml-clstr__sgmnt--clmn ml-clstr__sgmnt--hlf"> | |
| <div class="ml-pnl ml-clstr__sgmnt"><img src="img/photo-2.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div> | |
| </div> | |
| <div class="ml-clstr__sgmnt ml-clstr__sgmnt--clmn"> | |
| <div class="ml-pnl ml-clstr__sgmnt"> | |
| <div class="ml-pnl__cntnt bg--blue tx--white"> | |
| <p>This is an image, it's quite nice.</p> | |
| </div> | |
| </div> | |
| <div class="ml-pnl ml-clstr__sgmnt"> | |
| <div class="ml-pnl__cntnt bg--blue tx--white"><a>Click here to find out more.</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-pnl ml-pnl--fcs"> | |
| <div class="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.</p> | |
| </div> | |
| </div> | |
| <div class="ml-pnl"> | |
| <div class="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.</p> | |
| </div> | |
| </div> | |
| <div class="ml-pnl"> | |
| <div class="ml-pnl__cntnt tx--white bg--green"> | |
| <h2>Some post about something</h2> | |
| <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.</p> | |
| </div> | |
| </div> | |
| <div class="ml-pnl"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div> | |
| <div class="ml-pnl ml-pnl--fcs"> | |
| <div class="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.</p> | |
| </div> | |
| </div> | |
| <div class="ml-pnl ml-pnl--pls"><img src="img/photo-1.jpg" class="ml-pnl__cntnt ml-pnl__cntnt--img"/></div> | |
| <div class="ml__fcs-crtn"></div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/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 | |
| </script> | |
| <script id="jsbin-source-css" type="text/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; | |
| } | |
| </script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment