laba2 html
42
laba2/ip laba2/.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
65
laba2/ip laba2/about us.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">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
|
||||
aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link active" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="about-us-section">
|
||||
<div class="container-fluid">
|
||||
<div class="group-text">
|
||||
<div class="up-text">
|
||||
<h1>О нас</h1>
|
||||
</div>
|
||||
<div class="down-text">
|
||||
<h3>Магазины в офлайне и в онлайне</h3>
|
||||
<p>Apple помогает оптимизировать работу крупнейших розничных компаний — от кассовых операций до управления на
|
||||
высшем уровне. Устройства Apple и мощную платформу приложений просто использовать и внедрять. А для
|
||||
мобильных сотрудников они предоставляют эффективные инструменты, которые помогают наладить рабочий процесс в
|
||||
магазине и предложить каждому посетителю качественное обслуживание, чтобы выгодно отличаться от конкурентов.
|
||||
Передовые функции безопасности, экосистема надёжных корпоративных партнёров, технологии машинного обучения и
|
||||
дополненная реальность на устройствах — будущее розничной торговли строится на платформе Apple.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
74
laba2/ip laba2/admin.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<div class="admin-header"><a class="nav-link" href="admin.html">Администратор</a></div>
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="sing-section">
|
||||
<div class="container-fluid">
|
||||
<div class="border-sin">
|
||||
<form class="form-admin">
|
||||
<p class="title-admin">Добавление товара</p>
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">Название</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">Цена</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- <div class="add-picture">
|
||||
<button type="submit" class="btn btn-primary">Добавить фото</button>
|
||||
</div> -->
|
||||
<div class="mb-3">
|
||||
<label for="formFile" class="form-label">Фото</label>
|
||||
<input class="form-control" type="file" id="formFile">
|
||||
</div>
|
||||
|
||||
<div class="add-tovar">
|
||||
<button type="submit" class="btn btn-primary">Добавить товар</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
193
laba2/ip laba2/catalog.html
Normal file
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"> <img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
|
||||
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<div class="admin-header"><a class="nav-link" href="admin.html">Администратор</a></div>
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link active" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="catalog-section">
|
||||
<div class="container-fluid">
|
||||
<div class="title-one">
|
||||
<h2>Наши продукты</h2>
|
||||
</div>
|
||||
<div class="row gx-5">
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4 col-xxl-3">
|
||||
<div class="card">
|
||||
<img src="images/iphone_14_pro.png" class="card-img-top" alt="...">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">iPhone 13 Pro</h5>
|
||||
<p class="card-text">125 999 ₽</p>
|
||||
<!-- <div class="button-center">
|
||||
<a href="#" class="btn btn-primary">купить</a>
|
||||
</div> -->
|
||||
<div class="buttom-admin">
|
||||
<button class="button-edit" alt="ред"></button>
|
||||
<button class="button-delete" alt="ред"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="what-buy">
|
||||
<h3>Где купить?</h3>
|
||||
<p>Вы можете приобрести товар у реселлера или оператора
|
||||
сотовой связи. Выбирайте любой удобный вариант.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
19
laba2/ip laba2/data.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"posts": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "json-server",
|
||||
"author": "typicode"
|
||||
}
|
||||
],
|
||||
"comments": [
|
||||
{
|
||||
"id": 1,
|
||||
"body": "some comment",
|
||||
"postId": 1
|
||||
}
|
||||
],
|
||||
"profile": {
|
||||
"name": "typicode"
|
||||
}
|
||||
}
|
1
laba2/ip laba2/images/icons8-ос-mac (4).svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="#a8a9ba" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"/></svg>
|
After Width: | Height: | Size: 1.0 KiB |
BIN
laba2/ip laba2/images/iphone_14_pro.png
Normal file
After Width: | Height: | Size: 329 KiB |
BIN
laba2/ip laba2/images/michal-kubalczyk-tdMu8W9NTnY-unsplash.jpg
Normal file
After Width: | Height: | Size: 979 KiB |
49
laba2/ip laba2/index.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="index-section">
|
||||
<div class="index-page">
|
||||
<div class="title">
|
||||
<p>APPLE</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
4627
laba2/ip laba2/package-lock.json
generated
Normal file
27
laba2/ip laba2/package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"vite": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"build": "vite build",
|
||||
"rest": "json-server --watch data.json -p 8081",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"prod": "npm-run-all build --parallel serve rest",
|
||||
"start": "vite"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "6.4.2",
|
||||
"bootstrap": "^5.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "8.50.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-plugin-import": "2.28.1",
|
||||
"http-server": "14.1.1",
|
||||
"json-server": "0.17.4",
|
||||
"npm-run-all": "4.1.5",
|
||||
"vite": "4.4.9"
|
||||
}
|
||||
}
|
63
laba2/ip laba2/singin.html
Normal file
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link active" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="sing-section">
|
||||
<div class="container-fluid">
|
||||
<div class="border-sin">
|
||||
<form>
|
||||
<p class="title-sign">Вход</p>
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">E-mail</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">Пароль</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="krug">
|
||||
<button type="submit" class="btn btn-primary">Войти</button>
|
||||
</div>
|
||||
<p class="string">У вас еще нет аккаунта? <a class="nav-link" href="singup.html">Зарегистрироваться</a></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
70
laba2/ip laba2/singup.html
Normal file
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link" href="support.html">Поддержка</a>
|
||||
<a class="nav-link active" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="sing-section">
|
||||
<div class="container-fluid">
|
||||
<div class="border-sin">
|
||||
<form>
|
||||
<p class="title-sign">Регистрация</p>
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">Логин</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">E-mail</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="margin-admin">Пароль</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
|
||||
<div class="krug2">
|
||||
<button type="submit" class="btn btn-primary">Зарегистрироваться</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
BIN
laba2/ip laba2/styles/fon7.jpg
Normal file
After Width: | Height: | Size: 867 KiB |
BIN
laba2/ip laba2/styles/icons8-редактировать-64.png
Normal file
After Width: | Height: | Size: 437 B |
BIN
laba2/ip laba2/styles/icons8-удалить-64.png
Normal file
After Width: | Height: | Size: 368 B |
584
laba2/ip laba2/styles/style.css
Normal file
@ -0,0 +1,584 @@
|
||||
/* header */
|
||||
.navbar-brand>img {
|
||||
width: 25px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.container-fluid {
|
||||
margin-left: 140px;
|
||||
margin-right: 140px;
|
||||
}
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar-collapse {
|
||||
flex-grow: 0;
|
||||
}
|
||||
/* фон */
|
||||
.index-section {
|
||||
margin-top: 55.6px;
|
||||
}
|
||||
|
||||
/* главная */
|
||||
|
||||
.index-page {
|
||||
background-image: url("fon7.jpg");
|
||||
background-size: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
}
|
||||
.title {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title>p {
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
Justify-content: flex-end;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
/* каталог */
|
||||
|
||||
.catalog-section {
|
||||
display: flex;
|
||||
margin-top: 55.6px;
|
||||
}
|
||||
|
||||
.title-one>h2 {
|
||||
font-size: 35px;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
|
||||
}
|
||||
.main-margin-for-card {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
}
|
||||
.col-md-6 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.col-lg-4 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.col-xxl-3 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
align-items: center;
|
||||
}
|
||||
.card>img {
|
||||
width: 75px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
|
||||
.what-buy {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.what-buy>h3 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.buttom-admin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.button-edit {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
background-image: url('icons8-редактировать-64.png');
|
||||
background-size: cover;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.button-delete {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: none;
|
||||
background-color: #ffffff;
|
||||
background-image: url('icons8-удалить-64.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* войти */
|
||||
.title-sign {
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.sing-section {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.border-sin {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 500px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.krug {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.krug>.btn-primary {
|
||||
border-radius: 20px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.string {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.string>.nav-link {
|
||||
color: #0d6efd;
|
||||
font-weight: 700;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.krug2 {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.krug2>.btn-primary {
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* страница админа */
|
||||
|
||||
.admin-header>a {
|
||||
color: rgb(133, 203, 253);
|
||||
}
|
||||
|
||||
.margin-admin {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.title-admin {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-admin {
|
||||
width: 300px;
|
||||
}
|
||||
/* .add-picture {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.add-picture>.btn-primary {
|
||||
background: #000000;
|
||||
border-color:#000000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add-picture>.btn-primary:hover {
|
||||
background: #333333;
|
||||
border-color: #606060;
|
||||
}
|
||||
|
||||
.add-picture>.btn-primary:active {
|
||||
background: #333333;
|
||||
border-color: #606060;
|
||||
} */
|
||||
|
||||
.add-tovar {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-tovar >.btn-primary {
|
||||
border-radius: 5px;
|
||||
width: 160px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* поддержка */
|
||||
|
||||
.support-section {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.top-picture {
|
||||
background-image: url("support.jpg");
|
||||
background-size: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 450px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
}
|
||||
.title-support {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title-support>p {
|
||||
font-weight: 500;
|
||||
font-size: 50px;
|
||||
color:#ffffff;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.conteiner-support {
|
||||
margin-top: 40px;
|
||||
max-width: 450px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* о нас */
|
||||
|
||||
.about-us-section {
|
||||
/* height: 100vh; */
|
||||
margin-top: 55.6px;
|
||||
background-color: #000000;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.up-text {
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
.up-text>h1 {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.down-text {
|
||||
display: flex;
|
||||
margin-top: 75px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.down-text>h3 {
|
||||
margin-right: 100px;
|
||||
font-size: 35px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.down-text>p {
|
||||
max-width: 630px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.down-text>h3 {
|
||||
margin-right: 70px;
|
||||
font-size: 30px;
|
||||
min-width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.down-text>h3 {
|
||||
margin-right: 50px;
|
||||
font-size: 25px;
|
||||
min-width: 280px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.down-text {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.down-text>p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.container-fluid {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.title>p {
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
}
|
||||
.navbar-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.what-buy {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
width: 300px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 18px;
|
||||
}
|
||||
form {
|
||||
width: 400px;
|
||||
}
|
||||
.up-text {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.title-support>p {
|
||||
font-size: 33px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
.title-support>p {
|
||||
font-size: 30px;
|
||||
}
|
||||
.conteiner-support {
|
||||
max-width: 350px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 20px;
|
||||
}
|
||||
.content {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.navbar-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.what-buy {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
width: 250px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.what-buy>p {
|
||||
font-size: 15px;
|
||||
}
|
||||
form {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.krug2>.btn-primary {
|
||||
width: 130px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.up-text {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 20px;
|
||||
min-width: 50px;
|
||||
}
|
||||
.down-text>p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.krug>.btn-primary {
|
||||
width: 100px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.string {
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-admin {
|
||||
width: 200px;
|
||||
}
|
||||
.title-sign {
|
||||
font-size: 18px;
|
||||
}
|
||||
.title-support>p {
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.conteiner-support {
|
||||
max-width: 260px;
|
||||
}
|
||||
.call-as-about {
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
font-size: 14px;
|
||||
}
|
||||
.what-buy>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 325px) {
|
||||
.title>p {
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
}
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar-text {
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.what-buy {
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
width: 200px;
|
||||
}
|
||||
.what-buy>h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.what-buy>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
.col-xxl-3 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
width: 230px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
.card>img {
|
||||
width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 280px) {
|
||||
.card {
|
||||
width: 140px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card>img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.what-buy {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.form-admin {
|
||||
width: 150px;
|
||||
}
|
||||
.up-text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.up-text>h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.down-text>h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.down-text>p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
BIN
laba2/ip laba2/styles/support.jpg
Normal file
After Width: | Height: | Size: 618 KiB |
61
laba2/ip laba2/support.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="fixed-top">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="images/icons8-ос-mac (4).svg" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Переключатель навигации">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="about us.html">О нас</a>
|
||||
<a class="nav-link" href="catalog.html">Каталог</a>
|
||||
<a class="nav-link active" href="support.html">Поддержка</a>
|
||||
<a class="nav-link" href="singin.html">Войти</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="support-section ">
|
||||
<div class="top-picture">
|
||||
<div class="title-support">
|
||||
<p>Служба поддержки Apple</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="container-fluid">
|
||||
<div class="conteiner-support">
|
||||
<h3 class="call-as-about">Расскажите нам о проблеме</h3>
|
||||
<p class="content">
|
||||
Расскажите подробнее, и мы предложим лучшее решение. Напишите нам на электронную почту:
|
||||
applesupport@mail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer>
|
||||
<nav class="navbar bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-text">
|
||||
Kozlovanastya260104@gmail.com
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|