IP/3_Lab/testBootstrap_main/pageOfBook1.html

130 lines
7.1 KiB
HTML
Raw Normal View History

2023-11-16 13:21:52 +04:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>"Последнее желание"</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="/js/bootstrap.js"></script>
<link rel="stylesheet" href="/fontello.css" type="text/css" />
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex flex-column min-vh-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/src/logoOfLibrary.png" alt="" width="80" class="d-inline-block align-text-top" border-radius="20%">
</a>
<a class="about-us-link nav-link link-light fs-5" href="/pageAboutUs.html">О нас</a>
<button class="navbar-toggler" 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 justify-content-end p-3 bg-dark" id="navbarNav">
<div class="navbar-nav p-3">
<a class="nav-link fs-5 text-light " href="./pageCatalog.html">Каталог</a>
<a class="nav-link fs-5 text-light " href="./pageBasket.html">Корзина</a>
</div>
<section class="menu align-self-center">
<a class="nav-link text-end fs-5 lh-2 text-light" href="./pageSignUp.html">Зарегистрироваться</a>
<a class="nav-link text-end fs-6 text-light" href="./pageSignIn.html">Уже есть аккаунт?</a>
</section>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="mb-3" style="max-width: auto;">
<div class="row g-0 justify-content-center">
<div class="col-lg-3 col-sm-6 col-4 align-self-center">
<img src="/src/covers/image1book.png" class="img-fluid d-flex " alt="...">
</div>
<div class="col-lg-4 col-sm-6 ps-3 align-self-center">
<div class="card-body">
<h5><span class="badge ">Выбор библиотеки!</span></h5>
<h5 class="card-title">Ведьмак. Последнее желание</h5>
<p class="card-text">Анджей Сапковский</p>
<small class="text-body-secondary ">
<div class="row d-flex">
<div class="col-sm-12 col-6">
<p class="card-text mb-1">ID товара2577371</p>
<p class="card-text mb-2">Цикл: Ведьмак</p>
<p class="card-text mb-2">Издательство: АСТ</p>
<p class="card-text mb-2">Серия: Сапковский с иллюстрациями</p>
<p class="card-text mb-2">Год издания: 2022</p>
<p class="card-text mb-2">ISBN978-5-17-102028-6</p>
</div>
<div class="col-sm-12 col-6">
<p class="card-text mb-2">Количество страниц: 320</p>
<p class="card-text mb-2">Размер: 24.2x16.7999x2</p>
<p class="card-text mb-2">Тип обложки: Твердый переплёт</p>
<p class="card-text mb-2">Тираж: 8000</p>
<p class="card-text mb-2">Вес, г: 629</p>
</div>
</div>
</small>
<div class="d-flex justify-content-center justify-content-sm-start">
<a href="#" class="btn btn-rectangle rounded-0 text-light ">Добавить в корзину</a>
</div>
</div>
</div>
<div class="card-description col-lg-5 rounded mt-2" >
<p class="text-light p-3 fs-4">
Аннотация к книге Ведьмак: Последнее желание
</p>
<p class="card-description-text text-light p-3">
Он уничтожает чудовищ и выручает попавших в беду… как правило, за деньги. Он виртуозно владеет мечом… и никогда не помышлял о военной карьере. Он защищает людей… которые его презирают, ненавидят и боятся. Он странствующий рыцарь… без шпор, девиза, замка и прекрасной дамы. А впрочем, прекрасная дама обязательно будет. А еще будут чары и тайны, неразделенная любовь и нелегкий выбор, схватки не на жизнь, а на смерть, странствия, песни и, конечно, сказки — знакомые всем с детства и разительно отличные от того, к чему мы привыкли.Сага А. Сапковского давно занимает почетное место в мировой традиции жанра фэнтези, а Геральт стал культовым персонажем не только в мире литературы, но и в универсуме компьютерных игр. Первая книга из цикла «Ведьмак» впервые выходит с иллюстрациями Дениса Гордеева, созданными специально для этого издания.
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 align-items-center">
<h3 class="ps-0 me-2">Наши соцсети</h3>
<div class="group-sites" role="group">
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-facebook.png" class="button-sm m-auto " alt="" width="35" ></a>
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-viber.png" class="button-sm m-auto" alt="" width="35" ></a>
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-tg.png" class="button-sm m-auto" alt="" width="35" ></a>
<a href="https://vk.com/valannn" ><img src="src/social_media/logo-whats-up.png" class="button-sm m-auto" alt="" width="35" ></a>
</div>
</footer>
<script type="module">
import createPageOfBook from "./js/page";
document.addEventListener('DOMContentLoaded', () => {
createPageOfBook();
});
</script>
</body>
</html>