Tạo phiếu giảm giá (coupon) với CSS

Coupon (phiếu giảm giá) thường có viền nét đứt, hình ảnh sản phẩm, mã code và ngày hết hạn. Dưới đây là mẫu hoàn chỉnh:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    img {
      width: 100%;
      display: block;
    }
    .couponContainer {
      border: 5px dashed #bbb;
      width: 80%;
      border-radius: 15px;
      margin: 0 auto;
      max-width: 600px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .detailContainer {
      padding: 2px 16px;
      background-color: #d4d4d4;
    }
    .promo {
      background: rgb(104, 104, 104);
      color: white;
      padding: 10px;
      display: inline-block;
      border-radius: 4px;
      font-weight: bold;
    }
    .expiryDate {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="couponContainer">
    <div class="detailContainer">
      <h3>Food Inc ©</h3>
    </div>
    <img src="https://images.pexels.com/photos/376464/pexels-photo376464.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
    <div class="detailContainer" style="background-color:white">
      <h2>Bánh Xèo Ngon Nhất Thế Giới</h2>
    </div>
    <div class="detailContainer">
      <p> Sử dụng mã <span class="promo">FREE24</span> để được giảm 24% cho món tiếp theo </p>
      <p class="expiryDate">Hết hạn trong 20 ngày</p>
    </div>
  </div>
</body>
</html>

Kết quả

Một coupon đẹp với viền nét đứt xám, logo công ty, hình ảnh bánh xèo, tên món ăn, mã giảm giá nổi bật màu xám đậm và ngày hết hạn màu đỏ.

Các thành phần chính

• border: 5px dashed tạo viền nét đứt đặc trưng của coupon
• border-radius: 15px làm mềm các góc
• Mã giảm giá dùng inline-block với background tối, chữ trắng
• Responsive với max-width: 600px và width: 80%