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

128 lines
5.8 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>
<script src="/js/catalog.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="/index.html">
<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">
<h3 class="ms-5 mt-4 mb-4">Каталог</h3>
<div id="catalog">
<div class="row justify-content-evenly ">
<div class="col-md-3 col-6 mb-sm-0 align-self-end ">
<div class="card" style="width: 100%;">
<a href="/pageOfBook1.html"> <img src="/src/covers/image1book.png" class="card-img-top" alt="..." ></a>
<div class="card-body">
<p class="card-title mt-0 mb-0">Ведьмак. Последнее желание</p>
<p class="card-text ">Анджей Сапковский</p>
<a href="/pageOfBook1.html" class="btn btn-catalog btn-primary rounded-0 mt-1 border">Добавить в корзину</a>
</div>
</div>
</div>
<div class="col-md-3 col-6 align-self-end offset-md-0">
<div class="card" style="width: 100%;">
<a href="/pageOfBook1.html"> <img src="/src/covers/image2book.png" class="card-img-top" alt="..." ></a>
<div class="card-body">
<p class="card-title mt-0 mb-0">Ведьмак. Меч предназначения</p>
<p class="card-text">Анджей Сапковский</p>
<a href="#" class="btn-catalog btn btn-primary rounded-0 mt-1 border">Добавить в корзину</a>
</div>
</div>
</div>
<div class="col-md-3 col-6 align-self-end col-bott">
<div class="card" style="width: 100%;">
<a href="/pageOfBook1.html"> <img src="/src/covers/image3book.png" class="card-img-top" alt="..." ></a>
<div class="card-body">
<p class="card-title mt-0 mb-0">Ведьмак. Кровь эльфов</p>
<p class="card-text">Анджей Сапковский</p>
<a href="#" class="btn-catalog btn btn-primary rounded-0 mt-1 border ">Добавить в корзину</a>
</div>
</div>
</div>
<div class="row justify-content-evenly mt-4">
<div class="col-md-3 col-6 align-self-end col-bott">
<div class="card" style="width: 100%;">
<a href="/pageAdmin.html"> <img src="/src/covers/addbook1.png" class="card-img-top" alt="..." ></a>
<div class="card-body">
<p class="card-title mt-0 mb-0">???</p>
<p class="card-text">?????</p>
<a href="#" class="btn btn-catalog btn-primary rounded-0 mt-1 border ">Добавить книгу</a>
</div>
</div>
</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 drawCardsCatalog from "./js/catalog";
document.addEventListener('DOMContentLoaded', () => {
drawCardsCatalog();
});
</script>
</body>
</html>