Compare commits
1 Commits
branch-2.2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 2671bc7bd9 |
58
MyWebSite/basket.html
Normal file
58
MyWebSite/basket.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Корзина</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body><header class="header">
|
||||
<img class="logo" src="logo.png" alt="logo" />
|
||||
<h1>
|
||||
Книжный интернет-магазин "Тома"
|
||||
</h1>
|
||||
<nav class="navbar">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="discounts.html">Скидки</a></li>
|
||||
<li><a href="basket.html">Корзина</a></li>
|
||||
<li><a href="contactUs.html">Свяжитесь с нами</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2>Корзина</h2>
|
||||
<div class="book-basket">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p><strong>Фрэнк Герберт</strong><br>"Дюна"<br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br>Цена: 500 руб.</p>
|
||||
</div>
|
||||
<div class="book-basket">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p><strong>Дж.Р.Р. Толкин</strong><br>"Хоббит"<br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br>Цена: 750 руб.</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<p style="color: red; font-weight: bold;">Условия скидки не применены.</p>
|
||||
<p>Общая стоимость покупки : 1250 руб.</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="contact-info">
|
||||
<p>Контакты: info@toma.ru</p>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Время работы: Пн-Пт 9:00-18:00</p>
|
||||
<p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
|
||||
<a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
|
||||
<a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
100
MyWebSite/catalog.html
Normal file
100
MyWebSite/catalog.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
|
||||
<title>Каталог</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<img class="logo" src="logo.png" alt="logo" />
|
||||
<h1>
|
||||
Книжный интернет-магазин "Тома"
|
||||
</h1>
|
||||
<nav class="navbar">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="discounts.html">Скидки</a></li>
|
||||
<li><a href="basket.html">Корзина</a></li>
|
||||
<li><a href="contactUs.html">Свяжитесь с нами</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2>Каталог книг</h2>
|
||||
|
||||
<h3 class = "genre-title">Фантастика</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p>Фрэнк Герберт<br><strong>"Дюна"</strong><br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br><strong>Цена : 500 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/foundation.jpg" alt="Основание" />
|
||||
<p>Айзек Азимов<br><strong>"Основание"</strong><br>Сага о падении и возрождении галактической империи, основанная на научных принципах.<br><strong>Цена : 600 р.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class = "genre-title">Детектив</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/murder_on_the_orient_express.jpg" alt="Убийство в Восточном экспрессе" />
|
||||
<p>Агата Кристи<br><strong>"Убийство в Восточном экспрессе"</strong><br>Загадочное убийство на поезде, где каждый пассажир может быть подозреваемым.<br><strong>Цена : 750 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
|
||||
<p>Стиг Ларссон<br><strong>"Девушка с татуировкой дракона"</strong><br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.<br><strong>Цена : 700 р.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class = "genre-title">Роман</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/pride_and_prejudice.jpg" alt="Гордость и предубеждение" />
|
||||
<p>Джейн Остин<br><strong>"Гордость и предубеждение"</strong><br>Классический роман о любви и социальном статусе в Англии XIX века.<br><strong>Цена : 650 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_great_gatsby.jpg" alt="Великий Гэтсби" />
|
||||
<p>Фрэнсис Скотт Фицджеральд<br><strong>"Великий Гэтсби"</strong><br>История о любви, богатстве и утраченных мечтах в эпоху джаза.<br><strong>Цена : 500 р.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class = "genre-title">Фэнтези</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/harry_potter.webp" alt="Гарри Поттер" />
|
||||
<p>Дж.К. Роулинг<br><strong>"Гарри Поттер и философский камень"</strong><br>Приключения молодого волшебника в школе магии Хогвартс.<br><strong>Цена : 800 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p>Дж.Р.Р. Толкин<br><strong>"Хоббит"</strong><br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br><strong>Цена : 750 р.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="contact-info">
|
||||
<p>Контакты: info@toma.ru</p>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Время работы: Пн-Пт 9:00-18:00</p>
|
||||
<p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
|
||||
<a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
|
||||
<a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
68
MyWebSite/contactUs.html
Normal file
68
MyWebSite/contactUs.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
|
||||
<title>Свяжитесь с нами</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<img class="logo" src="logo.png" alt="logo" />
|
||||
<h1>
|
||||
Книжный интернет-магазин "Тома"
|
||||
</h1>
|
||||
<nav class="navbar">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="discounts.html">Скидки</a></li>
|
||||
<li><a href="basket.html">Корзина</a></li>
|
||||
<li><a href="contactUs.html">Свяжитесь с нами</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2>Свяжитесь с нами</h2>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Имя:</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Электронная почта:</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="purchase-code">Код покупки:</label>
|
||||
<input type="text" id="purchase-code" name="purchase-code" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="problem-description">Описание проблемы:</label>
|
||||
<textarea id="problem-description" name="problem-description" rows="8" required></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="large-button">Отправить</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="contact-info">
|
||||
<p>Контакты: info@toma.ru</p>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Время работы: Пн-Пт 9:00-18:00</p>
|
||||
<p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
|
||||
<a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
|
||||
<a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
67
MyWebSite/discounts.html
Normal file
67
MyWebSite/discounts.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Добавлен мета-тег для адаптивности -->
|
||||
<title>Скидки</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<img class="logo" src="logo.png" alt="logo" />
|
||||
<h1>
|
||||
Книжный интернет-магазин "Тома"
|
||||
</h1>
|
||||
<nav class="navbar">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="discounts.html">Скидки</a></li>
|
||||
<li><a href="basket.html">Корзина</a></li>
|
||||
<li><a href="contactUs.html">Свяжитесь с нами</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="container">
|
||||
<h2>Скидки</h2>
|
||||
<hr/>
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
|
||||
<p>Стиг Ларссон<br><strong>"Девушка с татуировкой дракона"</strong><br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.<br>Цена : 700 р.<br><strong>Со скидкой : 525 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p>Дж.Р.Р. Толкин<br><strong>"Хоббит"</strong><br>Путешествие Бильбо Бэггинса в мир приключений и драконов.<br>Цена : 750 р.<br><strong>Со скидкой : 563 р.</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p>Фрэнк Герберт<br><strong>"Дюна"</strong><br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.<br>Цена : 500 р.<br><strong>Со скидкой : 375 р.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<h3>Условия получения скидки:</h3>
|
||||
<p>При покупке трех книг одновременно Вы получаете скидку 25%!<br>
|
||||
Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!</p>
|
||||
<hr/>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="contact-info">
|
||||
<p>Контакты: info@toma.ru</p>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Время работы: Пн-Пт 9:00-18:00</p>
|
||||
<p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
|
||||
<a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
|
||||
<a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MyWebSite/images/Book1.jpg
Normal file
BIN
MyWebSite/images/Book1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
MyWebSite/images/Book2.jpg
Normal file
BIN
MyWebSite/images/Book2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
MyWebSite/images/Book3.jpg
Normal file
BIN
MyWebSite/images/Book3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
1
MyWebSite/images/Facebook_icon-icons.com_66805.svg
Normal file
1
MyWebSite/images/Facebook_icon-icons.com_66805.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 128 128" id="Social_Icons" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x31__stroke"><g id="Facebook_1_"><rect fill="none" height="128" width="128"/><path clip-rule="evenodd" d="M68.369,128H7.065C3.162,128,0,124.836,0,120.935 V7.065C0,3.162,3.162,0,7.065,0h113.871C124.837,0,128,3.162,128,7.065v113.87c0,3.902-3.163,7.065-7.064,7.065H88.318V78.431 h16.638l2.491-19.318H88.318V46.78c0-5.593,1.553-9.404,9.573-9.404l10.229-0.004V20.094c-1.769-0.235-7.841-0.761-14.906-0.761 c-14.749,0-24.846,9.003-24.846,25.535v14.246H51.688v19.318h16.681V128z" fill="#4460A0" fill-rule="evenodd" id="Facebook"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 869 B |
BIN
MyWebSite/images/background.png
Normal file
BIN
MyWebSite/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
MyWebSite/images/dune.jpg
Normal file
BIN
MyWebSite/images/dune.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 817 KiB |
BIN
MyWebSite/images/foundation.jpg
Normal file
BIN
MyWebSite/images/foundation.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
MyWebSite/images/harry_potter.webp
Normal file
BIN
MyWebSite/images/harry_potter.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
BIN
MyWebSite/images/murder_on_the_orient_express.jpg
Normal file
BIN
MyWebSite/images/murder_on_the_orient_express.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
MyWebSite/images/pride_and_prejudice.jpg
Normal file
BIN
MyWebSite/images/pride_and_prejudice.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
7
MyWebSite/images/telegram-svgrepo-com.svg
Normal file
7
MyWebSite/images/telegram-svgrepo-com.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Telegram" role="img"
|
||||
viewBox="0 0 512 512"><rect
|
||||
width="512" height="512"
|
||||
rx="15%"
|
||||
fill="#37aee2"/><path fill="#c8daea" d="M199 404c-11 0-10-4-13-14l-32-105 245-144"/><path fill="#a9c9dd" d="M199 404c7 0 11-4 16-8l45-43-56-34"/><path fill="#f6fbfe" d="M204 319l135 99c14 9 26 4 30-14l55-258c5-22-9-32-24-25L79 245c-21 8-21 21-4 26l83 26 190-121c9-5 17-3 11 4"/></svg>
|
||||
|
After Width: | Height: | Size: 538 B |
BIN
MyWebSite/images/the_girl_with_the_dragon_tattoo.jpg
Normal file
BIN
MyWebSite/images/the_girl_with_the_dragon_tattoo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
MyWebSite/images/the_great_gatsby.jpg
Normal file
BIN
MyWebSite/images/the_great_gatsby.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
MyWebSite/images/the_hobbit.webp
Normal file
BIN
MyWebSite/images/the_hobbit.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
7
MyWebSite/images/vk-svgrepo-com.svg
Normal file
7
MyWebSite/images/vk-svgrepo-com.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="VK" role="img"
|
||||
viewBox="0 0 512 512"><rect
|
||||
width="512" height="512"
|
||||
rx="15%"
|
||||
fill="#5281b8"/><path fill="#ffffff" d="M274 363c5-1 14-3 14-15 0 0-1-30 13-34s32 29 51 42c14 9 25 8 25 8l51-1s26-2 14-23c-1-2-9-15-39-42-31-30-26-25 11-76 23-31 33-50 30-57-4-7-20-6-20-6h-57c-6 0-9 1-12 6 0 0-9 25-21 45-25 43-35 45-40 42-9-5-7-24-7-37 0-45 7-61-13-65-13-2-59-4-73 3-7 4-11 11-8 12 3 0 12 1 17 7 8 13 9 75-2 81-15 11-53-62-62-86-2-6-5-7-12-9H79c-6 0-15 1-11 13 27 56 83 193 184 192z"/></svg>
|
||||
|
After Width: | Height: | Size: 656 B |
72
MyWebSite/index.html
Normal file
72
MyWebSite/index.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<img class="logo" src="logo.png" alt="logo" />
|
||||
<h1>
|
||||
Книжный интернет-магазин "Тома"
|
||||
</h1>
|
||||
<nav class="navbar">
|
||||
<ul class="menu">
|
||||
<li class="dropdown">
|
||||
<span>Страницы ▾</span>
|
||||
<ul class="features-menu">
|
||||
<li><a href="index.html">Главная</a></li>
|
||||
<li><a href="catalog.html">Каталог</a></li>
|
||||
<li><a href="discounts.html">Скидки</a></li>
|
||||
<li><a href="basket.html">Корзина</a></li>
|
||||
<li><a href="contactUs.html">Свяжитесь с нами</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<h2>Описание:</h2>
|
||||
<p>
|
||||
Погрузитесь в незабываемые рукописные миры!
|
||||
<br>
|
||||
Бесчисленные литературные направления ждут вас!
|
||||
<br>
|
||||
Познакомьтесь с популярными работами известных
|
||||
<br>
|
||||
писателей! Мы Вам рады!
|
||||
</p>
|
||||
|
||||
<h2>Хиты продаж:</h2>
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/Book1.jpg" alt="Книга 1" />
|
||||
<p><strong>Тимоти Брук «Шляпа Вермеера»</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/Book2.jpg" alt="Книга 2" />
|
||||
<p><strong>Пол Линч «Песнь пророка»</strong></p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/Book3.jpg" alt="Книга 3" />
|
||||
<p><strong>Яна Вагнер «Тоннель»</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<div class="contact-info">
|
||||
<p>Контакты: info@toma.ru</p>
|
||||
<p>Телефон: +7 (123) 456-78-90</p>
|
||||
<p>Время работы: Пн-Пт 9:00-18:00</p>
|
||||
<p>Адрес: г. Москва, ул. Литераторов, д. 1</p>
|
||||
</div>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="images/Facebook_icon-icons.com_66805.svg" alt="Facebook" /></a>
|
||||
<a href="#"><img src="images/vk-svgrepo-com.svg" alt="VK" /></a>
|
||||
<a href="#"><img src="images/telegram-svgrepo-com.svg" alt="Telegram" /></a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MyWebSite/logo.png
Normal file
BIN
MyWebSite/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
293
MyWebSite/style.css
Normal file
293
MyWebSite/style.css
Normal file
@@ -0,0 +1,293 @@
|
||||
body {
|
||||
background-color: white;
|
||||
background-image: url(images/background.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
color: #003366;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.header {
|
||||
background-color: #f8f8f8;
|
||||
padding: 10px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
flex-direction: column; /* Вертикальное расположение элементов */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
position: relative;
|
||||
display: inline-block; /* Горизонтальное расположение элементов */
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #003366;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown > span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown:hover .features-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #b2d6ff;
|
||||
border-radius: 5px;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
top: 100%; /* Позиционирование под пунктом меню */
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.features-menu {
|
||||
display: none; /* Скрываем выпадающее меню по умолчанию */
|
||||
}
|
||||
|
||||
.features-menu li {
|
||||
list-style: none;
|
||||
border-bottom: 1px solid #fff;
|
||||
font-size: 0.8em;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.features-menu li:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.book {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
margin: 0, auto;
|
||||
}
|
||||
.book-basket{
|
||||
margin-bottom: 30;
|
||||
}
|
||||
|
||||
.book img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.book-basket img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
margin-top: 240px; /* отступ для шапки */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bestsellers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #f8f8f8;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.social-media img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #003366;
|
||||
}
|
||||
|
||||
.centered-list {
|
||||
list-style-position: inside;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.centered-list li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.large-button {
|
||||
font-size: 1.5em;
|
||||
padding: 10px 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.genre-title {
|
||||
background-color: #efefef;
|
||||
border: 4px solid #5d6063;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
form{
|
||||
background-color: #efefef;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
flex-direction: column;
|
||||
margin-bottom: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bestsellers {
|
||||
flex-direction: column; /* Изменение направления для мобильных устройств */
|
||||
align-items: center;
|
||||
}
|
||||
.book {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
.header {
|
||||
padding: 5px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
}
|
||||
.navbar li {
|
||||
display: block; /* Вертикальное расположение пунктов меню */
|
||||
margin: 5px 0;
|
||||
}
|
||||
.navbar a {
|
||||
padding: 10px; /* Увеличение области клика */
|
||||
}
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
margin-top: 200px; /* отступ для шапки */
|
||||
padding: 0 10px; /* Добавляем отступы по бокам для контейнера */
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4vw; /* Адаптивный размер заголовка h1 */
|
||||
}
|
||||
h2 {
|
||||
font-size: 3vw; /* Адаптивный размер заголовка h2 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.bestsellers {
|
||||
flex-direction: row; /* Горизонтальное расположение для планшетов */
|
||||
justify-content: space-around; /* Равномерное распределение элементов */
|
||||
}
|
||||
.book {
|
||||
width: 45%; /* Уменьшаем ширину книг для планшетов */
|
||||
max-width: 400px; /* Максимальная ширина для книг */
|
||||
}
|
||||
.header {
|
||||
padding: 10px;
|
||||
flex-direction: row; /* Горизонтальное расположение элементов */
|
||||
align-items: center;
|
||||
justify-content: space-between; /* Распределение элементов по краям */
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
}
|
||||
.navbar li {
|
||||
display: inline-block; /* Горизонтальное расположение пунктов меню */
|
||||
margin: 0 15px; /* Отступы между пунктами меню */
|
||||
}
|
||||
.navbar a {
|
||||
padding: 10px; /* Увеличение области клика */
|
||||
font-size: 1.1em; /* Увеличение размера шрифта для навигации */
|
||||
}
|
||||
.container {
|
||||
overflow-x: hidden;
|
||||
margin-top: 140px; /* отступ для шапки */
|
||||
padding: 0 20px; /* Добавляем отступы по бокам для контейнера */
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
}
|
||||
.footer {
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* Учитываем отступы в ширине */
|
||||
padding: 20px 20px; /* Отступы для футера */
|
||||
font-size: 1em; /* Размер шрифта для футера */
|
||||
}
|
||||
h1 {
|
||||
font-size: 5vw; /* Адаптивный размер заголовка h1 */
|
||||
}
|
||||
h2 {
|
||||
font-size: 4vw; /* Адаптивный размер заголовка h2 */
|
||||
}
|
||||
p {
|
||||
font-size: 3vw; /* Размер шрифта для параграфов */
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user