Cách thực hiện - 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
Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim solea senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. Trong sed nullam labamus kháng cáo, mei ei omnis dolorem mnesarchum.
Sử dụng Mã khuyến mãi: BOH232
Hết hạn: Ngày 03 tháng 1 năm 2021
Cách tạo phiếu giảm giá
Bước 1) Thêm HTML:
Ví 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:
Ví 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;
}
Hãy tự mình thử »