Вторая лаба готова

This commit is contained in:
2025-05-03 19:37:28 +04:00
parent 490ba0ffad
commit 6cd118a233
8 changed files with 284 additions and 8 deletions

View File

@@ -1,11 +1,33 @@
<!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>
<header>
<h1>Добро пожаловать на BookHub</h1>
<h4>Самые скучные книги только у нас!</h4>
<nav class="navbar">
<ul class="listMenu">
<li><a href="index.html">Главная страница</a></li>
<li><a href="search.html">Поиск</a></li>
<li class="dropdown">
<a href="choice.html" class="dropbtn">Что выбрать ▼</a>
<div class="dropdown-content">
<a href="choice.html#военные">Военные книги</a>
<a href="choice.html#наука">Научная литература</a>
<a href="choice.html#дети">Детские книги</a>
<a href="choice.html#психология">Психология</a>
</div>
</li>
<li><a href="lk.html">Личный кабинет</a></li>
</ul>
</nav>
</header>
<body>
<h1>Книги по тематикам</h1>
<div class="category">
@@ -77,4 +99,19 @@
</ul>
</div>
</body>
<footer>
<div class="footer-section">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12</p>
<p>Часы работы: 10:00 - 20:00</p>
</div>
<div class="footer-section">
<h3>Соцсети</h3>
<div class="social-icons">
<a href="https://vk.ru"><img src="vk.svg" alt="VK"></a>
<a href="https://lichess.org"><img src="telegram.svg" alt="Telegram"></a>
</div>
</div>
</footer>
</html>

View File

@@ -1,24 +1,35 @@
<!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>
<h1>Добро пожаловать на BookHub</h1>
<h4>Самые скучные книги только у нас!</h4>
<div class="menu">
<nav class="navbar">
<ul class="listMenu">
<li><a href="#">Главная страница</a></li>
<li><a href="index.html">Главная страница</a></li>
<li><a href="search.html">Поиск</a></li>
<li><a href="choice.html">Что выбрать</a></li>
<li class="dropdown">
<a href="choice.html" class="dropbtn">Что выбрать ▼</a>
<div class="dropdown-content">
<a href="choice.html#военные">Военные книги</a>
<a href="choice.html#наука">Научная литература</a>
<a href="choice.html#дети">Детские книги</a>
<a href="choice.html#психология">Психология</a>
</div>
</li>
<li><a href="lk.html">Личный кабинет</a></li>
</ul>
</div>
</nav>
</header>
<body>
<ul class="listBooks">
<li>
<p>Джордж Оруэлл "1984"<br><a href="infobook.html">Ссылка на переход</a></p>
@@ -42,4 +53,19 @@
</li>
</ul>
</body>
<<footer>
<div class="footer-section">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12</p>
<p>Часы работы: 10:00 - 20:00</p>
</div>
<div class="footer-section">
<h3>Соцсети</h3>
<div class="social-icons">
<a href="https://vk.ru"><img src="vk.svg" alt="VK"></a>
<a href="https://lichess.org"><img src="telegram.svg" alt="Telegram"></a>
</div>
</div>
</footer>
</html>

View File

