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

Habis: Jan 03, 2025

亲自试一试

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="lebar: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">Habis: Jan 03, 2021</p>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

.coupon {
  garis: 5px garis bintik #bbb; /* garis tepi bintik */
  lebar: 80%;
  radius sudut: 15px; /* garis tepi bulat */
  margin: 0 auto; /* menengah kiri diskon */
  max-width: 600px;
{}
.container {
  mengatur: 2px 16px;
  warna latar belakang: #f1f1f1;
{}
.promo {
  latar belakang: #ccc;
  mengatur: 3px;
{}
.已过期 {
  颜色：红色；
{}

亲自试一试