Bagaimana membuat: kupon

Belajar bagaimana menggunakan CSS untuk membuat 'kupon'.

Logo Perusahaan
luckin coffee
20% DISKON PEMBELIAN ANDA

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.

Gunakan Kode Promosi: BOH232

Berakhir: Jan 03, 2025

Coba Sendiri

Bagaimana membuat kupon

Langkah pertama - Tambahkan HTML:

<div class="coupon">
  <div class="container">
    <h3>Logo Perusahaan</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% DISKON PEMBELIAN ANDA</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Gunakan Kode Promosi: <span class="promo">BOH232</span></p>
    <p class="expire">Berakhir: Jan 03, 2021</p>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

.coupon {
  border: 5px dotted #bbb; /* Garis garis besar */
  width: 80%;
  border-radius: 15px; /* Latar belakang berbujur */
  margin: 0 auto; /* Menenggali kupon */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.expire {
  warna: merah;
}

Coba Sendiri