@@ -1,11 +1,33 @@
<!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>
<header>
<h1>Добро пожаловать на BookHub</h1>
<h4>Самые скучные книги только у нас!</h4>
<nav class="navbar">
<ul class="listMenu">
<li><a href="index.html">Главная страница</a></li>
<li><a href="search.html">Поиск</a></li>
<li class="dropdown">
<a href="choice.html" class="dropbtn">Что выбрать ▼</a>
<div class="dropdown-content">
<a href="choice.html#военные">Военные книги</a>
<a href="choice.html#наука">Научная литература</a>
<a href="choice.html#дети">Детские книги</a>
<a href="choice.html#психология">Психология</a>
</div>
</li>
<li><a href="lk.html">Личный кабинет</a></li>
</ul>
</nav>
</header>
<body>
<div class="book-details">
<h1>Описание книги</h1>
@@ -18,9 +40,28 @@
</p>
<p>
<strong>Аннотация:</strong><br>
Роман "1984" Джорджа Оруэлла — это классика антиутопической литературы. Действие происходит в тоталитарном обществе, где правительство контролирует каждую мысль и действие граждан. Главный герой, Уинстон Смит, работает в Министерстве правды, где он подделывает исторические документы, чтобы они соответствовали текущей партийной линии. Однако Уинстон начинает сомневаться в системе и искать способы сопротивления. Роман исследует темы свободы, правды и власти, оставаясь актуальным и по сей день.
Роман "1984" Джорджа Оруэлла — это классика антиутопической литературы. Действие происходит в тоталитарном
обществе, где правительство контролирует каждую мысль и действие граждан. Главный герой, Уинстон Смит,
работает в Министерстве правды, где он подделывает исторические документы, чтобы они соответствовали текущей
партийной линии. Однако Уинстон начинает сомневаться в системе и искать способы сопротивления. Роман
исследует темы свободы, правды и власти, оставаясь актуальным и по сей день.
</p>
<a href="#">Читать книгу</a>
</div>
</body>
<footer>
<div class="footer-section">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12</p>
<p>Часы работы: 10:00 - 20:00</p>
</div>
<div class="footer-section">
<h3>Соцсети</h3>
<div class="social-icons">
<a href="https://vk.ru"><img src="vk.svg" alt="VK"></a>
<a href="https://lichess.org"><img src="telegram.svg" alt="Telegram"></a>
</div>
</div>
</footer>
</html>

37
lk.html
View File

@@ -1,11 +1,33 @@
<!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>
<header>
<h1>Добро пожаловать на BookHub</h1>
<h4>Самые скучные книги только у нас!</h4>
<nav class="navbar">
<ul class="listMenu">
<li><a href="index.html">Главная страница</a></li>
<li><a href="search.html">Поиск</a></li>
<li class="dropdown">
<a href="choice.html" class="dropbtn">Что выбрать ▼</a>
<div class="dropdown-content">
<a href="choice.html#военные">Военные книги</a>
<a href="choice.html#наука">Научная литература</a>
<a href="choice.html#дети">Детские книги</a>
<a href="choice.html#психология">Психология</a>
</div>
</li>
<li><a href="lk.html">Личный кабинет</a></li>
</ul>
</nav>
</header>
<body>
<h1>Личный кабинет</h1>
<div class="profile-form">
@@ -29,4 +51,19 @@
</form>
</div>
</body>
<footer>
<div class="footer-section">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12</p>
<p>Часы работы: 10:00 - 20:00</p>
</div>
<div class="footer-section">
<h3>Соцсети</h3>
<div class="social-icons">
<a href="https://vk.ru"><img src="vk.svg" alt="VK"></a>
<a href="https://lichess.org"><img src="telegram.svg" alt="Telegram"></a>
</div>
</div>
</footer>
</html>

View File

@@ -1,11 +1,33 @@
<!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>
<header>
<h1>Добро пожаловать на BookHub</h1>
<h4>Самые скучные книги только у нас!</h4>
<nav class="navbar">
<ul class="listMenu">
<li><a href="index.html">Главная страница</a></li>
<li><a href="search.html">Поиск</a></li>
<li class="dropdown">
<a href="choice.html" class="dropbtn">Что выбрать ▼</a>
<div class="dropdown-content">
<a href="choice.html#военные">Военные книги</a>
<a href="choice.html#наука">Научная литература</a>
<a href="choice.html#дети">Детские книги</a>
<a href="choice.html#психология">Психология</a>
</div>
</li>
<li><a href="lk.html">Личный кабинет</a></li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Введите название книги или автора">
@@ -26,4 +48,19 @@
</li>
</ul>
</body>
<footer>
<div class="footer-section">
<h3>Контакты</h3>
<p>Москва, ул. Книжная, 12</p>
<p>Часы работы: 10:00 - 20:00</p>
</div>
<div class="footer-section">
<h3>Соцсети</h3>
<div class="social-icons">
<a href="https://vk.ru"><img src="vk.svg" alt="VK"></a>
<a href="https://lichess.org"><img src="telegram.svg" alt="Telegram"></a>
</div>
</div>
</footer>
</html>

View File

