<!DOCTYPE html>
  <html lang="en">
<head>
   <title>Product Card</title>
  <!-- Required meta tags-->
  <meta charset="UTF-8">
  <meta name="description" content="Product Card">
  <meta name="keywords" content="product card,css,css3, html5">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Font awesome link-->
  <link rel="stylesheet"      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--Google font link-->
  <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Tangerine">

  </head>
    <body>
      <!--The card begins here-->
      <section class="card">
          <img src="https://images.pexels.com/photos/48184/bun-sweets-pastries-pastry-shop-48184.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Yummix cup cake" alt="" class="card-img">
        <!--product and button are begins here-->
        <div class="product-title"> Winnie's Cup Cakes <br> <!-- used the <br> tag so that the product title and product line are in the same container with little white space-->
        <button class="product-price">Ksh30</button>
        </div>
        <!--product annd button are ends here--->
        <!--information section begins here-->
      <article class="info">
        <p>Ideal for any occasion, flavor and quantity as per customer's request.<br\>
        <p>No frosting</p>
      <h5>ORDERS MUST BE MADE ATLEAST TWO DAYS IN ADVANCE.<h5>
        <article>
          <!--product information ends here-->
          <!--footer section-->
      <footer class="contacts">
       <h5>Contact Us</h5>
        <p>
          <span class="email">Email:xxxxx@gmail.com</span>
          <span class="tel-no">MobileNo:01234567890.</span>
        </p>
      </footer>

      </section>
      
      
    </body>
    </html>
    
body{
 
  display:block;
  background-color:rgba(150,10,10,0.8);
  
  

}
.card{
  box-shadow: 18px 14px 16px rgba(100,0,0,0.5);
  width:350px;
  height:600px;
  margin:auto;
  border:10px;
  border-radius:20px;
  background-color:rgba(100,72,74,0.29);
}
.product-title{
  font-size:40px;
  font-weight:bold;
  text-align:center;
  /*This text shadow format is per as google fonts requirements*/
  text-shadow:.06em .06em 0 #fff,.08em .08em 0 #aaa;
  font-family: 'Tangerine', serif;
}
.product-price{
 
 text-align:center;
  font-weight:bold;
  border-style:5px solid;
  font-size:10px;
  border-radius:10px;
   /*minimal height for the button*/
  min-height:50px;
}

.card-img{
   /*here the image will take the maximum width of the card*/
  max-width:350px;
  height:auto;
  border-radius:2px;
  
}
.info{
   /*the product information section is displayed as a block of words*/
  display:block;
  text-align:center;
}
.contacts{
  background-color:rgba(93, 138, 141, 0.76);
  padding:2px;
  
}
.email{
   /*automatically resizes a box*/
  box-sizing:box-border;
  border:solid;
  font-size:13px;
  border-radius:5px;
}
.tel-no{
  box-sizzing:box-border;
  border:solid;
  font-size:13px;
   /*content is positioned towards the right side of the contact section*/
  float:right;
  border-radius:5px;
  
  
}


 
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.