First commit

This commit is contained in:
Галина Федоренко 2023-11-12 13:22:57 +04:00
commit 31a57b7c5c
22 changed files with 1064 additions and 0 deletions

130
Admin_Pannel.html Normal file
View File

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/Admin_Pannel_Style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="navBar">
<div class="navBar-header">
<p>
Книжный <br />
подвальчик
</p>
</div>
<div class="navBarMenu">
<ul>
<li>
<a href="#"><span> Администраторы </span></a>
</li>
<li>
<a href="#"><span> Пользователи </span></a>
</li>
<li>
<a href="#"><span> Книги </span></a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="contentNav">
<div class="contentNav-Amount">
<p>ALL(10)</p>
</div>
<div class="contentNav-AddButton">
<button>
<p>ADD NEW</p>
</button>
</div>
<div class="contentNav-DeleteButton">
<button>
<p>DELETE</p>
</button>
</div>
</div>
<div class="contentTable">
<table class="tg">
<colgroup>
<col style="width: 25px" />
<col style="width: 301px" />
<col style="width: 143px" />
<col style="width: 163px" />
<col style="width: 100px" />
</colgroup>
<thead>
<tr>
<th class="tg-7803">
</th>
<th class="tg-0lax">Имя</th>
<th class="tg-0lax">Логин</th>
<th class="tg-0lax">Emal</th>
<th class="tg-0pky">Action</th>
</tr>
</thead>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Петров Иван</td>
<td class="tg-0lax">petya875</td>
<td class="tg-0lax">xemt23@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Сергеева Виктория</td>
<td class="tg-0lax">vikwin</td>
<td class="tg-0lax">figo64@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Федоров Артем</td>
<td class="tg-0lax">bookinist</td>
<td class="tg-0lax">figo64@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Корпеев Даниил</td>
<td class="tg-0lax">korp0qwer</td>
<td class="tg-0lax">teiv37@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Малкин Максим</td>
<td class="tg-0lax">malik926</td>
<td class="tg-0lax">gra09@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
<tr>
<td class="tg-0lax">
<img src="./images/unchecked.png" alt=""/>
</td>
<td class="tg-0lax">Емельянова Дарья</td>
<td class="tg-0lax">hyper15</td>
<td class="tg-0lax">xoux75@yopmail.com</td>
<td class="tg-0lax">...</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

67
Book.html Normal file
View 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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styleCatalog.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="container-fluid" style="padding: 0;">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #452A21;">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
</ul>
<ul class="navbar-nav" style="margin-left: auto;">
<li class="nav-item">
<a class="nav-link" href="Catalog.html">Каталог</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignIn.html">Войти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="images/fil-kam-big.png" alt="Обложка книги" style="display: block;
margin-left: auto; margin-right: auto; border-radius: 10px; max-width: 60%; margin-top: 15px;">
</div>
<div class="col-lg-8 col-md-6 col-sm-12">
<p class="about">Книга, покорившая мир, эталон литературы для читателей всех возрастов,
синоним успеха. Книга, сделавшая Джоан Роулинг самым читаемым писателем
современности. Книга, ставшая культовой уже для нескольких поколений.
"Гарри Поттер и Философский камень" - история начинается.
</p>
<div class="container column " style="display: flex; flex-direction: column; padding-bottom: 50px;">
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
<a href="#link" class="btn btn-custom" role="button">Читать отрывок</a>
</div>
</div>
</div>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
</body>
</html>

123
Catalog.html Normal file
View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styleCatalog.css">
<link rel="stylesheet" href="styles/modal.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="container-fluid p-0" >
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
</ul>
<ul class="navbar-nav mt-auto" >
<li class="nav-item">
<a class="nav-link" href="Catalog.html">Каталог</a>
</li>
<li class="nav-item">
<a class="nav-link" id="open-modal-link" style="cursor: pointer;">Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignIn.html">Войти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="book">
<img src="images/mast-marg.png" alt="Обложка книги 1">
<h3>Мастер и Маргарита, М.А. Булгагов</h3>
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
<div class="book">
<img src="images/mast-marg.png" alt="Обложка книги 1">
<h3>Мастер и Маргарита, М.А. Булгагов</h3>
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="book">
<img src="images/sob-pari.png" alt="Обложка книги 2">
<h3>Собор парижской Богоматери, В. Гюго</h3>
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
<div class="book">
<img src="images/sob-pari.png" alt="Обложка книги 2">
<h3>Собор парижской Богоматери, В. Гюго</h3>
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="book">
<img src="images/fil-kam.png" alt="Обложка книги 3">
<h3>Гарри Поттер и философский камень, Дж.К. Роулинг</h3>
<a href="Book.html" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
<div class="book">
<img src="images/fil-kam.png" alt="Обложка книги 3">
<h3>Гарри Поттер и философский камень, Дж.К. Роулинг</h3>
<a href="Book.html" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="book">
<img
style="padding-bottom: 7.73px"
src="images/groz-per.png"
alt="Обложка книги 4"
/>
<h3>Грозовой перевал, Э. Бронте</h3>
<a href="#link" class="btn btn-custom" role="button">Подробнее</a>
<a href="#link" class="btn btn-custom" role="button">В избранное</a>
</div>
</div>
</div>
<div class="modal" id="my-modal">
<div class="modal-box">
<button id="close-modal-btn" class="modal-close">
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
</svg>
</button>
<p>Избранное</p>
<ul>
<p>Book 1</p>
</ul>
</div>
</div>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
<script src="scripts/mainPage.js"></script>
</body>
</html>

