Mini Project

Let's bring together everything you've learned so far and build a small Responsive Profile Card mini project. It's simple enough for beginners, but genuinely useful on real websites too. You can easily reuse this pattern for team member cards, product cards, creator profiles, service cards, and more.

Skills you'll practice in this project

Building a card layout
Using gradient background, border, radius, and shadow
Adding a button hover transition
Controlling width for mobile responsiveness
Fine-tuning readable spacing and typography

css

<div class="profile-card">
  <img src="avatar.jpg" alt="Profile photo">
  <h2>ThutaTech Learner</h2>
  <p>CSS ကို step by step လေ့လာနေတဲ့ future web creator.</p>
  <a href="#" class="profile-button">View Portfolio</a>
</div>

<style>
.profile-card {
  width: min(100%, 360px);
  margin: 40px auto;
  padding: 24px;
  text-align: center;
  color: #eaf2ff;
  background: linear-gradient(135deg, #141824, #0f1117);
  border: 1px solid rgba(119, 245, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.profile-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #77f5ff;
}

.profile-card h2 {
  margin: 16px 0 8px;
  font-size: 1.5rem;
}

.profile-card p {
  line-height: 1.7;
  color: #a8b3c3;
}

.profile-button {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 18px;
  color: #041013;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #77f5ff, #ff4dcd);
  transition: transform 0.25s ease;
}

.profile-button:hover {
  transform: translateY(-2px);
}
</style>

You should see

You'll see a responsive profile card in the center. When the screen narrows, the card will shrink to fit the container, and the button's hover effect will still work.

Tip

Want to take it further? Try adding social links, skill badges, a light/dark theme variable, or a card grid layout.