Hvordan man opretter: Rabatbon

Lær hvordan man bruger CSS til at oprette en "rabatbon".

Virksomhedslogo
luckin coffee
20% RABAT PÅ DIN KØB

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.

Brug rabatkode: BOH232

Udløber: Jan 03, 2025

Try it yourself

Hvordan man opretter en rabatbon

Trin 1 - Tilføj HTML:

<div class="coupon">
  <div class="container">
    <h3>Virksomhedslogo</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="bredde:100%;">
  <div class="container" style="baggrundsfarve:white">
    <h2><b>20% RABAT PÅ DIN KØB</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Brug rabatkode: <span class="promo">BOH232</span></p>
    <p class="expire">Udløber: Jan 03, 2021</p>
  </div>
</div>

Trin 2 - Tilføj CSS:

.coupon {
  kant: 5px prikket #bbb; /* prikket kantlinje */
  bredde: 80%;
  radius: 15px; /* rund kantlinje */
  margin: 0 auto; /* centrer rabatbon */
  max-bredde: 600px;
}
.container {
  padding: 2px 16px;
  baggrundsfarve: #f1f1f1;
}
.promo {
  baggrund: #ccc;
  padding: 3px;
}
.expire {
  color: red;
}

Try it yourself