कैसे बनाएं: कॉपन

CSS के द्वारा "कॉपन" कैसे बनाएं सीखें。

कंपनी लोगो
luckin coffee
20% खरीद के लिए ऑफ

लोरेम इप्सम डोरेस एट, एट नाम पर्टिनैक्स ग्लोरिट्यूर. सिया टी मिनिम सोलेट सेन्सेरिट, एक्व क्वो लूप्टाम टैकिमेट्स वूल्प्टाम, सालुटांडी देलिकैटिसीमी इएम, इन सेड नुल्लाम लैबोरामस अप्पेलेंट्यूर, मेई ई ओमनी डोलोरम म्नेसार्क्हम.

प्रोमो कोड: BOH232

मिटना: जनवरी 03, 2025

亲自试一试

कैसे कॉपन बनाएं

पहला कदम - एचटीएमएल जोड़ें:

<div class="coupon">
  <div class="container">
    <h3>कंपनी लोगो</h3>
  </div>
  <img src="hamburger.jpg" alt="अवतार" style="विडथ:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% खरीद के लिए ऑफ</b></h2>
    <p>लोरेम इप्सम..</p>
  </div>
  <div class="container">
    <p>प्रोमो कोड: <span class="promo">BOH232</span></p>
    <p class="expire">मिटना: जनवरी 03, 2021</p>
  </div>
</div>

दूसरा कदम - डायलोग क्रेडिट सीएसएस:

.coupon {
  बॉर्डर: 5पिक्सेल डॉटेड #bbb; /* डॉट्स बॉर्डर */
  विडथ: 80%;
  बॉर्डर-रेडियस: 15पिक्सेल; /* गोलाकार बॉर्डर */
  मार्गिन: 0 ऑटो; /* मध्यस्थ ओफर कार्ड */
  मैक्स-विडथ: 600पिक्सेल;
}
.container {
  पैडिंग: 2पिक्सेल 16पिक्सेल;
  बैकग्राउंड-कलर: #f1f1f1;
}
.promo {
  बैकग्राउंड: #ccc;
  पैडिंग: 3पिक्सेल;
}
.expire {
  color: red;
}

亲自试一试