CÁCH THỨC - Phiếu giảm giá
Tìm hiểu cách tạo "phiếu giảm giá" bằng CSS.
Logo công ty
GIẢM GIÁ 20% KHI MUA HÀNG CỦA BẠN
Nỗi đau tự nó là tình yêu, và tự hào vì nó cứng đầu. Biển ít nhất sẽ không cảm nhận được bạn, kể từ thời điểm bạn giữ im lặng về thú vui của những người say rượu, khi chào đón họ trên trang web này. Họ được gọi là kẻ chôn vùi mọi nỗi buồn.
Sử dụng mã khuyến mại: BOH232
Hết hạn: 03/01/2021
Cách tạo phiếu giảm giá
Bước 1) Thêm HTML:
Thí dụ
<div class="coupon">
<div class="container">
<h3>Company Logo</h3>
</div>
<img src="hamburger.jpg"
alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% OFF YOUR PURCHASE</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Use Promo
Code: <span class="promo">BOH232</span></p>
<p
class="expire">Expires: Jan 03, 2021</p>
</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
.coupon {
border: 5px dotted #bbb; /* Dotted border */
width: 80%;
border-radius: 15px; /* Rounded border */
margin: 0 auto; /* Center the coupon */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}