Project 1: Styled Student Profile & ID Card0%

Project 2: Simple School Club Landing Page

Project 1: Styled Student Profile & ID Card

Beginner12 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Project 1: Styled Student Profile & ID Card

Congratulations on reaching Chapter 12! 🎉

Over the past 11 chapters, you have learned the core building blocks of CSS:

Selectors and cascade rules
Colors, gradients, and backgrounds
The Box Model (content, padding, border, margin)
Typography and custom web fonts
CSS units (rem, %, px)
Borders, rounded corners, and box shadows
Positioning (relative, absolute, z-index)
Centering and basic Flexbox layouts

Now, it is time to assemble these individual skills into your first complete, portfolio-ready CSS project: A modern Student Profile & ID Card!

Project Preview & Architecture 📐

Here is the visual layout of the profile card we are building:

Visual Architecture Blueprint

+-------------------------------------------------------------+
| [TOP BANNER: Royal Blue & Violet Linear Gradient]           |
|                                                             |
|                                         +-----------------+ |
|                                         | [BADGE] PREFECT | |
|                                         | (pos: absolute) | |
|                                         +-----------------+ |
|               +-----------------------+                     |
|               |  CIRCULAR AVATAR      |                     |
|               |  (border-radius: 50%) |                     |
|               |  (overlapping banner) |                     |
|               +-----------------------+                     |
|                                                             |
|                   Aarav Sharma                              |
|             Head Boy | Class 10-A                           |
|      Delhi Model Senior Secondary School                    |
|                                                             |
|   SKILLS & INTERESTS (Flexbox Row):                         |
|   [ Python ]   [ Web Design ]   [ Cricket ]   [ Robotics ]  |
|                                                             |
|   ACTION BUTTONS (Flexbox Space-Between):                   |
|   [ View Marksheet ]                 [ Send Message ]       |
+-------------------------------------------------------------+

CSS Techniques Applied in This Project

1
Box Model & Centering: box-sizing: border-box; with margin: 40px auto; to center the card on the page.
2
Gradients: A vibrant 135-degree linear-gradient for the top cover banner.
3
Overlapping Avatar: border-radius: 50%; with a negative top margin (margin-top: -60px;) and a thick white border ring to make the portrait pop over the banner.
4
Absolute Positioning: Pinned "Head Boy / Prefect" corner ribbon badge (position: absolute; top: 16px; right: 16px;).
5
Flexbox:

Pill badges lined up with display: flex; gap: 8px; flex-wrap: wrap;.
Action buttons aligned with display: flex; gap: 12px;.

1
Micro-interactions: Smooth hover lift with transform: translateY(-6px); and an elevated box-shadow.

Complete Project Code

Create a file named student-profile-card.html in your editor and paste the following complete code:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile Card Project | MSK Institute</title>
<style>
  /* 1. Global Box-Sizing & Page Reset */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
14 
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f1f5f9;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
  }
24 
  /* 2. Main Profile Card Container */
  .profile-card {
    position: relative; /* ANCHOR FOR ABSOLUTE BADGES */
    width: 100%;
    max-width: 380px;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden; /* Clips banner corners to match border-radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
36 
  /* Hover Elevation Effect */
  .profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
  }
42 
  /* 3. Top Gradient Cover Banner */
  .card-banner {
    height: 130px;
    background: linear-gradient(135deg, #1e40af, #7c3aed);
    position: relative;
  }
49 
  /* Absolute Status Badge */
  .status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
66 
  /* 4. Circular Avatar */
  .avatar-wrapper {
    text-align: center;
    margin-top: -55px; /* Pulls avatar upwards over the banner! */
    position: relative;
    z-index: 2;
  }
74 
  .avatar-img {
    width: 110px;
    height: 110px;
    border-radius: 50%; /* Perfect Circle */
    border: 5px solid #ffffff; /* Crisp white frame */
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: white;
    user-select: none;
  }
89 
  /* 5. Card Body & Student Details */
  .card-body {
    padding: 16px 24px 28px 24px;
    text-align: center;
  }
95 
  .student-name {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
  }
102 
  .student-role {
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 6px;
  }
109 
  .student-school {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
  }
115 
  /* 6. Section Subheading */
  .section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 10px;
    text-align: left;
  }
