Come creare: coupon

Impara come utilizzare CSS per creare un “coupon”.

Logo dell'Azienda
luckin coffee
20% DI SCONTO SULL'ACQUISTO

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.

Usa Codice Promozionale: BOH232

Scade: 03 Gen 2025

Prova da solo

Come creare un coupon

Primo passo - Aggiungi HTML:

<div class="coupon">
  <div class="container">
    <h3>Logo dell'Azienda</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% DI SCONTO SULL'ACQUISTO</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Usa Codice Promozionale: <span class="promo">BOH232</span></p>
    <p class="expire">Scade: 03 Gen 2021</p>
  </div>
</div>

Secondo passaggio - Aggiungi CSS:

.coupon {
  border: 5px dotted #bbb; /* Bordo punteggiato */
  width: 80%;
  border-radius: 15px; /* Bordo arrotondato */
  margin: 0 auto; /* Allineamento centrale del coupon */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.expire {
  color: red;
}

Prova da solo