laba2
14
laba2/.gitignore
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
65
laba2/about.html
Normal file
@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">О нас</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Отзывы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Связаться с нами</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container text-center my-10">
|
||||
<h2>О НАС</h2>
|
||||
<div class="about_text">
|
||||
<ul>
|
||||
<li>
|
||||
Мы команда профессионалов, которая поможет воплотить в жизнь все
|
||||
ваши смелые идеи
|
||||
</li>
|
||||
<li>Мы постоянно совершенствуемся и ищем подход к каждому клиенту</li>
|
||||
<li>
|
||||
Молодые сотрудники с многолетним опытом, которые ответственно
|
||||
относятся к своему делу
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
69
laba2/admin.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="applications.html">Заявки</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Режим редактирования</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>ВХОД ДЛЯ АДМИНИСТРАТОРА</h2>
|
||||
</div>
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputEmail1" class="form-label">Логин</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="exampleInputEmail1"
|
||||
aria-describedby="emailHelp"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleInputPassword1" class="form-label">Пароль</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="exampleInputPassword1"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Вход</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
95
laba2/application_form.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin.html">Режим администратора</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">О нас</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Отзывы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Связаться с нами</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>СВЯЗЬ С НАМИ</h2>
|
||||
</div>
|
||||
<form method="post">
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Ваше ФИО"
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Желаемая услуга"
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="datetime-local"
|
||||
name="data"
|
||||
placeholder="Дата записи: ДД.ММ.ГГ"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
placeholder="Ваш номер телефона"
|
||||
required
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Отправить</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
89
laba2/applications.html
Normal file
@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin.html">Режим администратора</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="editing.html">Режим редактирования</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>ЗАЯВКИ</h2>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr bgcolor="#775860">
|
||||
<th scope="col" width="200" height="100">ФИО</th>
|
||||
<th scope="col" width="200">Услуга</th>
|
||||
<th scope="col" width="200">Дата записи</th>
|
||||
<th scope="col" width="200">Номер телефона</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row" height="70"></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
213
laba2/css/style.css
Normal file
@ -0,0 +1,213 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #d3b09d;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #775860;
|
||||
font-size: 20px;
|
||||
backdrop-filter: blur(30px);
|
||||
}
|
||||
.navbar-brand {
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.banner {
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #775860;
|
||||
}
|
||||
.container-fluid h1 {
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
padding-top: 7%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
.btn-beauty {
|
||||
background-color: #775860;
|
||||
border: 2px solid #775860;
|
||||
font-size: 30px;
|
||||
border-radius: 15px;
|
||||
color: white;
|
||||
}
|
||||
.about_text {
|
||||
text-align: left;
|
||||
color: #775860;
|
||||
font-size: 40px;
|
||||
}
|
||||
h2 {
|
||||
color: #775860;
|
||||
font-size: 60px;
|
||||
}
|
||||
.card {
|
||||
padding: 2em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
margin: 20px;
|
||||
}
|
||||
.about_text {
|
||||
font-size: 25px;
|
||||
}
|
||||
.navbar-brand {
|
||||
font-size: 15px;
|
||||
}
|
||||
img {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
max-width: 85%;
|
||||
}
|
||||
.img_options {
|
||||
max-width: 250px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.container-fluid h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.btn-beauty {
|
||||
max-width: 80%;
|
||||
}
|
||||
.card {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.col p {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.rounded-img {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
/* Для экранов шириной 768px и больше */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="datetime-local"],
|
||||
textarea {
|
||||
width: 50%; /* Уменьшенная ширина на больших экранах */
|
||||
margin: 0 auto; /* Центрирует элемент горизонтально */
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
/* Для экранов шириной 767px и меньше */
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="datetime-local"] {
|
||||
max-width: 90%;
|
||||
}
|
||||
h2 {
|
||||
margin: 20px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.form-text {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form div {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
button[type="submit"] {
|
||||
background-color: #775860;
|
||||
border: 2px solid #775860;
|
||||
margin-top: 15px;
|
||||
width: 150px;
|
||||
height: 70px;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.form-text {
|
||||
border-radius: 15px;
|
||||
}
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="datetime-local"],
|
||||
textarea {
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
border: 1px solid #775860;
|
||||
width: 90%;
|
||||
margin: 0 auto; /* Центрирует элемент горизонтально */
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
/* Для экранов шириной 768px и больше */
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="datetime-local"],
|
||||
textarea {
|
||||
width: 50%; /* Уменьшенная ширина на больших экранах */
|
||||
margin: 0 auto; /* Центрирует элемент горизонтально*/
|
||||
}
|
||||
}
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
border: 3px solid;
|
||||
border-color: black;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
@media (max-width: 836px) {
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
margin: 20px;
|
||||
}
|
||||
button[type="submit"] {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.img_options {
|
||||
height: auto;
|
||||
width: 350px;
|
||||
margin-top: 20px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
button[type="submit"] {
|
||||
width: 140px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
add {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
add .container {
|
||||
width: 90%;
|
||||
}
|
83
laba2/editing.html
Normal file
@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="applications.html">Заявки</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="admin.html">Режим администратора</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>ДОБАВИТЬ УСЛУГУ</h2>
|
||||
</div>
|
||||
<add>
|
||||
<div class="container">
|
||||
<div class="input-group mt-5 mb-3">
|
||||
<span class="input-group-text">₽</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
aria-label="Amount (to the nearest dollar)"
|
||||
/>
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Название"
|
||||
aria-label="Username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">Добавьте текст</span>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
id="inputGroupFile04"
|
||||
aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Добавить</button>
|
||||
</div>
|
||||
</add>
|
||||
</body>
|
||||
</html>
|
BIN
laba2/images/centerpicture.jpg
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
laba2/images/circle1.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
laba2/images/circle2.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
laba2/images/eyelashes.jpg
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
laba2/images/haircut.jpg
Normal file
After Width: | Height: | Size: 72 KiB |
BIN
laba2/images/nails.jpg
Normal file
After Width: | Height: | Size: 39 KiB |
BIN
laba2/images/reviews_eyelushes.jpg
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
laba2/images/reviews_haircut.jpg
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
laba2/images/reviews_nails.jpg
Normal file
After Width: | Height: | Size: 15 KiB |
69
laba2/index.html
Normal file
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Главная страница</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<style>
|
||||
img {
|
||||
height: auto;
|
||||
width: 550px;
|
||||
margin: 30px 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
button {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">О нас</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Отзывы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Связаться с нами</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
<img src="images/centerpicture.jpg" alt="beauty" align="left" />
|
||||
<div class="banner">
|
||||
<h1>Наши клиенты заслуживают самого лучшего!</h1>
|
||||
<div class="container text-center my-5 mx-auto">
|
||||
<a href="services.html" class="btn btn-beauty">Посмотреть услуги</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
3684
laba2/package-lock.json
generated
Normal file
20
laba2/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"build": "vite build",
|
||||
"prod": "npm-run-all build serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "5.3.2",
|
||||
"@fortawesome/fontawesome-free": "6.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-server": "14.1.1",
|
||||
"vite": "4.4.9",
|
||||
"npm-run-all": "4.1.5"
|
||||
}
|
||||
}
|
2
laba2/readme.md
Normal file
@ -0,0 +1,2 @@
|
||||
# PIbd-22_Bulatova_K.R_Internet_Programming
|
||||
|
76
laba2/reviews.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">О нас</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Отзывы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Связаться с нами</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>ОТЗЫВЫ</h2>
|
||||
</div>
|
||||
<div class="container text-center">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img
|
||||
src="images/reviews_eyelushes.jpg"
|
||||
class="img_options"
|
||||
alt="eye"
|
||||
/>
|
||||
<p>В этом салоне работают настоящие профессионалы!!</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img
|
||||
src="images/reviews_haircut.jpg"
|
||||
class="img_options"
|
||||
alt="hair"
|
||||
/>
|
||||
<p>Спасибо мастеру Елене за качественную стрижку!</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<img src="images/reviews_nails.jpg" class="img_options" alt="nails" />
|
||||
<p>Очень красивые ногти и широкий выбор цветовой палитры :)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
109
laba2/services.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Булатова К. Сайт компании</title>
|
||||
<link
|
||||
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<style>
|
||||
.services_images {
|
||||
width: 20%;
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="index.html"
|
||||
>Тяжелый люкс <br />сеть салонов красоты</a
|
||||
>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html">О нас</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="reviews.html">Отзывы</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="application_form.html"
|
||||
>Связаться с нами</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="about text-center my-20 mx-auto">
|
||||
<h2>
|
||||
НАШИ <br />
|
||||
УСЛУГИ
|
||||
</h2>
|
||||
</div>
|
||||
<div class="container my-5">
|
||||
<div class="row row-cols-1 row-cols-md-3 row-cols-lg-3 g-5">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="images/eyelashes.jpg" class="rounded-img" alt="" />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Оформление ресниц</h5>
|
||||
<h6 class="card-title">от 1500 рублей</h6>
|
||||
<p class="card-text">
|
||||
- Наращивание ресниц
|
||||
<br />
|
||||
- Снятие ресниц<br />
|
||||
- Коррекция ресниц<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="images/haircut.jpg" class="rounded-img" alt="" />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Услуги парикмахера</h5>
|
||||
<h6 class="card-title">от 700 рублей</h6>
|
||||
<p class="card-text">
|
||||
- Женская стрижка<br />
|
||||
- Наращивание волос<br />
|
||||
- Ботокс для волос<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<img src="images/nails.jpg" class="rounded-img" alt="KITTI" />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Маникюр</h5>
|
||||
<h6 class="card-title">от 1000 рублей</h6>
|
||||
<p class="card-text">
|
||||
- Наращивание ногтей<br />
|
||||
- Покрытие гель-лаком<br />
|
||||
- Снятие покрытия<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
14
laba2/vite.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
page2: resolve(__dirname, 'page2.html'),
|
||||
page3: resolve(__dirname, 'page3.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|