Cách tạo: phiếu giảm giá

Học cách sử dụng CSS để tạo "phiếu giảm giá".

Logo Công ty
luckin coffee
GIẢM 20% TRONG MUA HÀNG CỦA BẠN

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.

Sử dụng mã giảm giá: BOH232

Hết hạn: 03 Tháng 1, 2025

Thử ngay

Cách tạo phiếu giảm giá

Bước 1 - Thêm HTML:

<div class="coupon">
  <div class="container">
    <h3>Logo Công ty</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>GIẢM 20% TRONG MUA HÀNG CỦA BẠN</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Sử dụng mã giảm giá: <span class="promo">BOH232</span></p>
    <p class="expire">Hết hạn: 03 Tháng 1, 2021</p>
  </div>
</div>

Bước 2 - Thêm CSS:

.coupon {
  border: 5px dotted #bbb; /* Cạnh chấm chấm */
  width: 80%;
  border-radius: 15px; /* Cạnh bo tròn */
  margin: 0 auto; /* Trung tâm phiếu giảm giá */
  max-width: 600px;
}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}
.promo {
  background: #ccc;
  padding: 3px;
}
.hết hạn {
  màu: đỏ;
}

Thử ngay