126 
  /* 7. Flexbox Skill Badges */
  .skills-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
134 
  .skill-pill {
    background-color: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background-color 0.2s;
  }
144 
  .skill-pill:hover {
    background-color: #e2e8f0;
  }
148 
  /* 8. Action Buttons Group */
  .action-group {
    display: flex;
    gap: 12px;
  }
154 
  .btn {
    flex: 1; /* Both buttons expand equally */
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    display: inline-block;
  }
166 
  .btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  }
172 
  .btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
  }
177 
  .btn-secondary {
    background-color: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
  }
183 
  .btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
  }
</style>
189</head>
190<body>
191 
<!-- The Complete Profile Card -->
<div class="profile-card">
  <!-- Top Cover Banner -->
  <div class="card-banner">
    <span class="status-badge">⭐ Head Boy</span>
  </div>
198 
  <!-- Overlapping Circular Avatar -->
  <div class="avatar-wrapper">
    <div class="avatar-img">👨‍🎓</div>
  </div>
203 
  <!-- Student Bio -->
  <div class="card-body">
    <h2 class="student-name">Aarav Sharma</h2>
    <p class="student-role">Class 10-A | Science & Computers</p>
    <p class="student-school">Delhi Model Senior Secondary School</p>
209 
    <!-- Skills -->
    <div class="section-title">Skills & Interests</div>
    <div class="skills-group">
      <span class="skill-pill">💻 Python</span>
      <span class="skill-pill">🌐 HTML & CSS</span>
      <span class="skill-pill">🏏 Cricket</span>
      <span class="skill-pill">🤖 Robotics</span>
      <span class="skill-pill">🎨 UI Design</span>
    </div>
219 
    <!-- Actions -->
    <div class="action-group">
      <a href="#marksheet" class="btn btn-secondary">Report Card</a>
      <a href="#message" class="btn btn-primary">Connect</a>
    </div>
  </div>
</div>
227 
228</body>
229</html>

How It Works: Key Takeaways

1
border-radius: 20px; overflow: hidden; on .profile-card:

Because the .card-banner has square top corners, setting overflow: hidden; on the parent card automatically clips the banner's corners to match the card's 20px curves!

1
The Negative Margin Avatar Trick:

margin-top: -55px; pulls the avatar circle exactly 55px upwards into the gradient banner, creating that iconic modern profile card overlap!

1
flex: 1; on the Action Buttons:

Inside .action-group { display: flex; }, setting flex: 1 on both buttons ensures they share horizontal space 50/50 with zero math required.

⚠️ Beginner Project Production Best Practices

1
Avoid Rigid Pixel Heights: Let containers grow organically with their content using padding rather than hardcoding height: 400px.
2
Add Smooth Transitions to Hover States: Always include transition: all 0.2s ease; on interactive buttons and cards to avoid jarring visual jumps.
3
Keep Accessible Contrast: Ensure text colors maintain a high contrast ratio against backgrounds (minimum 4.5:1 for standard body text).

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS technique is used to create the classic modern effect where the circular avatar overlaps the top banner?

Question 2

Why is overflow: hidden; applied to the .profile-card parent container?

Question 3

How does border-radius: 50%; turn a square <div> (110px $\times$ 110px) into a perfect circle?

Question 4

What does setting flex: 1; accomplish on the two action buttons inside .action-group { display: flex; }?

Question 5

Why is position: relative; placed on .profile-card when the "Head Boy" status badge has position: absolute;?

Practice Challenge (Try It Yourself)

1
Open student-profile-card.html in your editor.
2
Customize the card with your own name, grade, favorite school subjects, and sports!
3
Add a second badge on the top-left corner displaying your House color (e.g., Red House or Emerald House)!
4
Test the card on your mobile phone to verify that the card adapts cleanly to smaller touchscreens! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Project 2: Simple School Club Landing Page (Beginner Projects).

👉 Continue to Next Lesson: Project 2: Simple School Club Landing Page →

Next Lesson

Project 2: Simple School Club Landing Page

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Intro to Flexbox: The Modern 1D Layout Powerhouse	Project 2: Simple School Club Landing Page

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Project 2: Simple School Club Landing Page

