ILRodionov/Internet_Programming_PIbd-21_Rodionov_I_A
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
lab2
Internet_Programming_PIbd-2.../catalog.html

430 lines
25 KiB
HTML
Raw Permalink Normal View History

lab2_code
2023-11-13 19:15:21 +04:00
<!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.bundle.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="stylesheet" href="./style.css">
<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">
</head>
<body class="d-flex flex-column min-vh-100 h-100">
<header class="w-100 position-sticky top-0 z-3">
<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 gy-3 flex-grow-1">
<div class="col-2 d-none d-md-block ps-0 mt-0 bg-white border border-3 border-top-0 border-bottom-0" id="catalog-categories">
<div class="block d-flex flex-column justify-content-center p-2 h-100">
<p class="mb-4" id="catalog-categories-title">
Категории
</p>
<ul class="list-unstyled ps-0 mb-4 d-flex flex-column gap-3 flex-grow-1" id="catalog-categories-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"><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>
<div class="col-12 col-md-10 d-flex flex-column bg-white mt-0 pt-2 pt-lg-5">
<div class="row gy-3">
<div class="col-12 mb-3 mb-lg-5 px-0 d-md-none">
<div class="block d-flex lh-1" id="catalog-section-navigation">
<a href="./catalog-mobile.html" class="me-2 text-decoration-none">
Каталог
</a>
<span class="text-secondary me-2">></span>
<a href="./catalog.html" class="text-decoration-none">
Художественная литература
</a>
</div>
</div>
<div class="col-12 mb-3 mb-lg-5 px-0">
<div class="block d-flex justify-content-center lh-1" id="catalog-title">
<div>
Художественная литература
</div>
</div>
</div>
<div class="col-12 mb-3 mb-lg-5 gx-0">
<div class="block">
<select class="form-select border-black" id="catalog-select">
<option selected>Сначала популярные</option>
<option value="1">Сначала дешевые</option>
<option value="2">Сначала дорогие</option>
<option value="3">Сначала со скидкой</option>
<option value="4">Сначала новые</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/1.png" class="catalog-book-cover" alt="book-cover-catalog-1" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
593 ₽
</p>
<p class="catalog-book-title mb-3">
Граф Аверин. Колдун Российской империи
</p>
<p class="catalog-author mb-3">
Виктор Дашкевич
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/2.png" class="catalog-book-cover" alt="book-cover-catalog-2" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
977 ₽
</p>
<p class="catalog-book-title mb-3">
Колесо времени. Книга 11. Нож сновидений
</p>
<p class="catalog-author mb-3">
Роберт Джордан
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="./product_card.html">
<img src="book_covers/catalog/3.png" class="catalog-book-cover" alt="book-cover-catalog-3" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
775 ₽
</p>
<p class="catalog-book-title mb-3">
Форсайт
</p>
<p class="catalog-author mb-3">
Сергей Лукьяненко
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/4.png" class="catalog-book-cover" alt="book-cover-catalog-4" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
662 ₽
</p>
<p class="catalog-book-title mb-3">
Шолох. Долина Колокольчиков
</p>
<p class="catalog-author mb-3">
Антонина Крейн
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/5.png" class="catalog-book-cover" alt="book-cover-catalog-5" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
594 ₽
</p>
<p class="catalog-book-title mb-3">
Скрижаль Исет. Грешные души
</p>
<p class="catalog-author mb-3">
Мишина Влада
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/6.png" class="catalog-book-cover" alt="book-cover-catalog-6" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
2 112 ₽
</p>
<p class="catalog-book-title mb-3">
Мир игры Pathologic 2. Хроники второй эпидемии
</p>
<p class="catalog-author mb-3">
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/7.png" class="catalog-book-cover" alt="book-cover-catalog-7" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
1 250 ₽
</p>
<p class="catalog-book-title mb-3">
Благословение небожителей. Том 5
</p>
<p class="catalog-author mb-3">
Тунсю Мосян
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/8.png" class="catalog-book-cover" alt="book-cover-catalog-8" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
999 ₽
</p>
<p class="catalog-book-title mb-3">
Четвертое крыло
</p>
<p class="catalog-author mb-3">
Яррос Ребекка
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mt-4 d-none d-md-block d-lg-none">
<div class="block d-flex flex-column h-100">
<div class="d-flex justify-content-center mb-4">
<a href="/">
<img src="book_covers/catalog/9.png" class="catalog-book-cover" alt="book-cover-catalog-9" width="155" height="245">
</a>
</div>
<div class="catalog-book-description d-flex flex-column align-items-start">
<p class="catalog-price mb-3">
519 ₽
</p>
<p class="catalog-book-title mb-3">
Волкодав
</p>
<p class="catalog-author mb-3">
Семенова М.
</p>
</div>
<div class="flex-grow-1"></div>
<div class="catalog-btn-checkout-div d-flex justify-content-start">
<button class="catalog-bth-checkout btn rounded-5 px-3">
В корзину
</button>
</div>
</div>
</div>
<div class="col-12 mt-5 mt-sm-4 mt-lg-5 mb-2 gx-0">
<div class="block d-flex">
<div class="me-2" id="catalog-page-navigation">
<a href="./catalog.html" id="catalog-selected-page">1</a>
<a href="/">2</a>
<a href="/">3</a>
<a href="/">4</a>
<a href="/">5</a>
<a href="/">6</a>
<a href="/">...</a>
<a href="/">2310</a>
</div>
</div>
</div>
</div>
</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>
Reference in New Issue Copy Permalink