Files
Online-library/html/index.html

109 lines
6.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Главная страница</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="p-4">
<header class="mb-4">
<h1 class="text-center display-4 fw-bold" style="color: var(--accent)">Добро пожаловать на BookHub</h1>
<h4 class="text-center mb-4">Самые скучные книги только у нас!</h4>
<nav class="navbar navbar-expand-lg navbar-custom p-3">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto gap-3">
<li class="nav-item"><a href="/html/index.html" class="nav-link nav-link-custom">Главная страница</a></li>
<li class="nav-item"><a href="/html/search.html" class="nav-link nav-link-custom">Поиск</a></li>
<li class="nav-item dropdown dropdown-custom">
<a class="nav-link nav-link-custom dropdown-toggle" href="/html/choice.html" role="button"
data-bs-toggle="dropdown">Что выбрать</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/html/choice.html#военные">Военные книги</a></li>
<li><a class="dropdown-item" href="/html/choice.html#наука">Научная литература</a></li>
<li><a class="dropdown-item" href="/html/choice.html#дети">Детские книги</a></li>
<li><a class="dropdown-item" href="/html/choice.html#психология">Психология</a></li>
</ul>
</li>
<li class="nav-item"><a href="/html/lk.html" class="nav-link nav-link-custom">Личный кабинет</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="book-card p-3 h-100 text-center">
<img src="/res/1984.jpg" class="img-fluid rounded mb-3" alt="Обложка книги">
<p class="fs-5">Джордж Оруэлл "1984"<br>
<a href="/html/infobook.html" class="text-decoration-none" style="color: var(--accent)">Ссылка на переход</a>
</p>
</div>
</div>
<div class="col">
<div class="book-card p-3 h-100 text-center">
<img src="/res/мы.jpg" class="img-fluid rounded mb-3" alt="Обложка книги">
<p class="fs-5">Замятин "Мы"<br>
<a href="/html/infobook.html" class="text-decoration-none" style="color: var(--accent)">Ссылка на переход</a>
</p>
</div>
</div>
<div class="col">
<div class="book-card p-3 h-100 text-center">
<img src="/res/451 по фарингейту.jpg" class="img-fluid rounded mb-3" alt="Обложка книги">
<p class="fs-5">Рэй Брэдбери "451 по Фаренгейту"<br>
<a href="/html/infobook.html" class="text-decoration-none" style="color: var(--accent)">Ссылка на переход</a>
</p>
</div>
</div>
<div class="col">
<div class="book-card p-3 h-100 text-center">
<img src="/res/о дивный новый мир.jpg" class="img-fluid rounded mb-3" alt="Обложка книги">
<p class="fs-5">Олдос Хаксли "О дивный новый мир"<br>
<a href="/html/infobook.html" class="text-decoration-none" style="color: var(--accent)">Ссылка на переход</a>
</p>
</div>
</div>
<div class="col">
<div class="book-card p-3 h-100 text-center">
<img src="/res/повелитель мух .jpg" class="img-fluid rounded mb-3" alt="Обложка книги">
<p class="fs-5">Уильям Голдинг "Повелитель мух"<br>
<a href="/html/infobook.html" class="text-decoration-none" style="color: var(--accent)">Ссылка на переход</a>
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer-custom mt-5 p-4">
<div class="container">
<div class="row text-center">
<div class="col-md-6 mb-4">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12<br>Часы работы: 10:00 - 20:00</p>
</div>
<div class="col-md-6">
<h3>Соцсети</h3>
<div class="d-flex justify-content-center gap-3">
<a href="https://vk.ru"><img src="/res/vk.svg" alt="VK" style="width: 32px"></a>
<a href="https://lichess.org"><img src="/res/telegram.svg" alt="Telegram" style="width: 32px"></a>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>