Как создать: купон

Узнайте, как использовать CSS для создания "купона".

Логотип компании
luckin coffee
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 янв. 2025

Попробуйте сами

Как создать купон

шаг 1 - Добавьте HTML:

<div class="coupon">
  <div class="container">
    <h3>Логотип компании</h3>
  </div>
  <img src="hamburger.jpg" alt="Аватар" style="ширина: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 {
  рамка: 5px точечная #bbb; /* точечная рамка */
  ширина: 80%;
  круглость углов: 15px; /* закругленные края */
  отступ: 0 auto; /* выравнивание купона по центру */
  максимальная ширина: 600px;
{}
.container {
  отступ: 2px 16px;
  цвет фона: #f1f1f1;
{}
.promo {
  фоновый цвет: #ccc;
  отступ: 3px;
{}
.expire {
  color: red;
{}

Попробуйте сами