40
SignIn.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styleSigh.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="background-image">
<div class="container">
<a class="nav-item" href="index.html">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<div class="sign-in-container">
<h2 class="custom-h">Добро пожаловать!</h2>
<form id="registrationForm" action="">
<div class="row justify-content-center">
<input type="text" class="form-control" id="username" placeholder="логин">
<input type="password" class="form-control" id="password" placeholder="пароль">
<button type="submit" class="btn btn-custom">ВОЙТИ</button>
<p class="custom-text">Ещё нет аккаунта? <a href="SignUp.html" class="custom-a">Зарегистрироваться</a></p>
</div>
</form>
</div>
</div>
</div>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
<script src="scripts/index.js"></script>
</body>
</html>

41
SignUp.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styleSigh.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="background-image">
<div class="container">
<a class="nav-item" href="index.html">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<div class="sign-up-container">
<h2 class="custom-h">Регистрация</h2>
<form id="registrationForm" action="">
<div class="row justify-content-center">
<input type="text" class="form-control" id="username" placeholder="логин">
<input type="text" class="form-control" id="email" placeholder="email">
<input type="password" class="form-control" id="password" placeholder="пароль">
<button type="submit" class="btn btn-custom" id="submitButton">ЗАРЕГИСТРИРОВАТЬСЯ</button>
<p class="custom-text">Уже есть аккаунт? <a href="SignIn.html" class="custom-a">Войти</a></p>
</div>
</form>
</div>
</div>
</div>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
<script src="scripts/index.js"></script>
</body>
</html>

BIN
images/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
images/backgroung_sign.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 878 KiB

BIN
images/book.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 531 B

3
images/cross.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
</svg>

After

Width:  |  Height:  |  Size: 298 B

BIN
images/fil-kam-big.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

BIN
images/fil-kam.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

BIN
images/groz-per.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
images/heart.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
images/mast-marg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

BIN
images/sob-pari.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

BIN
images/unchecked.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

82
index.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="styles/styleMain.css">
<link rel="stylesheet" href="styles/modal.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap" rel="stylesheet">
<title>Книжный подвальчик</title>
</head>
<body>
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M5 7.5H20C22.6522 7.5 25.1957 8.55357 27.0711 10.4289C28.9464 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 29.2098 48.6032 27.8033 47.1967C26.3968 45.7902 24.4891 45 22.5 45H5V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path id="Vector_2" d="M55 7.5H40C37.3478 7.5 34.8043 8.55357 32.9289 10.4289C31.0536 12.3043 30 14.8478 30 17.5V52.5C30 50.5109 30.7902 48.6032 32.1967 47.1967C33.6032 45.7902 35.5109 45 37.5 45H55V7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="Catalog.html">Каталог</a>
</li>
<li class="nav-item">
<a class="nav-link" id="open-modal-link" style="cursor: pointer;">Избранное</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignIn.html">Войти</a>
</li>
<li class="nav-item">
<a class="nav-link" href="SignUp.html">Зарегистрироваться</a>
</li>
</ul>
</div>
</nav>
<div class="container text-center">
<h1 class="display-4">Книжный подвальчик</h1>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<blockquote class="blockquote text-right">
<p>Без книг пуста человеческая жизнь. Книга не только наш друг, но и постоянный вечный спутник.</p>
<footer class="blockquote-footer">Д. Бедный</footer>
</blockquote>
</div>
</div>
</div>
</div>
<div class="modal" id="my-modal">
<div class="modal-box">
<button id="close-modal-btn" class="modal-close">
<svg width="24" height="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.11 2.697L2.698 4.11 6.586 8l-3.89 3.89 1.415 1.413L8 9.414l3.89 3.89 1.413-1.415L9.414 8l3.89-3.89-1.415-1.413L8 6.586l-3.89-3.89z" fill="#000"></path>
</svg>
</button>
<p>Избранное</p>
<ul>
<p>Book 1</p>
</ul>
</div>
</div>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center text-white">
Федоренко Галина, ПИбд-22
</footer>
<script src="scripts/mainPage.js"></script>
</body>
</html>

