Hoe te maken: kortingsbon

Leer hoe je een "kortingsbon" maakt met CSS.

Bedrijfslogo
luckin coffee
20% KORTING OP UW AANKOOP

Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.

Gebruik Promocode: BOH232

Vervalt: Jan 03, 2025

Try it yourself

Hoe een kortingsbon te maken

Stap 1 - Voeg HTML toe:

<div class="coupon">
  <div class="container">
    <h3>Bedrijfslogo</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="breedte:100%;">
  <div class="container" style="achtergrond-kleur:white">
    <h2><b>20% KORTING OP UW AANKOOP</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Gebruik Promocode: <span class="promo">BOH232</span></p>
    <p class="expire">Vervalt: Jan 03, 2021</p>
  </div>
</div>

Stap 2 - Voeg CSS toe:

.coupon {
  rand: 5px gestippeld #bbb; /* Gestippelde rand */
  breedte: 80%;
  ronding: 15px; /* Rond hoekrand */
  marge: 0 auto; /* Centraal voor de kortingsbon */
  max-breedte: 600px;
{}
.container {
  padding: 2px 16px;
  achtergrond-kleur: #f1f1f1;
{}
.promo {
  achtergrond: #ccc;
  padding: 3px;
{}
.expire {
  color: red;
{}

Try it yourself