catalog.html

<!DOCTYPE html>
<html class="page" lang="ru">

<head>
  <meta charset="utf-8">
  <title>«Девайс» - Интернет-магазин гаджетов. Каталог товаров. Моноподы для селфи</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="images/icon/favicon-32×32.png">
</head>

<body class="page-body">

  <header class="page-header">
    <div class="container">
      <nav class="header-navigation">

        <a class="logo-link" href="index.html">
          <img class="logo-img" src="./images/icon/device-logo.svg" alt="Логотип интернет-магазина «Девайс»" width="145"
            height="36">
        </a>

        <div class="user-items">

          <form class="navigation-search-form" action="https://echo.htmlacademy.ru/" method="get">

            <label class="navigation-search-field" for="search-field">
              <span class="visually-hidden">Поиск по сайту</span>
              <input class="navigation-search-input" type="search" name="search" placeholder="Поиск по сайту"
                value="Текст поиска" id="search-field" required>
            </label>
            <button class="navigation-search-button" type="submit">
              Найти
            </button>
          </form>

          <div class="personal-account">

            <button class="personal-account-btn log-in" type="button">
              Войти
            </button>

            <button class="personal-account-btn personal-account-btn-active log-in" type="button">
              <span class="visually-hidden">
                Ваш личный кабинет
              </span>
              <span class="username">
                Коля Петухов
              </span>
            </button>

            <button class="personal-account-btn personal-account-btn-active log-out" type="button">
              Выйти
            </button>
          </div>

          <ul class="user-tools">

            <li class="user-tool-item">
              <button class="user-tools-btn compare" type="button">
                Сравнить
              </button>
            </li>

            <li class="user-tool-item">
              <button class="user-tools-btn cart" type="button">
                <span class="cart-counter">
                  2
                </span>
                Корзина
              </button>

              <div class="popover popover-cart">
                <ul class="cart-list">
                  <li class="cart-item">
                    <a class="cart-link" href="#">
                      <figure class="cart-figure">
                        <img class="cart-image" src="./images/catalog/card-1.jpg" alt="Любительская селфи-палка"
                          width="39" height="43">
                        <figcaption class="cart-title">Любительская <br> селфи-палка</figcaption>
                      </figure>
                    </a>
                    <button class="cart-remove-button" type="button">
                      <span class="visually-hidden">Удалить из корзины</span>
                    </button>
                  </li>
                  <li class="cart-item">
                    <a class="cart-link" href="#">
                      <figure class="cart-figure">
                        <img class="cart-image" src="./images/catalog/card-2.jpg" alt="Профессиональная
                    селфи-палка" width="39" height="43">
                        <figcaption class="cart-title">Профессиональная <br>селфи-палка</figcaption>
                      </figure>
                    </a>
                    <button class="cart-remove-button" type="button">
                      <span class="visually-hidden">Удалить из корзины</span>
                    </button>
                  </li>
                </ul>

                <div class="order-wrapper">
                  <span class="order-product">Товаров:
                    <span class="order-product-counter">2</span>
                  </span>
                  <span class="order-cost">Сумма:
                    <span class="order-cost-counter">2000</span>
                    ₽
                  </span>
                </div>
                <button class="cart-open-button" type="button">Открыть корзину</button>
              </div>
            </li>

          </ul>

        </div>


        <ul class="site-menu">

          <li class="site-menu-item catalog-item">
            <a class="site-menu-link" href="#">
              Каталог товаров
            </a>
            <div class="subcatalog">

              <ul class="subcatalog-list">

                <li class="subcatalog-item">
                  <a class="subcatalog-item-link" href="#">Виртуальная реальность</a>
                </li>

                <li class="subcatalog-item">
                  <a class="subcatalog-item-link">Моноподы для cелфи</a>
                </li>

                <li class="subcatalog-item">
                  <a class="subcatalog-item-link" href="#">
                    Экшн-камеры
                  </a>
                </li>
              </ul>

              <ul class="subcatalog-list">
                <li class="subcatalog-item">
                  <a class="subcatalog-item-link" href="#">
                    Фитнес-браслеты
                  </a>
                </li>
                <li class="subcatalog-item">
                  <a class="subcatalog-item-link" href="#">
                    Умные часы
                  </a>
                </li>
              </ul>

              <ul class="subcatalog-list">
                <li class="subcatalog-item">
                  <a class="subcatalog-item-link" href="#">
                    Квадрокоптеры
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li class="site-menu-item">
            <ul class="site-menu-sub">
              <li class="menu-sub-item">
                <a class="menu-sub-link" href="#">Доставка</a>
              </li>

              <li class="menu-sub-item">
                <a class="menu-sub-link" href="#">Гарантия</a>
              </li>

              <li class="menu-sub-item">
                <a class="menu-sub-link" href="#">Контакты</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="page-main main-inner">

    <header class="inner-header">

      <div class="container">
        <h1 class="section-title">Моноподы для селфи</h1>

        <ul class="breadcrumbs">
          <li class="breadcrubs-item">
            <a class="breadcrumbs-link" href="index.html">Главная</a>
          </li>
          <li class="breadcrubs-item">
            <a class="breadcrumbs-link" href="#">Каталог товаров</a>
          </li>
          <li class="breadcrubs-item">
            <a class="breadcrumbs-link" aria-current="page">Моноподы для селфи</a>
          </li>
        </ul>
      </div>
    </header>

    <section class="catalog-products">

      <div class="catalog-products-container container">
        <h2 class="visually-hidden">Каталог товаров с сортировкой и фильтрами</h2>

        <form class="catalog-filter-form" action="https://echo.htmlacademy.ru/courses" method="get">

          <h3 class="catalog-form-title">Фильтр:</h3>
          <fieldset class="catalog-filter-group cost-filter-group">
            <legend class="catalog-filter-title">Стоимость</legend>

            <div class=" range">

              <div class="range-scale">

                <div class="range-bar" style="left: 0; width: 119px;">

                  <button class="range-toggle toggle-min" type="button">
                    <span class="visually-hidden">Изменить минимальную стоимость</span>
                  </button>

                  <button class="range-toggle toggle-max" type="button">
                    <span class="visually-hidden">Изменить максимальную стоимость</span>
                  </button>

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

            <div class="range-fields">

              <label class="range-field range-field-min">
                <span class="range-field-title">от</span>
                <input class="range-input" type="number" name="price-from" value="0" min="0" max="8000" step="100"
                  placeholder="0">
              </label>

              <label class="range-field range-field-max">
                <span class="range-field-title">до</span>
                <input class="range-input" type="number" name="price-from" value="5000" min="0" max="8000" step="100"
                  placeholder="1">
              </label>
            </div>
          </fieldset>

          <fieldset class="catalog-filter-group">

            <legend class="catalog-filter-title">Цвет</legend>

            <ul class="catalog-filter-list checkbox">

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="checkbox" name="black" checked>
                  <span class="control-mark"></span>
                  <span class="control-label">Черный</span>
                </label>
              </li>

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="checkbox" name="white" checked>
                  <span class="control-mark"></span>
                  <span class="control-label">Белый</span>
                </label>
              </li>

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="checkbox" name="blue">
                  <span class="control-mark"></span>
                  <span class="control-label">Синий</span>
                </label>
              </li>

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="checkbox" name="red">
                  <span class="control-mark"></span>
                  <span class="control-label">Красный</span>
                </label>
              </li>

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="checkbox" name="pink">
                  <span class="control-mark"></span>
                  <span class="control-label">Розовый</span>
                </label>
              </li>
            </ul>
          </fieldset>

          <fieldset class="catalog-filter-group">

            <legend class="catalog-filter-title">Bluetooth</legend>

            <ul class="catalog-filter-list radio">

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="radio" name="ability-of-bluetooth" value="yes"
                    checked>
                  <span class="control-mark"></span>
                  <span class="control-label">Есть</span>
                </label>
              </li>

              <li class="catalog-filter-item">
                <label class="control">
                  <input class="visually-hidden control-input" type="radio" name="ability-of-bluetooth" value="no">
                  <span class="control-mark"></span>
                  <span class="control-label">Нет</span>
                </label>
              </li>
            </ul>
          </fieldset>


          <button class="button catalog-filter-button" type="submit" value="Показать">Показать</button>

        </form>

        <div class="right-column-wrapper">

          <form class="sorting-catalog-form" action="get">

            <label class="catalog-form-title" for="sorting">Сортировка:</label>

            <select class="select sorting-card-select" name="sorting-card" id="sorting">
              <option value="popular">Популярные</option>
              <option value="cheap">Дешёвые</option>
              <option value="expensive">Дорогие</option>
            </select>

            <ul class="sort-button-list">
              <li class="sort-button-item">
                <a class="sort-button ascending-order" href="#">
                  <span class="visually-hidden">Отсортировать по возрастанию</span>
                </a>
              </li>
              <li class="sort-button-item">
                <a class="sort-button descending-order" href="#">
                  <span class="visually-hidden">Отсортировать по убыванию</span>
                </a>
              </li>
            </ul>
          </form>

          <div class="sorted-card-wrapper">

            <ul class="cards-list">

              <li class="card-item">

                <a class="card-item-link" href="#">
                  <img class="card-image" src="./images/catalog/card-1.jpg" alt=" Фотография Любительской
            селфи-палки" width="360" height="380">
                  <span class="card-more">Подробнее</span>
                  <span class="new-card visually-hidden">NEW</span>

                  <div class="card-info">
                    <h3 class="card-title">Любительская <br>
                      селфи-палка</h3>
                    <span class="card-cost">500 ₽</span>
                  </div>
                </a>
              </li>

              <li class="card-item">

                <a class="card-item-link" href="#">
                  <img class="card-image" src="./images/catalog/card-2.jpg"
                    alt=" Фотография Профессиональной селфи-палка" width="360" height="380">
                  <span class="card-more">Подробнее</span>
                  <span class="new-card visually-hidden">NEW</span>

                  <div class="card-info">
                    <h3 class="card-title">Профессиональная <br> селфи-палка </h3>
                    <span class="card-cost">1 500 ₽</span>
                  </div>
                </a>
              </li>

              <li class="card-item">

                <a class="card-item-link" href="#">
                  <img class="card-image" src="./images/catalog/card-3.jpg" alt=" Фотография Непотопляемой
            селфи-палка" width="360" height="380">
                  <span class="card-more">Подробнее</span>
                  <span class="new-card visually-hidden">NEW</span>

                  <div class="card-info">
                    <h3 class="card-title">Непотопляемая <br>
                      селфи-палка</h3>
                    <span class="card-cost">2 500 ₽</span>
                  </div>
                </a>
              </li>

              <li class="card-item">
                <a class="card-item-link" href="#">
                  <img class="card-image" src="./images/catalog/card-4.jpg"
                    alt=" Фотография Селфи-палки «Следуй за мной»" width="360" height="380">
                  <span class="card-more">Подробнее</span>
                  <span class="new-card visually-hidden">NEW</span>

                  <div class="card-info">
                    <h3 class="card-title">Селфи-палка «Следуй <br> за мной»</h3>
                    <span class="card-cost">1 500 ₽</span>
                  </div>
                </a>
              </li>
            </ul>

            <div class="pagination">

              <a class="pagination-button-more btn" href="#">Загрузить ещё</a>

              <div class="pagination-nav">

                <a class="pagination-button pagination-prev" href="#">Назад</a>

                <ul class="pagination-list">

                  <li class="pagination-item">
                    <a class="pagination-link" href="#">1</a>
                  </li>

                  <li class="pagination-item">
                    <a class="pagination-link" href="#">2</a>
                  </li>
                  <li class="pagination-item">
                    <a class="pagination-link" href="#">3</a>
                  </li>
                  <li class="pagination-item">
                    <a class="pagination-link" href="#">...</a>
                  </li>
                  <li class="pagination-item">
                    <a class="pagination-link" href="#">15</a>
                  </li>
                </ul>

                <a class="pagination-button pagination-next" href="#">Вперёд</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="page-footer">

    <div class="page-footer-container container">

      <div class="footer-column-group device">
        <a class="logo-link" href="index.html">
          <img class="logo-img" src="./images/icon/footer-device-logo.svg" alt="Логотип интернет-магазина  «Девайс»"
            width="145" height="36">
        </a>

        <address class="footer-address">
          <a class="footer-address-link" href="#">Санкт-Петербург, набережная <br> реки Карповки, 5, литера П.
          </a>
        </address>
      </div>

      <div class="footer-column-group menu">

        <ul class="footer-menu-list">
          <li class="footer-menu-item">
            <a class="footer-menu-link" href="#">Доставка</a>
          </li>
          <li class="footer-menu-item">
            <a class="footer-menu-link" href="#">Гарантия</a>
          </li>
          <li class="footer-menu-item">
            <a class="footer-menu-link" href="#">Контакты</a>
          </li>
        </ul>

        <ul class="social">
          <li class="social-item">
            <a class="social-link facebook" href="https://www.facebook.com/htmlacademy">
              <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" width="9" height="19" fill="none"
                viewBox="0 0 9 19" aria-hidden="true">
                <path
                  d="M6.5 3.36H9v-3H5.6C2.8.36 2 2.06 2 4.56v1.8H0v3h2v9h3v-9h3.3l.6-3H5v-1.5c0-.8.3-1.5 1.5-1.5Z" />
              </svg>
              <span class="visually-hidden">Facebook</span>
            </a>
          </li>
          <li class="social-item">
            <a class="social-link instagram" href="https://www.instagram.com/htmlacademy/">
              <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none"
                viewBox="0 0 16 17" aria-hidden="true">
                <path d="M8 10.36a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
                <path
                  d="M14.7 1.66c-.9-.9-2-1.3-3.4-1.3H4.7C1.9.36 0 2.26 0 5.06v6.6c0 1.4.4 2.6 1.4 3.4.9.9 2 1.3 3.3 1.3h6.6c1.4 0 2.6-.4 3.4-1.3.8-.9 1.3-2 1.3-3.4v-6.6c0-1.4-.4-2.6-1.3-3.4ZM8 12.46c-2.2 0-4.1-1.8-4.1-4.1s1.9-4.1 4.1-4.1c2.2 0 4.1 1.8 4.1 4.1s-1.9 4.1-4.1 4.1Zm4.6-7.4c-.7 0-1.3-.5-1.3-1.3s.5-1.3 1.3-1.3c.7 0 1.3.6 1.3 1.3 0 .7-.6 1.3-1.3 1.3Z" />
              </svg>
              <span class="visually-hidden">Instagram</span>
            </a>
          </li>
          <li class="social-item">
            <a class="social-link twitter" href="https://twitter.com/htmlacademy_ru">
              <svg class="social-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="15" fill="none"
                viewBox="0 0 16 15" aria-hidden="true">
                <path
                  d="M10.35.51c1.6-.5 2.77.3 3.41 1.1.53-.2 1.17-.4 1.81-.6a2 2 0 0 1-.85 1.6c.75.2 1.28-.4 1.28-.4-.1.9-.96 1.69-1.5 1.89-.2 6.27-2.98 10.35-9.49 10.26H4.6c-.32 0-3.95-.4-4.59-1.8 2.13.2 3.63-.4 4.37-1.1-.85-.3-2.56-.4-2.77-2.78.32.2.53.3 1.17.2C1.6 8.08.32 7.38.43 5.39c.32.3.96.5 1.28.4-.64-.2-1.92-3.09-.86-4.58 1.71 1.7 3.52 3.38 6.72 3.48C7.8 2.6 8.64 1.21 10.35.51Z" />
              </svg>
              <span class="visually-hidden">Twitter</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="footer-column-group copyright">

        <address class="footer-address">
          <a class="footer-address-telephone" href="tel:+78128121212">Тел.: +7 (812) 812-12-12
          </a>
        </address>

        <a class="copyright-link" href="https://htmlacademy.ru/">
          <span class="visually-hidden">Разработано: HTML-Academy</span>
          <svg class="copyright-icon" xmlns="http://www.w3.org/2000/svg" width="115" height="34" fill="none"
            viewBox="0 0 115 34" aria-hidden="true">
            <path
              d="M0 13.26v2.6h2.5v-2.6H0ZM11.6 4.86c-1.6 0-2.8.7-3.6 1.7h-.1V.36h-2v15.5h2v-5.3c0-2.1 1.3-3.6 3.3-3.6 1.8 0 2.9 1.4 2.9 3.2v5.7h2v-6.1c.1-3-1.8-4.9-4.5-4.9ZM26.6 5.16h-4.8v-3.7h-2v3.8h-1.9v2h1.9v6c0 1.7 1 2.7 2.7 2.7h4.1v-2h-3.7c-.7 0-1.1-.4-1.1-1.1v-5.7h4.8v-2ZM41.1 4.96c-1.6 0-2.9.8-3.5 2.1h-.1c-.6-1.2-1.8-2.1-3.4-2.1-1.4 0-2.5.8-3.1 1.8h-.1v-1.6H29v10.6h2v-5.4c0-2 1-3.5 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.5-1.4-4.3-3.9-4.3ZM47.8 13.06c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V.36h-2v12.7ZM28.9 20.06c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2v-10.6h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.4 3.6-3.6 3.6ZM44.2 22.36c-.5-2.4-2.6-4.1-5.4-4.1a5.4 5.4 0 0 0-5.6 5.6c0 3.1 2.2 5.6 5.6 5.6 2.8 0 4.9-1.8 5.4-4.2h-2.1a3.4 3.4 0 0 1-3.3 2.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6c1.6 0 2.8 1 3.3 2.2h2.1v-.2ZM55.1 20.06c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2v-10.6h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.5 3.6-3.6 3.6ZM68.7 20.16c-.9-1.1-2.2-1.9-3.9-1.9-3.1 0-5.4 2.3-5.4 5.6s2.2 5.6 5.4 5.6c1.7 0 3-.8 3.8-1.8h.1v1.5h2v-15.4h-2v6.4Zm-3.6 7.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.5 3.6-3.6 3.6ZM78.3 18.26c-3.3 0-5.5 2.5-5.5 5.6 0 3 2.1 5.6 5.5 5.6 2.5 0 4.5-1.3 5.2-3.6h-2.1c-.5 1-1.6 1.6-3 1.6-1.9 0-3.3-1.3-3.4-2.9h8.8c.2-3.6-2-6.3-5.5-6.3Zm0 1.9c1.7 0 3 1 3.3 2.6h-6.5c.3-1.5 1.5-2.6 3.2-2.6ZM98.2 18.26c-1.6 0-2.9.8-3.6 2h-.1c-.6-1.2-1.8-2-3.4-2-1.4 0-2.5.7-3.1 1.8v-1.5h-1.9v10.6h2v-5.4c0-2 1-3.4 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.6-1.4-4.4-3.9-4.4ZM109.4 27.36l-3.6-8.9h-2.2l4.8 11.6c-.3.9-.7 1.2-1.7 1.2h-2.5v2h2.5c1.8 0 2.8-.8 3.5-2.6l4.7-12.2h-2.1l-3.4 8.9Z" />
          </svg>
        </a>
      </div>
    </div>
  </footer>

</body>

</html>