15. Mini Project — Profile Card

HTML + CSS mila ke ek polished profile card.

Is chapter me cover hoga:

Layout with flex
Polish
Self checklist

1. Challenge

Is card ko apna banao — naam, bio, colors change karo. Mark complete jab proud feel ho.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0; min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(160deg, #0f172a, #134e4a);
      font-family: system-ui, sans-serif;
    }
    .card {
      width: 300px; background: #fff; border-radius: 20px;
      padding: 28px; text-align: center;
      box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    }
    .avatar {
      width: 88px; height: 88px; border-radius: 50%;
      background: linear-gradient(135deg, #14b8a6, #3b82f6);
      margin: 0 auto 16px;
    }
    h1 { margin: 0 0 6px; font-size: 1.35rem; color: #0f172a; }
    .role { color: #0d9488; font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }
    p { color: #64748b; font-size: 0.92rem; line-height: 1.5; margin: 0 0 18px; }
    .btn {
      display: inline-block; padding: 10px 20px; border-radius: 999px;
      background: #0d9488; color: #fff; font-weight: 600; text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,148,136,0.4); }
  </style>
</head>
<body>
  <div class="card">
    <div class="avatar"></div>
    <h1>Your Name</h1>
    <div class="role">Web Learner</div>
    <p>HTML + CSS seekh raha/rahi hoon LoOPCode par.</p>
    <a class="btn" href="#">Contact</a>
  </div>
</body>
</html>

← Best Practices