<div class="card">
<div class="front side">
<header>
<h1><span>Title Modifier</span>Recipe Title</h1>
<nav class="overview">
<ul>
<li>
<h4>Cook</h4>
<p>Stove, grill, etc</p>
</li>
<li>
<h4>Serves</h4>
<p>Number</p>
</li>
<li>
<h4>Prep</h4>
<p>Time</p>
</li>
<li>
<h4>Cook</h4>
<p>Time</p>
</li>
<li>
<h4>Level</h4>
<p>Easy, etc</p>
</li>
</ul>
</nav>
</header>
<section class="hero">
<img src="https://farm3.staticflickr.com/2428/3751522781_9b083e84aa_b.jpg" alt="Squash" />
</section>
</div>
<div class="back side">
<h2>Recipe Title</h2>
<section class="recipe-components">
<div class="ingredients">
<h3>Ingredients</h3>
<ul>
<li><span>1</span> Something</li>
<li><span>3</span> Another thing</li>
<li><span>5</span> Things</li>
<li><span>1/2</span> Thing</li>
<li><span>1</span> More thing</li>
</ul>
</div>
<div class="method">
<h3>Method</h3>
<ol>
<li>Do this.</li>
<li>Then do that.</li>
<li>Next, do this.</li>
<li>After an hour, do that.</li>
<li>Before serving, do this.</li>
</ol>
</div>
<div class="tip">
<h3>Tip</h3>
<p>Some people say do this, I think they might be right.</p>
</div>
</section>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Passion+One:400,900|Roboto:400,900');
$space: .5rem;
* {
box-sizing: border-box;
margin: 0 !important;
}
body {
font-family: 'Roboto', sans-serif;
font-size: $space*1.5;
color: rgba(31,31,31,.9);
background: url(https://druryjeff.github.io/better-from-the-source/img/wood.jpg) 50% 50%;
}
.card {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.side {
width: 40%;
background-color: #fff;
overflow: hidden;
box-shadow: 0 0 $space*5 #212121;
}
/* Front of Card */
.front {
display: flex;
flex-direction: column;
background-color: #757575;
}
header {
flex: 1 1 33%;
display: flex;
justify-content: space-between;
padding: $space*2;
text-transform: uppercase;
background-color: #ba873a;
* {
font-weight: normal;
}
h1 {
padding: $space 0;
border-top: $space/4 solid rgba(31,31,31,.9);
border-bottom: $space/4 solid rgba(31,31,31,.9);
font-size: $space*3;
flex-basis: 48%;
font-family: 'Passion One', cursive;
span {
display: block;
font-size: $space*1.5;
font-weight: normal;
text-transform: capitalize;
letter-spacing: .5px;
}
}
nav {
padding: $space 0;
border-top: $space/4 solid rgba(31,31,31,.9);
border-bottom: $space/4 solid rgba(31,31,31,.9);
flex-basis: 48%;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: flex;
justify-content: space-between;
}
p {
flex-basis: 60%;
font-size: $space*1.25;
}
h4 {
flex-basis: 30%;
letter-spacing: .5px;
font-weight: 900;
font-size: $space*1.25;
}
}
}
.hero {
position: relative;
flex: 1 1 67%;
background-color: #f7f7f7;
overflow: hidden;
display: flex;
img {
display: block;
}
&:before {
position: absolute;
bottom: $space*3;
right: $space*3;
z-index: 1;
content: 'Real Good';
font-family: sans-serif;
font-size: $space*3;
background-color: #212121;
width: $space*12;
height: $space*12;
border-radius: 50%;
text-align: center;
}
}
/* Back of Card */
.back {
padding: $space*2;
background-color: #d7cbb9;
h2 {
font-family: 'Passion One', cursive;
font-weight: normal;
font-size: $space*3;
}
}
.recipe-components {
display: flex;
flex-wrap: wrap;
flex-direction: column;
ul, ol {
padding: 0 0 0 $space;
}
}
.recipe-components > * {
flex: 1;
}
/* Utility */
.js-hide {
display: none;
}
View Compiled
const sides = Array.from(document.querySelectorAll(".side"));
function makePortrait(el){
let r = el.offsetWidth/2;
sides.forEach(function(el){
el.style.height = r*3 + "px";
});
}
function flipCard(){
sides.forEach(function(el){
el.classList.toggle("js-hide");
});
}
function init(){
makePortrait(sides[0]);
sides[1].classList.add("js-hide");
sides.forEach(function(el){
el.addEventListener("click", function(){
flipCard();
});
});
}
window.addEventListener("resize", function(){
sides.forEach(function(el){
// filter out hidden side
// no height trips up makePortrait()
if(!el.classList.contains("js-hide")){
makePortrait(el);
}
});
});
init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.