Miten luodaan: Alennuskoodi
- Edellinen sivu Styylitettynä horisontaalinen viiva
- Seuraava sivu Luettelo
Opi, miten luodaan "alennuskoodi" CSS:n avulla.
Yrityksen Logo
20% ALennus Ostopaikasta
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.
Käytä promokoodia: BOH232
Vanhenee: Jan 03, 2025
Miten luodaan alennuskoodi
Vaihe 1 - Lisää HTML:
<div class="coupon">
<div class="container">
<h3>Yrityksen Logo</h3>
</div>
<img src="hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>20% ALennus Ostopaikasta</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Käytä promokoodia: <span class="promo">BOH232</span></p>
<p class="expire">Vanhenee: Jan 03, 2021</p>
</div>
</div>
Vaihe 2 - Lisää CSS:
.coupon {
border: 5px dotted #bbb; /* Pisteinen reunaviiva */
width: 80%;
border-radius: 15px; /* Pyöreä reunaviiva */
margin: 0 auto; /* Keskitetty etusivu */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
- Edellinen sivu Styylitettynä horisontaalinen viiva
- Seuraava sivu Luettelo
