12+ CSS Recipe Card Examples

This post contains a total of 12+ CSS Recipe Card Examples with Source Code. All these Recipe Cards are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

CSS Recipe Card Examples

1. Simple CSS Recipe Card

Made by David Khourshid. Simple CSS Recipe Card without any effects or animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600);
.baseline-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.baseline-grid:hover {
  opacity: 1;
}

.guide {
  margin-bottom: 6.25rem;
}
.guide, .guide:before, .guide:after {
  height: 1.25rem;
  width: 100%;
  outline: 1px solid turquoise;
}
.guide:before, .guide:after {
  content: "";
  display: block;
  position: absolute;
  top: 200%;
}
.guide:after {
  top: 400%;
}

.recipe-container {
  font-family: Raleway, sans-serif;
  font-weight: 400;
  width: 750px;
  height: 440px;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1);
}
.recipe-container:hover > .baseline-grid {
  opacity: 1;
}

.recipe-image {
  position: absolute;
  width: auto;
  height: 100%;
  left: 0;
  top: 0;
}

.recipe-content {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  top: 0;
  padding: 2.5rem 1rem;
}

.heading-2 {
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 4px;
  color: #999;
}

.heading-1 {
  font-size: 1.778rem;
  line-height: 2.5rem;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 1.25rem 0;
}

.paragraph {
  font-size: 1rem;
  line-height: 1.25rem;
  margin: 0 0 1.25rem 0;
}

.recipe-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.recipe-list.meta > .recipe-item {
  display: inline-block;
  padding-right: 2rem;
}

.recipe-item {
  padding: 0 1rem;
}
.recipe-item:first-child {
  padding-left: 0;
}
.recipe-item > .recipe-value {
  font-size: 1.333rem;
  line-height: 2.5rem;
  font-weight: bold;
}
.recipe-item > .recipe-text {
  font-size: 0.75rem;
  line-height: 1.25rem;
}
.recipe-item + .recipe-item {
  border-left: 1px solid #ccc;
}

.recipe-stars {
  line-height: 2.5rem;
  margin: 1.25rem 0;
  font-size: 1rem;
  line-height: 2.5rem;
}

.recipe-star {
  height: auto;
  width: auto;
  display: inline-block;
}
.recipe-star:before {
  content: "β˜…";
  color: gold;
}
.recipe-star.inactive:before {
  color: gray;
}

.recipe-ratings {
  color: gray;
  margin: 0 0.5rem;
}

.recipe-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #5ad485;
  color: white;
  border: none;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 1.25rem;
  font-size: 0.75rem;
}
.recipe-button.transparent {
  background-color: transparent;
  color: gray;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e1e1e1;
}
</style>
</head>
<body>
  <div class="recipe-container">
  <div class="baseline-grid">
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
    <div class="guide"></div>
  </div>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/181794/C6BM7hh.jpg" alt="" class="recipe-image" />
  <div class="recipe-content">
    <h2 class="heading-2">Healthy Meals</h2>
    <h1 class="heading-1">
      Smoked Salmon<br>
      &amp; Bacon
    </h1>
    <p class="paragraph">
      With Bread and Roasted Berries
    </p>
    <ul class="recipe-list meta">
      <li class="recipe-item">
        <div class="recipe-value">40</div>
        <div class="recipe-text">Mins</div>        
      </li>
      <li class="recipe-item">
        <div class="recipe-value">225</div>        
        <div class="recipe-text">Nutrition</div>        
      </li>
      <li class="recipe-item">
        <div class="recipe-value">6</div>
        <div class="recipe-text">Ingredients</div>
      </li>
    </ul>
    <div class="recipe-stars">
      <span class="recipe-star"></span>
      <span class="recipe-star"></span>
      <span class="recipe-star"></span>
      <span class="recipe-star"></span>
      <span class="recipe-star inactive"></span>
      <span class="recipe-ratings">29</span>
    </div>
    <button class="recipe-button">
      View Recipe
    </button>
    <button class="recipe-button transparent">
      Add to Collection
    </button>
  </div>
</div>
</body>
</html>

2. Recipe card with sliding animation

Made by Dany Santos. Recipe card with sliding animation, the card expands when you click the arrow button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
  
<style>
/*
-------------- Basic Reset Css ----------
 */
* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;

}

