Responsive Cards Design HTML CSS

In web design, cards are unique display units that contain a single piece of content or a set of useful pieces of information. These easily digestible pieces of information help visitors gain some insight into the website they are visiting. In this blog post, we will share with you a responsive card CSS snippet. We have a video tutorial about this snippet below.

Video Tutorial:

We hope you enjoyed the above CSS Responsive Card Video Tutorial. Cards are considered useful elements of websites for various reasons. Some of them are increased visual appeal and organization, improved scannability and readability, mobile-friendliness, focus on content, consistency, and reusability, containing interactive elements, etc. Cards are especially prevalent in e-commerce websites or online stores, magazine or news websites, portfolio and blog websites, social media platforms, media websites, marketplaces or directories, dashboards, admin panels, etc.

You May Also Like:

Responsive Cards Design HTML CSS [ Source Code ]:

To create these responsive cards using an HTML and CSS snippet, you need to create an HTML and a CSS file. Then, you have to copy the code from the code box below and paste it into your files. If you want, you can also download the source code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Cards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wraps">
        <div class="single-card">
            <div class="card">
                <div class="content">
                    <img src="img/1.jpg" alt="Nature" class="card-image">
                    <div>
                        <h2>Heading Here</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae sequi ullam qui, debitis ad non officiis illum animi, praesentium odit, libero vel sit ipsam eius!</p>
                        <a href="#">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="single-card">
            <div class="card">
                <div class="content">
                    <img src="img/2.jpg" alt="Tech" class="card-image">
                    <div>
                        <h2>Heading Here</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae sequi ullam qui, debitis ad non officiis illum animi, praesentium odit, libero vel sit ipsam eius!</p>
                        <a href="#">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="single-card">
            <div class="card">
                <div class="content">
                    <img src="img/3.jpg" alt="Travel" class="card-image">
                    <div>
                        <h2>Heading Here</h2>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae sequi ullam qui, debitis ad non officiis illum animi, praesentium odit, libero vel sit ipsam eius!</p>
                        <a href="#">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #0f1419;
	margin: 0;
	font-family: Arial, sans-serif;
	padding: 20px;
}
.wraps {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	max-width: 1200px;
	width: 100%;
}
.single-card {
	position: relative;
	flex: 1 1 300px;
	max-width: 320px;
}
.card {
	position: relative;
	width: 100%;
	height: 450px;
	background: #ffffff;
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.6s ease;
	cursor: pointer;
}
.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 200%;
	height: 100%;
	background: linear-gradient( 45deg, rgba(0, 255, 236, 0.1), rgba(0, 255, 236, 0.3));
	transform: skewX(-25deg);
	transition: left 0.6s ease;
	z-index: 1;
}
h2 {
	margin: 15px 0;
	font-size: 24px;
	color: #333;
	transition: color 0.6s ease;
}
p {
	margin: 0;
	color: #666;
	font-size: 14px;
	line-height: 1.7;
}
.card:hover {
	transform: translateY(-30px) rotate(2deg);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.card:hover::before {
	left: 100%;
}
.content {
	padding: 20px;
	text-align: center;
	position: relative;
	z-index: 2;
	height: 65%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.card-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
	transition: transform 0.6s ease;
}
.card:hover .card-image {
	transform: scale(1.05);
}
.card:hover h2 {
	color: #ff007f;
}
.card a {
	text-decoration: none;
	display: inline-block;
	background: #262626;
	margin-top: 15px;
	padding: 10px 30px;
	color: #fff;
	border-radius: 50px;
}
.card:hover a {
	background: #ff007f;
}
@media (max-width: 768px) {
	.single-card {
		flex: 1 1 100%;
		max-width: 400px;
	}
}

In short, if you want your website to display multiple, distinct content that are visually appealing, scannable, and responsive, then these CSS responsive cards can play a vital role here. As they need very little space, your website loading time will be faster than all the other traditional websites. We hope you have collected the source code of this project. There are many code snippets available on our website. All you need to do is click on the "Load More" button at the bottom of our homepage and scroll down the page. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Cards Design HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Cards Design HTML CSS

Video Tutorial:

Responsive Cards Design HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form