Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
/**
* 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