Files
PIBD-23_Ivanov.D.A._Interne…/MyWebSite/home.html
2025-05-17 11:41:06 +04:00

137 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="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Книжный интернет-магазин "Тома"</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
<!-- Ваш CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Навигация -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<img src="logo.png" alt="Логотип" class="logo me-2" />
<span class="d-none d-lg-block">Книжный магазин "Тома"</span>
<span class="d-lg-none">"Тома"</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Страницы
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="index.html">Главная</a></li>
<li><a class="dropdown-item" href="catalog.html">Каталог</a></li>
<li><a class="dropdown-item" href="discounts.html">Скидки</a></li>
<li><a class="dropdown-item" href="basket.html">Корзина</a></li>
<li><a class="dropdown-item" href="contactUs.html">Контакты</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- Основной контент -->
<main class="container mt-5 pt-5">
<section class="my-5">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mb-4">Описание:</h2>
<p class="lead">
Погрузитесь в незабываемые рукописные миры!<br />
Бесчисленные литературные направления ждут вас!<br />
Познакомьтесь с популярными работами известных<br />
писателей! Мы Вам рады!
</p>
</div>
</div>
</section>
<section class="my-5">
<h2 class="text-center mb-4">Хиты продаж</h2>
<div class="row g-4 justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<img src="images/Book1.jpg" class="card-img-top p-3" alt="Книга 1" />
<div class="card-body text-center">
<h5 class="card-title">Тимоти Брук «Шляпа Вермеера»</h5>
<button class="btn btn-primary mt-3">В корзину</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<img src="images/Book2.jpg" class="card-img-top p-3" alt="Книга 2" />
<div class="card-body text-center">
<h5 class="card-title">Пол Линч «Песнь пророка»</h5>
<button class="btn btn-primary mt-3">В корзину</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<img src="images/Book3.jpg" class="card-img-top p-3" alt="Книга 3" />
<div class="card-body text-center">
<h5 class="card-title">Яна Вагнер «Тоннель»</h5>
<button class="btn btn-primary mt-3">В корзину</button>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Подвал -->
<footer class="bg-light py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<h5 class="mb-3">Контакты</h5>
<ul class="list-unstyled">
<li><i class="bi bi-envelope me-2"></i> info@toma.ru</li>
<li><i class="bi bi-phone me-2"></i> +7 (123) 456-78-90</li>
<li><i class="bi bi-clock me-2"></i> Пн-Пт 9:00-18:00</li>
<li><i class="bi bi-geo-alt me-2"></i> г. Москва, ул. Литераторов, д. 1</li>
</ul>
</div>
<div class="col-md-6 text-md-end">
<h5 class="mb-3">Социальные сети</h5>
<div class="social-media">
<a href="#" class="text-decoration-none me-3"><i class="bi bi-facebook fs-3"></i></a>
<a href="#" class="text-decoration-none me-3"><i class="bi bi-vk fs-3"></i></a>
<a href="#" class="text-decoration-none"><i class="bi bi-telegram fs-3"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>