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">
|
||||
</head>
|
||||
<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">
|
||||
<a href="https://api.whatsapp.com/send?phone=79995441212">
|
||||
<img src="../public/images/whatsapp.png" alt="whatsapp">
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://api.whatsapp.com/send?phone=79995441212">
|
||||
<img src="../public/images/whatsapp.png" alt="whatsapp">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container-wrapper">
|
||||
<div class="main-card wow animate__animated animate__zoomIn">
|
||||
<div class="open-label marquee3k" data-speed="1.25" data-reverse="false" data-pausable="false">
|
||||
<div class="open-label__text">открытие в июне - открытие в июне - открытие в июне - </div>
|
||||
<div class="mobile">
|
||||
<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>
|
||||
|
||||
<h1 class="main-card__title">ЦирюльникЪ</h1>
|
||||
</header>
|
||||
|
||||
<p class="main-card__description">
|
||||
крупнейшая в России сеть салонов красоты полного обслуживания
|
||||
</p>
|
||||
|
||||
<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 class="container-wrapper">
|
||||
<div class="main-card wow animate__animated animate__zoomIn">
|
||||
<div class="open-label marquee3k" data-speed="1.25" data-reverse="false" data-pausable="false">
|
||||
<div class="open-label__text">открытие в июне - открытие в июне - открытие в июне - </div>
|
||||
</div>
|
||||
|
||||
<img src="../public/images/description_card.png" alt="«ЦирюльникЪ» - это:" class="description__card__img">
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="main-card__title">ЦирюльникЪ</h1>
|
||||
|
||||
<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 class="main-card__description">
|
||||
крупнейшая в России сеть салонов красоты полного обслуживания
|
||||
</p>
|
||||
|
||||
<button class="clients__card__btn" id="clients__card__btn">
|
||||
Оставить заявку
|
||||
</button>
|
||||
<img src="../public/images/main_card.png" alt="ЦирюльникЪ" class="main-card__img">
|
||||
</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 class="arrow-down">
|
||||
<img src="../public/icons/arrow.svg" alt="Дальше" id="arrow-down">
|
||||
</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 class="statistic" id="statistic">
|
||||
<div class="statistic_item">
|
||||
<p>Работаем с <span>2009</span> года</p>
|
||||
</div>
|
||||
|
||||
<div class="services__block__pedicure">
|
||||
<h3>
|
||||
<span class="services__price">799 <span>₽</span></span>
|
||||
ПЕДИКЮР
|
||||
</h3>
|
||||
<h3>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
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><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>
|
||||
ПОКРЫТИЕ
|
||||
</h3>
|
||||
</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 class="services__block__coloring">
|
||||
<h3>ОКРАШИВАНИЕ <br> <span class="services__price"><span>от</span> 689 <span>₽</span></span></h3>
|
||||
</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 class="services__block__solaris">
|
||||
<h3>СОЛЯРИЙ <br> <span class="services__price">20 <span>₽/мин</span></span></h3>
|
||||
</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 class="services__block__massage">
|
||||
<h3><span class="services__price">1299 <span>₽</span></span><br> ОБЩИЙ МАССАЖ</h3>
|
||||
</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 class="services__block__full_price">
|
||||
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
|
||||
с полным прайсом
|
||||
</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="faq" id="faq">
|
||||
<h2 class="faq__title">
|
||||
Часто задаваемые вопросы
|
||||
</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">
|
||||
Москва, <br> Бульвар Адмирала Ушакова, 12 <br> м. Скобелевская
|
||||
</span>
|
||||
|
||||
<div class="contacts__card__phone_block">
|
||||
<a href="tel:+79995441212" class="contacts__card__phone">+7 (999) 544-12-12</a>
|
||||
<div class="contacts__card__phone_block">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
2009 - 2023
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -311,7 +578,6 @@
|
||||
|
||||
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||
|
||||
<script src="./libs/marquee3000/marquee3k.js"></script>
|
||||
<script src="./libs/wow.js/dist/wow.min.js"></script>
|
||||
<script src="./scripts/index.js"></script>
|
||||
|
||||
@ -9,17 +9,32 @@ wow.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 statisticElem = document.getElementById('statistic');
|
||||
|
||||
const clientBtn = document.getElementById('clients__card__btn');
|
||||
const employeeBtn = document.getElementById('employees__card__btn');
|
||||
const clientBtn = (version = mobileVersion) =>version.querySelector('#clients__card__btn');
|
||||
const employeeBtn = (version = mobileVersion) =>version.querySelector('#employees__card__btn');
|
||||
|
||||
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');
|
||||
|
||||
@ -44,15 +59,9 @@ const faqClickHandler = (event) => {
|
||||
item.classList.toggle('open');
|
||||
|
||||
}
|
||||
|
||||
faqElem.addEventListener('click', faqClickHandler)
|
||||
|
||||
const arrowDownClickHandler = () => {
|
||||
statisticElem.scrollIntoView({behavior: 'smooth', block: 'nearest'})
|
||||
}
|
||||
|
||||
arrowDownElem.addEventListener('click', arrowDownClickHandler)
|
||||
|
||||
const clientModalClickHandler = (event) => {
|
||||
const target = event.target;
|
||||
|
||||
@ -61,9 +70,6 @@ const clientModalClickHandler = (event) => {
|
||||
document.body.style.overflow = 'auto'
|
||||
}
|
||||
}
|
||||
|
||||
clientModal.addEventListener('click', clientModalClickHandler)
|
||||
|
||||
const employeeModalClickHandler = (event) => {
|
||||
const target = event.target;
|
||||
|
||||
@ -72,44 +78,39 @@ const employeeModalClickHandler = (event) => {
|
||||
document.body.style.overflow = 'auto'
|
||||
}
|
||||
};
|
||||
|
||||
employeeModal.addEventListener('click', employeeModalClickHandler)
|
||||
|
||||
|
||||
const employeeBtnClickHandler = () => {
|
||||
employeeModal.classList.add('open');
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
employeeBtn.addEventListener('click', employeeBtnClickHandler)
|
||||
|
||||
const clientBtnClickHandler = () => {
|
||||
clientModal.classList.add('open');
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
clientBtn.addEventListener('click', clientBtnClickHandler)
|
||||
|
||||
|
||||
employeeModal.querySelector('form').addEventListener('submit', (event) => {
|
||||
console.log('event', event);
|
||||
const employeeFormSubmitHandler = (event) => {
|
||||
employeeModal.classList.remove('open');
|
||||
document.body.style.overflow = 'auto'
|
||||
})
|
||||
|
||||
clientModal.querySelector('form').addEventListener('submit', (event) => {
|
||||
}
|
||||
const clientFormSubmitHandler = (event) => {
|
||||
console.log('event', event);
|
||||
clientModal.classList.remove('open');
|
||||
document.body.style.overflow = 'auto'
|
||||
})
|
||||
}
|
||||
|
||||
tippy('.header__gift>img', {
|
||||
content: `
|
||||
<div class="tooltip" id="tooltip">
|
||||
<p>
|
||||
Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру
|
||||
</p>
|
||||
</div>`,
|
||||
allowHTML: true,
|
||||
theme: 'light',
|
||||
});
|
||||
|
||||
// mobile events
|
||||
arrowDownElem.addEventListener('click', arrowDownClickHandler)
|
||||
faqElem().addEventListener('click', faqClickHandler)
|
||||
employeeBtn().addEventListener('click', employeeBtnClickHandler)
|
||||
clientBtn().addEventListener('click', clientBtnClickHandler)
|
||||
|
||||
// desktop events
|
||||
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/z-index";
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
@ -656,6 +660,7 @@
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin-top: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -701,3 +706,242 @@
|
||||
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