lab2
This commit is contained in:
Arkadiy Radaev
commit
8a5d83a2c2
24
Lab2/.gitignore
vendored
Normal file
24
Lab2/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
19
Lab2/data.json
Normal file
19
Lab2/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"
|
||||
}
|
||||
}
|
||||
91
Lab2/index.html
Normal file
91
Lab2/index.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 1</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<header>
|
||||
<img src="/img/Lada_vesta_sport.jpg" alt="" class="header__image">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index2.html">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="main">
|
||||
<h2 id="11" class="title text-uppercase text-center text-decoration-underline">Модельный ряд</h2>
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Vesta2.jpg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Vesta 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt">
|
||||
<ul class="car__text fs-4 text-white text-uppercase ps-0 lh-base">
|
||||
<li class="car__li">Подушка безопасности води теля и переднего пассажира</li>
|
||||
<li class="car__li">Электропривод и обогрев наружных зеркал</li>
|
||||
<li class="car__li">Аудиоподготовка</li>
|
||||
<li class="car__li">Кондиционер и охлаждающий вещевой ящик</li>
|
||||
</ul>
|
||||
<p class="text text-white fs-4 text-uppercase lh-base">
|
||||
Стильный, вместительный, комфортный универсал. Современное сочетание практичности и элегантности.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal" data-bs-target="#exampleModal">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Веста 2023 - это обновленная модель популярного автомобиля, сочетающая в себе современный дизайн, комфорт и надежность. Внешне Лада Веста 2023 имеет стильные и динамичные линии, которые придают ей современный и привлекательный вид.</p>
|
||||
<p>Салон Лады Весты 2023 обновлен и предлагает комфортабельное пространство для пассажиров. Интерьер выполнен с использованием качественных материалов, что создает приятную атмосферу в салоне. Кроме того, салон обладает хорошей шумоизоляцией, что позволяет пассажирам наслаждаться тихой и спокойной поездкой.</p>
|
||||
<p>Лада Веста 2023 оснащена современными технологиями, которые делают ее удобной и безопасной для водителя и пассажиров. Автомобиль оснащен системой информационно-развлекательного комплекса с сенсорным дисплеем, поддержкой Bluetooth и навигацией. Кроме того, Лада Веста 2023 предлагает различные опции связи, такие как поддержка Apple CarPlay и Android Auto.</p>
|
||||
<p>Что касается характеристик двигателя, Лада Веста 2023 предлагает различные варианты двигателей, включая бензиновые и дизельные варианты. Эти двигатели обладают достаточной мощностью для обеспечения комфортной и плавной поездки.</p>
|
||||
<p>В целом, Лада Веста 2023 - это надежный и современный автомобиль, который предлагает комфорт, безопасность и стильный дизайн. Она является отличным выбором для тех, кто ищет недорогой автомобиль с хорошими характеристиками.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
113
Lab2/index2.html
Normal file
113
Lab2/index2.html
Normal file
@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex justify-content-between">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Granta.jpg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Granta 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt text-white fs-4 text-uppercase lh-base">
|
||||
<p>Динамичный стиль и обтекаемые формы — признак автомобиля со спортивным характером. Но лифтбек Granta еще и потрясающе вместителен.</p>
|
||||
<p>Современный, технологичный, стремительный и стильный — автомобиль, каким он должен быть.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal" data-bs-target="#exampleModal1">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex mt-5 justify-content-between">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Largus.jpeg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Largus 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt text-white fs-4 text-uppercase lh-base">
|
||||
<p>Путешественник, партнер по бизнесу и член семьи — это LADA Largus: комфортный, яркий и функциональный.</p>
|
||||
<p>Топ-модель семейства Largus: комфорт, повышенная проходимость и яркий Cross-дизайн.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal" data-bs-target="#exampleModal2">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Modal 2 -->
|
||||
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Гранта 2023 - это обновленная модель автомобиля, которая сочетает в себе надежность, экономичность и функциональность. Внешне Гранта имеет современный и элегантный дизайн с чистыми линиями и стильными акцентами.</p>
|
||||
<p>Салон автомобиля предлагает комфортабельное пространство с удобными сиденьями и достаточным простором для пассажиров и груза. Качественные материалы используются в отделке, создавая приятную атмосферу в салоне.</p>
|
||||
<p>Лада Гранта 2023 оснащена современными технологиями, которые обеспечивают комфорт и удобство во время поездок. Внутри есть сенсорный дисплей, поддержка Bluetooth и навигация, а также опции связи с поддержкой Apple CarPlay и Android Auto.</p>
|
||||
<p>Двигатели Лады Гранта 2023 предлагаются в бензиновых и дизельных вариантах с достаточной мощностью для комфортной и экономичной поездки. Они обеспечивают хорошую динамику и эффективность топлива.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal 2 -->
|
||||
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Ларгус 2023 - это семейный автомобиль, предлагающий просторный салон и практичность для повседневных поездок. Он имеет вместительный багажник, что делает его идеальным выбором для семейных поездок или путешествий.</p>
|
||||
<p>Дизайн Лады Ларгус 2023 сочетает в себе элегантность и функциональность. Он имеет гладкие линии и современные акценты, которые придают ему стильный внешний вид. Внутренний интерьер обеспечивает комфорт и удобство для всех пассажиров. Просторные сиденья и достаточное пространство для ног создают приятную атмосферу в салоне.</p>
|
||||
<p>Лада Ларгус 2023 предлагает различные варианты двигателей, включая бензиновые и дизельные, с достаточной мощностью и экономичностью. Это позволяет выбрать подходящий вариант, который соответствует вашим потребностям в производительности и экономии топлива.</p>
|
||||
<p>В целом, Лада Ларгус 2023 - это надежный и практичный автомобиль, который предлагает комфорт и функциональность для всей семьи. Он идеально подходит для повседневных поездок и предлагает хороший баланс между простором, удобством и экономичностью.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
Lab2/index3.html
Normal file
100
Lab2/index3.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 3</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<div class="car bg-secondary mx-5 rounded-4 p-5 d-flex justify-content-between ">
|
||||
<div class="left d-flex flex-column">
|
||||
<img src="/img/Niva1.jpg" alt="" class="car__img">
|
||||
<h3 class="subtitle text-white">LADA Niva 2023</h3>
|
||||
</div>
|
||||
<div class="right d-flex flex-column">
|
||||
<div class="car__txt text-white fs-4 text-uppercase lh-base">
|
||||
<p>LADA Niva Travel — это мощь полного привода и постоянная готовность к приключениям. К приключениям с комфортом.</p>
|
||||
<p>Стиль, решительный характер, готовность к преодолению - в каждой детали.</p>
|
||||
</div>
|
||||
<button type="button" class="text-uppercase text-black" data-bs-toggle="modal" data-bs-target="#exampleModal">подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="32" class="title text-uppercase text-center text-decoration-underline">дилеры в ульяновске</h2>
|
||||
<div class="dilers p-5 d-flex">
|
||||
<div class="diler__text fs-4 d-flex flex-column justify-content-between">
|
||||
<div class="diler__item"><p class="fw-bold">АвтоРай, официальный дилер LADA</p>
|
||||
<p>Адрес: Московское ш., 17К (официальный дилер LADA)</p>
|
||||
</div>
|
||||
<div class="diler__item"><p class="fw-bold">Симбирск-Лада, официальный дилер LADA</p>
|
||||
<p>Адрес: просп. Созидателей, 27</p>
|
||||
</div>
|
||||
<div class="diler__item"><p class="fw-bold">Авто-центр</p>
|
||||
<p>Адрес: ул. Урицкого, 31, стр. 1</p>
|
||||
</div>
|
||||
<div class="diler__item"><p class="fw-bold">Авторай-Datsun</p>
|
||||
<p>Адрес: Московское ш., 1Д</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diler__img">
|
||||
<img class="diler__image" src="/img/Авторай.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Подробная информация о машине</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Лада Нива 2023 - это легендарный внедорожник, который сочетает в себе надежность, проходимость и универсальность. Он представляет собой идеальный выбор для путешествий по бездорожью и приключений на природе.</p>
|
||||
<p>Внешне Лада Нива 2023 имеет современный и стильный дизайн, сохранив при этом свою узнаваемую силуэтную форму. Его компактные размеры и высокий клиренс позволяют преодолевать любые преграды и преодолевать сложные дорожные условия.</p>
|
||||
<p>Лада Нива 2023 оборудована мощным и надежным двигателем, который обеспечивает достаточную мощность и крутящий момент для преодоления самых сложных дорожных условий. Он также оснащен системами полного привода и блокировкой межосевого дифференциала, что позволяет ему справляться с грязью, снегом и другими труднопроходимыми поверхностями.</p>
|
||||
<p>В целом, Лада Нива 2023 - это надежный, проходимый и универсальный внедорожник, который подходит для любителей активного отдыха и путешествий на природе. Он предлагает комфортный салон, мощный двигатель и надежные системы безопасности, делая его прекрасным выбором для тех, кто ищет автомобиль, способный справиться с любыми дорожными условиями.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
66
Lab2/index4.html
Normal file
66
Lab2/index4.html
Normal file
@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 4</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main p-4">
|
||||
<h2 class="title text-uppercase text-decoration-underline text-center mt-5">покупателям</h2>
|
||||
<div class="box d-flex">
|
||||
<div class="box__text text-white fs-5 lh-base p-4 ">
|
||||
<p>Lada теперь можно купить через интернет, хотя за автомобилем всё-таки придется ехать в дилерский центр. Тем не менее, новый онлайн-сервис позволяет сэкономить время на выборе машины и зафиксировать ее стоимость, а вот избежать дилерских наценок вряд ли удастся.</p>
|
||||
<p>АвтоВАЗ недавно запустил онлайн-витрину новых автомобилей, имеющихся в наличии у официальных дилеров на территории России. Купить через интернет можно пока только три модели Lada, которые выпускаются на сегодняшний день: "бюджетник" Granta, а также внедорожники Niva Legend и Niva Travel. Сервис позволяет пройти путь от выбора автомобиля до финальной сделки дистанционно.</p>
|
||||
</div>
|
||||
<div class="box__image">
|
||||
<img src="/img/Goru.jpg" alt="" class="box__img">
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="42" class="title text-decoration-underline text-uppercase text-center">владельцам</h2>
|
||||
<div class="box d-flex">
|
||||
<div class="box__text text-white fs-4 lh-base p-4">
|
||||
<p>Перед началом эксплуатации Вашего автомобиля внимательно изучите руководство! В нем Вы ознакомитесь с особенностями его конструкции, органами управления, оборудованием, а также с требованиями безопасности и правилами использования. Автомобиль обладает высокими динамическими качествами, поэтому в начальный период эксплуатации, независимо от Вашего водительского стажа, рекомендуем проявлять осторожность, пока полностью не освоите технику его вождения.</p>
|
||||
</div>
|
||||
<div class="box__image">
|
||||
<img src="/img/showroom.jpg" alt="" class="box__img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
72
Lab2/index5.html
Normal file
72
Lab2/index5.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/styles/style.css">
|
||||
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Page 5</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wraper">
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top bg-danger-subtle" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="index.html"><img src="/img/Logo_lada.png" alt=""></a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav fs-3">
|
||||
<li class="nav-item"><a class="nav-link" href="index.html#11">Модельный ряд</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index3.html#32">Дилеры</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html">Покупателям</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index4.html#42">Владельцам</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index5.html">Информация о компании</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Личный кабинет</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<h2 class="title text-decoration-underline text-uppercase text-center">информация о компании</h2>
|
||||
<div class="text_block">
|
||||
<h3 class="subtitle_five text-uppercase p-4">Научно-технический центр</h3>
|
||||
<div class="text p-4">
|
||||
<p></p>
|
||||
<p>8 апреля 1986 года состоялся визит М. С. Горбачёва в Тольятти, где Генеральный секретарь ЦК КПСС посетил автозавод. Результатом визита было решение о создании на базе флагмана отечественного машиностроения инжинирингового центра.</p>
|
||||
<p></p>
|
||||
<p>4 сентября 1986 года Правительством страны принято решение о создании на автозаводе отраслевого научно-технического центра (НТЦ). В 1987—1994 годах введены в строй его основные мощности: инженерный корпус, дизайн-центр, комплекс подготовки автомобилей к испытаниям, комплекс исследований электромагнитной совместимости, шумов и вибраций, аэроклиматический комплекс, корпуса опытно-промышленного и экспериментального производств. В 1996 году в НТЦ была принята в эксплуатацию полномасштабная аэродинамическая труба.
|
||||
Первым руководителем научно-технического центра был В. В. Каданников (в 1986—1988 годах). На этом посту его сменил Владимир Михайлович Акоев, который пробыл на этой должности менее года (трагически погиб во время автокатастрофы в июне 1989 года).</p>
|
||||
<p></p>
|
||||
<p>7 сентября 2001 года, в честь 15-летия научно-технического центра, открыта первая очередь технического музея. Сегодня это — целый парк автомобильной и военной техники, где собраны уникальные экспонаты со всей страны.
|
||||
После вхождения в число акционеров ОАО «АвтоВАЗ» французской компании Renault принято решение о вхождении научно-технического центра завода в состав глобального инженерного альянса Renault-Nissan.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text2">
|
||||
<h3 class="subtitle_five text-uppercase p-4">планы</h3>
|
||||
<div class="text p-4">
|
||||
<p></p>
|
||||
<p>Планы развития в компании связывают с дальнейшей интеграцией с Renault-Nissan. В конце 2011 года «АвтоВАЗ» поставил на конвейер автомобиль Lada Granta седан, в первом полугодии 2012 года — универсал повышенной вместимости R90 и фургон F90 (Lada Largus) на платформе B0, в июне 2012 года начато производство автомобиля Nissan Almera также на платформе B0, к 2013 году — недорогой хэтчбек Granta и ещё два автомобиля Renault, также на платформе В0.</p>
|
||||
<p></p>
|
||||
<p>В кризисный 2009 год первоначально планировалось выпустить 475 тыс. автомобилей, затем эта цифра была скорректирована до 332 тыс. автомобилей. В итоге «АвтоВАЗ» изготовил 294 737 автомобилей Lada (в том числе для экспорта — 34756 автомобилей всех семейств Lada). Помимо этого, выпущено 43047 сборочных комплектов. Лидером по объёму производства стало семейство Lada Priora: изготовлено более 91 тысячи этих автомобилей. В 2009 году завод останавливался дважды с начала года.</p>
|
||||
<p></p>
|
||||
<p>Сначала в феврале 2009 года — из-за отказа производителей автокомпонентов отгружать продукцию автогиганту, пока он не погасит перед ними свои долги. Другой раз — уже на весь август — по решению топ-менеджмента из-за проблем со сбытом.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="d-flex justify-content-between my-auto align-items-center p-3">
|
||||
<div class="foot__text text-uppercase text-white">Подписывайтесь на наши соц. сети</div>
|
||||
<div class="foot__link">
|
||||
<ul class="foot__list d-flex justify-content-between list-unstyled mb-0">
|
||||
<li><a href="https://vk.com/"><img class="foot__li" src="/img/vk.png" alt=""></a></li>
|
||||
<li><a href="https://web.telegram.org/k/"><img class="foot__li" src="/img/tg.png" alt=""></a></li>
|
||||
<li><a href="https://www.viber.com/ru/"><img class="foot__li" src="/img/vb.png" alt=""></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
4469
Lab2/package-lock.json
generated
Normal file
4469
Lab2/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
Lab2/package.json
Normal file
28
Lab2/package.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "lab2",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"vite": "vite",
|
||||
"build": "vite build",
|
||||
"rest": "json-server --watch data.json -p 8081",
|
||||
"preview": "vite preview",
|
||||
"dev": "npm-run-all --parallel rest vite",
|
||||
"server": "json-server -w data.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.4.2",
|
||||
"bootstrap": "^5.3.2",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-import": "^2.29.0",
|
||||
"http-server": "^14.1.1",
|
||||
"js": "^0.1.0",
|
||||
"json-server": "^0.17.4",
|
||||
"npm-run-all": "^4.1.5"
|
||||
}
|
||||
}
|
||||
BIN
Lab2/public/img/Goru.jpg
Normal file
BIN
Lab2/public/img/Goru.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
BIN
Lab2/public/img/Granta.jpg
Normal file
BIN
Lab2/public/img/Granta.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
BIN
Lab2/public/img/Lada_vesta_sport.jpg
Normal file
BIN
Lab2/public/img/Lada_vesta_sport.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
Lab2/public/img/Largus.jpeg
Normal file
BIN
Lab2/public/img/Largus.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
BIN
Lab2/public/img/Logo.png
Normal file
BIN
Lab2/public/img/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
Lab2/public/img/Logo_lada.png
Normal file
BIN
Lab2/public/img/Logo_lada.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Lab2/public/img/Niva1.jpg
Normal file
BIN
Lab2/public/img/Niva1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
Lab2/public/img/Vesta2.jpg
Normal file
BIN
Lab2/public/img/Vesta2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
Lab2/public/img/showroom.jpg
Normal file
BIN
Lab2/public/img/showroom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 384 KiB |
BIN
Lab2/public/img/tg.png
Normal file
BIN
Lab2/public/img/tg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Lab2/public/img/vb.png
Normal file
BIN
Lab2/public/img/vb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
Lab2/public/img/vk.png
Normal file
BIN
Lab2/public/img/vk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 844 B |
BIN
Lab2/public/img/Авторай.jpg
Normal file
BIN
Lab2/public/img/Авторай.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
243
Lab2/public/styles/style.css
Normal file
243
Lab2/public/styles/style.css
Normal file
@ -0,0 +1,243 @@
|
||||
@charset "UTF-8";
|
||||
/*Обнуление*/
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus, :active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus, a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav, footer, header, aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
input, button, textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
/* ----Обнуление конец--- */
|
||||
|
||||
.header__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.wraper{
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.main{
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.title {
|
||||
margin: 100px 0px;
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
}
|
||||
.car__img{
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.car {
|
||||
border: 3px solid black;
|
||||
gap: 30px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
button {
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
background-color: #E0CA00;
|
||||
border-radius: 20px;
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
button:hover{
|
||||
background-color:aquamarine;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 40px;
|
||||
margin: 0px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
/* car */
|
||||
footer {
|
||||
background-color: blue;
|
||||
width: 100%;
|
||||
margin-top: 130px;
|
||||
}
|
||||
.foot__list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
/* --------3--------- */
|
||||
.diler__image {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.diler__item {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.diler__text {
|
||||
margin-right: auto;
|
||||
}
|
||||
/* -----------4------- */
|
||||
.box {
|
||||
background-color: gray;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.box__text {
|
||||
height: auto;
|
||||
}
|
||||
.box__img {
|
||||
min-width: 600px;
|
||||
max-width: 900px;
|
||||
margin: auto 0px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
/* ------5------------- */
|
||||
.text_block {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.text{
|
||||
font-size: 21px;
|
||||
line-height: 30px;
|
||||
text-align: justify;
|
||||
}
|
||||
.subtitle_five {
|
||||
font-size: 35px;
|
||||
}
|
||||
/* --adaptiv-------- */
|
||||
@media (max-width: 960px) {
|
||||
.car {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.car__txt{
|
||||
font-size: 30px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 40px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dilers{
|
||||
flex-direction: column;
|
||||
}
|
||||
.box__img{
|
||||
min-width: 350px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 680px) {
|
||||
.diler__image{
|
||||
max-width: 400;
|
||||
}
|
||||
.box{
|
||||
flex-direction: column;
|
||||
}
|
||||
.box__img{
|
||||
min-width: 300px;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.text {
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.subtitle_ {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.title {
|
||||
margin-top: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.car__txt{
|
||||
font-size: 20px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.foot__li{
|
||||
max-width: 25px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user