Project 1: Styled Student Profile & ID Card

Beginner12 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Project 1: Styled Student Profile & ID Card

Congratulations on reaching Chapter 12! 🎉

Over the past 11 chapters, you have learned the core building blocks of CSS:

Selectors and cascade rules
Colors, gradients, and backgrounds
The Box Model (content, padding, border, margin)
Typography and custom web fonts
CSS units (rem, %, px)
Borders, rounded corners, and box shadows
Positioning (relative, absolute, z-index)
Centering and basic Flexbox layouts

Now, it is time to assemble these individual skills into your first complete, portfolio-ready CSS project: A modern Student Profile & ID Card!

Project Preview & Architecture 📐

Here is the visual layout of the profile card we are building:

Visual Architecture Blueprint

+-------------------------------------------------------------+
| [TOP BANNER: Royal Blue & Violet Linear Gradient]           |
|                                                             |
|                                         +-----------------+ |
|                                         | [BADGE] PREFECT | |
|                                         | (pos: absolute) | |
|                                         +-----------------+ |
|               +-----------------------+                     |
|               |  CIRCULAR AVATAR      |                     |
|               |  (border-radius: 50%) |                     |
|               |  (overlapping banner) |                     |
|               +-----------------------+                     |
|                                                             |
|                   Aarav Sharma                              |
|             Head Boy | Class 10-A                           |
|      Delhi Model Senior Secondary School                    |
|                                                             |
|   SKILLS & INTERESTS (Flexbox Row):                         |
|   [ Python ]   [ Web Design ]   [ Cricket ]   [ Robotics ]  |
|                                                             |
|   ACTION BUTTONS (Flexbox Space-Between):                   |
|   [ View Marksheet ]                 [ Send Message ]       |
+-------------------------------------------------------------+

CSS Techniques Applied in This Project

1
Box Model & Centering: box-sizing: border-box; with margin: 40px auto; to center the card on the page.
2
Gradients: A vibrant 135-degree linear-gradient for the top cover banner.
3
Overlapping Avatar: border-radius: 50%; with a negative top margin (margin-top: -60px;) and a thick white border ring to make the portrait pop over the banner.
4
Absolute Positioning: Pinned "Head Boy / Prefect" corner ribbon badge (position: absolute; top: 16px; right: 16px;).
5
Flexbox:

Pill badges lined up with display: flex; gap: 8px; flex-wrap: wrap;.
Action buttons aligned with display: flex; gap: 12px;.

1
Micro-interactions: Smooth hover lift with transform: translateY(-6px); and an elevated box-shadow.

Complete Project Code

Create a file named student-profile-card.html in your editor and paste the following complete code:

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Profile Card Project | MSK Institute</title>
<style>
  /* 1. Global Box-Sizing & Page Reset */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
14 
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f1f5f9;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 15px;
  }
24 
  /* 2. Main Profile Card Container */
  .profile-card {
    position: relative; /* ANCHOR FOR ABSOLUTE BADGES */
    width: 100%;
    max-width: 380px;
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden; /* Clips banner corners to match border-radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
36 
  /* Hover Elevation Effect */
  .profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
  }
42 
  /* 3. Top Gradient Cover Banner */
  .card-banner {
    height: 130px;
    background: linear-gradient(135deg, #1e40af, #7c3aed);
    position: relative;
  }
49 
  /* Absolute Status Badge */
  .status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
66 
  /* 4. Circular Avatar */
  .avatar-wrapper {
    text-align: center;
    margin-top: -55px; /* Pulls avatar upwards over the banner! */
    position: relative;
    z-index: 2;
  }
74 
  .avatar-img {
    width: 110px;
    height: 110px;
    border-radius: 50%; /* Perfect Circle */
    border: 5px solid #ffffff; /* Crisp white frame */
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: white;
    user-select: none;
  }
89 
  /* 5. Card Body & Student Details */
  .card-body {
    padding: 16px 24px 28px 24px;
    text-align: center;
  }
95 
  .student-name {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
  }
102 
  .student-role {
    font-size: 14px;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 6px;
  }
109 
  .student-school {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 20px;
  }
115 
  /* 6. Section Subheading */
  .section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin-bottom: 10px;
    text-align: left;
  }
