Cómo crear: cupones

Aprende a usar CSS para crear un "cupón".

Logo de la Empresa
coffee luckin
20% DE DESCUENTO EN TU COMPRAS

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.

Usar Código Promocional: BOH232

Vence: 03 de ene, 2025

Prueba personalmente

Cómo crear cupones

Primer paso - Añadir HTML:

<div class="coupon">
  <div class="container">
    <h3>Logo de la Empresa</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% DE DESCUENTO EN TU COMPRAS</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Usar Código Promocional: <span class="promo">BOH232</span></p>
    <p class="expire">Vence: 03 de ene, 2021</p>
  </div>
</div>

Segundo paso - Añadir CSS:

.coupon {
  border: 5px dotted #bbb; /* Bordes punteados */
  width: 80%;
  border-radius: 15px; /* Bordes redondeados */
  margin: 0 auto; /* Centrado el cupón */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.expire {
  color: red;
}

Prueba personalmente