Hur man skapar: Rabattkupong

Lär dig hur man använder CSS för att skapa en "rabattkupong".

Företagslogotyp
luckin coffee
20% RABATT PÅ DIN KÖP

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.

Använd kampanjkod: BOH232

Utgår: Jan 03, 2025

Prova själv

Hur man skapar en rabattkupong

Steg 1 - Lägg till HTML:

<div class="coupon">
  <div class="container">
    <h3>Företagslogotyp</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% RABATT PÅ DIN KÖP</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Använd kampanjkod: <span class="promo">BOH232</span></p>
    <p class="expire">Utgår: Jan 03, 2021</p>
  </div>
</div>

Steg 2 - Lägg till CSS:

.coupon {
  border: 5px dotted #bbb; /* Punktlinjer kantlinje */
  width: 80%;
  border-radius: 15px; /* Rund kantlinje */
  margin: 0 auto; /* Centrer rabattkupong */
  max-width: 600px;
{}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
{}
.promo {
  background: #ccc;
  padding: 3px;
{}
.expire {
  color: red;
{}

Prova själv