Cara Membuat Tampilan Kupon Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 17, 2021

Di bawah ini kita akan mempelajari cara membuat tampilan “kupon” dengan CSS. Tampilan ini biasanya ada pada sebuah website e-commerce yang digunakan untuk mendapatkan diskon misalnya kepada barang yang di jual ataupun jasa layanan yang diberikan oleh sebuah website. Di bawah ini kita akan membuat tampilan kupn sederhana menggunakan CSS :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial;
}

.coupon {
  border: 5px dotted #bbb;
  width: 80%;
  border-radius: 15px;
  margin: 0 auto;
  max-width: 600px;
}

.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}

.promo {
  background: #ccc;
  padding: 3px;
}

.expire {
  color: red;
}
</style>
</head>
<body>

<div class="coupon">
  <div class="container">
    <h3>LOGO</h3>
  </div>
  <img src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>Diskon 20 %</b></h2> 
    <p>Ayam Geprek murah mantap!.</p>
  </div>
  <div class="container">
    <p>Gunakan Promo: <span class="promo">EEKTD</span></p>
    <p class="expire">Expires: 14 Februari 2021</p>
  </div>
</div>

</body>
</html>

Cara Membuat Kupon

Langkah 1) Tambahkan HTML:
Contoh

<div class="coupon">
  <div class="container">
    <h3>LOGO</h3>
  </div>
  <img src="https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>Diskon 20 %</b></h2> 
    <p>Ayam Geprek murah mantap!.</p>
  </div>
  <div class="container">
    <p>Gunakan Promo: <span class="promo">EEKTD</span></p>
    <p class="expire">Expires: 14 Februari 2021</p>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

.coupon {
  border: 5px dotted #bbb; /* Border titik-titik*/
  width: 80%;
  border-radius: 15px; /* Border rounded */
  margin: 0 auto; /* pisisi tengan kupon */
  max-width: 600px;
}

.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
}

.promo {
  background: #ccc;
  padding: 3px;
}

.expire {
  color: red;
}