@@ -215,4 +215,100 @@ h4 {
}
.book-details a:hover {
background-color: #00959c;
}
}
header {
margin: 10px auto;
}
/* Navbar styles */
.navbar {
background-color: #00adb5;
padding: 15px;
border-radius: 10px;
}
.listMenu {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
.listMenu li {
position: relative;
}
.listMenu a {
color: #222831;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
padding: 10px;
}
/* Dropdown styles */
.dropdown-content {
display: none;
position: absolute;
background-color: #393e46;
min-width: 200px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
border-radius: 5px;
top: 100%;
left: 0;
z-index: 1;
}
.dropdown-content a {
color: #eeeeee;
padding: 12px 16px;
display: block;
font-size: 1rem;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #00adb5;
color: #222831;
}
/* Mobile adaptation */
@media (max-width: 768px) {
.listMenu {
flex-direction: column;
text-align: center;
gap: 15px;
}
.dropdown-content {
position: static;
width: 100%;
}
}
footer {
display: flex;
justify-content: space-around;
padding: 2rem;
background-color: #393e46;
margin: 10px auto;
}
.social-icons img {
width: 32px;
margin: 0 10px;
}

1
telegram.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309288 2 2 12.309297 2 25 C 2 37.690703 12.309288 48 25 48 C 37.690712 48 48 37.690703 48 25 C 48 12.309297 37.690712 2 25 2 z M 25 4 C 36.609833 4 46 13.390175 46 25 C 46 36.609825 36.609833 46 25 46 C 13.390167 46 4 36.609825 4 25 C 4 13.390175 13.390167 4 25 4 z M 34.087891 14.035156 C 33.403891 14.035156 32.635328 14.193578 31.736328 14.517578 C 30.340328 15.020578 13.920734 21.992156 12.052734 22.785156 C 10.984734 23.239156 8.9960938 24.083656 8.9960938 26.097656 C 8.9960938 27.432656 9.7783594 28.3875 11.318359 28.9375 C 12.146359 29.2325 14.112906 29.828578 15.253906 30.142578 C 15.737906 30.275578 16.25225 30.34375 16.78125 30.34375 C 17.81625 30.34375 18.857828 30.085859 19.673828 29.630859 C 19.666828 29.798859 19.671406 29.968672 19.691406 30.138672 C 19.814406 31.188672 20.461875 32.17625 21.421875 32.78125 C 22.049875 33.17725 27.179312 36.614156 27.945312 37.160156 C 29.021313 37.929156 30.210813 38.335938 31.382812 38.335938 C 33.622813 38.335938 34.374328 36.023109 34.736328 34.912109 C 35.261328 33.299109 37.227219 20.182141 37.449219 17.869141 C 37.600219 16.284141 36.939641 14.978953 35.681641 14.376953 C 35.210641 14.149953 34.672891 14.035156 34.087891 14.035156 z M 34.087891 16.035156 C 34.362891 16.035156 34.608406 16.080641 34.816406 16.181641 C 35.289406 16.408641 35.530031 16.914688 35.457031 17.679688 C 35.215031 20.202687 33.253938 33.008969 32.835938 34.292969 C 32.477938 35.390969 32.100813 36.335938 31.382812 36.335938 C 30.664813 36.335938 29.880422 36.08425 29.107422 35.53125 C 28.334422 34.97925 23.201281 31.536891 22.488281 31.087891 C 21.863281 30.693891 21.201813 29.711719 22.132812 28.761719 C 22.899812 27.979719 28.717844 22.332938 29.214844 21.835938 C 29.584844 21.464938 29.411828 21.017578 29.048828 21.017578 C 28.923828 21.017578 28.774141 21.070266 28.619141 21.197266 C 28.011141 21.694266 19.534781 27.366266 18.800781 27.822266 C 18.314781 28.124266 17.56225 28.341797 16.78125 28.341797 C 16.44825 28.341797 16.111109 28.301891 15.787109 28.212891 C 14.659109 27.901891 12.750187 27.322734 11.992188 27.052734 C 11.263188 26.792734 10.998047 26.543656 10.998047 26.097656 C 10.998047 25.463656 11.892938 25.026 12.835938 24.625 C 13.831938 24.202 31.066062 16.883437 32.414062 16.398438 C 33.038062 16.172438 33.608891 16.035156 34.087891 16.035156 z"/></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

1
vk.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.4 KiB