Hoe - Coupon
Leer hoe u een "coupon" maakt met CSS.
Bedrijfslogo
20% KORTING OP UW AANKOOP
De pijn zelf is liefde en gaat er prat op koppig te zijn. De zee zal je op zijn minst voelen, vanaf het moment dat je zwijgt over de geneugten van lubbers, om ze te begroeten op deze website. Ze zijn geroepen om de mnesarchus van alle verdriet te zijn.
Gebruik promotiecode: BOH232
Verloopt: 03 januari 2021
Hoe maak je een coupon aan?
Stap 1) HTML toevoegen:
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) CSS toevoegen:
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;
}