126 
  /* 7. Flexbox Skill Badges */
  .skills-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
  }
134 
  .skill-pill {
    background-color: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background-color 0.2s;
  }
144 
  .skill-pill:hover {
    background-color: #e2e8f0;
  }
148 
  /* 8. Action Buttons Group */
  .action-group {
    display: flex;
    gap: 12px;
  }
154 
  .btn {
    flex: 1; /* Both buttons expand equally */
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    display: inline-block;
  }
166 
  .btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  }
172 
  .btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
  }
177 
  .btn-secondary {
    background-color: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
  }
183 
  .btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
  }
</style>
189</head>
190<body>
191 
<!-- The Complete Profile Card -->
<div class="profile-card">
  <!-- Top Cover Banner -->
  <div class="card-banner">
    <span class="status-badge">⭐ Head Boy</span>
  </div>
198 
  <!-- Overlapping Circular Avatar -->
  <div class="avatar-wrapper">
    <div class="avatar-img">👨‍🎓</div>
  </div>
203 
  <!-- Student Bio -->
  <div class="card-body">
    <h2 class="student-name">Aarav Sharma</h2>
    <p class="student-role">Class 10-A | Science & Computers</p>
    <p class="student-school">Delhi Model Senior Secondary School</p>
209 
    <!-- Skills -->
    <div class="section-title">Skills & Interests</div>
    <div class="skills-group">
      <span class="skill-pill">💻 Python</span>
      <span class="skill-pill">🌐 HTML & CSS</span>
      <span class="skill-pill">🏏 Cricket</span>
      <span class="skill-pill">🤖 Robotics</span>
      <span class="skill-pill">🎨 UI Design</span>
    </div>
219 
    <!-- Actions -->
    <div class="action-group">
      <a href="#marksheet" class="btn btn-secondary">Report Card</a>
      <a href="#message" class="btn btn-primary">Connect</a>
    </div>
  </div>
</div>
227 
228</body>
229</html>

How It Works: Key Takeaways

1
border-radius: 20px; overflow: hidden; on .profile-card:

Because the .card-banner has square top corners, setting overflow: hidden; on the parent card automatically clips the banner's corners to match the card's 20px curves!

1
The Negative Margin Avatar Trick:

margin-top: -55px; pulls the avatar circle exactly 55px upwards into the gradient banner, creating that iconic modern profile card overlap!

1
flex: 1; on the Action Buttons:

Inside .action-group { display: flex; }, setting flex: 1 on both buttons ensures they share horizontal space 50/50 with zero math required.

⚠️ Beginner Project Production Best Practices

1
Avoid Rigid Pixel Heights: Let containers grow organically with their content using padding rather than hardcoding height: 400px.
2
Add Smooth Transitions to Hover States: Always include transition: all 0.2s ease; on interactive buttons and cards to avoid jarring visual jumps.
3
Keep Accessible Contrast: Ensure text colors maintain a high contrast ratio against backgrounds (minimum 4.5:1 for standard body text).

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which CSS technique is used to create the classic modern effect where the circular avatar overlaps the top banner?

Question 2

Why is overflow: hidden; applied to the .profile-card parent container?

Question 3

How does border-radius: 50%; turn a square <div> (110px $\times$ 110px) into a perfect circle?

Question 4

What does setting flex: 1; accomplish on the two action buttons inside .action-group { display: flex; }?

Question 5

Why is position: relative; placed on .profile-card when the "Head Boy" status badge has position: absolute;?

Practice Challenge (Try It Yourself)

1
Open student-profile-card.html in your editor.
2
Customize the card with your own name, grade, favorite school subjects, and sports!
3
Add a second badge on the top-left corner displaying your House color (e.g., Red House or Emerald House)!
4
Test the card on your mobile phone to verify that the card adapts cleanly to smaller touchscreens! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Project 2: Simple School Club Landing Page (Beginner Projects).

👉 Continue to Next Lesson: Project 2: Simple School Club Landing Page →

Next Lesson

Project 2: Simple School Club Landing Page

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Intro to Flexbox: The Modern 1D Layout Powerhouse	Project 2: Simple School Club Landing Page

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next