source/index.html - master - outthevoid/frontend_developer_module_6

source/index.html
536 строк31 KB
darthmorgot
Добавил комментарии с названиями блоков, мелкие правки разметки.
14 май 2024, 18:02
14 май 2024, 18:02aa16b93
<!DOCTYPE html>
<html class="page" lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Drink2Go - Главная страница</title>
    <link rel="apple-touch-icon" type="image/png" href="favicons/180.png" sizes="180x180">
    <link rel="icon" type="image/png" href="favicons/192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="favicons/512.png" sizes="512x512">
    <link rel="icon" type="image/svg+xml" href="favicons/icon.svg">
    <link rel="icon" href="favicon.ico">
    <link rel="preload" href="fonts/Montserrat-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-Bold.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-ExtraBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-ExtraBold.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-Medium.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-Regular.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/Montserrat-SemiBold.woff" as="font" type="font/woff" crossorigin="anonymous">
    <link rel="manifest" href="manifest.webmanifest">
    <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="vendor/leaflet/leaflet.css">
    <link rel="stylesheet" href="vendor/nouislider/nouislider.min.css">
    <link rel="stylesheet" href="styles/styles.css">
  </head>
  <body class="page__body">

    <!-- Header -->
    <header class="header header--nojs">
      <div class="container">
        <!-- Site navigation -->
        <nav class="header__nav nav">
          <a class="header__logo-wrapper">
            <picture>
              <source type="image/svg+xml" media="(min-width: 1440px)" srcset="images/logo-desktop.svg">
              <source type="image/svg+xml" media="(min-width: 768px)" srcset="images/logo-tablet.svg">
              <img class="header__logo" src="images/logo-mobile.svg" alt="Логотип интернет-магазина кофейных напитков">
            </picture>
            <span class="header__description">Интернет-магазин <br> кофейных напитков</span>
          </a>
          <!-- Mobile menu Открывается удалением класса toggle, закрывается добавлением класса toggle -->
          <ul class="nav__list toggle">
            <li class="nav__item">
              <a class="nav__link nav__link--current">Главная</a>
            </li>
            <li class="nav__item">
              <a class="nav__link" href="#">Каталог</a>
            </li>
            <li class="nav__item">
              <a class="nav__link" href="#">Доставка</a>
            </li>
            <li class="nav__item">
              <a class="nav__link" href="#">О нас</a>
            </li>
          </ul>
          <div class="nav__wrapper">
            <a class="nav__login" href="#">
              <span class="visually-hidden">Войти в личный кабинет.</span>
              <svg width="16" height="16" aria-hidden="true" focusable="false" role="img">
                <use href="icons/stack.svg#icon-login"></use>
              </svg>
              <span>Войти</span>
            </a>
            <a class="nav__cart" href="#">
              <span class="visually-hidden">Перейти в корзину.</span>
              <svg width="16" height="16" aria-hidden="true" focusable="false" role="img">
                <use href="icons/stack.svg#icon-cart"></use>
              </svg>
              <span>Корзина</span>
            </a>
            <button class="nav__menu-button nav__menu-button--open" type="button">
              <span class="visually-hidden">Открыть меню.</span>
              <svg width="16" height="12" aria-hidden="true" focusable="false" role="img">
                <use href="icons/stack.svg#icon-open-menu"></use>
              </svg>
              <svg class="toggle" width="12" height="12" aria-hidden="true" focusable="false" role="img">
                <use href="icons/stack.svg#icon-close-menu"></use>
              </svg>
            </button>
          </div>
        </nav>
      </div>
    </header>

    <main class="main main-container">
      <h1 class="visually-hidden">Интернет-магазин кофейных напитков Drink2Go</h1>

      <!-- Slider -->
      <section class="slider swiper">
        <h2 class="visually-hidden">Слайдер товаров</h2>
        <div class="swiper-wrapper">
          <div class="swiper-slide slider__item slider__item--flat slider__item--active">
            <div class="slider__container container">
              <picture>
                <source type="image/webp" media="(min-width: 1440px)"
                        srcset="images/desktop/flat_white_img_desktop@1x.webp 1x, images/desktop/flat_white_img_desktop@2x.webp 2x">
                <source type="image/webp" media="(min-width: 768px)"
                        srcset="images/tablet/flat_white_img_tablet@1x.webp 1x, images/tablet/flat_white_img_tablet@2x.webp 2x">
                <source type="image/webp" srcset="images/mobile/flat_white_img_mobile@1x.webp 1x, images/mobile/flat_white_img_mobile@2x.webp 2x">
                <source media="(min-width: 1440px)"
                        srcset="images/desktop/flat_white_img_desktop@1x.png 1x, images/desktop/flat_white_img_desktop@2x.png 2x">
                <source media="(min-width: 768px)"
                        srcset="images/tablet/flat_white_img_tablet@1x.png 1x, images/tablet/flat_white_img_tablet@2x.png 2x">
                <img class="slider__image" src="images/mobile/flat_white_img_mobile@1x.png" srcset="images/mobile/flat_white_img_mobile@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
              </picture>
              <div class="slider__info">
                <span class="slider__badge badge">Новинка!</span>
                <h3 class="slider__heading">Декаф Флэт Уайт</h3>
                <p class="slider__description">Свежесваренный кофе без кофеина из Эфиопии <br> с натуральным фермерским
                  молоком — то, что нужно для расслабления после тяжёлого рабочего дня</p>
                <div class="slider__wrapper">
                  <del class="slider__old-price">295₽</del>
                  <span class="slider__price">225₽</span>
                  <button class="slider__button button" type="button">Заказать</button>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide slider__item slider__item--lavender">
            <div class="slider__container container">
              <picture>
                <source type="image/webp" media="(min-width: 1440px)"
                        srcset="images/desktop/lavender_img_desktop@1x.webp 1x, images/desktop/lavender_img_desktop@2x.webp 2x">
                <source type="image/webp" media="(min-width: 768px)"
                        srcset="images/tablet/lavender_img_tablet@1x.webp 1x, images/tablet/lavender_img_tablet@2x.webp 2x">
                <source type="image/webp" srcset="images/mobile/lavender_img_mobile@1x.webp 1x, images/mobile/lavender_img_mobile@2x.webp 2x">
                <source media="(min-width: 1440px)"
                        srcset="images/desktop/lavender_img_desktop@1x.png 1x, images/desktop/lavender_img_desktop@2x.png 2x">
                <source media="(min-width: 768px)"
                        srcset="images/tablet/lavender_img_tablet@1x.png 1x, images/tablet/lavender_img_tablet@2x.png 2x">
                <img class="slider__image" src="images/mobile/lavender_img_mobile@1x.png" srcset="images/mobile/lavender_img_mobile@2x.png 2x" loading="lazy" alt="Лавандовый Латте">
              </picture>
              <div class="slider__info">
                <span class="slider__badge badge">Новинка!</span>
                <h3 class="slider__heading">Лавандовый Латте</h3>
                <p class="slider__description">Невероятное сочетание перуанской высокогорной арабики с молоком ламы и лавандовым сиропом унесёт вас прямо на вершину Радужных гор</p>
                <div class="slider__wrapper">
                  <del class="slider__old-price">285₽</del>
                  <span class="slider__price">265₽</span>
                  <button class="slider__button button" type="button">Заказать</button>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide slider__item slider__item--espresso">
            <div class="slider__container container">
              <picture>
                <source type="image/webp" media="(min-width: 1440px)"
                        srcset="images/desktop/espresso_img_desktop@1x.webp 1x, images/desktop/espresso_img_desktop@2x.webp 2x">
                <source type="image/webp" media="(min-width: 768px)"
                        srcset="images/tablet/espresso_img_tablet@1x.webp 1x, images/tablet/espresso_img_tablet@2x.webp 2x">
                <source type="image/webp" srcset="images/mobile/espresso_img_mobile@1x.webp 1x, images/mobile/espresso_img_mobile@2x.webp 2x">
                <source media="(min-width: 1440px)"
                        srcset="images/desktop/espresso_img_desktop@1x.png 1x, images/desktop/espresso_img_desktop@2x.png 2x">
                <source media="(min-width: 768px)"
                        srcset="images/tablet/espresso_img_tablet@1x.png 1x, images/tablet/espresso_img_tablet@2x.png 2x">
                <img class="slider__image" src="images/mobile/espresso_img_mobile@1x.png" srcset="images/mobile/espresso_img_mobile@2x.png 2x" loading="lazy" alt="Тройной Эспрессо">
              </picture>
              <div class="slider__info">
                <span class="slider__badge badge">Новинка!</span>
                <h3 class="slider__heading">Тройной Эспрессо</h3>
                <p class="slider__description">Мощнее укола адреналина, чернее самой тёмной ночи, этот тройной эспрессо из Колумбии покажет вам, что такое настоящая бодрость</p>
                <div class="slider__wrapper">
                  <del class="slider__old-price">395₽</del>
                  <span class="slider__price">375₽</span>
                  <button class="slider__button button" type="button">Заказать</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <button class="swiper-button-prev slider__arrow slider__arrow--prev" type="button">
          <span class="visually-hidden">Предыдущий слайд.</span>
        </button>
        <button class="swiper-button-next slider__arrow slider__arrow--next" type="button">
          <span class="visually-hidden">Следующий слайд.</span>
        </button>
        <div class="swiper-pagination slider__toggles toggles"></div>
      </section>

      <!-- Features -->
      <section class="features">
        <div class="container">
          <span class="features__badge badge">Преимущества</span>
          <h2 class="features__heading heading">Главные причины выбрать Drink2Go</h2>
          <ul class="features__list">
            <li class="features__item features__item--speed">
              <h3>Скорость</h3>
              <p>Готовый напиток всегда под рукой — просто открой банку</p>
            </li>
            <li class="features__item features__item--comfort">
              <h3>Удобство</h3>
              <p>Легко помещается и в карман, <br> и в маленькую сумочку</p>
            </li>
            <li class="features__item features__item--energy">
              <h3>Бодрость</h3>
              <p>Сбалансированная доза кофеина даст мощный заряд энергии</p>
            </li>
            <li class="features__item features__item--eco">
              <h3>Экологичность</h3>
              <p>Вся упаковка сделана <br> из перерабатываемых материалов</p>
            </li>
          </ul>
        </div>
      </section>

      <!-- Catalog -->
      <section class="catalog">
        <div class="container">
          <span class="catalog__badge badge">Каталог</span>
          <h2 class="catalog__heading heading">Каталог кофейных напитков</h2>
          <div class="catalog__wrapper">

            <!-- Filters -->
            <div class="catalog__filter filter">
              <form class="filter__form" id="catalog-form" action="https://echo.htmlacademy.ru" method="get">
                <fieldset class="filter__price">
                  <legend>Цена</legend>
                  <div class="filter__price-range">
                    <span class="visually-hidden">Шкала диапазона цен с двумя ползунками</span>
                    <div id="filter-slider"></div>
                  </div>
                  <div class="filter__price-input">
                    <label class="visually-hidden" for="price-lower">Ввести минимальную цену.</label>
                    <input class="filter__input filter__input--min" type="number" id="price-lower" name="price_lower" min="0" placeholder="0">
                    <span class="filter__separator"></span>
                    <label class="visually-hidden" for="price-upper">Ввести максимальную цену.</label>
                    <input class="filter__input filter__input--max" type="number" id="price-upper" name="price_upper" min="0" value="900" placeholder="0">
                  </div>
                </fieldset>
                <fieldset class="filter__milk">
                  <legend>Наличие молока</legend>
                  <ul class="filter__milk-list milk-list">
                    <li class="milk-list__item">
                      <input class="visually-hidden" id="any" type="radio" name="milk" value="any" checked>
                      <label for="any">Неважно</label>
                    </li>
                    <li class="milk-list__item">
                      <input class="visually-hidden" id="animal" type="radio" name="milk" value="animal">
                      <label for="animal">Только животное</label>
                    </li>
                    <li class="milk-list__item">
                      <input class="visually-hidden" id="vegetable" type="radio" name="milk" value="vegetable">
                      <label for="vegetable">Только растительное</label>
                    </li>
                    <li class="milk-list__item">
                      <input class="visually-hidden" id="without-milk" type="radio" name="milk" value="without-milk" disabled>
                      <label for="without-milk">Без молока</label>
                    </li>
                  </ul>
                </fieldset>
                <fieldset class="filter__country">
                  <legend>Страна произрастания</legend>
                  <ul class="filter__country-list country-list">
                    <li class="country-list__item">
                      <input class="visually-hidden" id="brazil" type="checkbox" name="Brazil" checked>
                      <label for="brazil">Бразилия</label>
                    </li>
                    <li class="country-list__item">
                      <input class="visually-hidden" id="ethiopia" type="checkbox" name="Ethiopia">
                      <label for="ethiopia">Эфиопия</label>
                    </li>
                    <li class="country-list__item">
                      <input class="visually-hidden" id="colombia" type="checkbox" name="Colombia">
                      <label for="colombia">Колумбия</label>
                    </li>
                    <li class="country-list__item">
                      <input class="visually-hidden" id="costarica" type="checkbox" name="Costa-Rica">
                      <label for="costarica">Коста-Рика</label>
                    </li>
                    <li class="country-list__item">
                      <input class="visually-hidden" id="peru" type="checkbox" name="Peru" disabled>
                      <label for="peru">Перу</label>
                    </li>
                  </ul>
                </fieldset>
                <div class="filter__buttons">
                  <button class="filter__button filter__button--submit button" type="submit">Применить</button>
                  <button class="filter__button filter__button--reset button" type="reset">Сбросить</button>
                </div>
              </form>
            </div>

            <!-- Product list -->
            <div class="catalog__products products">
              <div class="catalog__sort sort">
                <label for="sort-select">Сортировка:</label>
                  <select class="sort__select" id="sort-select" name="sort" form="catalog-form">
                    <option value="default">по умолчанию</option>
                    <option value="expensive">сначала дорогие</option>
                    <option value="cheap">сначала дешёвые</option>
                    <option value="rating">высокий рейтинг</option>
                  </select>
                <div class="sort__icon"></div>
              </div>
              <ul class="products__list">
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-1@1x.webp 1x, images/coffee-can-1@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-1@1x.png" srcset="images/coffee-can-1@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-2@1x.webp 1x, images/coffee-can-2@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-2@1x.png" srcset="images/coffee-can-2@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-3@1x.webp 1x, images/coffee-can-3@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-3@1x.png" srcset="images/coffee-can-3@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-4@1x.webp 1x, images/coffee-can-4@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-4@1x.png" srcset="images/coffee-can-4@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-5@1x.webp 1x, images/coffee-can-5@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-5@1x.png" srcset="images/coffee-can-5@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
                <li class="products__item product" tabindex="0">
                  <a class="product__link" href="#">
                    <picture>
                      <source type="image/webp" srcset="images/coffee-can-6@1x.webp 1x, images/coffee-can-6@2x.webp 2x">
                      <img class="product__image" src="images/coffee-can-6@1x.png" srcset="images/coffee-can-6@2x.png 2x" loading="lazy" alt="Декаф Флэт Уайт">
                    </picture>
                  </a>
                  <a class="product__link" href="#">
                    <h3 class="product__heading">Декаф Флэт Уайт</h3>
                  </a>
                  <p class="product__info">Кофе без кофеина из Эфиопии <br> с натуральным фермерским молоком</p>
                  <div class="product__buy">
                    <span class="product__price">225₽</span>
                    <a class="product__button button" href="#">В корзину</a>
                  </div>
                </li>
              </ul>
              <ul class="catalog__pagination pagination">
                <li class="pagination__item">
                  <a class="pagination__link pagination__link--prev" href="#" aria-label="Предыдущая страница.">
                    <svg width="6" height="10" aria-hidden="true" focusable="false" role="img">
                      <use href="icons/stack.svg#arrow-left-small"></use>
                    </svg>
                    <span>Назад</span>
                  </a>
                </li>
                <li class="pagination__item">
                  <ul class="pagination__numbers-page numbers-page">
                    <li class="numbers-page__item">
                      <a class="numbers-page__link" href="#">1</a>
                    </li>
                    <li class="numbers-page__item">
                      <a class="numbers-page__link numbers-page__link--current">2</a>
                    </li>
                    <li class="numbers-page__item">
                      <a class="numbers-page__link" href="#">3</a>
                    </li>
                  </ul>
                </li>
                <li class="pagination__item">
                  <a class="pagination__link pagination__link--next" href="#" aria-label="Следующая страница.">
                    <svg width="6" height="10" aria-hidden="true" focusable="false" role="img">
                      <use href="icons/stack.svg#arrow-right-small"></use>
                    </svg>
                    <span>Вперёд</span>
                  </a>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </section>

      <!-- Map -->
      <section class="map">
        <h2 class="visually-hidden">Карта с адресом магазина</h2>
        <div class="map__mask"></div>
        <div class="map__wrapper" id="map"></div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer__container container">
        <div class="footer__top">
          <div class="footer__logo">
            <picture>
              <source type="image/svg+xml" media="(min-width: 768px)" srcset="images/logo-desktop.svg">
              <img class="footer__image" src="images/logo-tablet.svg" alt="Логотип интернет-магазина кофейных напитков">
            </picture>
            <span>Интернет-магазин кофейных напитков</span>
          </div>
          <ul class="footer__social social">
            <li class="social__item">
              <a class="social__link" href="https://vk.com/htmlacademy">
                <svg width="20" height="20" aria-hidden="true" focusable="false" role="img">
                  <use href="icons/stack.svg#icon-vk"></use>
                </svg>
                <span class="visually-hidden">Вконтакте</span>
              </a>
            </li>
            <li class="social__item">
              <a class="social__link social__link--margin" href="https://ru.pinterest.com/keks_is_html_academy/">
                <svg width="22" height="22" aria-hidden="true" focusable="false" role="img">
                  <use href="icons/stack.svg#icon-pinterest"></use>
                </svg>
                <span class="visually-hidden">Pinterest</span>
              </a>
            </li>
            <li class="social__item">
              <a class="social__link" href="https://ok.ru/htmlacademy">
                <svg width="20" height="20" aria-hidden="true" focusable="false" role="img">
                  <use href="icons/stack.svg#icon-ok"></use>
                </svg>
                <span class="visually-hidden">Одноклассники</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="footer__wrapper">
          <div class="footer__nav">
            <h3 class="footer__heading">Интернет-магазин</h3>
            <ul class="footer__list">
              <li class="footer__item">
                <a href="#">Каталог</a>
              </li>
              <li class="footer__item">
                <a href="#">Доставка</a>
              </li>
              <li class="footer__item">
                <a href="#">Способы оплаты</a>
              </li>
              <li class="footer__item">
                <a href="#">О нас</a>
              </li>
            </ul>
          </div>
          <div class="footer__nav">
            <h3  class="footer__heading">Медиа</h3>
            <ul class="footer__list">
              <li class="footer__item">
                <a href="#">Блог</a>
              </li>
              <li class="footer__item">
                <a href="#">Информация для СМИ</a>
              </li>
              <li class="footer__item">
                <a href="#">Правовая информация</a>
              </li>
            </ul>
          </div>
          <div class="footer__contacts">
            <h3 class="footer__heading">Контакты</h3>
            <address class="footer__address">
              Санкт-Петербург, набережная <br>реки Карповки, дом 5
            </address>
            <a class="footer__phone" href="tel:+79999999999">+7 (999) 999-99-99</a>
          </div>
        </div>
        <div class="footer__developer">
          <span>Разработано в</span>
          <a class="footer__developer-link" href="https://htmlacademy.ru/intensive/adaptive">
            <span>HTML Academy</span>
            <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path
              d="m11.22 5.75-5.25-3.25-5.19 3.25v-4.34l5.22-.58 5.22.58v4.34Zm0 .58-2.1 1.3-3.14-1.97v.57l2.68 1.68-.46.29-2.22-1.4v.58l1.75 1.1-.41.29h-.01l-1.33-.82v.58l.87.53-.89.56-5.16-3.23 5.17-3.28 5.24 3.22Zm0 5.44-5.22 3.27-5.22-3.27v-4.74l5.2 3.25v.59l-3.56-2.23v.57l3.58 2.26v.6l-3.57-2.23v.57l3.57 2.26 3.6-2.27v-2.44l1.62-1.01v4.82Zm-5.22-11.77-6 .66v11.58l6 3.76 6-3.76v-11.58l-6-.66Z" fill="currentColor"/></svg>
          </a>
        </div>
      </div>
    </footer>

    <script src="vendor/swiper/swiper-bundle.min.js"></script>
    <script src="vendor/leaflet/leaflet.js"></script>
    <script src="vendor/nouislider/nouislider.min.js"></script>
    <script src="scripts/index.js" defer></script>
  </body>
</html>