Как сделать - Купон
Узнать, как создать "купон" с помощью CSS.
Логотип компании
СКИДКА 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
Истекает: Январь 03, 2021
Создать купон
Шаг 1) Добавить HTML:
Пример
<div class="coupon">
<div class="container">
<h3>Company Logo</h3>
</div>
<img src="hamburger.jpg" alt="Аватар" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>СКИДКА 20% НА ПОКУПКУ</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>Используйте Промо-код: <span class="promo">BOH232</span></p>
<p class="expire">Истекает: Январь 03, 2021</p>
</div>
</div>Шаг 2) Добавить CSS:
Пример
.coupon {
border: 5px dotted #bbb; /* Пунктирная граница */
width: 80%;
border-radius: 15px; /* Закругленная граница */
margin: 0 auto; /* Центр купона */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}Редактор кода »
