Profile Card HTML CSS

Responsive profile card built with HTML and CSS, featuring a gradient header, avatar, user details, skill tags, contact info, and clean call-to-action buttons.

Final output:

Final Output Code for Profile Card HTML CSS:

HTML

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<div class="profile-card">
    <div class="header-bg">

    </div>
    <div class="profile-card-content-wrapper">
        <div class="profile-headshot-wrapper">
            <img src="sarah.jpg" alt="">

        </div>
        <div class="profile-card-body">
            <h3 class="name">Sarah Anderson</h3>
            <p class="designation">Senior Product Designer</p>
            <p class="description">Passionate about creating user-centered designs that solve real problems. 5+
                years of experience in SaaS and fintech.</p>
        </div>
        <div class="badges-wrapper">
            <span class="badge"> UX Design</span>
            <span class="badge"> Figma</span>
            <span class="badge">Design Systems</span>
            <span class="badge">Prototyping</span>
        </div>
        <div class="contact-info-wrapper">
            <div class="contact-info">
                <i class="bi bi-envelope"></i>
                <span>sarah.anderson@email.com</span>
            </div>
            <div class="contact-info">
                <i class="bi bi-telephone"></i>
                <span>+1 (555) 123-4567</span>
            </div>
            <div class="contact-info">
                <i class="bi bi-geo-alt"></i>
                <span>San Francisco, CA</span>
            </div>
        </div>
        <div class="button-wrapper">
            <a href="#" class="button button-primary">Contact</a>
            <a href="#" class="button button-secondary">Download CV</a>
        </div>
        <div class="social-wrapper">
            <a href="#" class="social-icon">
                <i class="bi bi-behance"></i>
            </a>
            <a href="#" class="social-icon">
                <i class="bi bi-linkedin"></i>
            </a>
            <a href="#" class="social-icon">
                <i class="bi bi-github"></i>
            </a>
        </div>
    </div>
</div>

CSS

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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.profile-card {
    max-width: 28rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    overflow: hidden;

    .header-bg {
        width: 100%;
        height: 8rem;
        background: linear-gradient(to right, #5c9cfc, #8910fa);
    }

    .profile-card-content-wrapper {
        padding: 0 2rem 2rem 2rem;
        margin-top: -4rem;

        .profile-headshot-wrapper {
            width: 8rem;
            height: 8rem;
            border-radius: 50%;
            border: 4px solid #fff;
            overflow: hidden;
            margin-bottom: 1rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

            img {
                width: 100%;
                object-fit: cover;
            }
        }

        .profile-card-body {
            margin-bottom: 1rem;

            .name {
                margin-bottom: .25rem;
                font-size: 1.5rem;
                line-height: 1.3;
                font-weight: 500;
                color: #101828;
            }

            .designation {
                margin-bottom: .75rem;
                color: #4a5565;
                line-height: 1.5;
            }

            .description {
                color: #6a7282;
                font-size: .875rem;
                line-height: 1.625;
            }
        }

        .badges-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-bottom: 1.5rem;

            .badge {
                color: #030213;
                background-color: #eeeef0;
                font-size: .75rem;
                font-weight: 500;
                line-height: 1.3;
                padding: 4px 8px;
                border-radius: .5rem;
            }
        }

        .contact-info-wrapper {
            display: flex;
            flex-direction: column;
            gap: .75rem;
            margin-bottom: 1.5rem;

            .contact-info {
                display: flex;
                gap: .75rem;
                align-items: center;
                font-size: .875rem;
                color: #4a5565;

                i {
                    color: #99a1af;
                    width: 1rem;
                    height: 1rem;
                }
            }
        }

        .button-wrapper {
            display: flex;
            gap: .75rem;
            margin-bottom: 1.5rem;

            .button {
                flex: 1 1 200px;
                text-decoration: none;
                font-size: .875rem;
                font-weight: 500;
                line-height: 1.4;
                padding: .5rem 1rem;
                border-radius: .5rem;
                text-align: center;
                border: 1px solid transparent;
            }

            .button-primary {
                background-color: #030213;
                color: #fff;
            }

            .button-secondary {
                background-color: #fff;
                color: #0a0a0a;
                border-color: rgba(0, 0, 0, .1);
            }
        }

        .social-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;

            .social-icon {
                background-color: #f6f3f4;
                color: #4a5565;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.