cirulnik-landing/src/index.html
2023-05-04 20:25:44 +03:00

590 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="ЦирюльникЪ">
<title>ЦирюльникЪ</title>
<link rel="icon" type="image/x-icon" href="../public/images/logo.png">
<link rel="stylesheet" type="text/css" href="./styles/fonts.css" />
<link rel="stylesheet" href="./styles/main.scss">
</head>
<body>
<div class="whatsapp">
<a href="https://api.whatsapp.com/send?phone=79995441212">
<img src="../public/images/whatsapp.png" alt="whatsapp">
</a>
</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>
</header>
<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">открытие в июне - открытие в июне - открытие в июне -&nbsp;</div>
</div>
<h1 class="main-card__title">ЦирюльникЪ</h1>
<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>
<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>
<a href="../public/files/Прайс.pdf" download="Прайс.pdf" class="services__block__full_price">
<div>
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
<br>с полным прайсом
</div>
</a>
</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 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>
</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>
<a href="../public/files/Прайс.pdf" download="book.pdf" class="services__block__full_price">
<div>
<h3>
Ознакомиться <img src="../public/images/arrow.png" alt="стрелка">
<br>
с полным прайсом
</h3>
</div>
</a>
</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">
<div class="wrapper">
<div class="footer__info">
<img class="footer__info__img" src="../public/images/footer.png" alt="Качество">
<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>
2009 - 2023
</span>
</div>
</div>
</footer>
</div>
<div class="modal" id="client_modal">
<div class="overlay"></div>
<div class="modal__content client_modal">
<img src="../public/images/decorations/gift2.png" alt="подарки" class="client_modal__img">
<form action="mailers/mail_client_handler.php" method="POST">
<input required name="name" type="text" placeholder="Имя">
<input required name="phone" type="text" placeholder="+7 000 000 00 00">
<button type="submit">Отправить</button>
</form>
<p class="modal__agreement">
Нажимая кнопку «Отправить» Вы соглашаетесь с политикой конфиденциальности
</p>
</div>
</div>
<div class="modal" id="employee_modal">
<div class="overlay"></div>
<div class="modal__content employee_modal">
<img src="../public/images/decorations/cut2.png" alt="подарки" class="employee_modal__img">
<form action="mailers/mail_employee_handler.php" method="POST">
<input required name="name" type="text" placeholder="Имя">
<input required name="phone" type="text" placeholder="+7 000 000 00 00">
<input required name="job" type="text" placeholder="Желаемая должность">
<button type="submit">Отправить</button>
</form>
<p class="modal__agreement">
Нажимая кнопку «Отправить» Вы соглашаетесь с политикой конфиденциальности
</p>
</div>
</div>
<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>
</body>
</html>