Hoe OM - koepon
Leer hoe om 'n "koepon" met CSS te skep.
Maatskappy Logo
20% AFSLAG JOU AANKOOP
Die pyn self is liefde, en is trots daarop om koppig te wees. Die see is gewoond om jou ten minste te voel, van die oomblik dat jy stilbly oor die plesiere van lubbers, om hulle op hierdie webwerf te groet. Hulle word geroep om die mnesarchus van alle droefheid te wees.
Gebruik promosiekode: BOH232
Verval: 3 Januarie 2021
Hoe om 'n koepon te skep
Stap 1) Voeg HTML by:
Voorbeeld
<div class="coupon">
<div class="container">
<h3>Company Logo</h3>
</div>
<img src="hamburger.jpg"
alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% OFF YOUR PURCHASE</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Use Promo
Code: <span class="promo">BOH232</span></p>
<p
class="expire">Expires: Jan 03, 2021</p>
</div>
</div>
Stap 2) Voeg CSS by:
Voorbeeld
.coupon {
border: 5px dotted #bbb; /* Dotted border */
width: 80%;
border-radius: 15px; /* Rounded border */
margin: 0 auto; /* Center the coupon */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}