1 лабораторная
32
MyWebSite/basket.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Корзина</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<hr/>
|
||||
<h1><img class="logo" src="logo.png" alt="logo"> Книжный интернет-магазин "Тома"</h1>
|
||||
<hr/>
|
||||
<h2>Корзина</h2>
|
||||
<div class="book-basket">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p><strong>Фрэнк Герберт</strong><br>"Дюна"<br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.</p>
|
||||
<p>Цена: 500 руб.</p>
|
||||
</div>
|
||||
<div class="book-basket">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p><strong>Дж.Р.Р. Толкин</strong><br>"Хоббит"<br>Путешествие Бильбо Бэггинса в мир приключений и драконов.</p>
|
||||
<p>Цена: 600 руб.</p>
|
||||
</div>
|
||||
<hr/>
|
||||
<p style="color: red; font-weight: bold;">Условия скидки не применены.</p>
|
||||
<p>Общая стоимость покупки : 1100 руб.</p>
|
||||
<hr/>
|
||||
<button class="large-button">Оформить покупку</button>
|
||||
<button onclick="window.location.href='index.html'" class="large-button">Вернуться на главную страницу</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
72
MyWebSite/catalog.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Каталог</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<hr/>
|
||||
<h1><img class="logo" src="logo.png" alt="logo" width="128"> Книжный интернет-магазин "Тома"</h1>
|
||||
<hr/>
|
||||
<h2>Каталог книг</h2>
|
||||
|
||||
<h3 class = "genre-title">Фантастика</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p><strong>Фрэнк Герберт</strong><br>"Дюна"<br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/foundation.jpg" alt="Основание" />
|
||||
<p><strong>Айзек Азимов</strong><br>"Основание"<br>Сага о падении и возрождении галактической империи, основанная на научных принципах.</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><strong>Агата Кристи</strong><br>"Убийство в Восточном экспрессе"<br>Загадочное убийство на поезде, где каждый пассажир может быть подозреваемым.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
|
||||
<p><strong>Стиг Ларссон</strong><br>"Девушка с татуировкой дракона"<br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class = "genre-title">Роман</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/pride_and_prejudice.jpg" alt="Гордость и предубеждение" />
|
||||
<p><strong>Джейн Остин</strong><br>"Гордость и предубеждение"<br>Классический роман о любви и социальном статусе в Англии XIX века.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_great_gatsby.jpg" alt="Великий Гэтсби" />
|
||||
<p><strong>Фрэнсис Скотт Фицджеральд</strong><br>"Великий Гэтсби"<br>История о любви, богатстве и утраченных мечтах в эпоху джаза.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class = "genre-title">Фэнтези</h3>
|
||||
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/harry_potter.webp" alt="Гарри Поттер" />
|
||||
<p><strong>Дж.К. Роулинг</strong><br>"Гарри Поттер и философский камень"<br>Приключения молодого волшебника в школе магии Хогвартс.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p><strong>Дж.Р.Р. Толкин</strong><br>"Хоббит"<br>Путешествие Бильбо Бэггинса в мир приключений и драконов.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<button class="large-button" onclick="window.location.href='basket.html'" >В корзину</button>
|
||||
<button class="large-button" onclick="window.location.href='index.html'">Вернуться на главную страницу</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
40
MyWebSite/contactUs.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Свяжитесь с нами</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<hr/>
|
||||
<h1><img class="logo" src="logo.png" alt="logo" width="128"> Книжный интернет-магазин "Тома"</h1>
|
||||
<hr/>
|
||||
<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 style="margin-top: 20px;">
|
||||
<button onclick="window.location.href='index.html'" class="large-button">Вернуться на главную страницу</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
37
MyWebSite/discounts.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Скидки</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<hr/>
|
||||
<h1><img class="logo" src="logo.png" alt="logo" width="128"> Книжный интернет-магазин "Тома"</h1>
|
||||
<hr/>
|
||||
<h2>Скидки на книги</h2>
|
||||
<hr/>
|
||||
<div class="bestsellers">
|
||||
<div class="book">
|
||||
<img src="images/the_girl_with_the_dragon_tattoo.jpg" alt="Девушка с татуировкой дракона" />
|
||||
<p><strong>Стиг Ларссон</strong><br>"Девушка с татуировкой дракона"<br>История о расследовании исчезновения девушки, связанная с мрачными тайнами семьи.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/the_hobbit.webp" alt="Хоббит" />
|
||||
<p><strong>Дж.Р.Р. Толкин</strong><br>"Хоббит"<br>Путешествие Бильбо Бэггинса в мир приключений и драконов.</p>
|
||||
</div>
|
||||
<div class="book">
|
||||
<img src="images/dune.jpg" alt="Дюна" />
|
||||
<p><strong>Фрэнк Герберт</strong><br>"Дюна"<br>Эпическая история о борьбе за контроль над планетой Арракис, источником самого ценного вещества во вселенной.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<h3>Условия получения скидки:</h3>
|
||||
<p>При покупке трех книг одновременно Вы получаете скидку 15%!<br>
|
||||
Скидка действует с 1 по 15 число каждого месяца. Не упустите возможность!</p>
|
||||
<hr/>
|
||||
<button onclick="window.location.href='index.html'" class="large-button">Вернуться на главную страницу</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MyWebSite/images/Book1.jpg
Normal file
|
After Width: | Height: | Size: 69 KiB |
BIN
MyWebSite/images/Book2.jpg
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
MyWebSite/images/Book3.jpg
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
MyWebSite/images/background.png
Normal file
|
After Width: | Height: | Size: 87 KiB |
BIN
MyWebSite/images/dune.jpg
Normal file
|
After Width: | Height: | Size: 817 KiB |
BIN
MyWebSite/images/foundation.jpg
Normal file
|
After Width: | Height: | Size: 159 KiB |
BIN
MyWebSite/images/harry_potter.webp
Normal file
|
After Width: | Height: | Size: 356 KiB |
BIN
MyWebSite/images/murder_on_the_orient_express.jpg
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
MyWebSite/images/pride_and_prejudice.jpg
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
MyWebSite/images/the_girl_with_the_dragon_tattoo.jpg
Normal file
|
After Width: | Height: | Size: 370 KiB |
BIN
MyWebSite/images/the_great_gatsby.jpg
Normal file
|
After Width: | Height: | Size: 1.9 MiB |
BIN
MyWebSite/images/the_hobbit.webp
Normal file
|
After Width: | Height: | Size: 172 KiB |
52
MyWebSite/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Главная страница</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<hr/>
|
||||
<h1><img class = "logo" src="logo.png" border-radius: 50% alt="logo" width="128"> Книжный интернет-магазин "Тома"</h1>
|
||||
<hr/>
|
||||
<h2>Описание:</h2>
|
||||
<em>
|
||||
<p>
|
||||
Погрузитесь в незабываемые рукописные миры!
|
||||
<br>
|
||||
Бесчисленные литературные направления ждут вас!
|
||||
<br>
|
||||
Познакомьтесь с популярными работами известных
|
||||
<br>
|
||||
писателей! Мы Вам рады!
|
||||
</p>
|
||||
<hr/>
|
||||
</em>
|
||||
<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>
|
||||
<hr/>
|
||||
<h2>Страницы сайта:</h2>
|
||||
<ul class="centered-list">
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
MyWebSite/logo.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
99
MyWebSite/style.css
Normal file
@@ -0,0 +1,99 @@
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
border-radius: 50%;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
.form-group {
|
||||
display: flex;
|
||||
font-size: 20px;
|
||||
flex-direction: column;
|
||||
margin-bottom: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.bestsellers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.book {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
width: 600px;
|
||||
margin: 0, auto;
|
||||
}
|
||||
.book-basket {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.book img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.book-basket img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
h1, h2 {
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #003366;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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 10px 10px 10px;
|
||||
text-align: center;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||