🎨 HTML और CSS से Modern Card Design – Step-by-Step Hindi Tutorial

🖼️ Modern Card Design with Hover Animation – हिंदी में आसान गाइड

आज हम HTML और CSS की मदद से एक Modern Card Component बनाएंगे जिसमें attractive hover animation होगा।
ये डिज़ाइन portfolio, dashboard, या किसी भी web project में इस्तेमाल किया जा सकता है।
कोई JavaScript की ज़रूरत नहीं – सिर्फ HTML और CSS से।

🧾 1. HTML Structure

HTML कोड इस तरह है:

<div class="card work">
  <div class="img-section">
    <!-- SVG Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" height="77" width="76">...</svg>
  </div>
  <div class="card-desc">
    <div class="card-header">
      <div class="card-title">Play</div>
      <div class="card-menu">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <div class="card-time">32hrs</div>
    <p class="recent">Last Week - 36hrs</p>
  </div>
</div>

HTML Breakdown:

• .card → Main container जो पूरे कार्ड का layout और background रखेगा।
• .img-section → ऊपर का हिस्सा जिसमें icon या image रहेगा।
• .card-desc → Description section जिसमें title, time, और last week data होगा।
• .card-menu → तीन dots वाला छोटा menu indicator।
• .dot → Single circle shape dot।
• <svg> → Vector icon जो scalable और sharp रहता है।

🎨 2. CSS Base Styling

🔹 Card Variables और Size:

.card { --primary-clr: #1c204b; --dot-clr: #bbc0ff; --play: hsl(195, 74%, 62%); width: 200px; height: 170px; border-radius: 10px; }

• CSS Variables (--primary-clr, --dot-clr, --play) reusable colors सेट करते हैं।
• Width/Height → Card का fixed size।
• Border-radius → Rounded corners।

🔹 Font और Layout:

.card { font-family: "Arial"; color: #fff; display: grid; cursor: pointer; grid-template-rows: 50px 1fr; }

• display: grid; → Card को दो parts में divide करता है: top (50px) और बाकी space।
• cursor: pointer; → Hover पर clickable feel देता है।
• font-family और color → Default font और text color।

🔹 Hover Animation:

.card:hover .img-section { transform: translateY(1em); }

• Hover पर image section नीचे की तरफ smooth shift होता है।

🔹 Card Description Styling:

.card-desc {
  border-radius: 10px;
  padding: 15px;
  position: relative;
  top: -10px;
  display: grid;
  gap: 10px;
  background: var(--primary-clr);
}


- Background color variable से आता है।
- `top: -10px;` → Desc section image से थोड़ा overlap करता है।

🔹 Time Styling:

.card-time {
  font-size: 1.7em;
  font-weight: 500;
}

• Time bold और बड़ा दिखाने के लिए।

🔹 Image Section Styling:

.img-section {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: hsl(195, 74%, 62%);
}

• Smooth transition effect।
• Rounded top corners।

🔹 Header Layout:

.card-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.card-title {
  flex: 1;
  font-size: 0.9em;
  font-weight: 500;
}

• Flex layout title और dots को same row में रखता है।
• Title flexible space लेता है (flex: 1;)।

🔹 Menu Dots:

.card-menu {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}
.card .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot-clr);
}

• Small circular dots menu icon जैसा feel देते हैं।

🔹 SVG Styling:

.card svg {
  float: right;
  max-width: 100%;
  max-height: 100%;
}

• SVG को responsive रखने के लिए।

🔹 Recent Text:

.card .recent {
  line-height: 0;
  font-size: 0.8em;
}

• छोटा और compact last week info।

📋 Element Wise Summary Table

🔍 Important CSS Concepts

1. CSS Variables – एक ही color को कई जगह बदलने के लिए आसान।
2. Grid + Flex – Grid से overall layout और Flex से inner alignment।
3. Transition – Smooth hover animation।
4. SVG Icons – Sharp और scalable graphics।

✅ HTML Code

<div class="card work">
  <div class="img-section">Image added here</div>
  <div class="card-desc">
    <div class="card-header">
      <div class="card-title">Play</div>
      <div class="card-menu">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
    </div>
    <div class="card-time">32hrs</div>
    <p class="recent">Last Week - 36hrs</p>
  </div>
</div>

.card {
  --primary-clr: #1c204b;
  --dot-clr: #bbc0ff;
  --play: hsl(195, 74%, 62%);
  width: 200px;
  height: 170px;
  border-radius: 10px;
  font-family: "Arial";
  color: #fff;
  display: grid;
  cursor: pointer;
  grid-template-rows: 50px 1fr;
}

.card:hover .img-section {
  transform: translateY(1em);
}


.card-desc {
  border-radius: 10px;
  padding: 15px;
  position: relative;
  top: -10px;
  display: grid;
  gap: 10px;
  background: var(--primary-clr);
}

.card-time {
  font-size: 1.7em;
  font-weight: 500;
}

.img-section {
  transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: hsl(195, 74%, 62%);
}

.card-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.card-title {
  flex: 1;
  font-size: 0.9em;
  font-weight: 500;
}

.card-menu {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}

.card svg {
  float: right;
  max-width: 100%;
  max-height: 100%;
}

.card .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot-clr);
}

.card .recent {
  line-height: 0;
  font-size: 0.8em;
}

💡 Tips & Variations

• Image की जगह GIF या product photo डाल सकते हैं।
• Hover पर background gradient या shadow add करें।
• Mobile friendly बनाने के लिए width: 100% और responsive units का इस्तेमाल करें।