Como criar: cupons

Aprenda a usar CSS para criar "cupons".

Logotipo da Empresa
luckin coffee
20% DE DESCONTO NO SEU 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.

Use o Código Promocional: BOH232

Expira: 03 Jan, 2025

Experimente você mesmo

Como criar cupons

Primeiro passo - Adicionar HTML:

<div class="coupon">
  <div class="container">
    <h3>Logotipo da Empresa</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% DE DESCONTO NO SEU COMPRAS</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Use o Código Promocional: <span class="promo">BOH232</span></p>
    <p class="expire">Expira: 03 Jan, 2021</p>
  </div>
</div>

Segundo passo - Adicionar CSS:

.coupon {
  border: 5px dotted #bbb; /* Borda pontilhada */
  width: 80%;
  border-radius: 15px; /* Borda arredondada */
  margin: 0 auto; /* Centraliza o cupom */
  max-width: 600px;
{}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
{}
.promo {
  background: #ccc;
  padding: 3px;
{}
.expire {
  cor: vermelho;
{}

Experimente você mesmo