Radaev_A._V._PI-23_IP-Lab/Lab2/index.html
Arkadiy Radaev 8a5d83a2c2 lab2
2023-12-01 20:48:02 +04:00

92 lines
7.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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