How to Create Responsive card using html css | card using css

How to Create Responsive card using  html css | card using css

Hello learners,

So today we are going to learn about  How to Create a Responsive card using html css | card using css.
 Responsive Layout:-A website Layout which is device-friendly means it is accessible and readable on small screens as well as big screens. Webpage adjusts its content according to screen size.

You can see in the video How our webpage is responsive.
So Let’s start firstly with HTML.

HTML Code


1. Inside the body tag, Firstly make a class named container which will contain the four cards(items).

2. Make four classes named items which will be the cards. Also, define one unique more class to every item so that you can add some styling to every card individually. so we defined item1,item2,item3, and     item4 respectively.

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="item item1">
<div class="img"></div>
<div class="TITLE"><h3>CAKE</h3></div>
<div class="price">$3</div>
<div class="buy">BUY</div>
</div>
<div class="item item2">
<div class="img"></div>
<div class="TITLE"><h3>BURGER</h3></div>
<div class="price">$2</div>
<div class="buy">BUY</div>
</div><div class="item item3">
<div class="img"></div>
<div class="TITLE"><h3>SHAKE</h3></div>
<div class="price">$6</div>
<div class="buy">BUY</div>
</div><div class="item item4">
<div class="img"></div>
<div class="TITLE"><h3>ICE CREAM</h3></div>
<div class="price">$5</div>
<div class="buy">BUY</div>
</div>
</div>
</body>
</html>

3. Inside every item define some more classes namely img, title, price and buy in which you will write their values like in img you will add images of food items. Similarly, in title, price and buy mention name of food item,price and buy respectively.


Now,HTML code is complete. Look How’s our webpage is looking after implementing HTML.
How to Create Responsive card using  html css | card using css

CSS  Code

Before writing css if you are using an external file for css. please link the css file with the HTML code.


1. Firstly I used a universal selector and set the margin and padding to be zero.

2. I defined the container’s display as flex so items inside will start working as flex items and align in the same horizontal line. Through the property of justify-content center it horizontally and align-items centers the items vertically. Set the height and width of the container.

3. Apply styling on the cards(item) set its height, width, margin, border radius, and background color. border-radius makes the corners of cards curvier which helps the card to look good.

4. Now, set the height and width of the image individually for every item set the images using the background-image property.
 *{  
margin: 0;
padding: 0;
}
.container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
width:100vw;
flex-wrap:wrap;
}
.item{
height:270px;
width:200px;
background-color:red;
margin: 20px;
border-radius: 10px;
}
.img{
width:200px;
height:200px;
border-radius: 10px 10px 0px 0px ;
}
.item1 .img{
background-image:url("cake.jpg");
background-size: cover;
}
.item2 .img{
background-image:url("burger.jpg");
background-size: cover;
}
.item3 .img{
background-image:url("shake.jpg");
background-size: cover;
}
.item4 .img{
background-image: url("icecream.jpg");
background-size: cover;
}
.TITLE{
background-color:aqua;
height:20px;
width:200px;
text-align:center;
}
.price{
background-color:sandybrown;
height:20px;
width:200px;
}
.buy{
background-color: yellow;
width:fit-content;
text-align: center;
margin: 0px auto;
padding:6px 15px;
}
.item:hover{
transform:scale(1.1);
transition-duration: 0.5s;
box-shadow: 7px 10px rgba(0,0,0,0.2);
}

5. Now similarly set all the styling properties for the title, price, and buy.


6. Hover is a pseudo selector which is used if you use it when you keep the mouse over the item it applies the properties inside it. I used the transform property so when you keep the mouse over the item the card size will transform. Also, set the transition-duration and shadow property.

7. Set the flex-wrap property to wrap which will make the webpage responsive.

                         ALL OVER!!! YOUR WEBSITE IS READY.

How to Create Responsive card using  html css | card using css

Written by @Himanshu Singh.

Share on:

0 thoughts on “How to Create Responsive card using html css | card using css”

Leave a Comment