Internet_Programming_PIbd-2.../catalog-mobile.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Список категорий</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="d-flex flex-column min-vh-100">
  <header class="w-100 position-sticky top-0">
      <nav class="navbar navbar-expand-lg navbar-light">
          <div class="container-md">
              <a class="navbar-brand me-lg-5 d-flex align-items-center" href="/" id="logo">
                  <img src="icons/logo.png" alt="logo" class="me-2">
                  Читай-комната
              </a>
              <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="navbar-collapse collapse" id="navbarNav">
                  <ul class="navbar-nav align-items-lg-center justify-content-lg-start w-100"> 
                      <li class="header-link nav-item ms-lg-2 me-lg-3">
                          <a class="nav-link" href="./index.html">Главная</a>
                      </li>
                      <li class="header-link nav-item me-lg-3">
                          <a class="nav-link active" aria-current="page" href="./catalog.html">Каталог</a>
                      </li>
                      <li class="header-link nav-item me-lg-5" id="header-contacts">
                          <a class="nav-link" href="./contacts.html">Контакты</a>
                      </li>
                      <div class="flex-grow-1 me-lg-4" id="header-search">
                          <input class="form-control h-25" type="search" placeholder="Я ищу..." aria-label="Search" id="search-bar">
                      </div>
                      <li class="nav-item">
                          <a class="nav-link" href="./login.html">
                              Вход
                          </a>
                      </li>
                      <p class="d-none d-lg-block">
                          / 
                      </p>
                      <li class="nav-item me-lg-3">
                          <a class="nav-link" href="./registration.html">
                              Регистрация
                          </a>
                      </li>
                      <li class="nav-item">
                          <a class="nav-link pe-lg-0" href="./cart.html">
                              <img src="icons/card.png" alt="card" width="30" height="35" id="cart-icon">
                          </a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>
  </header>

  <main class="container-md d-flex flex-column justify-content-center flex-grow-1 my-0">
      <div class="row">
        <div class="col-12 ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories-mobile">
            <div class="block d-flex flex-column justify-content-center p-2 h-100">
                <p class="mb-4" id="catalog-categories-mobile-title">
                    Категории
                </p>
                <ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-mobile-list">
                    <li> <a href="/">Книги для подростков</a> </li>
                    <li><a href="/">Комиксы</a></li>
                    <li><a href="/">Манга</a></li>
                    <li><a href="/">Эзотерика</a></li>
                    <li><a href="/">Медицина и здоровье</a></li>
                    <li><a href="/">Кулинария</a></li>
                    <li><a href="/">Детские книги</a></li>
                    <li class="active-category-mobile"><a href="./catalog.html">Художественная литература</a></li>
                    <li><a href="/">Дом и хобби</a></li>
                    <li><a href="/">Наука. Техника. IT</a></li>
                    <li><a href="/">Религия и философия</a></li>
                    <li><a href="/">Психология</a></li>
                    <li><a href="/">Искусство</a></li>
                    <li><a href="/">История. Общество</a></li>
                    <li><a href="/">Право</a></li>
                    <li><a href="/">Книги на английском</a></li>
                    <li><a href="/">Новый год</a></li>
                    <li><a href="/">Публицистика</a></li>
                    <li><a href="/">Эксклюзивные товары</a></li>
                    <li><a href="/">Педагогика и воспитание</a></li>
                    <li><a href="/">Литературные премии</a></li>
                    <li><a href="/">Фэнтези</a></li>
                    <li><a href="/">Ужасы. Мистика</a></li>
                    <li><a href="/">Любовный роман</a></li>
                    <li><a href="/">Юмор и сатира</a></li>
                    <li><a href="/">Проза</a></li>
                    <li><a href="/">Боевики и триллеры</a></li>
                    <li><a href="/">Эпос и фольклор</a></li>
                    <li><a href="/">Научная фантастика</a></li>
                    <li><a href="/">Детективы</a></li>
                </ul>
            </div>
      </div>
  </main>

  <footer class="footer flex-shrink-0">
    <div class="container-md" id="footer-container">
        <div class="row d-flex align-items-center gy-3 gy-lg-0 gx-0" id="footer-row">
            <div class="col-md-6 col-lg-4">
                <div class="block d-flex justify-content-center justify-content-md-start" id="footer-copyright">
                    © И. А. Родионов, 2023.
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="block d-flex align-items-center justify-content-center justify-content-md-end">
                    <img src="icons/telephone-call.png" class="me-2" alt="telephone-call" width="32" height="32">
                    <p id="footer-phone-number-text">
                        +7 927 818-61-60
                    </p>
                </div>
            </div>
            <div class="col-md-12 col-lg-5 mb-3 mb-lg-0">
                <div class="block d-flex align-items-center justify-content-center justify-content-lg-end">
                    <p class="me-3" id="footer-social-media-text">
                        Мы в соцсетях:
                    </p>
                    <a class="me-3" href="/">
                        <img src="icons/vk.png" alt="vk" width="32" height="32">
                    </a>
                    <a class="me-3" href="/">
                        <img src="icons/youtube.png" alt="youtube" width="32" height="32">
                    </a>
                    <a class="me-3" href="/">
                        <img src="icons/telegram.png" alt="telegram" width="32" height="32">
                    </a>
                    <a href="/">
                        <img src="icons/odnoklassniki.png" alt="odnoklassniki" width="32" height="32">
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>