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

113 lines
9.4 KiB
HTML
Raw Permalink 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 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>