CSS से बेसिक कार्ड कैसे बनाएं?

बेसिक कार्ड में इमेज, नाम, पदनाम होता है। बॉक्स-शैडो, होवर पर शैडो गहरी, पदनाम बैज स्टाइल, रिस्पॉन्सिव चौड़ाई (40%, मैक्स 300px)।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; }
    .card {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); width: 40%; max-width: 300px;
      background-color: rgb(56, 185, 185);
    }
    .card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); }
    .Designation {
      padding: 2px 16px; background-color: rgb(107, 43, 167); color: white;
    }
    .card img { width: 300px; height: 250px; }
  </style>
</head>
<body>
  <h1>Card Example</h1>
  <div class="card">
    <img src="https://cdn.pixabay.com/photo/2014/03/24/17/19/teacher-295387__340.png">
    <div class="Designation">
      <h3>Britney Smith</h3> <p>Senior Designer</p>
    </div>
  </div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• रिस्पॉन्सिव चौड़ाई - width: 40%, max-width: 300px
• टील बैकग्राउंड - rgb(56,185,185) आधुनिक रंग
• होवर शैडो दोगुनी - 4px→8px, 8px→16px
• पदनाम बैज - बैंगनी बैकग्राउड, सफेद टेक्स्ट, पैडिंग
• फिक्स्ड इमेज साइज़ - 300x250px (रिस्पॉन्सिव नहीं)