IP/2_lab/testBootstrap_main/pageOfBook1.html
2023-10-24 11:06:11 +04:00

130 lines
7.1 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="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>