1 лабораторная

This commit is contained in:
2025-02-15 13:21:34 +04:00
parent 74c05631ce
commit c450cc9983
20 changed files with 332 additions and 0 deletions

32
MyWebSite/basket.html Normal file
View 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
View 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
View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
MyWebSite/images/Book2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

BIN
MyWebSite/images/Book3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
MyWebSite/images/dune.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 817 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 356 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 370 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

52
MyWebSite/index.html Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

99
MyWebSite/style.css Normal file
View 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;
}

Binary file not shown.