laba2 html

This commit is contained in:
Nastya_Kozlova 2023-11-17 14:46:26 +04:00
parent 8fba095f11
commit 924c080763
19 changed files with 5875 additions and 0 deletions

42
laba2/ip laba2/.gitignore vendored Normal file
View 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

View 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
View 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
View 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
View File

@ -0,0 +1,19 @@
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 329 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 979 KiB

49
laba2/ip laba2/index.html Normal file
View 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

File diff suppressed because it is too large Load Diff

View 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"
}
}

View 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>

View 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 867 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 437 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 368 B

View 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;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 KiB

View 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>