Comment créer : coupon

Apprenez à utiliser CSS pour créer un "coupon".

Logo de l'entreprise
luckin coffee
20% DE RABAIS SUR VOTRE ACHAT

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.

Utilisez le code promo : BOH232

Expire le 03 janv. 2025

Try it yourself

Comment créer un coupon

Étape 1 - Ajouter HTML :

<div class="coupon">
  <div class="container">
    <h3>Logo de l'entreprise</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% DE RABAIS SUR VOTRE ACHAT</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Utilisez le code promo : <span class="promo">BOH232</span></p>
    <p class="expire">Expire le 03 janv. 2021</p>
  </div>
</div>

Étape 2 - Ajouter CSS :

.coupon {
  border: 5px dotted #bbb; /* Bordure pointillée */
  width: 80%;
  border-radius: 15px; /* Bordure arrondie */
  margin: 0 auto; /* Centrer le coupon */
  max-width: 600px;
{}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
{}
.promo {
  background: #ccc;
  padding: 3px;
{}
.expire {
  color: red;
{}

Try it yourself