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