✅ Practice + Quiz · Lesson 41

Project: Profile Card

What We Will Build — a profile card

Time to put it all together! We'll build a clean, modern profile card — the kind you see on team pages and social profiles — using nearly everything from this course: the box model, flexbox for centering, border-radius for the round avatar, box-shadow for depth, and a transition + transform hover-lift. This is a real, reusable component. Build it once and you'll understand how every card on the web is made. Follow along step by step and type the code yourself — that's how it sticks.

Step 1: The HTML Structure

<div class="card">
    <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
    <h2 class="card-name">Aman Kumar</h2>
    <p class="card-role">Web Developer</p>
    <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
    <a href="#" class="card-btn">Follow</a>
</div>

We start with clean, semantic HTML — a container .card holding an avatar image, a name, a role, a short bio, and a button. Notice each piece has a descriptive class (following the naming best practice). This is just structure with no styling yet; it'll look plain until we add CSS. Good HTML first, then CSS to bring it to life — the workflow you learned at the very start.

Step 2: The Card Box

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

body {
    font-family: 'Inter', sans-serif;
    background: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;      /* center the card on the whole screen */
}

.card {
    background: white;
    width: 300px;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

Every technique here comes from earlier chapters. We start with the box-sizing reset (best practices). The body uses flexbox centering (justify-content + align-items + min-height: 100vh) to place the card in the exact middle of the screen. The card itself gets a white background, a fixed width, generous padding (box model), rounded corners with border-radius, and a soft box-shadow for that floating-card depth. text-align: center centers all the inner content. In just these rules, a plain div becomes a proper card.

Step 3: Styling the Content

.card-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;      /* makes the square image a circle! */
    object-fit: cover;       /* prevents distortion */
    margin-bottom: 16px;
}
.card-name {
    font-size: 1.4rem;
    color: #1f2937;
}
.card-role {
    color: #2563eb;
    font-weight: 500;
    margin-bottom: 12px;
}
.card-bio {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

Now the details. The star move: border-radius: 50% turns the square avatar into a perfect circle (from the border chapter), and object-fit: cover ensures the photo fills that circle without stretching. The text uses a clear hierarchy — a bold dark name, a coloured role, and a soft-grey bio with comfortable line-height: 1.6 (readability from the text chapter). Consistent margin-bottom values create even vertical spacing between elements. Each rule is small, but together they turn raw text into polished, professional content.

Step 4: The Button and Hover Effect

.card-btn {
    display: inline-block;       /* so padding works on the link */
    background: #2563eb;
    color: white;
    padding: 10px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}
.card-btn:hover {
    background: #1e40af;          /* darker on hover */
}

/* The satisfying card-lift on hover */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

This is where the card comes alive. The button is a link styled with display: inline-block (so padding applies — the links-as-buttons trick), with a smooth colour transition on hover. Then the signature effect: the whole card gets a transition, and on :hover it lifts up (translateY(-8px)) while its shadow grows — combining transform, transition, and box-shadow exactly as the effects chapters taught. The card appears to rise toward the cursor. That single, satisfying interaction is what makes a design feel premium.

Complete Code — put it together

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: sans-serif; background: #f3f4f6;
            display: flex; justify-content: center;
            align-items: center; min-height: 100vh;
        }
        .card {
            background: white; width: 300px; padding: 32px;
            border-radius: 16px; text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        .card-avatar {
            width: 100px; height: 100px; border-radius: 50%;
            object-fit: cover; margin-bottom: 16px;
        }
        .card-name { font-size: 1.4rem; color: #1f2937; }
        .card-role { color: #2563eb; font-weight: 500; margin-bottom: 12px; }
        .card-bio { color: #6b7280; line-height: 1.6; margin-bottom: 20px; }
        .card-btn {
            display: inline-block; background: #2563eb; color: white;
            padding: 10px 28px; border-radius: 8px;
            text-decoration: none; transition: background 0.3s;
        }
        .card-btn:hover { background: #1e40af; }
    </style>
</head>
<body>
    <div class="card">
        <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
        <h2 class="card-name">Aman Kumar</h2>
        <p class="card-role">Web Developer</p>
        <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
        <a href="#" class="card-btn">Follow</a>
    </div>
</body>
</html>

Congratulations — that's a complete, professional profile card! Save this as an .html file, add any square image named avatar.jpg, and open it in a browser. Try changing the colours, the width, or the shadow to make it your own — experimenting is the best way to learn. Notice how this ONE small project used the box model, flexbox, border-radius, box-shadow, transitions, transforms, and good naming — nearly the whole course working together. Next, we'll build something bigger: a full landing page.

क्या बनाएंगे — एक profile card

सब कुछ एक साथ लगाने का समय! हम एक साफ, modern profile card बनाएंगे — वैसा जो team pages और social profiles पर दिखता है — इस course की लगभग हर चीज़ use करते: box model, centering के लिए flexbox, round avatar के लिए border-radius, depth के लिए box-shadow, और transition + transform hover-lift. यह असली, reusable component है. इसे एक बार बनाइए और आप समझ जाएंगे web पर हर card कैसे बनता है. Step by step follow कीजिए और code खुद type कीजिए — ऐसे ही याद रहता है.

Step 1: HTML Structure

<div class="card">
    <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
    <h2 class="card-name">Aman Kumar</h2>
    <p class="card-role">Web Developer</p>
    <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
    <a href="#" class="card-btn">Follow</a>
</div>

हम साफ, semantic HTML से शुरू करते हैं — एक container .card जो avatar image, नाम, role, छोटा bio, और button रखता है. ध्यान दीजिए हर हिस्से की descriptive class है (naming best practice follow करते). यह अभी बस structure है बिना styling के; CSS जोड़ने तक यह plain दिखेगा. पहले अच्छा HTML, फिर उसे जीवंत करने को CSS — वही workflow जो आपने बिल्कुल शुरू में सीखा.

Step 2: Card Box

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

body {
    font-family: 'Inter', sans-serif;
    background: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;      /* card ko poori screen par center karo */
}

.card {
    background: white;
    width: 300px;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

यहां हर तकनीक पिछले chapters से आती है. हम box-sizing reset से शुरू करते हैं (best practices). Body flexbox centering use करती है (justify-content + align-items + min-height: 100vh) card को screen के ठीक बीच रखने को. Card को खुद white background, fixed width, उदार padding (box model), border-radius से rounded corners, और उस floating-card depth के लिए soft box-shadow मिलता है. text-align: center सारा अंदरूनी content center करता है. बस इन rules में, plain div proper card बन जाता है.

Step 3: Content Styling

.card-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;      /* square image ko circle banata hai! */
    object-fit: cover;       /* distortion rokta hai */
    margin-bottom: 16px;
}
.card-name {
    font-size: 1.4rem;
    color: #1f2937;
}
.card-role {
    color: #2563eb;
    font-weight: 500;
    margin-bottom: 12px;
}
.card-bio {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

अब details. Star move: border-radius: 50% square avatar को perfect circle बनाता है (border chapter से), और object-fit: cover पक्का करता है photo उस circle को बिना खिंचे भरे. Text साफ hierarchy use करता है — bold dark नाम, coloured role, और आरामदायक line-height: 1.6 वाला soft-grey bio (text chapter से readability). Consistent margin-bottom values elements के बीच समान vertical spacing बनाते हैं. हर rule छोटा है, पर साथ में वे raw text को polished, professional content में बदलते हैं.

Step 4: Button और Hover Effect

.card-btn {
    display: inline-block;       /* taaki link par padding chale */
    background: #2563eb;
    color: white;
    padding: 10px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}
.card-btn:hover {
    background: #1e40af;          /* hover par gehra */
}

/* Hover par santoshjanak card-lift */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

यहीं card जीवंत होता है. Button display: inline-block से styled link है (ताकि padding लगे — links-as-buttons trick), hover पर smooth colour transition के साथ. फिर signature effect: पूरे card को transition मिलता है, और :hover पर यह ऊपर उठता है (translateY(-8px)) जबकि उसका shadow बढ़ता है — transform, transition, और box-shadow को ठीक वैसे combine करते जैसा effects chapters ने सिखाया. Card cursor की ओर उठता दिखता है. वह एक, संतोषजनक interaction design को premium महसूस कराता है.

पूरा Code — एक साथ रखिए

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: sans-serif; background: #f3f4f6;
            display: flex; justify-content: center;
            align-items: center; min-height: 100vh;
        }
        .card {
            background: white; width: 300px; padding: 32px;
            border-radius: 16px; text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        .card-avatar {
            width: 100px; height: 100px; border-radius: 50%;
            object-fit: cover; margin-bottom: 16px;
        }
        .card-name { font-size: 1.4rem; color: #1f2937; }
        .card-role { color: #2563eb; font-weight: 500; margin-bottom: 12px; }
        .card-bio { color: #6b7280; line-height: 1.6; margin-bottom: 20px; }
        .card-btn {
            display: inline-block; background: #2563eb; color: white;
            padding: 10px 28px; border-radius: 8px;
            text-decoration: none; transition: background 0.3s;
        }
        .card-btn:hover { background: #1e40af; }
    </style>
</head>
<body>
    <div class="card">
        <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
        <h2 class="card-name">Aman Kumar</h2>
        <p class="card-role">Web Developer</p>
        <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
        <a href="#" class="card-btn">Follow</a>
    </div>
</body>
</html>

बधाई हो — यह एक पूरा, professional profile card है! इसे .html file के रूप में save कीजिए, avatar.jpg नाम की कोई square image जोड़िए, और browser में खोलिए. इसे अपना बनाने को colours, width, या shadow बदलकर देखिए — experiment करना सीखने का सबसे अच्छा तरीका है. ध्यान दीजिए यह EK छोटा project box model, flexbox, border-radius, box-shadow, transitions, transforms, और अच्छे naming का इस्तेमाल करता है — लगभग पूरा course साथ काम करते. अगला, हम कुछ बड़ा बनाएंगे: पूरा landing page.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

<div class="card">
    <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
    <h2 class="card-name">Aman Kumar</h2>
    <p class="card-role">Web Developer</p>
    <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
    <a href="#" class="card-btn">Follow</a>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Card</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: sans-serif; background: #f3f4f6;
            display: flex; justify-content: center;
            align-items: center; min-height: 100vh;
        }
        .card {
            background: white; width: 300px; padding: 32px;
            border-radius: 16px; text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        .card-avatar {
            width: 100px; height: 100px; border-radius: 50%;
            object-fit: cover; margin-bottom: 16px;
        }
        .card-name { font-size: 1.4rem; color: #1f2937; }
        .card-role { color: #2563eb; font-weight: 500; margin-bottom: 12px; }
        .card-bio { color: #6b7280; line-height: 1.6; margin-bottom: 20px; }
        .card-btn {
            display: inline-block; background: #2563eb; color: white;
            padding: 10px 28px; border-radius: 8px;
            text-decoration: none; transition: background 0.3s;
        }
        .card-btn:hover { background: #1e40af; }
    </style>
</head>
<body>
    <div class="card">
        <img src="avatar.jpg" alt="Aman Kumar" class="card-avatar">
        <h2 class="card-name">Aman Kumar</h2>
        <p class="card-role">Web Developer</p>
        <p class="card-bio">Loves building clean websites with HTML & CSS.</p>
        <a href="#" class="card-btn">Follow</a>
    </div>
</body>
</html>

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

body {
    font-family: 'Inter', sans-serif;
    background: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;      /* center the card on the whole screen */
}

.card {
    background: white;
    width: 300px;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;      /* makes the square image a circle! */
    object-fit: cover;       /* prevents distortion */
    margin-bottom: 16px;
}
.card-name {
    font-size: 1.4rem;
    color: #1f2937;
}
.card-role {
    color: #2563eb;
    font-weight: 500;
    margin-bottom: 12px;
}
.card-bio {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-btn {
    display: inline-block;       /* so padding works on the link */
    background: #2563eb;
    color: white;
    padding: 10px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s;
}
.card-btn:hover {
    background: #1e40af;          /* darker on hover */
}

/* The satisfying card-lift on hover */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.