/* -------- ----------- */
.cont_principal {
  position: absolute;
  width: 100%;
  height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbfaf6+9,d4cebf+74,d4cebf+74,d4cebf+100 */
background: rgb(251,250,246); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(251,250,246,1) 9%, rgba(212,206,191,1) 74%, rgba(212,206,191,1) 74%, rgba(212,206,191,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(251,250,246,1) 9%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(251,250,246,1) 9%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 74%,rgba(212,206,191,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 
}


.cont_central {  
position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -200px;
}

.cont_modal {
  position: relative;
  width: 300px;
  height: 400px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; 
transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}

.cont_photo {
  position: relative;
  width: 300px;
  height: 440px;
  overflow: hidden;
  background-color: #eee;
  border-radius:5px;
top: -20px;
float: left;
z-index: 2;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 0.5s; 
box-shadow: 1px 1px 20px -5px rgba(0,0,0,0.5);  
}

.cont_img_back {
  position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
border-radius:5px ;
}
.cont_img_back > img {
  width: 100%;
opacity: 0.7;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 1s;
}

.cont_img_back:hover > img {
  transform: scale(1.5);
}

.cont_text_ingredients {
position: absolute;
  width: 0px;
top: 0px;
left: 290px;
  margin-left: 10px;
  height: 400px;
  float: left; 
  border-radius:5px ;
z-index: 3;
box-shadow: 1px 1px  20px  -5px  rgba(0,0,0,0.2);

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fbf9f9+28,e8eaed+100 */
background: rgb(251,249,249); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(251,249,249,1) 28%, rgba(232,234,237,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(251,249,249,1) 28%,rgba(232,234,237,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(251,249,249,1) 28%,rgba(232,234,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s; 
transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}

.cont_mins{
position: relative;
float: left;
  width: 100%;
}

.sub_mins {
  position: relative;
  float: left;
  width: 60px;
  height: 60px;
  background-color: rgba(255,253,112,0.8);
border-radius:50% ;
margin: 16px;
margin-bottom: 0px;
opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  transition: all 0.5s;
transition-delay: 1s;
-webkit-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;

}

.sub_mins > h3 {
  font-size: 24px;
margin-top: 7px;
  margin-bottom: -15px;
}

.sub_mins > span {
  font-size: 9px; 
  font-weight: 700;
}

.cont_servings {
  position: relative;
  float: left;
  width: 60px;
  height: 60px;
  background-color: rgba(255,253,112,0.8);
border-radius:50% ;
margin: 16px;
opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s; 
transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}

.cont_servings > h3 {
  font-size: 24px;
margin-top: 5px;
  margin-bottom: -15px;
}

.cont_servings > span {
  font-size: 9px;
  font-weight: 700;
}
.cont_icon_right {
  position: relative;
float: right;
  margin-top: 16px;
}
.cont_icon_right  > a  {
margin: 16px;
margin-top: 16px;
  color: #fff;
}

.cont_detalles {
  position: absolute;
bottom:-185px;
  height: 200px;
  border-radius:5px ;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+100,000000+101&0+0,0.65+68 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 68%, rgba(0,0,0,0.65) 100%, rgba(0,0,0,0.65) 101%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 68%,rgba(0,0,0,0.65) 100%,rgba(0,0,0,0.65) 101%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 68%,rgba(0,0,0,0.65) 100%,rgba(0,0,0,0.65) 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 

width: 100%;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s; 
transition: all 0.5s;
  transition-delay: 1.2s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;}


.cont_detalles > h3 {
  margin-top: 50px;
 color: #fff;
  font-size: 24px;
}

.cont_detalles > p {
  color: #fff;
width: 80%;
  text-align:left;
  font-size: 14px;
}

/* ---------------- Css Tabs -------- */

.cont_tabs {
  position: relative;
  float: left;
  width: 410px;
  height: 60px;
border-bottom: 3px solid #EDEDEC;
}

.cont_tabs > ul {
  width: 300px;
  background-color: #eee;
}

.cont_tabs > ul > li {
  position: relative;
  float: left;
  width: 50%;
list-style: none;
}

.cont_tabs > ul > li > a {
border-top: 7px solid #ED346C;
  position: relative;
  display: block;
  float: left;
padding-top: 15px;
  color: #241C3E;
  text-decoration: none;
  margin-left: 15px;
font-size: 14px;
}

.cont_tabs > ul > li:first-child > a
{
  border-top: 7px solid rgba(237, 52, 108, 0);
  margin-top: 0px;
  color: #9A96A4;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 0.2s;
}

.cont_tabs > ul > li:first-child > a:hover {
  border-top: 7px solid #ED346C;
padding-top: 15px;
  color: #241C3E;
 margin-top: 0px;
}

.cont_btn_open_dets {
  position: absolute;
  right: -15px;
  top:50%;
}
.cont_btn_open_dets  > a {
display: block;
  padding-top: -5px;
width: 30px;
  height: 30px;
  background-color: #ED2460;
border-radius:50% ;
color: #fff;
box-shadow: 0px 0px 20px -2px rgba(237, 36, 96, 1);
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
transition: all 0.5s;
transform: rotate(180deg);

}


.cont_btn_open_dets  > a > i {
  margin-top: 4px;
}

.cont_title_preparation {
   position: relative;
  float: left;
margin:10px 0px ;
width: 410px;
}
.cont_title_preparation > p {
  font-weight: 700;
font-size: 14px;
  margin-left: 40px;
text-align: left;
color: #36354E;
}

.cont_info_preparation {
  position: relative;
  float: left;
}
.cont_info_preparation > p {
  margin: 5px 0px;
  margin-left: 50px;
border-left: 2px solid #E3E3E3; 
font-size: 12px;
  padding: 20px 0px;
padding-left: 20px;
text-align: left;
padding-right: 15px;
color: #565656;
}

.cont_btn_mas_dets {
  position: absolute;
  bottom:0px;
  left: 50%;
}
.cont_btn_mas_dets > a {
  color: #36354E;
}

.cont_over_hidden {
  position: relative;
  float: left;
  width: 100%;
height: 400px;
  overflow: hidden;
}

.cont_text_det_preparation {
  position: relative;
  width: 410px;
}

.cont_modal_active > .cont_text_ingredients  > .cont_btn_open_dets > a {
  transform: rotate(0deg);
}
.cont_modal_active > .cont_text_ingredients{
  width: 410px;
left: 285px;
z-index: 1;
box-shadow: 15px 20px  70px  -5px  rgba(0,0,0,0.2);
}
.cont_modal_active {
width: 700px;  
}

.cont_modal_active > .cont_photo {
box-shadow: 25px 10px 70px -5px rgba(0,0,0,0.3);  
}

.cont_modal_active > .cont_photo > .cont_mins > .sub_mins {
  opacity: 1;
}

.cont_modal_active  > .cont_photo > .cont_servings {
  opacity: 1;
}

.cont_modal_active > .cont_photo  > .cont_detalles{
  bottom: 0px;
}
</style>
</head>
<body>
  <div class="cont_principal">
<div class="cont_central">
  <div class="cont_modal cont_modal_active">
  <div class="cont_photo">
<div class="cont_img_back">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/57/98/9f/57989f2a2e186e38bf93429aa395120c.jpg" alt="" />
    </div>
<div class="cont_mins">
    <div class="sub_mins">
  <h3>50</h3>
<span>MINS</span>
  </div>
  <div class="cont_icon_right">
<a href="#">  <i class="material-icons">&#xE8E7;</i></a>
  </div>
    </div>
<div class="cont_servings">
      <h3>4</h3>
<span>SERVINGS</span>
    </div>
<div class="cont_detalles">
    <h3>Shakshuka With Feta</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis est est aliquam, sed faucibus massa lobortis. Maecenas non est justo.</p>
    </div>
    </div>
<div class="cont_text_ingredients">
<div class="cont_over_hidden">
 
  <div class="cont_tabs">
  <ul>
    <li><a href="#"><h4>INGREDIENTS</h4></a></li>
    <li><a href="#"><h4>PREPARATION</h4></a></li>
  </ul>  
  </div>
   
  <div class="cont_text_det_preparation">
  <div class="cont_title_preparation">
    <p>STEP 1</p>
    </div>
  <div class="cont_info_preparation">
    <p>Heat oven to 375 degress</p>
    </div>  
  <div class="cont_text_det_preparation">

  <div class="cont_title_preparation">
    <p>STEP 2</p>
    </div>
  <div class="cont_info_preparation">
    <p>Heat oil in a large skillet over medium-low head. Add onion and bell papper. Cook gently until very soft, about 20 minutes. Add garlic and cook until tender, 1 to 2 minutes; stir in cumin, paprika and cook 1 minute. Pour in tomatoes and season with 3/4 teaspoon salt and 1/4 teaspoon pepper;</p>
    </div> 
  
  </div>
</div>  
  <div class="cont_btn_mas_dets">
  <a href="#"><i class="material-icons">&#xE313;</i></a>
  </div>
    
  </div>
  <div class="cont_btn_open_dets">
  <a href="#e" onclick="open_close()"><i class="material-icons">&#xE314;</i></a>
  </div>

    </div>
   </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
window.onload = function () {
  document.querySelector('.cont_modal').className = "cont_modal";
};
var c = 0;
function open_close() {
  if (c % 2 == 0) {
    document.querySelector('.cont_modal').className = "cont_modal cont_modal_active";
    c++;
  } else {
    document.querySelector('.cont_modal').className = "cont_modal";
    c++;
  }
}
    </script>
</body>
</html>

3. Beautiful Recipe Card Food

Made by Dicky AL Fattah. Beautiful Recipe Card. No effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
   integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
   crossorigin="anonymous"
  />
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #c2a3d1;
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.container {
  background-color: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 300px 600px;
  border-radius: 5px;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
}
.container img {
  width: 300px;
  height: 300px;
  border-radius: 5px 0 0 5px;
}
.container .btn {
  position: absolute;
  bottom: -20px;
  right: -20px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  background-color: #fc9400;
  color: #fff;
  padding: 22px 45px;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
}
.container .btn i {
  margin-left: 20px;
  font-size: 1.5rem;
}

.container__text {
  padding: 40px 40px 0;
}
.container__text h1 {
  color: #351897;
  font-weight: 400;
}
.container__text .container__text__star span {
  font-size: 0.8rem;
  color: #ffa800;
  margin: -5px 0 20px;
}
.container__text p {
  font-size: 0.9rem;
}
.container__text .container__text__timing {
  display: flex;
  margin: 20px 0 10px;
}
.container__text .container__text__timing .container__text__timing_time {
  margin-right: 40px;
}
.container__text .container__text__timing h2 {
  margin-bottom: 5px;
  font-size: 1rem;
  font-weight: 400;
  color: #818189;
}
.container__text .container__text__timing p {
  color: #351897;
  font-weight: bold;
  font-size: 1.2rem;
}
</style>
</head>
<body>
  <div class="container">
   <img
    src="https://images.unsplash.com/photo-1549589237-9e70b6be4da8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80"
    alt="Pancake"
   />
   <div class="container__text">
    <h1>Caramel Cake Pancakes</h1>
    <div class="container__text__star">
     <span class="fa fa-star checked"></span>
     <span class="fa fa-star checked"></span>
     <span class="fa fa-star checked"></span>
     <span class="fa fa-star checked"></span>
     <span class="fa fa-star checked"></span>
    </div>
    <p>
     If you're fan of caramel cake, then you'll love our Caramel Cake Pancakes.
     We Complete these over-the-top pancakes with Caramel Syrup.
    </p>
    <div class="container__text__timing">
     <div class="container__text__timing_time">
      <h2>Hands-on Time</h2>
      <p>30 min</p>
     </div>
     <div class="container__text__timing_time">
      <h2>Total Time</h2>
      <p>40 min</p>
     </div>
     <div class="container__text__timing_time">
      <h2>Yield</h2>
      <p>40 min</p>
     </div>
    </div>
    <button class="btn">view recipe <i class="fa fa-arrow-right"></i></button>
   </div>
  </div>
</body>
</html>

4. Recipe card with css tabs

Made by Gisete Kindahl. Recipe Card with CSS Tabs. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@import url('https://fonts.googleapis.com/css?family=Lobster');

body{
  color: #444444;
  background: #009674;
}

.recipe-header{
  
}

h1{
  font-size: 56px;
  font-weight: 400;
  font-family: 'Lobster', cursive;
  color: #ffffff;
  text-shadow: 0 2px #7d7d7d;
}

.recipe-tab {
  font-family: 'Lobster', cursive;
  text-align: center;
  list-style: none;
  margin: 50px 0 0;
  font-size: 24px;
  padding: 0;
  line-height: 24px;
  overflow: hidden;
  position: relative;
  
}
.recipe-tab li {
  border: 3px solid #009674;
  padding: 10px 28px 8px;
  background-color: #FFF;
  margin-right: 5px;
  display: inline-block;
  position: relative;
  z-index: 0;
  color: #009674;
}
/*.recipe-tab a {
  color: #009674;;
  text-decoration: none;
}*/
.recipe-tab li.selected {
  background: #FFF;
  z-index: 2;
  border-bottom-color: #FFF;
}

.recipe-content{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #ffffff;
  width: 60%;
  margin: 0 auto;
  padding: 50px;
}

.recipe-tab li:before,
.recipe-tab li:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 44px;  
  background-color: #FFF;
  
}
.recipe-tab li:before {
  left: -24px;
  transform: skew(-25deg, 0deg);
  border-left: 3px solid #009674;
}
.recipe-tab li:after {
  right: -24px;
  transform: skew(25deg, 0deg);
  border-right: 3px solid #009674;
}

.recipe-tab li:before {
  border-radius: 8px 0 0 0;
}
.recipe-tab li:after {
  border-radius: 0 8px 0 0;
}

.recipe-tab li.selected:before,
.recipe-tab li.selected:after{
  background: #FFF;
  border-bottom: 3px solid #ffffff;
}

.recipe-tab li:hover,
.recipe-tab li:hover:before,
.recipe-tab li:hover:after {
  background-color: #009674;
  color: white;
  cursor: pointer;
  border-bottom-color: #009674;
}
.tabs{
  width: 75%;
  margin: 0 auto;
  text-align: center;
}

.tabs:after {
  clear: both;
  content: '';
  display: table;
}

.tabs .tab {
  display: inline;
  
  
}

.tabs .tab-label {
  font-size: 18px;
  vertical-align: bottom;
  font-family: 'Lobster', cursive;
  border: 3px solid #009674;
  padding: 15px 22px 8px;
  background-color: #FFF;
  margin-right: -9px;
  display: inline-block;
  position: relative;
  z-index: 0;
  color: #009674;
}

.tabs .tab-label:before,
.tabs .tab-label:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 33px;  
  background-color: #FFF;
  
}
.tabs .tab-label:before {
  left: -17px;
  transform: skew(-25deg, 0deg);
  border-left: 3px solid #009674;
}
.tabs .tab-label:after {
  right: -17px;
  transform: skew(25deg, 0deg);
  border-right: 3px solid #009674;
}

.tabs .tab-label:before {
  border-radius: 8px 0 0 0;
}
.tabs .tab-label:after {
  border-radius: 0 8px 0 0;
}

.recipe-tab li.selected:before,
.recipe-tab li.selected:after{
  background: #FFF;
  border-bottom: 3px solid #ffffff;
}

.tabs .tab [type="radio"]:hover:checked + .tab-label,
.tabs .tab-label:hover,
.tabs .tab-label:hover:before,
.tabs .tab-label:hover:after {
  background-color: #009674;
  color: white;
  cursor: pointer;
  border-bottom-color: #009674;
}

.tabs .tab > [type="radio"] {
  clip: rect(0 0 0 0);
  height: 1px;
  opacity: 0;
  position: fixed;
  width: 1px;
  z-index: -1;
}

.tabs .tab-panel {
  display: inline;
  display: inline-block;
  overflow: hidden;
  position: relative;
  height: 0;
  width: 0;
}

.tabs .tab-content {
  box-sizing: border-box;
  display: block;
  background: white;
  border-radius: 15px;
  padding: 50px;
  float: left;
  width: 100%;
  text-align: left;
}

.tabs .tab-content h2{
  text-align: center;
  margin-bottom:45px;
}

.tabs .tab [type="radio"]:checked + .tab-label {
  background: white;
  border-bottom-width: 0;
  padding-bottom: 11px;
  z-index: 1;
}

.tabs .tab .tab-label .word-recipe{
 display:none;
}

.tabs .tab [type="radio"]:checked + .tab-label .word-recipe{
  display:inline;
}

.tabs .tab [type="radio"]:checked ~ .tab-panel {
  display: inline;
}
</style>

</head>
<body>
  <div class="recipe-header">
  <center><h1>Delicious Cookbook</h1></center>
</div>

<div class="tabs">
  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked>
    <label class="tab-label" for="tab-1"><span class="word-recipe">Recipe</span> 1</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Fluffy Pancakes</h3>
        <p>Combine milk with vinegar in a medium bowl and set aside for 5 minutes to "sour".</p>
<p>Combine flour, sugar, baking powder, baking soda, and salt in a large mixing bowl. Whisk egg and butter into "soured" milk. Pour the flour mixture into the wet ingredients and whisk until lumps are gone.</p>
<p>Heat a large skillet over medium heat, and coat with cooking spray. Pour 1/4 cupfuls of batter onto the skillet, and cook until bubbles appear on the surface. Flip with a spatula, and cook until browned on the other side.</p>
      </div>
    </div> 
  </div>

  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-2" name="tab-group-1">
    <label class="tab-label" for="tab-2"><span class="word-recipe">Recipe</span> 2</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Best Brownies</h2>
  <p>Preheat oven to 350 degrees F (175 degrees C). Grease and flour an 8-inch square pan.</p>
  <p>In a large saucepan, melt 1/2 cup butter. Remove from heat, and stir in sugar, eggs, and 1 teaspoon vanilla. Beat in 1/3 cup cocoa, 1/2 cup flour, salt, and baking powder. Spread batter into prepared pan.</p>
  <p>Bake in preheated oven for 25 to 30 minutes. Do not overcook.</p>
  <p>To Make Frosting: Combine 3 tablespoons softened butter, 3 tablespoons cocoa, honey, 1 teaspoon vanilla extract, and 1 cup confectioners' sugar. Stir until smooth. Frost brownies while they are still warm.</p>
      </div>
    </div> 
  </div>
  
    <div class="tab">
    <input class="tab-radio" type="radio" id="tab-3" name="tab-group-1">
    <label class="tab-label" for="tab-3"><span class="word-recipe">Recipe</span> 3</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Cookies</h2>
  <p>Preheat oven to 350 degrees F (175 degrees C).</p>
<p>Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. </p>
  <p>Dissolve baking soda in hot water. Add to batter along with salt. Stir in flour, chocolate chips, and nuts. Drop by large spoonfuls onto ungreased pans.</p>
<p>Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.</p>
      </div>
    </div> 
  </div>
  
   <div class="tab">
    <input class="tab-radio" type="radio" id="tab-4" name="tab-group-1" checked>
    <label class="tab-label" for="tab-4"><span class="word-recipe">Recipe</span> 4</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Fluffy Pancakes</h3>
        <p>Combine milk with vinegar in a medium bowl and set aside for 5 minutes to "sour".</p>
<p>Combine flour, sugar, baking powder, baking soda, and salt in a large mixing bowl. Whisk egg and butter into "soured" milk. Pour the flour mixture into the wet ingredients and whisk until lumps are gone.</p>
<p>Heat a large skillet over medium heat, and coat with cooking spray. Pour 1/4 cupfuls of batter onto the skillet, and cook until bubbles appear on the surface. Flip with a spatula, and cook until browned on the other side.</p>
      </div>
    </div> 
  </div>

  <div class="tab">
    <input class="tab-radio" type="radio" id="tab-5" name="tab-group-1">
    <label class="tab-label" for="tab-5"><span class="word-recipe">Recipe</span> 5</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Best Brownies</h2>
  <p>Preheat oven to 350 degrees F (175 degrees C). Grease and flour an 8-inch square pan.</p>
  <p>In a large saucepan, melt 1/2 cup butter. Remove from heat, and stir in sugar, eggs, and 1 teaspoon vanilla. Beat in 1/3 cup cocoa, 1/2 cup flour, salt, and baking powder. Spread batter into prepared pan.</p>
  <p>Bake in preheated oven for 25 to 30 minutes. Do not overcook.</p>
  <p>To Make Frosting: Combine 3 tablespoons softened butter, 3 tablespoons cocoa, honey, 1 teaspoon vanilla extract, and 1 cup confectioners' sugar. Stir until smooth. Frost brownies while they are still warm.</p>
      </div>
    </div> 
  </div>
  
    <div class="tab">
    <input class="tab-radio" type="radio" id="tab-6" name="tab-group-1">
    <label class="tab-label" for="tab-6"><span class="word-recipe">Recipe</span> 6</label>

    <div class="tab-panel">
      <div class="tab-content">
        <h2>Cookies</h2>
  <p>Preheat oven to 350 degrees F (175 degrees C).</p>
<p>Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. </p>
  <p>Dissolve baking soda in hot water. Add to batter along with salt. Stir in flour, chocolate chips, and nuts. Drop by large spoonfuls onto ungreased pans.</p>
<p>Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.</p>
      </div>
    </div> 
  </div>
</div>


  <ul class="recipe-tab">
    <li>Recipe 1</li>
    <li>Recipe 2</li>
    <li class="selected">Recipe 3</li>
    <li>Recipe 4</li>
  </ul>
<div class="recipe-content">
  <h2>Best Brownies</h2>
  <p>Preheat oven to 350 degrees F (175 degrees C). Grease and flour an 8-inch square pan.</p>
  <p>In a large saucepan, melt 1/2 cup butter. Remove from heat, and stir in sugar, eggs, and 1 teaspoon vanilla. Beat in 1/3 cup cocoa, 1/2 cup flour, salt, and baking powder. Spread batter into prepared pan.</p>
  <p>Bake in preheated oven for 25 to 30 minutes. Do not overcook.</p>
  <p>To Make Frosting: Combine 3 tablespoons softened butter, 3 tablespoons cocoa, honey, 1 teaspoon vanilla extract, and 1 cup confectioners' sugar. Stir until smooth. Frost brownies while they are still warm.</p>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$("li").click(function (e) {
  e.preventDefault();
  $("li").removeClass("selected");
  $(this).addClass("selected");
});
    </script>
</body>
</html> 

5. Responsive recipe card

Made by Michelle. Simple responsive recipe card without any effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  background: #fff;
  font: 13px 'Open Sans', sans-serif;
  color: #222;
}
.recipe-card {
  -webkit-box-shadow: 0px 0px 20px 1px #f0f1f3;
  -moz-box-shadow: 0px 0px 20px 1px #f0f1f3;
  box-shadow: 0px 0px 20px 1px #f0f1f3;
  border: 1px solid #f0f1f3;
  width: 300px;
  margin: 50px auto;
}
.recipe-card__body {
  padding: 20px;
}
.recipe-card__heading {
  padding: 0;
  margin: 0 0 0;
  color: #444;
}
.recipe-card__subhead {
  font-size: 13px;
  color: #555;
  margin-bottom: 30px;
}
.recipe-card__ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  column-count: 1;
}
.recipe-card__ingredients li {
  margin-bottom: 5px;
}
.recipe-card__ingredients li:before {
  content: '\2022';
  color: #eb9376;
  margin-right: 5px;
}
.recipe-card__nav {
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid #eb9376;
}
.recipe-card__nav li {
  display: inline-block;
  margin-right: 30px;
}
.recipe-card__nav h3 {
  margin: 0;
  padding: 0;
}
.recipe-card__nav h3:after {
  content: '';
  display: block;
  width: 0%;
  padding-top: 10px;
  margin: 0 auto;
  border-bottom: 5px solid #eb9376;
  transition: width 250ms ease-in-out 0s;
}
.recipe-card__nav h3:hover {
  cursor: pointer;
}
.recipe-card__nav h3:hover:after,
.recipe-card__nav h3.active:after {
  width: 100%;
}
@media (min-width: 599px) {
  .recipe-card {
    width: 600px;
  }
  .recipe-card__ingredients {
    column-count: 2;
  }
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class='recipe-card'>
  <div style="background:url(https://d2gk7xgygi98cy.cloudfront.net/6267-3-large.jpg) no-repeat 50% 50%; background-size:cover; height: 150px"></div>
  <div class="recipe-card__body">
    <h1 class="recipe-card__heading">Oatmeal Cookies</h1>
    <h2 class="recipe-card__subhead">Crunchy around the edges, softer in the center, these oatmeal cookies feature the nutty taste and nubbly texture of oats. </h2>
    
    <ul class="recipe-card__nav">
      <li>
        <h3 class="active">Ingredients</h3>
      </li>
      <li>
        <h3>Method</h3>
      </li>
    </ul>

    <ul class="recipe-card__ingredients">
    <li>&frac14; cup unsalted butter</li>
    <li>&frac14; cup vegetable shortening</li>
    <li>&frac12; cup light brown sugar</li>
    <li>&frac14; cup granulated sugar</li>
    <li>1 teaspoon vanilla extract</li>
    <li>1 &frac14; teaspoons ground cinnamon</li>
     <li>&#8539; teaspoon ground nutmeg</li>
  <li>1/2 teaspoon salt</li>
  <li>1 teaspoon cider or white vinegar*</li>
<li>1 large egg</li>
  <li>&frac12; teaspoon baking soda</li>
  <li>&frac34; cup All-Purpose Flour</li>
  <li>1 &frac12; cups rolled oats</li>
  <li>1 cup golden raisins, optional</li>
  </ul>
  </div>
  
</div>
</body>
</html>

6. Slider Animations Pies from the Waitress Musical

Made by Olivia Ng. Recipe card with cool sliding animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i|Raleway:400,900" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>
  
<style>
body {
  background: #3a506b;
  font-family: "Raleway";
}

.main-content {
  max-width: 800px;
  margin: 5em auto 3em;
  position: relative;
  padding: 3em;
}

:root {
  --color: coral;
}

.blue {
  --color: #08b2e3;
}

.yellow {
  --color: #edae49;
}

.orange {
  --color: #f18805;
}

.green {
  --color: #76b041;
}

.brown {
  --color: #916953;
}

.red {
  --color: #e3655b;
}

.pink {
  --color: #ec318c;
}

.recipe-wrapper {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  align-self: stretch;
}
.recipe-wrapper .recipe-image {
  flex: 4;
  overflow: hidden;
  position: relative;
  background: #fcfcfc;
}
.recipe-wrapper .pie-photo {
  max-width: 150%;
  position: absolute;
  right: 0;
  bottom: 120%;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.recipe-wrapper .recipe-content {
  background: #fff;
  flex: 5;
  padding: 7%;
  text-align: center;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}
.recipe-wrapper .navigation {
  position: absolute;
  right: -10px;
  top: 60px;
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.recipe-wrapper .navigation i {
  margin: 8px;
  display: block;
  opacity: 0.6;
  cursor: pointer;
}
.recipe-wrapper .navigation i:hover {
  opacity: 1;
}
.recipe-wrapper .navigation i.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.recipe-wrapper .recipe-page {
  font: 400 28px "Playfair Display", cursive;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #999;
  opacity: 0;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.recipe-wrapper .recipe-content-inner {
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
  top: 150%;
  position: absolute;
  left: 0;
  margin: 0 10%;
  right: 0;
}

.recipe.active .recipe-page {
  opacity: 1;
}
.recipe.active .pie-photo {
  bottom: -5%;
}
.recipe.active .recipe-content-inner {
  top: 12%;
}

.pie-name {
  font: 900 35px Raleway;
  text-transform: uppercase;
  margin: 20px 0 5px;
  letter-spacing: 2px;
  color: var(--color);
  position: relative;
}
.pie-name:before {
  content: "";
  position: absolute;
}

.pie-context {
  font: 400 18px/1.3 "Raleway";
  color: #999;
  margin: 40px 20px;
}

.pie-serving {
  font: 400 16px Raleway;
  color: var(--color);
  border: 0.5px solid var(--color);
  border-width: 0.5px 0;
  margin: 20px auto;
  max-width: 300px;
}
.pie-serving svg {
  width: 40px;
}
.pie-serving svg path {
  fill: var(--color);
}
.pie-serving p {
  display: inline-block;
  vertical-align: top;
  margin: 12px 6px 6px;
}

.pie-cta {
  display: block;
  padding: 15px;
  border-radius: 40px;
  background: var(--color);
  max-width: 180px;
  font-size: 20px;
  color: #fff;
  position: relative;
  margin: auto;
  top: 0;
  transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.pie-cta:hover {
  top: -5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

aside.context {
  text-align: center;
  color: #fff;
  line-height: 2;
}
aside.context a {
  text-decoration: none;
  color: #fff;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-style: solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 2em auto;
}

footer {
  text-align: center;
  margin: 5em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

@media (max-width: 750px) {
  .recipe-wrapper .pie-photo {
    max-width: 180%;
  }
}
/* For Mobile
@media (max-width: 750px) {
  .recipe-wrapper {
    .recipe-image, .recipe-content {
      flex: 1 1 100%;
    }
    .recipe-image {
      height: 300px;
    }
    .pie-photo {
      max-width: 100%;
    }
  }

  .recipe.active .pie-photo {
      bottom: -30%;
  }
}


@media (max-width: 500px) {
  .recipe-wrapper .recipe-content {
    min-height: 550px; 
  }

}
*/
</style>
</head>
<body>
  <div class="main-content">
  <div class="recipe-wrapper">
    <div class="navigation"><i class="js-navigate js-left disabled icon-arrow-left-circle icons"></i><i class="js-navigate js-right icon-arrow-right-circle icons"></i></div>
    <div class="recipe-image">
      <div class="recipe active"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/WakeUpAndSmellCoffeePie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/LifesARockyRoadPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/PeachyKeenPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/WhiskWayPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/KeyToHappinessPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/GettingOutOfMudPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/ApplePie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/ThanksForTakingMePie.png"/></div>
    </div>
    <div class="recipe-content">
      <div class="recipe active blue">
        <div class="recipe-page">1/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Wake Up and Smell the Coffee Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Coffee cream pie. This one’ll give you extra reason to get out of bed in the morning.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe">
        <div class="recipe-page">2/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Life's A Rocky Road Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes 12 (4-ounce) pies</p>
          </div>
          <div class="pie-context">Rocky road macadamia mousse pies with white chocolate chips.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe orange">
        <div class="recipe-page">3/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Life's Just Peachy Peachy Keen Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Polka-Dot Peach Pie, bursting with sugar and sunshine.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe yellow">
        <div class="recipe-page">4/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">When There's A Whisk, There's A Way Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Lemon meringue pie. When life gives you lemons, bake them up in a pie.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe green">
        <div class="recipe-page">5/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Key (Lime) to Happiness Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Key lime pie, with a taste of tequila for extra happiness.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe brown">
        <div class="recipe-page">6/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Getting Out of the Mud Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Frozen mud pie, made with an avalanche of ice-cream topped with chocolate fudge.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe red">
        <div class="recipe-page">7/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">The Apple of My Eye Rum Raisin Pies</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes 6 hand pies</p>
          </div>
          <div class="pie-context">Creamy inside with sharp bursts of sweetness from the raisins and apples.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe pink">
        <div class="recipe-page">8/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Thanks For Taking Me To The Moon Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Peanut butter cream topped with whipped cream and MoonPies.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
    </div>
  </div>
</div>
<aside class="context">
  <div class="explanation">
     πŸ₯§ Pies from the <a href="https://waitressthemusical.com" target="_blank">Waitress Musical </a>πŸ₯§<br/>Check out the <a href="https://codepen.io/oliviale/full/GPXozx" target="_blank">recipe layout here.</a></div>
</aside>
<footer><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></footer>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script id="rendered-js" >
$(".js-navigate").on("click", function () {
  $(".js-navigate").removeClass("disabled");
  var current = $(".recipe.active");
  var findNext = $(current).next(".recipe");
  var findPrev = $(current).prev(".recipe");
  var button = $(this);

  $(current).removeClass("active");
  setTimeout(function () {
    if ($(button).hasClass("js-right")) {
      $(findNext).addClass("active");
      checkForDisable();
    } else if ($(button).hasClass("js-left")) {
      $(findPrev).addClass("active");
      checkForDisable();
    }
  }, 300);
});

function checkForDisable() {
  var current = $(".recipe.active");
  if ($(current).is(".recipe:last")) {
    $(".js-right").addClass("disabled");
  } else if ($(current).is(".recipe:first")) {
    $(".js-left").addClass("disabled");
  }
}
//# sourceURL=pen.js
    </script>
</body>
</html>

7. Recipe card with floating hover effect

Made by Karsten Marijnissen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card--recipe {
  position: relative;
  width: 300px;
  height: 450px;
  border-radius: 12px;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04), 0 7px 18px 0 rgba(0, 0, 0, 0.05), 0 12px 24px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease;
  cursor: pointer;
}
.card--recipe__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card--recipe__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  overflow: hidden;
}
.card--recipe__video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 0.2s ease;
  opacity: 0;
}
.card--recipe::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  top: 50%;
  right: 0;
  background: black;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 2;
  content: "";
}
.card--recipe__play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% - 23px);
  top: calc(42% - 25px);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;
  z-index: 3;
}
.card--recipe__play img {
  width: 30%;
}
.card--recipe__content {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 26px 26px 34px 26px;
  width: 100%;
  z-index: 3;
}
.card--recipe__title {
  color: white;
  font-size: 27px;
  margin: 0;
  font-weight: 900;
  margin-bottom: 8px;
}
.card--recipe__labels {
  margin: 0;
  padding: 0;
  list-style: none;
}
.card--recipe__label-category, .card--recipe__label {
  border-radius: 3px;
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.card--recipe__label-category {
  background: #2BB778;
}
.card--recipe.is--playing video {
  opacity: 1;
}
.card--recipe[data-tilt] {
  transform-style: preserve-3d;
}
.card--recipe[data-tilt] .card--recipe__play {
  transform: translateZ(20px);
}
.card--recipe[data-tilt] .card--recipe__content {
  transform: translateZ(20px);
}
.card--recipe[data-tilt]:hover {
  box-shadow: 0 12px 18px 0 rgba(0, 0, 0, 0.08), 0 8px 18px 0 rgba(0, 0, 0, 0.08), 0 19px 28px 0 rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
  <div class="card--recipe" data-tilt data-tilt-perspective="900" data-tilt-max="5" data-tilt-easing="cubic-bezier(.1,.22,.49,.95)">
	<img class="card--recipe__img" src="https://www.theseasonedmom.com/wp-content/uploads/2017/07/Creamy-Italian-Pasta-Salad-10.jpg" />
	
	<div class="card--recipe__video">
	  <video preload="none" src="https://karstenmarijnissen.nl/coop.mp4" loop muted="muted"></video>	
	</div>
	
	<div class="card--recipe__play">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/372262/Play.svg" />
	</div>
	
	<div class="card--recipe__content">
		<h3 class="card--recipe__title">Italiaanse <br />pastasalade</h3>
		<ul class="card--recipe__labels">
			<li class="card--recipe__label-category">
				hoofdgerecht
			</li>
			<li class="card--recipe__label">
				2 pers
			</li>
			<li class="card--recipe__label">
				15 min
			</li>
		</ul>
	</div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script id="rendered-js" >
var video = $('.card--recipe').hover(hoverVideo, hideVideo);

function hoverVideo(e) {
  $('video', this).get(0).play();
  $('.card--recipe').addClass('is--playing');
}

function hideVideo(e) {
  $('video', this).get(0).pause();
  $('.card--recipe').removeClass('is--playing');
}
    </script>
</body>
</html>

8. Simplistic CSS Recipe card

Made by Ahmad Nasr. Simplistic CSS Recipe card with button hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://anandchowdhary.github.io/ionicons-3-cdn/icons.css" integrity="sha384-+iqgM+tGle5wS+uPwXzIjZS5v6VkqCUV7YQ/e/clzRHAxYbzpUJ+nldylmtBWCP0" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,[email protected],200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:[email protected];400;500;600;700&display=swap");
:root {
  --headlinesFont: "Jost", sans-serif;
  --bodyFont: "Work Sans", sans-serif;
  --wildWatermelon: #ff4f87;
  --fuelYellow: #f0a035;
  --textColor: #323232;
  --bodyBg: #d6d6d6;
  --white: #fff;
  --black: #000;
}

html {
  box-sizing: border-box;
}

body {
  background: var(--bodyBg);
  font-family: var(--bodyFont);
  color: var(--textColor);
  line-height: 1.5;
}

* {
  box-sizing: inherit;
}

img {
  vertical-align: text-bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

.ft-recipe {
  width: 460px;
  height: 654px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 88px 0 rgba(0, 0, 0, 0.1607843137);
  overflow: hidden;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.ft-recipe .ft-recipe__thumb {
  position: relative;
  height: 281px;
  box-shadow: 0px 0px 130px 0 rgba(0, 0, 0, 0.38);
}
.ft-recipe .ft-recipe__thumb #close-modal {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: #000;
  color: var(--white);
  text-align: center;
  line-height: 36px;
  font-size: 22px;
  cursor: pointer;
  z-index: 1;
  transition: all 200ms ease;
}
.ft-recipe .ft-recipe__thumb #close-modal:hover {
  background: transparent;
  color: var(--black);
}
.ft-recipe .ft-recipe__thumb h3 {
  text-align: center;
  position: absolute;
  margin: 0;
  width: 100%;
  color: var(--white);
  font-family: var(--headlinesFont);
  font-size: 25px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
  padding: 2.4rem 0 0;
}
.ft-recipe .ft-recipe__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.ft-recipe .ft-recipe__content {
  flex: 1;
  padding: 0 2em 1em;
}
.ft-recipe .ft-recipe__content .content__header .row-wrapper {
  display: flex;
  padding: 0.55em 0 0.3em;
  border-bottom: 1px solid #d8d8d8;
}
.ft-recipe .ft-recipe__content .content__header .row-wrapper .recipe-title {
  font-family: var(--headlinesFont);
  font-weight: 600;
}
.ft-recipe .ft-recipe__content .content__header .recipe-details {
  display: flex;
  list-style: none;
  padding: 1.4em 0 1em;
  margin: 0;
  justify-content: space-between;
}
.ft-recipe .ft-recipe__content .content__header .recipe-details .recipe-details-item {
  flex: 1;
}
.ft-recipe .ft-recipe__content .content__header .recipe-details .recipe-details-item i {
  font-size: 30px;
}
.ft-recipe .ft-recipe__content .content__header .recipe-details .recipe-details-item .value {
  color: #ff4f87;
  margin-left: 0.35em;
  vertical-align: bottom;
  font-size: 24px;
  font-weight: 600;
}
.ft-recipe .ft-recipe__content .content__header .recipe-details .recipe-details-item .title {
  display: block;
  margin-top: -4px;
  font-family: var(--headlinesFont);
  font-size: 21px;
  font-weight: 300;
}
.ft-recipe .ft-recipe__content .description {
  margin: 0.3em 0 1.8em;
}
.ft-recipe .ft-recipe__content .content__footer {
  text-align: center;
  margin: 0 3rem;
}
.ft-recipe .ft-recipe__content .content__footer a {
  font-family: var(--headlinesFont);
  display: inline-block;
  background: var(--wildWatermelon);
  padding: 0.45em 1em;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.2px;
  font-size: 17px;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.ft-recipe .ft-recipe__content .content__footer a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 34px 0 rgba(255, 79, 135, 0.32);
}
</style>
</head>
<body>
  <div class="ft-recipe"> 
  <div class="ft-recipe__thumb"><span id="close-modal"><i class="ion ion-md-close"></i></span>
    <h3>Today's Featured Recipe</h3><img src="https://zippypaws.com/app/uploads/2018/05/strawberry-waffles-1024x668.jpg" alt="Strawberry Waffle"/>
  </div>
  <div class="ft-recipe__content">
    <header class="content__header">
      <div class="row-wrapper">
        <h2 class="recipe-title">Strawberry Waffle</h2>
        <div class="user-rating"></div>
      </div>
      <ul class="recipe-details">
        <li class="recipe-details-item time"><i class="ion ion-ios-clock-outline"></i><span class="value">20</span><span class="title">Minutes</span></li>
        <li class="recipe-details-item ingredients"><i class="ion ion-ios-book-outline"></i><span class="value">5</span><span class="title">Ingredients</span></li>
        <li class="recipe-details-item servings"><i class="ion ion-ios-person-outline"></i><span class="value">4-6</span><span class="title">Serving</span></li>
      </ul>
    </header>
    <p class="description">
       There’s no better way to celebrate May being National Strawberry Month than by sharing a sweet treat with your pup!!! Strawberries...</p>
    <footer class="content__footer"><a href="#">View Recipe</a></footer>
  </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script id="rendered-js" >
    </script>
</body>
</html>

9. Recipe Card Basic

Made by Kevin Lesht. Recipe card with no effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
  
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background-color: #57abf2;
  background-image: -webkit-linear-gradient(-225deg, #19d3d1 5%, #57abf2);
  background-image: linear-gradient(-45deg,#19d3d1 5%, #57abf2);
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.recipe-card {
  background: #fff;
  margin: 4em auto;
  width: 90%;
  max-width: 496px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.recipe-card aside {
  position: relative;
}
.recipe-card aside img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.recipe-card aside .button {
  background: #57abf2;
  display: inline-block;
  position: absolute;
  top: 80%;
  right: 3%;
  width: 4.0625em;
  height: 4.0625em;
  border-radius: 4.0625em;
  line-height: 4.0625em;
  text-align: center;
}
.recipe-card aside .button .icon {
  vertical-align: middle;
}
.recipe-card article {
  padding: 1.25em 1.5em;
}
.recipe-card article ul {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
}
.recipe-card article ul li {
  display: inline-block;
  margin-left: 1em;
  line-height: 1em;
}
.recipe-card article ul li:first-child {
  margin-left: 0;
}
.recipe-card article ul li .icon {
  vertical-align: bottom;
}
.recipe-card article ul li span:nth-of-type(2) {
  margin-left: 0.5em;
  font-size: 0.8em;
  font-weight: 300;
  vertical-align: middle;
  color: #838689;
}
.recipe-card article h2, .recipe-card article h3 {
  margin: 0;
  font-weight: 300;
}
.recipe-card article h2 {
  font-size: 1.75em;
  color: #222222;
}
.recipe-card article h3 {
  font-size: 0.9375em;
  color: #838689;
}
.recipe-card article p {
  margin: 1.25em 0;
  font-size: 0.8125em;
  font-weight: 400;
  color: #222222;
}
.recipe-card article p span {
  font-weight: 700;
  color: #000000;
}
.recipe-card article .ingredients {
  margin: 2em 0 0.5em;
}
.recipe-card .icon {
  display: inline;
  display: inline-block;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg);
  background-repeat: no-repeat;
}
.recipe-card .icon-calories, .recipe-card .icon-calories\:regular {
  background-position: 0 0;
  width: 16px;
  height: 19px;
}
.recipe-card .icon-clock, .recipe-card .icon-clock\:regular {
  background-position: 0 -19px;
  width: 20px;
  height: 20px;
}
.recipe-card .icon-level, .recipe-card .icon-level\:regular {
  background-position: 0 -39px;
  width: 16px;
  height: 19px;
}
.recipe-card .icon-play, .recipe-card .icon-play\:regular {
  background-position: 0 -58px;
  width: 21px;
  height: 26px;
}
.recipe-card .icon-users, .recipe-card .icon-users\:regular {
  background-position: 0 -84px;
  width: 18px;
  height: 18px;
}
</style>
</head>
<body>
  <div class="recipe-card">

	<aside>

		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/oatmeal.jpg" alt="Chai Oatmeal" />

		<a href="#" class="button"><span class="icon icon-play"></span></a>

	</aside>

	<article>

		<h2>Chai Oatmeal</h2>
		<h3>Breakfast</h3>

		<ul>
			<li><span class="icon icon-users"></span><span>1</span></li>
			<li><span class="icon icon-clock"></span><span>15 min</span></li>
			<li><span class="icon icon-level"></span><span>Beginner level</span></li>
			<li><span class="icon icon-calories"></span><span>248</span></li>
		</ul>

		<p>For an extra thick and creamy bowl, add oat bran.  It'll make for a hearty helping and also add more fiber to your meal.  If you love the taste of chai, you'll enjoy this spiced version with coriander, cinnamon, and turmeric.</p>

		<p class="ingredients"><span>Ingredients:&nbsp;</span>Milk, salt, coriander, cardamom, cinnamon, turmeric, honey, vanilla extract, regular oats, oat bran.</p>

	</article>
</div>
</body>
</html>

10. Simple Recipe card

Made by Travis Williamson. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cormorant+Garamond:300|Lato:300,400,700'>
  
<style>
html {
  background: #FAF7F2;
  background-image: url(https://s3.postimg.org/s1n3ji1ur/paper_fibers_2_X.png);
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.u-clearfix:before,
.u-clearfix:after {
  content: " ";
  display: table;
}

.u-clearfix:after {
  clear: both;
}

.u-clearfix {
  *zoom: 1;
}

.subtle {
  color: #aaa;
}

.card-container {
  margin: 25px auto 0;
  position: relative;
  width: 692px;
}

.card {
  background-color: #fff;
  padding: 30px;
  position: relative;
  box-shadow: 0 0 5px rgba(75, 75, 75, .07);
  z-index: 1;
}

.card-body {
  display: inline-block;
  float: left;
  width: 310px;
}

.card-number {
  margin-top: 15px;
}

.card-circle {
  border: 1px solid #aaa;
  border-radius: 50%;
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
  height: 25px;
  text-align: center;
  width: 25px;
}

.card-author {
  display: block;
  font-size: 12px;
  letter-spacing: .5px;
  margin: 15px 0 0;
  text-transform: uppercase;
}

.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 60px;
  margin: 10px 0;
}

.card-description {
  display: inline-block;
  font-weight: 300;
  line-height: 22px;
  margin: 10px 0;
}

.card-read {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 5px 0 20px;
  position: relative;
  text-align: right;
  text-transform: uppercase;
}

.card-read:after {
  background-color: #b8bddd;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 9px;
  width: 75%;
}

.card-tag {
  float: right;
  margin: 5px 0 0;
}

.card-media {
  float: right;
}

.card-shadow {
  background-color: #fff;
  box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 1), 0 2px 50px 2px rgba(0, 0, 0, 1), 0 0 100px 3px rgba(0, 0, 0, .25);
  height: 1px;
  margin: -1px auto 0;
  width: 80%;
  z-index: -1;
}
</style>
</head>
<body>
  <div class="card-container">
  <div class="card u-clearfix">
    <div class="card-body">
      <span class="card-number card-circle subtle">01</span>
      <span class="card-author subtle">John Smith</span>
      <h2 class="card-title">New Brunch Recipe</h2>
      <span class="card-description subtle">These last few weeks I have been working hard on a new brunch recipe for you all.</span>
      <div class="card-read">Read</div>
      <span class="card-tag card-circle subtle">C</span>
    </div>
    <img src="https://s15.postimg.cc/temvv7u4r/recipe.jpg" alt="" class="card-media" />
  </div>
  <div class="card-shadow"></div>
</div>
</body>
</html>

11. UI Recipe Card

Made by Alex Tkachev. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  list-style-type: none;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

html, body {
  height: 100%;
}

body {
  background: url("https://wallpaperscraft.com/image/coffee_coffee_beans_cupcake_candy_93301_1920x1080.jpg") no-repeat center;
}

.card {
  position: relative;
  background: #fff;
  max-width: 500px;
  margin: 20px auto;
  box-shadow: 0px 0px 30px 2px #000;
}
.card .header {
  background: url("http://img.taste.com.au/UZVXAdo7/taste/2016/11/chinese-egg-noodle-and-vegetable-stir-fry-94186-1.jpeg") no-repeat center;
  background-size: cover;
  min-height: 350px;
}
.card .header .icon a .fa-heart-o {
  position: absolute;
  left: 85%;
  bottom: 30.7%;
  background: #17BEBB;
  color: #fff;
  font-size: 1.3em;
  font-weight: bold;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0px 5px 30px 1px #17BEBB;
}
.card .text .food {
  color: #212129;
  text-align: left;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 5px 30px;
}
.card .text .fa-clock-o {
  color: #9B9B9B;
  margin: 0 30px;
}
.card .text .fa-users {
  color: #9B9B9B;
}
.card .stars {
  margin: 10px 30px;
}
.card .stars li a i {
  color: #FFE500;
}
.card .info {
  margin: 10px 30px;
}
.card a.btn {
  display: block;
  background: #EF3E36;
  color: #fff;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 10px;
  transition: 250ms;
}
.card a.btn:hover {
  background: #17BEBB;
  transition: 250ms;
}
</style>
</head>
<body>
  <div class="card">
   <div class="header">
      <div class="icon">
      <a href="#"><i class="fa fa-heart-o"></i></a>
      </div>
   </div>
   <div class="text">
      <h1 class="food">
         Chinese Noodles
      </h1>
      <i class="fa fa-clock-o"> 15 Mins</i>
      <i class="fa fa-users"> Serves 2</i>
      
      <div class="stars">
         <li>
            <a href="#"><i class="fa fa-star"></i></a>
            <a href="#"><i class="fa fa-star"></i></a>
            <a href="#"><i class="fa fa-star"></i></a>
            <a href="#"><i class="fa fa-star"></i></a>
            <a href="#"><i class="fa fa-star-o"></i></a>
         </li>
      </div>
      <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, temporibus.</p>
   </div>
   <a href="#" class="btn">Let's Cook!</a>
</div>
</body>
</html>

12. Basic Recipe Card

Made by Braunson. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(http://weloveiconfonts.com/api/?family=entypo);

body {
  background:rgba(0,0,0,0.3) url(http://www.konig-fashion.com/wp-content/uploads/2013/06/Blurry-Blue-Background-IV-1170x731.jpg) top center no-repeat;
  color:#fff;
  padding-top:50px;
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-weight:none;
  font-style:normal;
  opacity:0.7;
}
.avatar-frame,
.avatar-frame img{
  font-family: 'Muli', sans-serif;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 30px; /* Saf3+, Chrome */
	border-radius: 30px; /* Opera 10.5, IE 9 */
	/*-moz-border-radius: 30px;  Disabled for FF1+ */
  vertical-align:middle;
}
.avatar-frame img { margin-right:5px; }


a, a:hover { text-decoration:none; color:#000; }
li { display:inline; margin-right:10px; font-size:10.5pt;   font-family: 'Muli', sans-serif;
 }
ul{ margin:0 15px 0 15px; padding:0; }

h3 {
  font-family: 'Muli', sans-serif;
  font-weight:normal;
  font-size:21pt;
  padding: 10px 15px 10px 15px;
  margin:0;
  text-shadow: 1px 0px 2px rgba(150, 150, 150, 1);
}
.recipe-card {
  position:relative;
  width:300px;
  background-color:#fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  border-radius:4px;
  margin:0 auto;
}

.recipe-image {
  overflow:hidden;
  position:relative;
  clear:both;
  background-image: url('http://rippedrecipes.com/images/snaps/medium_marinated-shiitake-mushroom-burger_P0vWU1WRj69QP.jpg');
  height:340px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.recipe-overlay {
  height:100%;
  background:transparent;
  background: linear-gradient(top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -moz-linear-gradient(top, rgba( 0, 0, 0, 0) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -ms-linear-gradient(top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -o-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -webkit-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
  margin:0;
  padding:0;
}

.recipe-title {
  position: absolute; 
  bottom: 15px; 
  left: 0;

}

.recipe-author {
  height:30px;
  padding:15px 20px 20px 20px;
}

.button {
  float:right;
  border-radius:4px;
  color:#fff;
  padding:5px 10px 5px 10px;
  font-weight:bold;
  background-color:#ff5b76;
}
.button:hover {
  color:#fff;
}
</style>
</head>
<body>
  <div class="recipe-card">
  <div class="recipe-image">
    <div class="recipe-overlay">
      <div class="recipe-title">
        <h3>Crockpot Chipotle Burrito Bowls</h3>
        <ul>
          <li><i class="entypo-clock"></i> 22 Mins</li>
          <li><i class="entypo-menu"></i> 12 Ingredients</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="recipe-author">
    <a href="#" class="avatar-frame">
      <img src="https://www.gravatar.com/avatar/e971b1b59ef6876038eef74dfcb1b7a0?s=40"> Braunson Y.
    </a>
    <a href="#" class="button"><i class="entypo-right-open-mini"></i> Cook It</a>
  </div>
</div>
</body>
</html>

13. Avocado Frappe Recipe Card

Made by Amy. Simple CSS Recipe card. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Handlee|Yellowtail" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: #fff url('https://s.doctoroz.com/styles/970x546/s3/recipe/avocado.gif?itok=WKqLEMYT') no-repeat;
  background-size: cover;
  background-position: bottom left;
  height: 100%;
}

h1 {
  font-family: 'Yellowtail', cursive;
  font-size: 3em;
  border-bottom: 5px double #dceda2;
  margin-bottom: .5em;
}

ul li {
  list-style-type: none;
  margin-left: -1.3em;
  font-weight: bold;
}

li {
  font-family: 'Handlee', cursive;
  font-size: 1.2em;
  line-height: 2em;
  letter-spacing: 1px;
}

main {
  background-color: white;
  border: 5px solid #dceda2;
  box-shadow: 5px 5px 5px rgba(0,0,0, .3);
  padding: 0 1.3em;
  margin: 1em auto;
  max-width: 20em;
}
</style>
</head>
<body>
  <main>
  <h1>Avocado Frapp&eacute;</h1>

  <ul>
    <li><sup>3</sup>&frasl;<sub>4</sub> c. plain soymilk</li>
    <li><sup>1</sup>&frasl;<sub>4</sub> ripe medium avocado</li>
    <li>3 Tbl. light brown sugar</li>
    <li>4 ice cubes</li>
    <li>2 tsp. lime juice</li>
  </ul>
  
  <ol>
    <li>Put all ingredients into a blender and pure&eacute;.</li>
    <li>Pour into a glass and serve.</li>
    <li>Enjoy!</li>
  </ol>
</main>
</body>
</html>