Responsive Profile Cards using HTML CSS

Hey, developers welcome to Day 37 of our 90Days 90Projects challenge. And in Day 37 we are going to create Responsive Profile Cards HTML CSS.

Preview

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

responsive profile card html css, user profile card html css, profile card html css, simple profile card html css, user profile page html code


Image Resource - Download Now

HTML Code

index.html

<!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> Profile Cards Design </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <section id="profile-cards">
        <!-- Card Item Starts from Here -->
        <div class="card-item">
            <div class="description">
                <h2> John Doe </h2>
                <span class="role"> Frontend Developer </span>
                <ul>
                    <li><a href=""><i class="fa-brands fa-github"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                </ul>
            </div>
            <div class="image">
                <!-- Replace the src with user image (iamge ratio => 1:1) -->
                <img src="./user.jpg" alt="">
            </div>
        </div>
        <!-- Card Item Ends from Here -->

        <!-- Card Item Starts from Here -->
        <div class="card-item">
            <div class="description">
                <h2> John Doe </h2>
                <span class="role"> Frontend Developer </span>
                <ul>
                    <li><a href=""><i class="fa-brands fa-github"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                </ul>
            </div>
            <div class="image">
                <!-- Replace the src with user image -->
                <img src="./user2.jpg" alt="">
            </div>
        </div>
        <!-- Card Item Ends from Here -->

        <!-- Card Item Starts from Here -->
        <div class="card-item">
            <div class="description">
                <h2> John Doe </h2>
                <span class="role"> Frontend Developer </span>
                <ul>
                    <li><a href=""><i class="fa-brands fa-github"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                </ul>
            </div>
            <div class="image">
                <!-- Replace the src with user image -->
                <img src="./user.jpg" alt="">
            </div>
        </div>
        <!-- Card Item Ends from Here -->

    </section>
</body>
</html>

CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#profile-cards {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: rgb(123, 27, 123);
}

.card-item {
    width: 300px;
    padding: 15px;
    margin: 1.5rem;
    display: flex;
    border-radius: 10px;
    background-color: white;
    justify-content: space-between;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

.image {
    position: relative;
    width: 100px;
    bottom: 1.5rem;
    cursor: pointer;
    background-size: cover;
}

.image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 8px;
    background-size: cover;
    transition: all 0.2s linear;
}

.image:hover img {
    transform: translateY(-5px);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
}

.description ul {
    display: flex;
    list-style: none;
}

.description h2 {
    font-size: 24px;
}

.role {
    color: #e65b00;
    font-size: 12px;
}

.description ul li {
    font-size: 1.2rem;
    padding: 10px 17px 5px 0;
}

.description ul li a {
    text-decoration: none;
    color: purple;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad