<a id="open"><i class="fa fa-file-text fa-2x"></i> Open Recipe</a>
<div id="recipe-card" class="clearfix animated bounceInDown">
<a id="close"><i class="fa fa-times"></i></a>
<div id="banner"></div>
<div id="left">
<h2>Recipe Name</h2>
<p>Prep Time: 30min</p>
<p>Difficulty: </p>
<h3>Ingredients</h3>
<ul>
<li>Ingredient 1</li>
<li>Ingredient 2</li>
<li>Ingredient 3</li>
<li>Ingredient 4</li>
<li>Ingredient 5</li>
</ul>
</div>
<div id="right">
<h2>Directions</h2>
<h3>Step 1</h3>
<p>First, blah blah blah</p>
</div>
</div>
* {
margin: 0;
padding: 0;
}
/* Clearfix Start */
.clearfix {
clear: both;
padding: 0px;
margin: 0px;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 */
}
/* Clearfix End */
body {
background: white;
font-family: 'Open Sans', sans-serif;
color: #444;
padding: 20px;
}
h2, h3, p {
margin-bottom: 10px;
}
#recipe-card {
position: relative;
width: 600px;
margin: 0 auto;
border: solid 1px #444;
background-color: #e6e6e6;
border-radius: 5px;
box-shadow: 0 10px 6px -6px #777;
}
#open {
display: block;
}
#close {
display: block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: white;
cursor: pointer;
}
#banner {
width: 100%;
height: 150px;
border-bottom: solid 1px #444;
background: url('https://images.unsplash.com/photo-1453831210728-695502f9f795?crop=entropy&fit=crop&fm=jpg&h=700&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175') no-repeat;
background-size: cover;
background-position: right;
}
#left {
border-right: solid 1px #444;
ul {
list-style: none;
}
}
#left, #right {
width: 50%;
float: left;
box-sizing: border-box;
padding: 10px;
}
View Compiled
$('#open').click(function() {
$('#recipe-card').removeClass('bounceOutDown').addClass('bounceInDown');
});
$('#close').click(function() {
$('#recipe-card').removeClass('fadeInDown').addClass('bounceOutDown');
$('#recipe-card').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$("this").remove();
});
});