Πώς να δημιουργήσετε: Κουπόνια

Μάθετε πώς να χρησιμοποιήσετε το CSS για τη δημιουργία "κουπονιών".

Λογότυπο Εταιρείας
luckin coffee
20% Έκπτωση στην Αγορά σας

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.

Χρήση Κωδικού Προσφοράς: BOH232

Λήξη: Jan 03, 2025

Δοκιμάστε το προσωπικά

Πώς να δημιουργήσετε κουπόνια

Βήμα 1 - Προσθήκη HTML:

<div class="coupon">
  <div class="container">
    <h3>Λογότυπο Εταιρείας</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="πλάτος:100%;">
  <div class="container" style="βαθμός-χρώματος:white">
    <h2><b>20% Έκπτωση στην Αγορά σας</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Χρήση Κωδικού Προσφοράς: <span class="promo">BOH232</span></p>
    <p class="expire">Λήξη: Jan 03, 2021</p>
  </div>
</div>

Βήμα 2 - Προσθήκη CSS:

.coupon {
  περίγραμμα: 5px σημειωμένο #bbb; /* Σημειωμένο περίγραμμα */
  πλάτος: 80%;
  κυκλική-γωνία: 15px; /* Κύκλιος πλαισίων */
  μαργίνα: 0 αυτόματο; /* Κεντρόιου κουπόνι */
  μέγιστος-πλάτος: 600px;
}
.container {
  παράθυρο: 2px 16px;
  βαθμός-χρώματος: #f1f1f1;
}
.promo {
  βαθμός: #ccc;
  παράθυρο: 3px;
}
.expire {
  χρώμα: κόκκινο;
}

Δοκιμάστε το προσωπικά