lab2_code
This commit is contained in:
501
index.html
Normal file
501
index.html
Normal file
@@ -0,0 +1,501 @@
|
||||
<!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="./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 active" aria-current="page" href="./index.html">Главная</a>
|
||||
</li>
|
||||
<li class="header-link nav-item me-lg-3">
|
||||
<a class="nav-link" 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">
|
||||
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<img src="icons/fire.png" class="me-2" alt="fire" width="25" height="30" id="fire-icon">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Горячие новинки
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/1.png" class="main-page-book-cover" alt="book-cover-novelties-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
932 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Вавилон. Сокрытая история
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Ребекка Ф. Куанг
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/novelties/2.png" class="main-page-book-cover" alt="book-cover-novelties-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
775 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Форсайт
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Сергей Лукьяненко
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/3.png" class="main-page-book-cover" alt="book-cover-novelties-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
642 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Во главе раздора
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Лия Арден
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/4.png" class="main-page-book-cover" alt="book-cover-novelties-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
949 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Путешествие в Элевсин
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Виктор Пелевин
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/5.png" class="main-page-book-cover" alt="book-cover-novelties-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
699 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Восстание клана Чан
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Тянься Гуйюань
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/novelties/6.png" class="main-page-book-cover" alt="book-cover-novelties-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
551 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Дебютная постановка. Том 2
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Александра Маринина
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white pb-1 mb-3 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Книги по акциям
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/1.png" class="main-page-book-cover" alt="book-cover-promotions-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
576 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Шестерка воронов
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Ли Бардуго
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/promotions/2.png" class="main-page-book-cover" alt="book-cover-promotions-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
200 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Портрет Дориана Грея
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Оскар Уальд
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/3.png" class="main-page-book-cover" alt="book-cover-promotions-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
768 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Царство Страха
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Керри Манискалко
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/4.png" class="main-page-book-cover" alt="book-cover-promotions-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
162 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Клуб самоубийц
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Роберт Льюис Стивенсон
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/5.png" class="main-page-book-cover" alt="book-cover-promotions-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
600 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Некромант-одиночка. Новелла. Том 1
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
JJJ
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/promotions/6.png" class="main-page-book-cover" alt="book-cover-promotions-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
711 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кристальный пик
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Гор А.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row bg-white pb-1 rounded-3 gy-3">
|
||||
<div class="col-12 ms-2 mt-1">
|
||||
<div class="main-page-section-title block d-flex align-items-end">
|
||||
<p class="main-page-section-title-text lh-1 m-0">
|
||||
Выбор редакции
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/1.png" class="main-page-book-cover" alt="book-cover-recommendations-1" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
1001 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Испытание
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Трейси Вульф
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="./product_card.html">
|
||||
<img src="book_covers/recommendations/2.png" class="main-page-book-cover" alt="book-cover-recommendations-2" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
210 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Мастер и Маргарита
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Михаил Булгаков
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/3.png" class="main-page-book-cover" alt="book-cover-recommendations-3" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
618 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Песнь Сорокопута
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Фрэнсис Кель
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/4.png" class="main-page-book-cover" alt="book-cover-recommendations-4" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
754 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кодекс Алеры. Кн. 1. Фурии Кальдерона
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Джим Батчер
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/5.png" class="main-page-book-cover" alt="book-cover-recommendations-5" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
711 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Небесная река
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Деннис Тейлор
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-2">
|
||||
<div class="block d-flex flex-column">
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="/">
|
||||
<img src="book_covers/recommendations/6.png" class="main-page-book-cover" alt="book-cover-recommendations-6" width="100" height="152">
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center align-items-md-start">
|
||||
<p class="main-page-price">
|
||||
699 ₽
|
||||
</p>
|
||||
<p class="main-page-book-title">
|
||||
Кузнец магии. Клинок тайн
|
||||
</p>
|
||||
<p class="main-page-author">
|
||||
Триша Левенселлер
|
||||
</p>
|
||||
</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
Block a user