Jak utworzyć: kupon
- Poprzednia strona Wyróżniona linia pozioma
- Następna strona Grupy listy
Naucz się, jak używać CSS do tworzenia "kupony".
Logo firmy
20% ZNIŻKI NA KUPNO
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.
Użyj kodu promocyjnego: BOH232
Wygasa: 03 sty 2025
Jak utworzyć kupon
Krok 1 - Dodaj HTML:
<div class="coupon">
<div class="container">
<h3>Logo firmy</h3>
</div>
<img src="hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% ZNIŻKI NA KUPNO</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Użyj kodu promocyjnego: <span class="promo">BOH232</span></p>
<p class="expire">Wygasa: 03 sty 2021</p>
</div>
</div>
Krok 2 - Dodaj CSS:
.coupon {
border: 5px dotted #bbb; /* Krzyżykowa krawędź */
width: 80%;
border-radius: 15px; /* Równoległe krawędzie */
margin: 0 auto; /* Centralizacja kuponu */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
- Poprzednia strona Wyróżniona linia pozioma
- Następna strona Grupy listy
