<div class="card">
<img src="https://i.imgbox.com/cbNu4TvF.jpg" />
<h2>Pellentesque habitant morbi.</h2></div>
<div class="card">
<img src="https://i.imgbox.com/9lSDASI2.jpg" />
<h2 class="large-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2></div>
<div class="card">
<img src="https://i.imgbox.com/XWZEeur6.jpg" />
<h2>Pellentesque habitant morbi tristique senectus.</h2></div>
<div class="card">
<img src="https://i.imgbox.com/uDtDYUuo.jpg" />
<h2 class="large-heading">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</h2></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato';
font-weight: 300;
color: black;
font-size: 1.25em;
text-align: center;
margin: 0 auto;
width: 650px;
}
h2 {
text-align: center;
font-size: 1.25em;
font-weight: 300;
}
.card {
display: inline-block;
padding: 10px;
width: 300px;
height: 300px;
background: wheat;
margin: 15px 10px;
float: left;
}
img {
width: 100%;
}
@element ".card h2" and (min-characters: 50) {
$this {
font-size: 1em;
}
}
$("button").on("click", function() {
if ($(this).text() == "Add Sidebar") {
$(".content").css("width", "60%");
$(".sidebar").css("display", "block");
$(this).html("Remove Sidebar");
} else {
$(".content").css("width", "100%");
$(".sidebar").css("display", "none");
$(this).html("Add Sidebar");
}
EQCSS.apply();
});