index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="На нашем сайте вы найдете информацию о курсах и тренингах по колористике в городе Нальчик. Узнайте основы цветовой теории, научитесь правильно подбирать цвета и создавать гармоничные комбинации. Получите профессиональные навыки в области колористики и примените их в дизайне, моде и других сферах"
    />
    <title>OrNelly</title>

    <link rel="icon" href="./images/browser/browser.ico" type="image/x-icon" />

    <link rel="stylesheet" href="./libs/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/null.css" />
    <link rel="stylesheet" href="./css/font.css" />
    <link rel="stylesheet" href="./css/style.css" />

    <script src="./libs/swiper/swiper-bundle.min.js" defer></script>
    <script src="./js/popup.js" defer></script>
    <script src="./js/accordion.js" defer></script>
    <script src="./js/main.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <div class="container">
          <button class="menu__btn close-popup">
            <span></span>
            <span></span>
            <span></span>
          </button>
          <nav class="navigation">
            <ul class="navigation__items">
              <li class="navigation__item">
                <a href="#about" class="navigation__link">Обо мне</a>
              </li>
              <li class="navigation__item">
                <a href="#skills" class="navigation__link">Мои работы</a>
              </li>
              <li class="navigation__item">
                <a href="#courses" class="navigation__link">Обучение</a>
              </li>
              <li class="navigation__item">
                <a href="#reviews" class="navigation__link">Отзывы</a>
              </li>
              <li class="navigation__item">
                <a href="#contacts" class="navigation__link">Контакты</a>
              </li>
            </ul>
            <div class="header__btns">
              <a
                href="https://t.me/or_nelli"
                target="_blank"
                class="contact__btn header__btn"
                >Telegram</a
              >
              <a
                href="https://wa.me/79287028780?text=Cообщение%20с%20сайта"
                target="_blank"
                class="contact__btn header__btn"
                >Whatsapp</a
              >
              <a
                href="https://instagram.com/or.nelli"
                target="_blank"
                class="contact__btn header__btn"
                >Instagram</a
              >
            </div>
          </nav>
        </div>
      </header>

      <main class="main">
        <section
          id="home"
          class="section-home"
          style="background-image: url(./images/home/home.JPG)"
        >
          <div class="home__inner">
            <h2 class="home__title uppercase">
              O<span class="lowercase">r</span>Nelly
            </h2>
            <p class="home__text uppercase">Colorist</p>
            <p class="home__text uppercase">hair designer</p>
          </div>
        </section>

        <section id="about" class="section-about block">
          <div class="container">
            <div class="about__inner">
              <h2 class="about__title main__title">Обо мне</h2>
              <img
                src="./images/about/about.png"
                alt="about"
                class="about__img"
              />
              <h3 class="about__name">Нелли Оразаева</h3>
              <h4 class="about__prof">Стилист-Колорист</h4>
              <p class="about__text">
                Весь свой опыт я упаковала для вас в простые и пошаговые
                инструкции.
              </p>
              <p class="about__text">
                Я готова поделиться всеми своими секретами, которые привели меня
                к успеху в профессии Колориста
              </p>
              <p class="about__text">
                Я обучила и довела до результата начинающих колористов и
                колористов с опытом
              </p>
            </div>
          </div>
        </section>

        <section id="skills" class="section-skills block">
          <div class="container">
            <h2 class="skills__title main__title">Мои работы</h2>
            <div class="main__slider">
              <div class="swiper">
                <div class="swiper-wrapper">

                  <!-- <div class="swiper-slide">
                    <div class="slide__inner">
                      <img
                        src="./images/skills/skills-1.jpg"
                        alt=""
                        class="slider-img"
                      />
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="slide__inner">
                      <img
                        src="./images/skills/skills-2.jpg"
                        alt=""
                        class="slider-img"
                      />
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="slide__inner">
                      <img
                        src="./images/skills/skills-3.jpg"
                        alt=""
                        class="slider-img"
                      />
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="slide__inner">
                      <img
                        src="./images/skills/skills-4.jpg"
                        alt=""
                        class="slider-img"
                      />
                    </div>
                  </div>

                  <div class="swiper-slide">
                    <div class="slide__inner">
                      <img
                        src="./images/skills/skills-5.jpg"
                        alt=""
                        class="slider-img"
                      />
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="courses" class="section-courses block">
          <div class="container">
            <h2 class="courses__title main__title">Обучение</h2>
            <div class="courses__inner">
              <div class="courses-card card-first">
                <img
                  src="./images/courses/courses_1.png"
                  alt="courses-1"
                  class="courses-img"
                />
                <h4 class="card__title uppercase">Колорист с 0</h4>
                <p class="card__text">60000 руб</p>
                <p class="courses-description">
                  Курс предлагает обучение сложным техникам окрашивания волос
                </p>
                <p class="courses-description">
                  Курсы включают демонстрацию и отработку на моделях, чтобы
                  участники могли непосредственно применить полученные знания
                </p>
                <p class="courses-description">
                  Каждый участник будет получать индивидуальную корректировку в
                  личных сообщениях, чтобы помочь достичь наилучших результатов
                </p>
                <a href="#popup_junior" class="card-btn popup-link"
                  >Подробнее</a
                >
              </div>
              <div id="popup_junior" class="popup">
                <div class="popup__body">
                  <div class="popup__content">
                    <a href="#" class="popup__close close-popup">
                      <span></span>
                      <span></span>
                    </a>
                    <h2 class="popup__title">Колорист с 0</h2>
                    <h3 class="popup__subtitle">
                      Обучение сложным техникам окрашивания
                    </h3>
                    <h4 class="popup__subtitle-text">
                      Подробный разбор техник:
                    </h4>
                    <div class="accordion">
                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Шатуш</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника, позволяющая создать плавный переход от корней
                          волос к кончикам, придавая им естественный солнечный
                          оттенок
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Авторская техника бликов
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          инновационная методика, позволяющая добавить глубину и
                          объем волосам с помощью игры света и тени
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Айртач</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника окрашивания, при которой волосы получают
                          мягкие и нежные переходы цвета, создавая эффект
                          "воздушности"
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Балаяж</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          популярная техника окрашивания, при которой волосы
                          получают смелые контрасты и плавные переходы цвета
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Растяжка цвета</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          метод, позволяющий создать эффект "растянутости" цвета
                          на волосах, что придает им уникальный вид
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Камуфляж седины</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          способ скрыть седые волосы, создавая гармоничный и
                          естественный цвет волос
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Выход из черного
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника, позволяющая плавно перейти от черного цвета
                          волос к другому оттенку
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Выход из блонда в натуральный
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          методика, помогающая вернуть волосам естественный цвет
                          после блондирования или осветления
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Пенные бани</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          процедура, позволяющая увлажнить и укрепить волосы с
                          помощью специальных пен и масок
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Контуринг у лица
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          методика окрашивания, которая позволяет создать
                          определенные контуры и акценты вокруг лица,
                          подчеркивая его особенности
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Хэндтач</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          инновационная техника окрашивания, основанная на
                          ручной работе стилиста, позволяющая создавать
                          уникальные и индивидуальные образы
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">TotalBlond</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          комплексная методика блондирования и осветления волос,
                          достигающая идеального блонд тона без повреждения
                          структуры волос
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Тонирование</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          процедура, позволяющая изменить оттенок волос без
                          изменения их структуры
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Секреты по нейтрализации пигментов
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техники и методы, помогающие нейтрализовать
                          нежелательные пигменты в волосах и достичь желаемого
                          цвета
                        </p>
                      </div>
                    </div>

                    <div class="popup__foryou">
                      <h2 class="popup__subtitle">
                        Во время курса Вы получите:
                      </h2>
                      <ul class="foryou__items">
                        <li class="foryou__item popup__item-text">
                          Возможность отрабатывать полученные навыки на моделях
                          в реальных условиях
                        </li>
                        <li class="foryou__item popup__item-text">
                          Профессиональную практику мобильной фотографии для
                          социальных сетей, таких как
                          <strong>instagram.com</strong> и
                          <strong>vk.com</strong>
                        </li>
                        <li class="foryou__item popup__item-text">
                          Практику продвинутых техник окрашивания, которые
                          сможете успешно применять на своих клиентах
                        </li>
                      </ul>
                    </div>

                    <div class="popup__after">
                      <h2 class="popup__subtitle">После курса:</h2>
                      <ul class="after__items">
                        <li class="after__item popup__item-text">
                          Вы уверенно закрепитесь в своей профессии и станите
                          востребованным специалистом в сфере колористики
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Сертификат о прохождении курсов, который
                          будет являться подтверждением вашей квалификации
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Доступ к базе поставщиков, с которыми
                          установлены специальные партнерские отношения, что
                          позволит вам получить личные скидки на необходимые для
                          работы материалы
                        </li>
                      </ul>
                    </div>

                    <div class="popup__timestudy">
                      <h2 class="popup__subtitle timestudy__text">
                        Время обучения:
                      </h2>
                      <h3 class="popup__subtitle-text timestudy__text">
                        10 дней
                      </h3>
                    </div>

                    <div class="popup__price">
                      <h2 class="popup__subtitle price__text">Цена курса:</h2>
                      <h3 class="popup__subtitle-text price__text">
                        60000 рублей
                      </h3>
                    </div>

                    <div class="popup__contacts">
                      <a
                        href="https://t.me/or_nelli"
                        class="contacts__btn btn-telegram"
                        target="_blank"
                        >Telegram</a
                      >
                      <a
                        href="https://wa.me/79287028780?text=Cообщение%20с%20сайта"
                        class="contacts__btn btn-whatsapp"
                        target="_blank"
                        >WhatsApp</a
                      >
                    </div>
                  </div>
                </div>
              </div>

              <div class="courses-card card-second">
                <img
                  src="./images/courses/courses_2.png"
                  alt="courses-2"
                  class="courses-img"
                />
                <h4 class="card__title uppercase">Опытного колориста</h4>
                <p class="card__text">15000 руб</p>
                <p class="courses-description">
                  Курс предлагает обучение сложным техникам окрашивания волос
                </p>
                <p class="courses-description">
                  Колорист сможет выбрать любую технику окрашивания, которую он
                  хочет освоить, и получить отработку на модели
                </p>
                <p class="courses-description">
                  Индивидуальный подход к каждому участнику, чтобы помочь
                  достичь наилучших результатов
                </p>
                <a href="#popup_middle" class="card-btn popup-link"
                  >Подробнее</a
                >
              </div>

              <div id="popup_middle" class="popup">
                <div class="popup__body">
                  <div class="popup__content">
                    <a href="#" class="popup__close close-popup">
                      <span></span>
                      <span></span>
                    </a>
                    <h2 class="popup__title">для опытного колориста</h2>
                    <h3 class="popup__subtitle">
                      Обучение сложным техникам окрашивания
                    </h3>
                    <h4 class="popup__subtitle-text">
                      Подробный разбор любой техники на выбор:
                    </h4>
                    <div class="accordion">
                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Шатуш</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника, позволяющая создать плавный переход от корней
                          волос к кончикам, придавая им естественный солнечный
                          оттенок
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Авторская техника бликов
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          инновационная методика, позволяющая добавить глубину и
                          объем волосам с помощью игры света и тени
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Айртач</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника окрашивания, при которой волосы получают
                          мягкие и нежные переходы цвета, создавая эффект
                          "воздушности"
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Балаяж</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          популярная техника окрашивания, при которой волосы
                          получают смелые контрасты и плавные переходы цвета
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Растяжка цвета</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          метод, позволяющий создать эффект "растянутости" цвета
                          на волосах, что придает им уникальный вид
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Камуфляж седины</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          способ скрыть седые волосы, создавая гармоничный и
                          естественный цвет волос
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Выход из черного
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техника, позволяющая плавно перейти от черного цвета
                          волос к другому оттенку
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Выход из блонда в натуральный
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          методика, помогающая вернуть волосам естественный цвет
                          после блондирования или осветления
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Пенные бани</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          процедура, позволяющая увлажнить и укрепить волосы с
                          помощью специальных пен и масок
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Контуринг у лица
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          методика окрашивания, которая позволяет создать
                          определенные контуры и акценты вокруг лица,
                          подчеркивая его особенности
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Хэндтач</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          инновационная техника окрашивания, основанная на
                          ручной работе стилиста, позволяющая создавать
                          уникальные и индивидуальные образы
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">TotalBlond</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          комплексная методика блондирования и осветления волос,
                          достигающая идеального блонд тона без повреждения
                          структуры волос
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Тонирование</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          процедура, позволяющая изменить оттенок волос без
                          изменения их структуры
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">
                            Секреты по нейтрализации пигментов
                          </h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          техники и методы, помогающие нейтрализовать
                          нежелательные пигменты в волосах и достичь желаемого
                          цвета
                        </p>
                      </div>
                    </div>

                    <div class="popup__foryou">
                      <h2 class="popup__subtitle">
                        Во время курса Вы получите:
                      </h2>
                      <ul class="foryou__items">
                        <li class="foryou__item popup__item-text">
                          Возможность отрабатывать полученные навыки на моделях
                          в реальных условиях
                        </li>
                        <li class="foryou__item popup__item-text">
                          Профессиональную практику мобильной фотографии для
                          социальных сетей, таких как
                          <strong>instagram.com</strong> и
                          <strong>vk.com</strong>
                        </li>
                        <li class="foryou__item popup__item-text">
                          Практику продвинутых техник окрашивания, которые
                          сможете успешно применять на своих клиентах
                        </li>
                      </ul>
                    </div>

                    <div class="popup__after">
                      <h2 class="popup__subtitle">После курса:</h2>
                      <ul class="after__items">
                        <li class="after__item popup__item-text">
                          Вы уверенно закрепитесь в своей профессии и станите
                          востребованным специалистом в сфере колористики
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Сертификат о прохождении курсов, который
                          будет являться подтверждением вашей квалификации
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Доступ к базе поставщиков, с которыми
                          установлены специальные партнерские отношения, что
                          позволит вам получить личные скидки на необходимые для
                          работы материалы
                        </li>
                      </ul>
                    </div>

                    <div class="popup__timestudy">
                      <h2 class="popup__subtitle timestudy__text">
                        Время обучения:
                      </h2>
                      <h3 class="popup__subtitle-text timestudy__text">
                        от 1 дня
                      </h3>
                    </div>

                    <div class="popup__price">
                      <h2 class="popup__subtitle price__text">Цена курса:</h2>
                      <h3 class="popup__subtitle-text price__text">
                        15000 рублей
                      </h3>
                    </div>

                    <div class="popup__contacts">
                      <a
                        href="https://t.me/or_nelli"
                        class="contacts__btn btn-telegram"
                        target="_blank"
                        >Telegram</a
                      >
                      <a
                        href="https://wa.me/79287028780?text=Cообщение%20с%20сайта"
                        class="contacts__btn btn-whatsapp"
                        target="_blank"
                        >WhatsApp</a
                      >
                    </div>
                  </div>
                </div>
              </div>

              <div class="courses-card card-therd">
                <img
                  src="./images/courses/courses_3.png"
                  alt="courses-3"
                  class="courses-img"
                />
                <h4 class="card__title uppercase">Стилист-Парикмахер</h4>
                <p class="card__text">20000 руб</p>
                <p class="courses-description">
                  Курс предлагает обучение различным стрижкам и стилизациям на
                  моделях
                </p>
                <p class="courses-description">
                  Курс также предлагаем отработку фотографий для социальных
                  сетей, чтобы участники могли создавать привлекательные и
                  стильные образы для своих клиентов
                </p>
                <p class="courses-description">
                  Мои курсы основаны на передовых методиках и техниках, которые
                  помогут участникам достичь профессионального уровня в области
                  стилизации волос
                </p>
                <a href="#popup_hair" class="card-btn popup-link">Подробнее</a>
              </div>

              <div id="popup_hair" class="popup">
                <div class="popup__body">
                  <div class="popup__content">
                    <a href="#" class="popup__close close-popup">
                      <span></span>
                      <span></span>
                    </a>
                    <h2 class="popup__title">Стилист-Парикмахер</h2>
                    <h3 class="popup__subtitle">
                      Обучение стрижкам и стилизациям на моделях
                    </h3>
                    <h4 class="popup__subtitle-text">
                      Подробный разбор техник:
                    </h4>
                    <div class="accordion">
                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Каскад</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          одна из самых популярных техник, которая позволяет
                          создать объемную и структурированную стрижку с
                          плавными переходами длин волос
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Ровный срез</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          классическая техника, при которой волосы стригутся на
                          одной длине, создавая элегантный и аккуратный образ
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Боб</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          универсальная и стильная стрижка, которая подходит для
                          различных типов волос и форм лица
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Каре</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          классическая стрижка, которая придает волосам четкую
                          форму и подчеркивает контуры лица
                        </p>
                      </div>

                      <div class="accordion-content">
                        <div class="accordion-header">
                          <h2 class="title popup__subtitle">Авторская челка</h2>
                          <img
                            src="./images/popup/popup_vector.png"
                            alt=""
                            class="accordion-vector"
                          />
                        </div>

                        <p class="description">
                          индивидуальная и творческая техника создания челки,
                          которая подходит для каждого типа волос и формы лица
                        </p>
                      </div>
                    </div>

                    <div class="popup__foryou">
                      <h2 class="popup__subtitle">
                        Во время курса Вы получите:
                      </h2>
                      <ul class="foryou__items">
                        <li class="foryou__item popup__item-text">
                          Возможность отрабатывать полученные навыки на моделях
                          в реальных условиях
                        </li>
                        <li class="foryou__item popup__item-text">
                          Профессиональную практику мобильной фотографии для
                          социальных сетей, таких как
                          <strong>instagram.com</strong> и
                          <strong>vk.com</strong>
                        </li>
                        <li class="foryou__item popup__item-text">
                          Практику продвинутых техник окрашивания, которые
                          сможете успешно применять на своих клиентах
                        </li>
                      </ul>
                    </div>

                    <div class="popup__after">
                      <h2 class="popup__subtitle">После курса:</h2>
                      <ul class="after__items">
                        <li class="after__item popup__item-text">
                          Вы уверенно закрепитесь в своей профессии и станите
                          востребованным специалистом в сфере колористики
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Сертификат о прохождении курсов, который
                          будет являться подтверждением вашей квалификации
                        </li>
                        <li class="after__item popup__item-text">
                          Вы получите Доступ к базе поставщиков, с которыми
                          установлены специальные партнерские отношения, что
                          позволит вам получить личные скидки на необходимые для
                          работы материалы
                        </li>
                      </ul>
                    </div>

                    <div class="popup__timestudy">
                      <h2 class="popup__subtitle timestudy__text">
                        Время обучения:
                      </h2>
                      <h3 class="popup__subtitle-text timestudy__text">
                        5 дней
                      </h3>
                    </div>

                    <div class="popup__price">
                      <h2 class="popup__subtitle price__text">Цена курса:</h2>
                      <h3 class="popup__subtitle-text price__text">
                        20000 рублей
                      </h3>
                    </div>

                    <div class="popup__contacts">
                      <a
                        href="https://t.me/or_nelli"
                        target="_blank"
                        class="contacts__btn btn-telegram"
                        >Telegram</a
                      >
                      <a
                        href="https://wa.me/79287028780?text=Cообщение%20с%20сайта"
                        target="_blank"
                        class="contacts__btn btn-whatsapp"
                        >WhatsApp</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section class="section-reviews block">
          
        </section>

        <section class="marquee-insta">
          <img
            src="./images/insta/insta-top.jpg"
            alt="alt"
            class="insta-line__top insta-line"
          />

          <div class="insta-row">
            <p class="row-item">
              <a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a>
            </p>
            <p class="row-item">
              <a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a
              ><a href="#" class="item__link">or.nelli </a>
            </p>
          </div>

          <img
            src="./images/insta/insta-bottom.jpg"
            alt=""
            class="insta-line__bottom insta-line"
          />
        </section>
      </main>

      <footer id="contacts" class="footer block">
        <h2 class="footer__title">Контакты</h2>
        <p class="footer__text">
          Хотите узнать больше о моих курсах или просто поговорить? Не
          стесняйтесь написать мне сообщение!
        </p>
        <a
          href="https://t.me/or_nelli"
          target="_blank"
          class="contact__btn footer__btn"
          >Telegram</a
        >
        <a
          href="https://wa.me/79287028780?text=Cообщение%20с%20сайта"
          target="_blank"
          class="contact__btn footer__btn"
          >Whatsapp</a
        >
        <ul class="app">
          <li class="app__item">
            <a href="#https://instagram.com/or.nelli" class="app__item-link"
              ><img
                src="./images/footer/app-1.svg"
                alt=""
                class="app__item-img"
            /></a>
          </li>
        </ul>
      </footer>
    </div>
  </body>
</html>