Nasıl Oluşturulur: Ödül Çeki
- Önceki sayfa Stilize edilmiş yatay çizgi
- Sonraki sayfa Liste grupları
CSS ile 'Ödül Çeki' Nasıl Oluşturulur Öğrenin.
Şirket Logosu
ALIŞVERİŞİNİZDEN %20 İNDİRİM
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.
Promo Kodunu Kullan: BOH232
Sonlanma Tarihi: 03 Oca 2025
Ödül Çeki Nasıl Oluşturulur
İlk Adım - HTML Ekle:
<div class="coupon">
<div class="container">
<h3>Şirket Logosu</h3>
</div>
<img src="hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>ALIŞVERİŞİNİZDEN %20 İNDİRİM</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Promo Kodunu Kullan: <span class="promo">BOH232</span></p>
<p class="expire">Sonlanma Tarihi: 03 Oca 2021</p>
</div>
</div>
İkinci Adım - CSS Ekle:
.coupon {
border: 5px dotted #bbb; /* Noktalı Kenar Çizgisi */
width: 80%;
border-radius: 15px; /* Yuvarlak Kenar Çizgisi */
margin: 0 auto; /* Merkezde Ödül Çeki */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
- Önceki sayfa Stilize edilmiş yatay çizgi
- Sonraki sayfa Liste grupları
