<body>
      <!--The card begins here-->
      <section class="card">
        <a href="https://cdpn.io/pen/debug/qMOgPX?authentication_hash=RBMOJbamOQGk">
          <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"  class="card-img">
          </a>
        <!--product and button are begins here-->
        <div class="product-title"> 
          <a href="https://cdpn.io/pen/debug/qMOgPX?authentication_hash=RBMOJbamOQGk">
          Yummy Cup Cakes  
            </a>
          
          <!-- used the <br> tag so that the product title and product line are in the same container with little white space-->
        
        </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;
  
  

}
.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{

  /*This text shadow format is per as google fonts requirements*/
 display:flex;
 justify-content:center;
  align-items:center;
  font-family: 'Tangerine', serif;
}
.product-price{
 
 text-align:center;

  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:1.5rem;
   /*content is positioned towards the right side of the contact section*/
  float:right;
  border-radius:5px;
  
  
}
a {
  color:black;
   font-size:1.5rem;
  text-align:center;
}

 
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.