1er commit
commit
90582a722d
@ -0,0 +1,104 @@
|
||||
<!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>
|
||||
@ -0,0 +1,94 @@
|
||||
<!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="https://www.carpixel.net/w/76c7d7a4895668e261f052d08428e044/peugeot-e-208-gt-wallpaper-hd-89083.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://initiate.alphacoders.com/images/483/cropped-1920-1080-483594.jpg?3346" 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>
|
||||
@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SUV</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 active" 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" 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>SUV</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">
|
||||
Quel est l'intérêt d'un SUV ?
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>Pourquoi craquer pour un SUV (sport utility vehicle) ?</strong> Ces véhicules séduisent de plus en plus les utilisateurs. Leur notoriété ne fait que s'accroitre et pour cause : ils sont spacieux et offrent un sentiment de sécurité tout en ayant un look sympa ! C'est particulièrement un comble pour les familles.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="carouselExample" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="https://images.wallpaperscraft.com/image/single/bentley_bentayga_suv_side_view_109810_1920x1080.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://images.wallpaperscraft.com/image/single/land_rover_range_rover_suv_94282_1920x1080.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://images.wallpaperscraft.com/image/single/volvo_xc40_volvo_car_197952_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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Which</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" href="Berline.html">Berline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="range" min="10" max="50" value="16" id="textSize">
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container-md text-center">
|
||||
<div class="row mt-5 mb-5 mt-5 mb-5">
|
||||
<h1>Bienvenue sur Which
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-md text-center">
|
||||
<div class="row mt-5 mb-5 mt-5 mb-5">
|
||||
<h1>
|
||||
LE SITE QUI RECENSE LA VOITURE SELON VOS BESOIN!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<p>Sans avoir une connaissance accrue des marques, modèles et versions des voitures d'occasion à vendre, vous
|
||||
pouvez
|
||||
aisément répondre à quelques besoins simples concernant votre conduite : est-ce que je conduis plutôt en milieu
|
||||
urbain, péri-urbain ou est-ce que je fais de longs trajets ? Ai-je besoin d'un grand coffre, car j'ai
|
||||
régulièrement
|
||||
du matériel à transporter ? Combien de personnes ai-je besoin de transporter au quotidien ? </p>
|
||||
|
||||
<button id="clickCounter">Compter les clicks</button>
|
||||
<p>Vous avez cliqué <span id="counterDisplay">0</span> fois</p>
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
var counter = 0;
|
||||
|
||||
function myCounter() {
|
||||
counter++;
|
||||
document.getElementById("counterDisplay").innerText = counter;
|
||||
console.log("vous avez cliqué ", counter, " fois");
|
||||
}
|
||||
|
||||
document.getElementById("clickCounter").addEventListener('click', myCounter)
|
||||
|
||||
function changeFontSize() {
|
||||
var newSize = document.getElementById('textSize').value + "px";
|
||||
var paragraphs = document.getElementsByTagName('p');
|
||||
|
||||
for(var i=0; i< paragraphs.length; i++) {
|
||||
paragraphs[i].style.fontSize = newSize;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("textSize").addEventListener('input', changeFontSize)
|
||||
@ -0,0 +1,32 @@
|
||||
|
||||
h1{
|
||||
color:#6dcff5 !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:#6dcff5 !important;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
p{color: #ffffff
|
||||
;
|
||||
font-size: large;}
|
||||
|
||||
.accordion-item{
|
||||
background-color: #212529; color: #f1e2cf; ;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.my-navbar{
|
||||
background-color: #f1e2cf !important;
|
||||
|
||||
}
|
||||
body{
|
||||
background-color: #212529
|
||||
|
||||
}
|
||||
.bg-body-tertiary {
|
||||
background-color: #f1e2cf !important;
|
||||
}
|
||||
Loading…
Reference in New Issue