Table of Contents
Introduction: Create a Responsive Card Using HTML CSS
Creating interactive and attractive cards on a website can significantly enhance user experience. These cards are essential components frequently used to present content or information in a structured and engaging method.
We will learn how to Create a Responsive Card Using HTML CSS in this tutorial. A well-known plan design for displaying data in a visible, engaging, and combined manner is the card format. We will style the cards with CSS and structure the format with HTML.
This project will show how card elements can be made interactive using CSS changes and modifications.
How to Create a Responsive Card Using HTML CSS:
Please follow these steps to Create a Responsive Card Using HTML CSS.
1. Setting Up the Project:
- Make a folder and give it a name that fits.
- To serve as the primary structure, create a file called “
index.html” within the folder. - In addition, define the cards’ visual elements in a “
style.css” file. - Accumulate the essential pictures or use placeholder pictures for each card.
2. Structure of HTML:
Now, start with moving the following HTML code in your “index.html” file for creating the layout. Use semantic tags like ‘<div>‘, ‘<img>', ‘<h2>,’ ‘<p>‘ and ‘<a>‘ to define the HTML layout. Each card structure comprises a picture compartment and content segments for the title, characterization, and a ‘Read More’ connection.
<!DOCTYPE html>
<!-- how to make Responsive card using html css -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
</head>
<body>
<div class="container">
<div class="custom-card">
<div class="img-box"><img src="https://images.unsplash.com/photo-1682685797507-d44d838b0ac7?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
<div class="custom-content">
<h2>Card 1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto, hic? Magnam eum error saepe doloribus corrupti repellat quisquam alias doloremque!</p>
<a href="">Read More</a>
</div>
</div>
<div class="custom-card">
<div class="img-box"><img src="https://images.unsplash.com/photo-1682686578023-dc680e7a3aeb?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
<div class="custom-content">
<h2>Card 2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto, hic? Magnam eum error saepe doloribus corrupti repellat quisquam alias doloremque!</p>
<a href="">Read More</a>
</div>
</div>
<div class="custom-card">
<div class="img-box"><img src="https://images.unsplash.com/photo-1682686580224-cd46ea1a6950?auto=format&fit=crop&q=80&w=1470&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
<div class="custom-content">
<h2>Card 3</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto, hic? Magnam eum error saepe doloribus corrupti repellat quisquam alias doloremque!</p>
<a href="">Read More</a>
</div>
</div>
</div>
</body>
</html>
3. Styling with CSS:
In the next step, move the following CSS code to your “style.css” file for applying styles to different components to make an outwardly engaging design. Use properties, for example, ‘line sweep’, ‘box-shadow’, ‘progress’, and ‘change’ to accomplish drift impacts and smooth advances. Use media queries to make the design responsive for smaller devices.
/* Importing Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #333333;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 100px 50px;
padding: 100px 50px;
}
.container .custom-card {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
width: 350px;
max-width: 100%;
height: 300px;
background: #FFF;
border-radius: 20px;
transition: 0.5s;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
}
.container .custom-card:hover {
height: 400px;
}
.container .custom-card .img-box {
position: absolute;
top: 20px;
width: 300px;
height: 220px;
background: #333;
border-radius: 12px;
overflow: hidden;
transition: 0.5s;
}
.container .custom-card:hover .img-box {
top: -100px;
scale: 0.75;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
}
.container .custom-card .img-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .custom-card .custom-content {
position: absolute;
top: 252px;
width: 100%;
height: 35px;
padding: 0 30px;
text-align: center;
overflow: hidden;
transition: 0.5s;
}
.container .custom-card:hover .custom-content {
top: 130px;
height: 250px;
}
.container .custom-card .custom-content h2 {
font-size: 1.5rem;
font-weight: 700;
color: #333333;
}
.container .custom-card .custom-content p {
color: #333;
}
.container .custom-card .custom-content a {
position: relative;
top: 15px;
display: inline-block;
padding: 12px 25px;
text-decoration: none;
background: #181818;
color: #fff;
font-weight: 500;
}
.container .custom-card .custom-content a:hover {
opacity: 0.8;
}
@media (max-width: 480px) {
.container .custom-card {
width: 230px;
border-radius: 15px;
}
.container .custom-card .img-box {
width: 185px;
border-radius: 10px;
}
.container .custom-card .custom-content p {
font-size: 0.8rem;
}
.container .custom-card .custom-content a {
font-size: 0.9rem;
}
}Conclusion:
Create a Responsive Card Using HTML CSS that are visually appealing can significantly improve a website’s design aesthetics. By following these means and analyzing different avenues regarding various CSS properties, one can gain proficiency in the specialty of making drawings in UI. In addition to adding interactivity, the use of transitions and hover effects also improves the user experience as a whole.
This undertaking fills in as a beginning stage for novices to dig into CSS changes and advances, empowering further research into making different and smart web components.
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
