Mini Project

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

အခုသင်ထားတဲ့ CSS concepts တွေကိုပေါင်းပြီး Responsive Profile Card mini project လေးတစ်ခုတည်ဆောက်ကြည့်ပါမယ်။ ဒီ project က beginner အတွက်လွယ်ပေမယ့် real website တွေမှာလည်း အသုံးဝင်ပါတယ်။ Team member card, product card, creator profile, service card စတဲ့နေရာတွေမှာအလွယ်တကူပြန်သုံးနိုင်ပါတယ်။

ဒီ project မှာ လေ့ကျင့်ရမယ့် skills

Card layout ဆောက်ခြင်း
Gradient background, border, radius, shadow သုံးခြင်း
Button hover transition ထည့်ခြင်း
Mobile responsive width ထိန်းခြင်း
Readable spacing နဲ့ 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

အလယ်မှာ responsive profile card တစ်ခုမြင်ရပါမယ်။ Screen ကျဉ်းသွားရင် card က container ထဲဝင်အောင်ကျုံ့ပြီး button hover effect လည်းအလုပ်လုပ်ပါမယ်။

Tip

နောက်ထပ်တိုးချင်ရင် social links, skill badges, light/dark theme variable, card grid layout စတာတွေထည့်ကြည့်ပါ။