Responsive Card Using CSS

Modern & Fully Responsive Card Design for Beginners

A Responsive Card using CSS is one of the most popular UI components in modern web design. Cards are widely used to display products, blog posts, services, and portfolio items in a clean and organized layout. In this tutorial, you will learn how to create a modern, responsive card using only HTML and CSS.

This project is beginner-friendly and helps you understand layout design, hover effects, and responsive behavior without using JavaScript.

Tools & Resources That Support My Web Development Work

Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.

1. Video Tutorial – Responsive Card Design

If you prefer visual learning, you can follow the step-by-step video tutorial where the responsive card is built from scratch using HTML and CSS.

In the tutorial, you will learn:

Creating card structure with HTML
Styling the card using CSS
Adding hover effects and transitions
Making the card layout responsive

2. HTML Structure – Card Layout

The HTML structure of a responsive card usually includes:

A main card container
An image section
A title and description
A call-to-action button

The structure is kept simple and clean so that it is easy to customize for different projects.

👇 Place your complete HTML code below this section.

				
					<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Responsive Card | CodeByGaurav</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="card">
            <img decoding="async" src="./img.jpeg" alt="img CodeByGaurav" title="img Responsive Card Using CSS">
            <div>
                <h2>Kaye Morris</h2>
                <h3>UX Developer</h3>
                <p>
                    Empowering users through captivating interfaces, turning
                    ideas into pixel-perfect realities.
                </p>
                <button>Follow Account</button>
            </div>
        </div>
    </body>
</html>

3. CSS Styling – Modern Card Design

CSS plays a major role in designing the card. It is used to:

Add spacing and alignment
Apply border-radius and box-shadow
Create smooth hover effects
Control image size and positioning
Make the card responsive using media queries

Using Flexbox or CSS Grid helps maintain proper alignment across devices.

👇 Add your complete CSS code below this section.

				
					@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100vh;
    background: #221d2d;
    color: #fdfcfd;
}

.card{
    display: flex;
    align-items: center;
    width: 75vw;
    max-width: 650px;
    padding: 50px 30px 50px 20px;
    background: #121017;
    border-radius: 24px;
}

.card img{
    max-width: 280px;
    width: 35vw;
    height: 300px;
    object-fit: cover;
    margin-left: -60px;
    margin-right: 30px;
    border-radius: inherit;
    box-shadow: 0 60px 40px rgb(0 0 0 / 8%);

}

.card h2{
    font-size: 26px;
    font-weight: 400;
    margin-top: 0;
    margin-right: 30px;
    margin-bottom: 10px;
}

.card h3{
    font-size: 16px;
    font-weight: 400;
    opacity: 0.75;

}

.card p{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.5;

}

.card button{
    border: 1px solid #f8f8f8;
    background: transparent;
    color: #f8f8f8;
    font-family: inherit;
    padding: 16px 26px;
    font-size: 16px;
    border-radius: 40px;
}

@media (width <= 600px){
    .card{
        margin: 0 40px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 60px;
        width: 100%;
        text-align: center;
        flex-direction: column;
    }

    .card h2{
        margin-right: 0;
        font-size: 26px;
    }

    .card img{
        margin: -100px 0 30px 0;
        width: 100%;
        max-width: 1000px;
        height: 250px;
    }

    .card p{
        max-width: 360px;
    }
}

@media (width <= 440px){
    .card img{
        height: 45vw;
        width: 45vw;
        border-radius: 50%;
        margin: -140px 0 30px 0;
    }
}

4. Key Features of This Responsive Card

Built using only HTML & CSS
Clean and modern design
Smooth hover animations
Fully responsive layout
Beginner-friendly code structure

Conclusion

In this tutorial, you learned how to create a Responsive Card using CSS that adapts smoothly to different screen sizes. Responsive cards are essential components in modern web development and help improve both design and user experience.

You can enhance this card design further by adding: