first_lab_after
This commit is contained in:
BIN
451 по фарингейту.jpg
Normal file
BIN
451 по фарингейту.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
80
choice.html
Normal file
80
choice.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<!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>
|
||||
<h1>Книги по тематикам</h1>
|
||||
<div class="category">
|
||||
<h2>Военные книги</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Эрих Мария Ремарк "На Западном фронте без перемен"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Лев Толстой "Война и мир"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Василь Быков "Сотников"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="category">
|
||||
<h2>Книги про науку</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Стивен Хокинг "Краткая история времени"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Карл Саган "Космос"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Ричард Докинз "Эгоистичный ген"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="category">
|
||||
<h2>Детские книги</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Астрид Линдгрен "Пеппи Длинныйчулок"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Алан Милн "Винни-Пух"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Антуан де Сент-Экзюпери "Маленький принц"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="category">
|
||||
<h2>Книги про психологию</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Дейл Карнеги "Как завоевывать друзей и оказывать влияние на людей"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Виктор Франкл "Человек в поисках смысла"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
<li>
|
||||
<p>Роберт Чалдини "Психология влияния"</p>
|
||||
<a href="infobook.html">Читать</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
index.html
Normal file
45
index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!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>
|
||||
<h1>Добро пожаловать на BookHub</h1>
|
||||
<h4>Самые скучные книги только у нас!</h4>
|
||||
|
||||
<div class="menu">
|
||||
<ul class="listMenu">
|
||||
<li><a href="#">Главная страница</a></li>
|
||||
<li><a href="search.html">Поиск</a></li>
|
||||
<li><a href="choice.html">Что выбрать</a></li>
|
||||
<li><a href="lk.html">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="listBooks">
|
||||
<li>
|
||||
<p>Джордж Оруэлл "1984"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="1984.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Замятин "Мы"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="мы.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Рэй Брэдбери "451 по Фаренгейту"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="451 по фарингейту.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Олдос Хаксли "О дивный новый мир"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="о дивный новый мир.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Уильям Голдинг "Повелитель мух"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="повелитель мух .jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
26
infobook.html
Normal file
26
infobook.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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>
|
||||
<div class="book-details">
|
||||
<h1>Описание книги</h1>
|
||||
<h2>Джордж Оруэлл "1984"</h2>
|
||||
<img src="1984.jpg" alt="Обложка книги 1984">
|
||||
<p>
|
||||
<strong>Автор:</strong> Джордж Оруэлл<br>
|
||||
<strong>Жанр:</strong> Антиутопия<br>
|
||||
<strong>Год издания:</strong> 1949
|
||||
</p>
|
||||
<p>
|
||||
<strong>Аннотация:</strong><br>
|
||||
Роман "1984" Джорджа Оруэлла — это классика антиутопической литературы. Действие происходит в тоталитарном обществе, где правительство контролирует каждую мысль и действие граждан. Главный герой, Уинстон Смит, работает в Министерстве правды, где он подделывает исторические документы, чтобы они соответствовали текущей партийной линии. Однако Уинстон начинает сомневаться в системе и искать способы сопротивления. Роман исследует темы свободы, правды и власти, оставаясь актуальным и по сей день.
|
||||
</p>
|
||||
<a href="#">Читать книгу</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
lk.html
Normal file
32
lk.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
<h1>Личный кабинет</h1>
|
||||
<div class="profile-form">
|
||||
<form>
|
||||
<label for="firstName">Имя:</label>
|
||||
<input type="text" id="firstName" name="firstName" value="Иван">
|
||||
|
||||
<label for="lastName">Фамилия:</label>
|
||||
<input type="text" id="lastName" name="lastName" value="Иванов">
|
||||
|
||||
<label for="email">Почта:</label>
|
||||
<input type="email" id="email" name="email" value="ivan@example.com">
|
||||
|
||||
<label for="city">Город:</label>
|
||||
<input type="text" id="city" name="city" value="Москва">
|
||||
|
||||
<label for="phone">Номер телефона:</label>
|
||||
<input type="tel" id="phone" name="phone" value="+7 (999) 123-45-67">
|
||||
|
||||
<button type="submit">Сохранить изменения</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
search.html
Normal file
29
search.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!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>
|
||||
<div class="search">
|
||||
<input type="text" placeholder="Введите название книги или автора">
|
||||
</div>
|
||||
|
||||
<ul class="listBooks">
|
||||
<li>
|
||||
<p>Джордж Оруэлл "1984"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="1984.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Михаил Булгаков "Мастер и Маргарита"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="master-and-margarita.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
<li>
|
||||
<p>Федор Достоевский "Преступление и наказание"<br><a href="infobook.html">Ссылка на переход</a></p>
|
||||
<img src="crime-and-punishment.jpg" alt="Не прогрузилось">
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
218
style.css
Normal file
218
style.css
Normal file
@@ -0,0 +1,218 @@
|
||||
body {
|
||||
padding: 20px;
|
||||
background-color: #222831;
|
||||
color: #eeeeee;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
color: #00adb5;
|
||||
}
|
||||
h4 {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 30px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.menu {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.listMenu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #00adb5;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.listMenu li {
|
||||
margin: 0 15px;
|
||||
}
|
||||
.listMenu a {
|
||||
color: #222831;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.listMenu a:hover {
|
||||
color: #eeeeee;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.listBooks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.listBooks li {
|
||||
background-color: #393e46;
|
||||
padding: 20px;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.listBooks p {
|
||||
font-size: 1.1rem;
|
||||
margin: 10px 0;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.listBooks a {
|
||||
color: #00adb5;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.listBooks a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.listBooks img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.search input {
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.profile-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
.profile-form label {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.profile-form input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #393e46;
|
||||
color: #eeeeee;
|
||||
font-size: 16px;
|
||||
}
|
||||
.profile-form button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #00adb5;
|
||||
color: #393e46;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.profile-form button:hover {
|
||||
background-color: #00959c;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.category {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background-color: #393e46;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.category h2 {
|
||||
color: #00adb5;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.category ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.category ul li {
|
||||
background-color: #222831;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.category ul li p {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #eeeeee;
|
||||
}
|
||||
.category ul li a {
|
||||
color: #00adb5;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.category ul li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.book-details {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #393e46;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.book-details h1 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
color: #00adb5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.book-details h2 {
|
||||
font-size: 2rem;
|
||||
color: #eeeeee;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.book-details img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.book-details p {
|
||||
font-size: 1.1rem;
|
||||
color: #eeeeee;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.book-details a {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: #00adb5;
|
||||
color: #222831;
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.book-details a:hover {
|
||||
background-color: #00959c;
|
||||
}
|
||||
BIN
о дивный новый мир.jpg
Normal file
BIN
о дивный новый мир.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
повелитель мух .jpg
Normal file
BIN
повелитель мух .jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Reference in New Issue
Block a user