94 lines
4.0 KiB
HTML
94 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Citadine</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 active" href="Citadine.html">Citadine</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" 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>Citadine</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion" id="accordionExample">
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header my-acc">
|
|
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Pourquoi les voitures citadines ?
|
|
</button>
|
|
</h2>
|
|
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
|
<div class="accordion-body">
|
|
<strong>Les atouts d'une voiture citadine:
|
|
</strong> L'usage de cette petite voiture vous permettra de découvrir la facilité d'arpenter les ruelles étroites de la ville. Également, elle vous permettra de trouver plus facilement une place pour vous garer grâce à son petit format et sa maniabilité facile.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="carouselExample" class="carousel slide">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="./image/citadine.jpg" class="d-block w-100" alt="...">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="./image/citadine.jpg" class="d-block w-100" alt="...">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="https://static3d.felgenshop.de/gmp-italia-matisse-black-glossy-felge-mit-reifen-schwarz-in-17zoll-winterfelge-alufelge-auf-weissem-smart-fortwo-cabrio-iii-16-453-mit-15mm-tieferlegung-old-industrial-hall-max5000mm-2022-frontansicht-1-1920.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> |
