<!--font awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<!-- google fonts-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">


<body>
  <div id="card-wrapper">
    <div class="inner-card">
    <!--top right btn-->
    <div class="more-info-btn">
      <div class="btn-background"><i class="fas fa-ellipsis-h"></i></div>
    </div>
    
    <!--title-->
    <div id="title">
      <header>Oatmeal Chocolate <br/>Chip Cookies</header>
    </div>
    
    <!--details-->
    <div id="details">
      
    <div class="Details">
      <h3>Level</h3>
      <p>Beginner</p>
    </div>
      
    <div class="Details">
      <h3>Time</h3>
      <p>35 minutes</p>
    </div>
      
    <div class="Details">
      <h3>Rating</h3>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
      
    </div>
    
   
  </div>
     <!--start btn-->
    <div class="start-btn"><a href="http://codepen.io/DesertDev">Start Cooking <i class="fas fa-long-arrow-alt-right"></i></a></div>
  
    </div>
  
  
  
  <!--card number 2 -->
   <div id="card-wrapper1">
    <div class="inner-card">
    <!--top right btn-->
    <div class="more-info-btn">
      <div class="btn-background"><i class="fas fa-ellipsis-h"></i></div>
    </div>
    
    <!--title-->
    <div id="title">
      <header>Salted <br/>Coconut Cookies</header>
    </div>
    
    <!--details-->
    <div id="details">
      
    <div class="Details">
      <h3>Level</h3>
      <p>Beginner</p>
    </div>
      
    <div class="Details">
      <h3>Time</h3>
      <p>35 minutes</p>
    </div>
      
    <div class="Details">
      <h3>Rating</h3>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
      
    </div>
    
   
  </div>
     <!--start btn-->
    <div class="start-btn"><a href="http://codepen.io/DesertDev">Start Cooking <i class="fas fa-long-arrow-alt-right"></i></a></div>
  
    </div>
  
  
  
  <!--card number 3 -->
   <div id="card-wrapper2">
    <div class="inner-card">
    <!--top right btn-->
    <div class="more-info-btn">
      <div class="btn-background"><i class="fas fa-ellipsis-h"></i></div>
    </div>
    
    <!--title-->
    <div id="title">
      <header>Ginger <br/>Bread Cookies</header>
    </div>
    
    <!--details-->
    <div id="details">
      
    <div class="Details">
      <h3>Level</h3>
      <p>Beginner</p>
    </div>
      
    <div class="Details">
      <h3>Time</h3>
      <p>35 minutes</p>
    </div>
      
    <div class="Details">
      <h3>Rating</h3>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
      
    </div>
    
   
  </div>
     <!--start btn-->
    <div class="start-btn"><a href="http://codepen.io/DesertDev">Start Cooking <i class="fas fa-long-arrow-alt-right"></i></a></div>
  
    </div>
</body>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
    flex-wrap:wrap;
}

body{
  min-height:100vh;
  
  display:flex;
  justify-content:space-around;
  align-items:center;
}

#card-wrapper{
background-image:url(https://images.unsplash.com/photo-1504472893907-7f577b7c9beb?ixlib=rb-0.3.5&s=3e5168084ad03cb653101983430f6686&auto=format&fit=crop&w=634&q=80);
  background-size:cover;
  background-repeat:no-repeat;

  min-width:500px;
  min-height:750px;
  color:black;
  box-shadow: 5px 5px 15px; 
  font-family: 'Abril Fatface', cursive;
  order:2;
  margin-top:50px;
} 

.inner-card{
  padding:2em;
}

.more-info-btn{
  display:flex;
  justify-content:flex-end;
}
.btn-background{
  background:white;
  padding:.9em;
  border-radius:50%;
  font-size:20px;
  color:black;
}

#title{
  font-size:50px;
  margin-top:25px;
}

#details{
  display:flex;
  justify-content:space-around;
  margin-top:50px;
}

.start-btn{
  display:flex;
  justify-content:center;
  margin-top:290px;
}
.start-btn a{
  background:white;
  color:black;
  padding:.6em;
  width:200px;
  border-radius:20px;
  text-align:center;
  box-shadow: .5px 1px 5px;
  text-decoration:none;
}

.start-btn .fas{
  margin-left:10px;
}


/*Second Card*/
#card-wrapper1{
background-image:url(https://images.unsplash.com/photo-1517400549041-c6b0723842f4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38aec809de8b2010f0e8e36076444b70&auto=format&fit=crop&w=2134&q=80);
  background-size:cover;
  background-repeat:no-repeat;

  min-width:500px;
  min-height:750px;
  color:black;
  box-shadow: 5px 5px 15px black; 
  font-family: 'Abril Fatface', cursive;
  color:white;
  order:3;
   margin-top:50px;
} 

/*Third Card*/
#card-wrapper2{
background-image:url(https://images.unsplash.com/photo-1513321409245-5c6a71bd5242?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1b38e2cf2fdc70148833d0ce0368e867&auto=format&fit=crop&w=633&q=80);
  background-size:cover;
  background-repeat:no-repeat;

  min-width:500px;
  min-height:750px;
  color:black;
  box-shadow: 5px 5px 15px black; 
  font-family: 'Abril Fatface', cursive;
  color:white;
  order:1;
  margin-top:50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.