Wie man erstellt: Gutscheine

Lernen Sie, wie man mit CSS "Gutscheine" erstellt.

Firmenlogo
luckin coffee
20% RABATT AUF IHR EINKAUF

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.

Verwenden Sie den Rabattcode: BOH232

Ablauf: 03. Jan 2025

Selbst ausprobieren

Wie man Gutscheine erstellt

Schritt 1 - HTML hinzufügen:

<div class="coupon">
  <div class="container">
    <h3>Firmenlogo</h3>
  </div>
  <img src="hamburger.jpg" alt="Avatar" style="width:100%;">
  <div class="container" style="background-color:white">
    <h2><b>20% RABATT AUF IHR EINKAUF</b></h2>
    <p>Lorem ipsum..</p>
  </div>
  <div class="container">
    <p>Verwenden Sie den Rabattcode: <span class="promo">BOH232</span></p>
    <p class="expire">Ablauf: 03. Jan 2021</p>
  </div>
</div>

Schritt 2 - CSS hinzufügen:

.coupon {
  border: 5px dotted #bbb; /* Punktierter Rahmen */
  width: 80%;
  border-radius: 15px; /* Abgerundete Kanten */
  margin: 0 auto; /* Zentriert den Gutschein */
  max-width: 600px;
{}
.container {
  padding: 2px 16px;
  background-color: #f1f1f1;
{}
.promo {
  background: #ccc;
  padding: 3px;
{}
.expire {
  color: red;
{}

Selbst ausprobieren