कैसे बनाएं: उत्पाद कार्ड

उत्पाद कार्ड कैसे बनाएं

पहला कदम - HTML जोड़ें:

<div class="card">
  <img src="jeans3.jpg" alt="Jeans" style="विस्तार:100%">
  <h1>कार्यान्वित जीन्स</h1>
  <p class="price">$19.99</p>
  <p>जीन्स के बारे में कुछ पाठ..</p>
  <p><button>कार्ट में जोड़ें</button></p>
</div>

दूसरा कदम - CSS जोड़ें:

.कार्ड {
  बॉक्स-शैडो: 0 4px 8px 0 रेगा(0, 0, 0, 0.2);
  मैक्स-विस्तार: 300px;
  मार्ग: स्वत:;
  लेबल-आरेखन: मध्य;
  फ़ॉन्ट-फैमिली: arial;
}
.प्राइस {
  कलर: ग्रे;
  फ़ॉन्ट-साइज़: 22px;
}
.कार्ड बटन {
  बॉर्डर: नहीं;
  आउटलाइन: 0;
  पैडिंग: 12px;
  कलर: श्वेत;
  बैकग्राउंड-कलर: #000;
  लेबल-आरेखन: मध्य;
  कर्सर: पॉइंटर;
  विस्तार: 100%;
  फ़ॉन्ट-साइज़: 18px;
}
.कार्ड बटन:हॉवर {
  opacity: 0.7;
}

亲自试一试