How to Create Responsive Cards in HTML and CSS | FreeProjects1

BHOLU SINGH
BHOLU SINGH
July 03, 2023
0

How to Create Responsive Cards in HTML and CSS

Cards are popular web design elements that can be used to display a variety of information in a visually appealing and easy-to-read way. They can be used to display blog posts, product information, social media posts, and more.

If you want to get free source code then scroll down the post.


Image loading error | FreeProjects1

Introduction:

In today's digital landscape, creating a website that provides an optimal user experience across various devices and screen sizes is essential. One key element of a well-designed website is the use of responsive cards. These versatile components allow you to present information, images, or media in an organized and visually appealing manner. In this tutorial, we will explore the process of creating responsive cards using HTML and CSS. By following these steps, you'll be able to design cards that adapt seamlessly to different screen sizes, ensuring an engaging experience for your website visitors.

Step 1: Defining the HTML Structure

To get started, let's set up the HTML structure for our responsive cards. We will use the <div> element as a container for each card, and within it, we will include the necessary content. This could include an image, a title, a description, and a link to learn more. By structuring our HTML in this way, we can easily apply styles and make the cards responsive.

Step 2: Styling with CSS

Once we have our HTML structure in place, it's time to apply styles using CSS. We can use CSS properties and selectors to define the appearance of our cards. It's important to consider factors such as background color, font styles, padding, and margins to ensure a visually appealing layout.

To make our cards responsive, we can leverage CSS techniques like media queries. Media queries allow us to apply specific styles based on the screen size or device being used to view the website. By adjusting the card's width, font sizes, or any other relevant properties within the media queries, we can ensure that the cards adapt and display properly on different devices.

Step 3: Testing and Refining

Once we have implemented our responsive card design, it's crucial to thoroughly test it on various devices and screen sizes. This will help identify any inconsistencies or issues that need to be addressed. Use device simulators or physically test the website on different devices to ensure a smooth and visually appealing experience across the board.


Here is an example of how you could create Responsive Cards:

1. Here is an example of HTML for Responsive Cards:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Responsive Cards | FreeProjects1</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="card-box">
            <div class="card">
                <div class="imgBx">
                    <img src="user.png" alt="image loading error">
                </div>
                <div class="card-body">
                    <h1>Bholu Singh</h1>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <div class="btn">
                        <button>Read more</button>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <img src="user.png" alt="image loading error">
                </div>

                <div class="card-body">
                    <h1>Bholu Singh</h1>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <div class="btn">
                        <button>Read more</button>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="imgBx">
                    <img src="user.png" alt="image loading error">
                </div>
                <div class="card-body">
                    <h1>Bholu Singh</h1>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <p><i class="bi bi-chevron-double-right"></i> Lorem ipsum dolor sit amet.</p>
                    <div class="btn">
                        <button>Read more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>


2. Here is an example of CSS for Responsive Cards:

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

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #777, #222);
}

.container .card-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.container .card-box .card {
    width: 310px;
    height: auto;
    background: #fff;
    border-radius: 5px;
    padding: 10px 20px;
}

.container .card-box .card .imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.container .card-box .card .imgBx img {
    width: 150px;
    height: 150px;
}

.container .card-box .card .card-body {
    display: flex;
    flex-direction: column;
}

.container .card-box .card .card-body h1 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.container .card-box .card .card-body p {
    font-size: 0.89rem;
    color: #333;
}

.container .card-box .card .card-body p i {
    font-size: 0.75rem;
}

.container .card-box .card .card-body .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.container .card-box .card .card-body .btn button {
    border: none;
    outline: none;
    padding: 8px 20px;
    font-weight: 500;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.3s ease;
}

.container .card-box .card .card-body .btn button:hover {
    background: #ddd;
}



Conclusion:

Creating responsive cards in HTML and CSS is a valuable skill that enables you to present information effectively and maintain a consistent user experience across devices. By carefully structuring your HTML, applying appropriate CSS styles, and utilizing media queries, you can ensure that your cards adapt seamlessly to different screen sizes. Remember to test your design on multiple devices to guarantee a responsive experience for all your website visitors. With these techniques in your toolkit, you'll be well-equipped to create stunning and user-friendly responsive cards.



Download the source code of this project-

   



I hope this blog post was helpful!



responsive card, card design, card layout, flexbox, media queries, html, css, web development, web design, responsive web design

Tags:
BHOLU SINGH

BHOLU SINGH

Hi guys, My name is Bholu Singh. I’m the Founder of FreeProjects1. I’m a Creative, Web Designer, and Web Developer. Inspired to make things look better.

    You may like these posts

    Show more

    Post a Comment

    0Comments

    Please do not enter any spam link in the comment box.

    Post a Comment (0)
    Share to other apps
    Copy Post Link