add desktop version
This commit is contained in:
Sergey Krylov
parent
835ffb1088
commit
c78bdd486b
682
src/index.html
682
src/index.html
@ -13,262 +13,529 @@
|
|||||||
<link rel="stylesheet" href="./styles/main.scss">
|
<link rel="stylesheet" href="./styles/main.scss">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
|
||||||
<img src="../public/images/logo.png" alt="ЦирюльникЪ" class="header__logo">
|
|
||||||
|
|
||||||
<img src="../public/images/text_logo.png" alt="федеральная сеть салонов красоты" class="header__text_logo">
|
|
||||||
|
|
||||||
<div class="header__gift">
|
|
||||||
<img src="../public/images/gift.png" alt="Подарок">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="whatsapp">
|
<div class="whatsapp">
|
||||||
<a href="https://api.whatsapp.com/send?phone=79995441212">
|
<a href="https://api.whatsapp.com/send?phone=79995441212">
|
||||||
<img src="../public/images/whatsapp.png" alt="whatsapp">
|
<img src="../public/images/whatsapp.png" alt="whatsapp">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container-wrapper">
|
<div class="mobile">
|
||||||
<div class="main-card wow animate__animated animate__zoomIn">
|
<header class="header">
|
||||||
<div class="open-label marquee3k" data-speed="1.25" data-reverse="false" data-pausable="false">
|
<img src="../public/images/logo.png" alt="ЦирюльникЪ" class="header__logo">
|
||||||
<div class="open-label__text">открытие в июне - открытие в июне - открытие в июне - </div>
|
|
||||||
|
<img src="../public/images/text_logo.png" alt="федеральная сеть салонов красоты" class="header__text_logo">
|
||||||
|
|
||||||
|
<div class="header__gift">
|
||||||
|
<img src="../public/images/gift.png" alt="Подарок">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="main-card__title">ЦирюльникЪ</h1>
|
</header>
|
||||||
|
|
||||||
<p class="main-card__description">
|
<div class="container-wrapper">
|
||||||
крупнейшая в России сеть салонов красоты полного обслуживания
|
<div class="main-card wow animate__animated animate__zoomIn">
|
||||||
</p>
|
<div class="open-label marquee3k" data-speed="1.25" data-reverse="false" data-pausable="false">
|
||||||
|
<div class="open-label__text">открытие в июне - открытие в июне - открытие в июне - </div>
|
||||||
<img src="../public/images/main_card.png" alt="ЦирюльникЪ" class="main-card__img">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="arrow-down">
|
|
||||||
<img src="../public/icons/arrow.svg" alt="Дальше" id="arrow-down">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="statistic" id="statistic">
|
|
||||||
<div class="statistic_item">
|
|
||||||
<p>Работаем с <span>2009</span> года</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="statistic_item">
|
|
||||||
<p>Более <span>500</span> салонов в сети</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="statistic_item">
|
|
||||||
<p>Более <span>2 млн</span> довольных клиентов ежемесячно</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="description">
|
|
||||||
<h2 class="description__title">
|
|
||||||
«ЦирюльникЪ» - это:
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="description__card">
|
|
||||||
<div class="description__card__list">
|
|
||||||
<ul>
|
|
||||||
<li>Мужской зал</li>
|
|
||||||
<li>Женский зал</li>
|
|
||||||
<li>Маникюрный зал</li>
|
|
||||||
<li>Косметологический кабинет</li>
|
|
||||||
<li>Массажный кабинет</li>
|
|
||||||
<li>Солярий</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img src="../public/images/description_card.png" alt="«ЦирюльникЪ» - это:" class="description__card__img">
|
<h1 class="main-card__title">ЦирюльникЪ</h1>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="clients">
|
<p class="main-card__description">
|
||||||
<h2 class="clients__title">
|
крупнейшая в России сеть салонов красоты полного обслуживания
|
||||||
Клиентам
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="clients__card">
|
|
||||||
<img src="../public/images/decorations/gift.png" alt="" class="clients__card__decor_img">
|
|
||||||
<p class="clients__card__text">
|
|
||||||
Оставьте номер телефона и получите подарок при первом посещении
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<button class="clients__card__btn" id="clients__card__btn">
|
<img src="../public/images/main_card.png" alt="ЦирюльникЪ" class="main-card__img">
|
||||||
Оставить заявку
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="employees">
|
<div class="arrow-down">
|
||||||
<h2 class="employees__title">
|
<img src="../public/icons/arrow.svg" alt="Дальше" id="arrow-down">
|
||||||
Сотрудникам
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="employees__card">
|
|
||||||
<img src="../public/images/decorations/cut.png" alt="" class="employees__card__decor_img">
|
|
||||||
<p class="clients__card__text">
|
|
||||||
Устройся на работу и зарабатывай с лидером бьюти-индустрии
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button class="employees__card__btn" id="employees__card__btn">
|
|
||||||
Оставить заявку
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services">
|
<div class="statistic" id="statistic">
|
||||||
<h2 class="services__title">
|
<div class="statistic_item">
|
||||||
Популярные услуги
|
<p>Работаем с <span>2009</span> года</p>
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="services__block">
|
|
||||||
<div class="services__block__haircut">
|
|
||||||
<h3>СТРИЖКА / МАНИКЮР <span class="services__price">249 <span>₽</span></span></h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="services__block__pedicure">
|
<div class="statistic_item">
|
||||||
<h3>
|
<p>Более <span>500</span> салонов в сети</p>
|
||||||
<span class="services__price">799 <span>₽</span></span>
|
</div>
|
||||||
ПЕДИКЮР
|
|
||||||
</h3>
|
<div class="statistic_item">
|
||||||
<h3>
|
<p>Более <span>2 млн</span> довольных клиентов ежемесячно</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
<h2 class="description__title">
|
||||||
|
«ЦирюльникЪ» - это:
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="description__card">
|
||||||
|
<div class="description__card__list">
|
||||||
|
<ul>
|
||||||
|
<li>Мужской зал</li>
|
||||||
|
<li>Женский зал</li>
|
||||||
|
<li>Маникюрный зал</li>
|
||||||
|
<li>Косметологический кабинет</li>
|
||||||
|
<li>Массажный кабинет</li>
|
||||||
|
<li>Солярий</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="../public/images/description_card.png" alt="«ЦирюльникЪ» - это:" class="description__card__img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clients">
|
||||||
|
<h2 class="clients__title">
|
||||||
|
Клиентам
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="clients__card">
|
||||||
|
<img src="../public/images/decorations/gift.png" alt="" class="clients__card__decor_img">
|
||||||
|
<p class="clients__card__text">
|
||||||
|
Оставьте номер телефона и получите подарок при первом посещении
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="clients__card__btn" id="clients__card__btn">
|
||||||
|
Оставить заявку
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="employees">
|
||||||
|
<h2 class="employees__title">
|
||||||
|
Сотрудникам
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="employees__card">
|
||||||
|
<img src="../public/images/decorations/cut.png" alt="" class="employees__card__decor_img">
|
||||||
|
<p class="clients__card__text">
|
||||||
|
Устройся на работу и зарабатывай с лидером бьюти-индустрии
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="employees__card__btn" id="employees__card__btn">
|
||||||
|
Оставить заявку
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services">
|
||||||
|
<h2 class="services__title">
|
||||||
|
Популярные услуги
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="services__block">
|
||||||
|
<div class="services__block__haircut">
|
||||||
|
<h3>СТРИЖКА / МАНИКЮР <span class="services__price">249 <span>₽</span></span></h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__pedicure">
|
||||||
|
<h3>
|
||||||
|
<span class="services__price">799 <span>₽</span></span>
|
||||||
|
ПЕДИКЮР
|
||||||
|
</h3>
|
||||||
|
<h3>
|
||||||
<span class="services__price">
|
<span class="services__price">
|
||||||
799 <span>₽</span>
|
799 <span>₽</span>
|
||||||
</span>
|
</span>
|
||||||
ПОКРЫТИЕ
|
ПОКРЫТИЕ
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services__block__coloring">
|
|
||||||
<h3>ОКРАШИВАНИЕ <br> <span class="services__price"><span>от</span> 689 <span>₽</span></span></h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services__block__solaris">
|
|
||||||
<h3>СОЛЯРИЙ <br> <span class="services__price">20 <span>₽/мин</span></span></h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services__block__massage">
|
|
||||||
<h3><span class="services__price">1299 <span>₽</span></span><br> ОБЩИЙ МАССАЖ</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="services__block__full_price">
|
|
||||||
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
|
|
||||||
с полным прайсом
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq" id="faq">
|
|
||||||
<h2 class="faq__title">
|
|
||||||
Часто задаваемые вопросы
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="faq__block">
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">Цены указаны реальные?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
<div class="services__block__coloring">
|
||||||
Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов.
|
<h3>ОКРАШИВАНИЕ <br> <span class="services__price"><span>от</span> 689 <span>₽</span></span></h3>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">Как получить подарок при открытии?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
<div class="services__block__solaris">
|
||||||
Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия
|
<h3>СОЛЯРИЙ <br> <span class="services__price">20 <span>₽/мин</span></span></h3>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">Как записаться на услугу?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
<div class="services__block__massage">
|
||||||
Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания.
|
<h3><span class="services__price">1299 <span>₽</span></span><br> ОБЩИЙ МАССАЖ</h3>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">По какому адресу открывается салон?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
<div class="services__block__full_price">
|
||||||
Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE.
|
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
|
||||||
</p>
|
с полным прайсом
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">Как получить консультацию по услугам?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
|
||||||
Сделать это Вы можете уже сейчас. Позвоните нам по номеру
|
|
||||||
+7 (999) 544-12-12, и администратор с радостью ответит на все вопросы.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq__block__item" id="faq__block__item">
|
|
||||||
<div class="faq__block__item__question">
|
|
||||||
<h3 class="faq__block__item__title">Где подробнее почитать о вашей сети?</h3>
|
|
||||||
|
|
||||||
<button class="faq__block__item__btn">+</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
|
||||||
В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru).
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="contacts">
|
<div class="faq" id="faq">
|
||||||
<h2 class="contacts__title">
|
<h2 class="faq__title">
|
||||||
Контакты
|
Часто задаваемые вопросы
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="contacts__card">
|
<div class="faq__block">
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Цены указаны реальные?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как получить подарок при открытии?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как записаться на услугу?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">По какому адресу открывается салон?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как получить консультацию по услугам?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Сделать это Вы можете уже сейчас. Позвоните нам по номеру
|
||||||
|
+7 (999) 544-12-12, и администратор с радостью ответит на все вопросы.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Где подробнее почитать о вашей сети?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contacts">
|
||||||
|
<h2 class="contacts__title">
|
||||||
|
Контакты
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="contacts__card">
|
||||||
<span class="contacts__card__address">
|
<span class="contacts__card__address">
|
||||||
Москва, <br> Бульвар Адмирала Ушакова, 12 <br> м. Скобелевская
|
Москва, <br> Бульвар Адмирала Ушакова, 12 <br> м. Скобелевская
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="contacts__card__phone_block">
|
<div class="contacts__card__phone_block">
|
||||||
<a href="tel:+79995441212" class="contacts__card__phone">+7 (999) 544-12-12</a>
|
<a href="tel:+79995441212" class="contacts__card__phone">+7 (999) 544-12-12</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<img src="../public/images/footer.png" alt="Качество">
|
||||||
|
|
||||||
|
<div class="footer__text">
|
||||||
|
<span>
|
||||||
|
© Все права защищены
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
2009 - 2023
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="desktop">
|
||||||
|
<div class="wrapper">
|
||||||
|
<header class="header">
|
||||||
|
<img src="../public/images/logo.png" alt="ЦирюльникЪ" class="header__logo">
|
||||||
|
|
||||||
|
<img src="../public/images/text_logo.png" alt="федеральная сеть салонов красоты" class="header__text_logo">
|
||||||
|
|
||||||
|
<div class="header__gift">
|
||||||
|
<img src="../public/images/gift.png" alt="Подарок">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1 class="info__title">
|
||||||
|
Крупнейшаая в России
|
||||||
|
сеть салонов красоты
|
||||||
|
полного обслуживания
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="info__badge__block">
|
||||||
|
<div class="info__badge__block__item">
|
||||||
|
Работаем с 2009 года
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info__badge__block__item">
|
||||||
|
Более 500 салонов в сети
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info__badge__block__item">
|
||||||
|
Более 2 млн довольных клиентов ежемесячно
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="../public/images/main_card.png" alt="ЦирюльникЪ" class="info__img">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="description">
|
||||||
|
<h2 class="description__title">
|
||||||
|
«ЦирюльникЪ» - это:
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="description__card">
|
||||||
|
<div class="description__card__list">
|
||||||
|
<ul>
|
||||||
|
<li>Мужской зал</li>
|
||||||
|
<li>Женский зал</li>
|
||||||
|
<li>Маникюрный зал</li>
|
||||||
|
<li>Косметологический кабинет</li>
|
||||||
|
<li>Массажный кабинет</li>
|
||||||
|
<li>Солярий</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<img src="../public/images/description_card.png" alt="«ЦирюльникЪ» - это:" class="description__img">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="client_employees__wrapper">
|
||||||
|
<div class="clients">
|
||||||
|
<h2 class="clients__title">
|
||||||
|
Клиентам
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="clients__card">
|
||||||
|
<img src="../public/images/decorations/gift.png" alt="" class="clients__card__decor_img">
|
||||||
|
<p class="clients__card__text">
|
||||||
|
Оставьте номер телефона и получите подарок при первом посещении
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="clients__card__btn" id="clients__card__btn">
|
||||||
|
Оставить заявку
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="employees">
|
||||||
|
<h2 class="employees__title">
|
||||||
|
Сотрудникам
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="employees__card">
|
||||||
|
<img src="../public/images/decorations/cut.png" alt="" class="employees__card__decor_img">
|
||||||
|
<p class="clients__card__text">
|
||||||
|
Устройся на работу и зарабатывай с лидером бьюти-индустрии
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="employees__card__btn" id="employees__card__btn">
|
||||||
|
Оставить заявку
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services">
|
||||||
|
<h2 class="services__title">
|
||||||
|
Популярные услуги
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="services__block">
|
||||||
|
<div class="services__block__haircut">
|
||||||
|
<h3>
|
||||||
|
СТРИЖКА
|
||||||
|
<span class="services__price">249 <span>₽</span></span>
|
||||||
|
МАНИКЮР
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__pedicure">
|
||||||
|
<h3>
|
||||||
|
ПЕДИКЮР
|
||||||
|
<span class="services__price">799 <span>₽</span></span>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<h3>
|
||||||
|
ПОКРЫТИЕ
|
||||||
|
<span class="services__price">
|
||||||
|
799 <span>₽</span>
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__coloring">
|
||||||
|
<h3>ОКРАШИВАНИЕ <br> <span class="services__price"><span>от</span> 689 <span>₽</span></span></h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__solaris">
|
||||||
|
<h3>СОЛЯРИЙ <br> <span class="services__price">20 <span>₽/мин</span></span></h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__massage">
|
||||||
|
<h3>
|
||||||
|
ОБЩИЙ МАССАЖ
|
||||||
|
<span class="services__price">1299 <span>₽</span></span>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services__block__full_price">
|
||||||
|
<h3>
|
||||||
|
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
|
||||||
|
с полным прайсом
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq" id="faq">
|
||||||
|
<h2 class="faq__title">
|
||||||
|
Часто задаваемые вопросы
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="faq__block">
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Цены указаны реальные?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Да, цены в Цирюльнике - это реальность. При этом мы всегда следим за уровнем обслуживания наших сотрудников, качеством предоставляемых услуг и стерилизацией инструментов.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как получить подарок при открытии?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Для начала оставьте заявку в графе «Клиентам» выше. Администратор свяжется с Вами, когда до открытия салона останется меньше недели, и предложит записаться на услугу. Для получения подарка Вам необходимо посетить салон в течение 14 дней после открытия
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как записаться на услугу?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Самостоятельная онлайн-запись на услуги будет доступна примерно за 14 дней до открытия салона. Также Вы можете оставить свой контакт в форме обратно связи. Также Вы можете позвонить нам и попросить добавить Вас в лист ожидания.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">По какому адресу открывается салон?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Мы будем ждать Вас по адресу: Бульвар Адмирала Ушакова, 12, цокольный этаж. Здание - культурный центр ЛИРА. У нас общий вход с магазином FIX PRICE.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Как получить консультацию по услугам?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
Сделать это Вы можете уже сейчас. Позвоните нам по номеру
|
||||||
|
+7 (999) 544-12-12, и администратор с радостью ответит на все вопросы.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__block__item" id="faq__block__item">
|
||||||
|
<div class="faq__block__item__question">
|
||||||
|
<h3 class="faq__block__item__title">Где подробнее почитать о вашей сети?</h3>
|
||||||
|
|
||||||
|
<button class="faq__block__item__btn">+</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="faq__block__item__answer" id="faq__block__item__answer">
|
||||||
|
В интернете огромное количество информации о нас. Можете ознакомиться с информацией и отзывами на нашем официальном сайте: Главная страница | Цирюльникъ (salon-hair.ru).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<img src="../public/images/footer.png" alt="Качество">
|
<div class="wrapper">
|
||||||
|
<div class="footer__info">
|
||||||
|
<img class="footer__info__img" src="../public/images/footer.png" alt="Качество">
|
||||||
|
|
||||||
<div class="footer__text">
|
<div class="footer__info__contacts">
|
||||||
|
<a href="tel:+79995441212" class="footer__info__contacts__phone">+7 (999) 544-12-12</a>
|
||||||
|
|
||||||
|
<span class="contacts__card__address">
|
||||||
|
Москва, <br>
|
||||||
|
Бульвар Адмирала Ушакова, 12 <br>
|
||||||
|
Культурный центр ЛИРА <br> <br>
|
||||||
|
м. Скобелевская
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__text">
|
||||||
<span>
|
<span>
|
||||||
© Все права защищены
|
© Все права защищены
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
2009 - 2023
|
2009 - 2023
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -311,7 +578,6 @@
|
|||||||
|
|
||||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||||
|
|
||||||
<script src="./libs/marquee3000/marquee3k.js"></script>
|
<script src="./libs/marquee3000/marquee3k.js"></script>
|
||||||
<script src="./libs/wow.js/dist/wow.min.js"></script>
|
<script src="./libs/wow.js/dist/wow.min.js"></script>
|
||||||
<script src="./scripts/index.js"></script>
|
<script src="./scripts/index.js"></script>
|
||||||
|
|||||||
@ -9,17 +9,32 @@ wow.init();
|
|||||||
|
|
||||||
Marquee3k.init();
|
Marquee3k.init();
|
||||||
|
|
||||||
const faqElem = document.getElementById('faq');
|
tippy('.header__gift>img', {
|
||||||
|
content: `
|
||||||
|
<div class="tooltip" id="tooltip">
|
||||||
|
<p>
|
||||||
|
Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру
|
||||||
|
</p>
|
||||||
|
</div>`,
|
||||||
|
allowHTML: true,
|
||||||
|
theme: 'light',
|
||||||
|
});
|
||||||
|
|
||||||
|
const mobileVersion = document.querySelector('.mobile');
|
||||||
|
const desktopVersion = document.querySelector('.desktop');
|
||||||
|
|
||||||
|
|
||||||
|
const faqElem = (version = mobileVersion) => version.querySelector('#faq');
|
||||||
const arrowDownElem = document.getElementById('arrow-down');
|
const arrowDownElem = document.getElementById('arrow-down');
|
||||||
const statisticElem = document.getElementById('statistic');
|
const statisticElem = document.getElementById('statistic');
|
||||||
|
const clientBtn = (version = mobileVersion) =>version.querySelector('#clients__card__btn');
|
||||||
const clientBtn = document.getElementById('clients__card__btn');
|
const employeeBtn = (version = mobileVersion) =>version.querySelector('#employees__card__btn');
|
||||||
const employeeBtn = document.getElementById('employees__card__btn');
|
|
||||||
|
|
||||||
const clientModal = document.getElementById('client_modal');
|
const clientModal = document.getElementById('client_modal');
|
||||||
const employeeModal = document.getElementById('employee_modal');
|
const clientModalForm =clientModal.querySelector('form');
|
||||||
|
|
||||||
const headerGiftImg = document.querySelector('.header__gift>img');
|
const employeeModal = document.getElementById('employee_modal');
|
||||||
|
const employeeModalForm = employeeModal.querySelector('form');
|
||||||
|
|
||||||
const tooltip = document.getElementById('tooltip');
|
const tooltip = document.getElementById('tooltip');
|
||||||
|
|
||||||
@ -44,15 +59,9 @@ const faqClickHandler = (event) => {
|
|||||||
item.classList.toggle('open');
|
item.classList.toggle('open');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
faqElem.addEventListener('click', faqClickHandler)
|
|
||||||
|
|
||||||
const arrowDownClickHandler = () => {
|
const arrowDownClickHandler = () => {
|
||||||
statisticElem.scrollIntoView({behavior: 'smooth', block: 'nearest'})
|
statisticElem.scrollIntoView({behavior: 'smooth', block: 'nearest'})
|
||||||
}
|
}
|
||||||
|
|
||||||
arrowDownElem.addEventListener('click', arrowDownClickHandler)
|
|
||||||
|
|
||||||
const clientModalClickHandler = (event) => {
|
const clientModalClickHandler = (event) => {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
|
|
||||||
@ -61,9 +70,6 @@ const clientModalClickHandler = (event) => {
|
|||||||
document.body.style.overflow = 'auto'
|
document.body.style.overflow = 'auto'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clientModal.addEventListener('click', clientModalClickHandler)
|
|
||||||
|
|
||||||
const employeeModalClickHandler = (event) => {
|
const employeeModalClickHandler = (event) => {
|
||||||
const target = event.target;
|
const target = event.target;
|
||||||
|
|
||||||
@ -72,44 +78,39 @@ const employeeModalClickHandler = (event) => {
|
|||||||
document.body.style.overflow = 'auto'
|
document.body.style.overflow = 'auto'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
employeeModal.addEventListener('click', employeeModalClickHandler)
|
|
||||||
|
|
||||||
|
|
||||||
const employeeBtnClickHandler = () => {
|
const employeeBtnClickHandler = () => {
|
||||||
employeeModal.classList.add('open');
|
employeeModal.classList.add('open');
|
||||||
document.body.style.overflow = 'hidden'
|
document.body.style.overflow = 'hidden'
|
||||||
}
|
}
|
||||||
|
|
||||||
employeeBtn.addEventListener('click', employeeBtnClickHandler)
|
|
||||||
|
|
||||||
const clientBtnClickHandler = () => {
|
const clientBtnClickHandler = () => {
|
||||||
clientModal.classList.add('open');
|
clientModal.classList.add('open');
|
||||||
document.body.style.overflow = 'hidden'
|
document.body.style.overflow = 'hidden'
|
||||||
}
|
}
|
||||||
|
const employeeFormSubmitHandler = (event) => {
|
||||||
clientBtn.addEventListener('click', clientBtnClickHandler)
|
|
||||||
|
|
||||||
|
|
||||||
employeeModal.querySelector('form').addEventListener('submit', (event) => {
|
|
||||||
console.log('event', event);
|
|
||||||
employeeModal.classList.remove('open');
|
employeeModal.classList.remove('open');
|
||||||
document.body.style.overflow = 'auto'
|
document.body.style.overflow = 'auto'
|
||||||
})
|
}
|
||||||
|
const clientFormSubmitHandler = (event) => {
|
||||||
clientModal.querySelector('form').addEventListener('submit', (event) => {
|
|
||||||
console.log('event', event);
|
console.log('event', event);
|
||||||
clientModal.classList.remove('open');
|
clientModal.classList.remove('open');
|
||||||
document.body.style.overflow = 'auto'
|
document.body.style.overflow = 'auto'
|
||||||
})
|
}
|
||||||
|
|
||||||
tippy('.header__gift>img', {
|
|
||||||
content: `
|
// mobile events
|
||||||
<div class="tooltip" id="tooltip">
|
arrowDownElem.addEventListener('click', arrowDownClickHandler)
|
||||||
<p>
|
faqElem().addEventListener('click', faqClickHandler)
|
||||||
Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру
|
employeeBtn().addEventListener('click', employeeBtnClickHandler)
|
||||||
</p>
|
clientBtn().addEventListener('click', clientBtnClickHandler)
|
||||||
</div>`,
|
|
||||||
allowHTML: true,
|
// desktop events
|
||||||
theme: 'light',
|
faqElem(desktopVersion).addEventListener('click', faqClickHandler)
|
||||||
});
|
employeeBtn(desktopVersion).addEventListener('click', employeeBtnClickHandler)
|
||||||
|
clientBtn(desktopVersion).addEventListener('click', clientBtnClickHandler)
|
||||||
|
|
||||||
|
// common events
|
||||||
|
clientModal.addEventListener('click', clientModalClickHandler)
|
||||||
|
employeeModal.addEventListener('click', employeeModalClickHandler)
|
||||||
|
|
||||||
|
employeeModalForm.addEventListener('submit', employeeFormSubmitHandler)
|
||||||
|
clientModalForm.addEventListener('submit', clientFormSubmitHandler)
|
||||||
|
|||||||
@ -5,6 +5,10 @@
|
|||||||
@import "./constants/fonts";
|
@import "./constants/fonts";
|
||||||
@import "./constants/z-index";
|
@import "./constants/z-index";
|
||||||
|
|
||||||
|
.desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@ -656,6 +660,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -701,3 +706,242 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (screen and min-width: 500px) {
|
||||||
|
.mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
gap: 50px;
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
height: 90px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text_logo {
|
||||||
|
height: 60px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background: $color_gradient_orange;
|
||||||
|
padding: 60px 0;
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
@include title_font;
|
||||||
|
max-width: 510px;
|
||||||
|
font-size: 38px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__badge {
|
||||||
|
&__block {
|
||||||
|
margin-top: 30px;
|
||||||
|
max-width: 510px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
@include statistic_item_font;
|
||||||
|
|
||||||
|
border: 1px solid $color_black;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
width: calc((100% - 30px) / 2);;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -60px;
|
||||||
|
height: 250px;
|
||||||
|
left: 550px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__card {
|
||||||
|
padding: 30px 20px;
|
||||||
|
&__list {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
height: 200px;
|
||||||
|
right: 300px;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.client_employees__wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 100px;
|
||||||
|
|
||||||
|
.clients {
|
||||||
|
&__title {
|
||||||
|
padding-left: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.employees {
|
||||||
|
&__title {
|
||||||
|
padding-left: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clients__card__btn, .employees__card__btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.services {
|
||||||
|
&__block {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 150px);
|
||||||
|
grid-column-gap: 50px;
|
||||||
|
grid-row-gap: 50px;
|
||||||
|
|
||||||
|
&__haircut {
|
||||||
|
grid-area: 1 / 1 / 3 / 2;
|
||||||
|
h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__coloring {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
&__pedicure {
|
||||||
|
grid-area: 1 / 2 / 2 / 4;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 50px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__massage {
|
||||||
|
grid-area: 1 / 4 / 2 / 6;
|
||||||
|
h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__solaris {
|
||||||
|
grid-area: 2 / 3 / 3 / 5;
|
||||||
|
}
|
||||||
|
&__full_price {
|
||||||
|
grid-area: 2 / 5 / 3 / 6;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
height: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__price {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
line-height: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
&__block {
|
||||||
|
&__item {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&__answer {
|
||||||
|
cursor: auto;
|
||||||
|
transition: 200ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
width: auto !important;
|
||||||
|
height: 200px
|
||||||
|
}
|
||||||
|
|
||||||
|
&__contacts {
|
||||||
|
color: $color_white;
|
||||||
|
|
||||||
|
&__phone {
|
||||||
|
@include statistic_item_font;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $color_white;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user