View File

@ -0,0 +1,170 @@
.tg {
border-collapse:collapse;
border-spacing:0;
}
.tg td{
border-bottom-width:1px;
border-color:black;
border-style:solid;
border-top-width:1px;
border-width:0px;
font-family:Arial, sans-serif;
font-size:14px;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg th{
border-bottom-width:1px;
border-color:black;
border-style:solid;
border-top-width:1px;
border-width:0px;
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg .tg-7803{
color:#ffffff;
text-align:left;
vertical-align:top
}
.tg .tg-0lax{
text-align:left;
vertical-align:top
}
.tg .tg-0pky{
border-color:inherit;
text-align:left;
vertical-align:top
}
.tg img{
height: 20px;
width: 20px;
}
li{
list-style-type: none;
}
ul{
margin-left: 10px;
padding-left: 10px;
}
button{
background-color: transparent;
border: 0px;
color: #ffffff;
}
body{
display: grid;
grid-template-areas: "navBar content";
grid-template-columns: 20% 80%;
}
.navBar{
grid-area: navBar;
background-color: #383F51;
color: #ffffff;
height: 1024px;
}
.navBar-header{
padding-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
padding-bottom: 10px;
filter: drop-shadow(10px 35px 25px rgba(0, 0, 0, 0.25));
background: #383F51;
color: #FFF;
text-align: center;
font-family: 'Source Serif 4';
font-size: 35px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.navBarMenu li{
padding-left: 30px;
padding-top: 30px;
color: #FFF;
font-family: Jost;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.navBar a{
text-decoration: none;
color: #ffffff;
}
.content{
display: grid;
grid-area: content;
grid-template-areas: "contentNav" "contentTable";
grid-template-rows: 10% 90%;
}
.contentNav{
grid-area: contentNav;
display: grid;
grid-template-areas: "contentNav-Amount contentNav-AddButton contentNav-DeleteButton";
justify-items: start;
grid-template-columns: 15% 20% 20%;
padding-left: 70px;
padding-top: 50px;
}
.contentNav-Amount{
grid-area: contentNav-Amount;
}
.contentNav-AddButton{
grid-area: contentNav-AddButton;
border-radius: 24px;
width: 157px;
height: 41px;
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
background: #6052f6 !important;
}
.contentNav-DeleteButton{
grid-area: contentNav-DeleteButton;
border-radius: 24px;
width: 157px;
height: 41px;
color: #FFF;
text-align: center;
font-feature-settings: 'clig' off, 'liga' off;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
background: #E72727 !important;
}
.contentTable{
grid-area: contentTable;
padding-left: 50px;
}
@media (max-width: 767px){
body {
grid-template-columns: 30% 70%;
}
.navBar-header{
font-size: 15px;
}
.navBarMenu li {
padding-left: 0;
font-size: 12px;
}
}

56
styles/modal.css Normal file
View File

@ -0,0 +1,56 @@
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: 99998;
background-color: rgba(0, 0, 0, 0.7 );
display: grid;
align-items: center;
justify-content: center;
overflow-y: auto;
visibility: hidden;
opacity: 0;
transition: opacity .4s, visibility .4s;
}
.modal-box {
position: relative;
max-width: 500px;
padding: 50px;
z-index: 1;
margin: 30px 15px;
background-color: white;
border-radius: 15px;
box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.15);
transform: scale(0);
transition: transform .8s;
}
.modal-close {
position: absolute;
top: 8px;
right: 8px;
border: none;
background-color: transparent;
padding: 5px;
cursor: pointer;
}
.modal-close svg path {
transition: fill .4s;
}
.modal-close:hover svg path {
fill: rgb(175, 0, 0);
}
.modal.open {
visibility: visible;
opacity: 1;
}
.modal.open .modal-box {
transform: scale(1);
}

120
styles/styleCatalog.css Normal file
View File

@ -0,0 +1,120 @@
body {
margin: 0;
padding: 0;
background-color: #66442B;
}
.navbar {
background-color: #452A21;
}
.nav-item svg path {
transition: fill .4s;
}
.nav-item:hover svg path {
fill: #79584c;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.nav-link {
font-family: 'Jost', sans-serif;
font-size: 24px;
margin-right: 25px;
color: white !important;
}
.nav-link:hover{
color: #79584c !important;
}
.book {
padding: 15px;
text-align: center;
margin-bottom: 20px;
flex: 0 0 calc(25% - 30px);
}
.book img {
max-width: 60%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
}
.book h3 {
color: #FFF;
text-align: center;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-bottom: 10px;
height: 100px;
}
.book button {
width: 80%;
margin-top: 10px;
}
a.btn-custom {
border-radius: 8px;
width: 250px;
height: 50px;
margin-bottom: 20px;
background-color: #452B21;
color: #fff;
text-align: center;
font-family: Jost;
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: normal;
border: 2px solid #452B21;
}
a.btn-custom:hover {
background-color: #66442B;
border: 2px solid #66442B;
}
.footer {
font-family: 'Jost', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 0;
background-color: #452A21 !important;
z-index: 999;
}
.about {
margin-top: 20px;
color: white;
font-family: Jost;
text-align:justify;
font-size: 24px;
}
@media (max-width: 767px) {
a.btn-custom {
display: block;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.about {
margin-left: 15px;
margin-right: 15px;
font-size: 20px;
}
}

80
styles/styleMain.css Normal file
View File

@ -0,0 +1,80 @@
body {
background-image: url("/images/background.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}
.nav-link {
font-family: 'Jost', sans-serif;
font-size: 24px;
margin-right: 25px;
color: white !important;
}
.nav-link:hover{
color: #79584c !important;
}
.nav-item svg path {
transition: fill .4s;
}
.nav-item:hover svg path {
fill: #79584c;
}
.display-4 {
color: #FFF;
font-family: 'Source Serif 4';
font-size: 96px;
font-style: normal;
margin-top: 100px;
}
blockquote {
color: white;
font-family: 'Source Serif 4';
text-align: right;
font-size: 24px;
margin-top: 30px;
}
blockquote footer {
color: white !important;
font-family: 'Source Serif 4';
text-align: right;
font-size: 24px;
}
.footer {
font-family: 'Jost', sans-serif;
position: fixed;
bottom: 0;
width: 100%;
padding: 5px 0;
background-color: #452A21 !important;
z-index: 999;
}
@media (max-width: 767px) {
.nav-link {
font-size: 18px;
margin-right: 10px;
margin-left: 10px;
}
.display-4 {
font-size: 36px;
margin-top: 50px;
}
blockquote {
font-size: 18px !important;
margin-top: 20px;
}
blockquote footer {
font-size: 18px;
}
}

152
styles/styleSigh.css Normal file
View File

@ -0,0 +1,152 @@
body {
margin: 0;
padding: 0;
background-color: #452B21;
}
.nav-item svg path {
transition: fill .4s;
}
.nav-item:hover svg path {
fill: #79584c;
}
.background-image {
background-image: url("/images/backgroung_sign.png");
background-size: cover;
width: 50%;
height: 100vh;
display: inline-block;
}
.sign-in-container {
background-color: #ffffff;
border-radius: 15px;
padding: 20px;
width: 500px;
height: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.sign-up-container {
background-color: #ffffff;
border-radius: 15px;
padding: 20px;
width: 500px;
height: 475px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.custom-h {
color: #000;
text-align: center;
font-family: Jost;
font-size: 50px;
font-style: normal;
font-weight: 300;
line-height: normal;
margin-bottom: 20px;
}
.input-box {
border-radius: 8px;
font-size: 17px;
width: 450px;
height: 60px;
margin-bottom: 20px;
}
.form-control {
border-radius: 8px;
font-size: 17px;
width: 450px;
height: 60px;
margin-bottom: 20px;
}
.btn-custom {
border-radius: 8px;
width: 450px;
height: 60px;
background-color: #452B21;
margin-bottom: 20px;
color: #fff;
text-align: center;
font-family: Jost;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
border: 2px solid #452B21;
}
.btn-custom:hover {
background-color: #66442B;
border: 2px solid #66442B;
}
.custom-text {
color: #8C8C8C;
text-align: center;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.custom-a {
color: #452B21;
font-family: Jost;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.custom-a:hover {
color: #9c614a;
}
.error {
border-color: red !important;
background-color: rgba(255, 222, 222, 0.26) !important;
}
@media (max-width: 767px) {
.sign-in-container {
width: 290px;
height: 375px;
padding: 10px;
}
.sign-up-container {
width: 290px;
height: 425px;
padding: 10px;
}
.custom-h {
font-size: 28px;
}
.form-control {
width: 80%;
}
.btn-custom {
width: 80%;
font-size: 90%;
}
}