You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

104 lines
3.8 KiB
HTML

1 year ago
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Berline</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid my-header">
<div class="container-md">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Which</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="SUV.html">SUV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Citadine.html">Citadine</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Berline.html">Berline</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-md text-center">
<div class="row mt-5 mb-5 mt-5 mb-5">
<h1>Berline</h1>
</div>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Pourquoi acheter une berline ?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>Avantage de la berline</strong> Une berline est adaptée pour faire de longs trajets. De plus, grâce à sa faible hauteur, elle est parfaitement assise sur la route, ce qui vous procure une bonne sensation de conduite et de sécurité dans les virages. Silencieuse et confortable, cette catégorie de voiture vous offrira un déplacement agréable.
</div>
</div>
</div>
</div>
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://diapogram.com/resized/878-1920-1080.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://diapogram.com/resized/901-1920-1080.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://s1.1zoom.me/b5050/144/Mercedes-Benz_2019_L_Sport_A200_A-Class_Red_Motion_546474_1920x1080.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>