first commit
This commit is contained in:
commit
5d50b90c4c
104
Berline.html
Normal file
104
Berline.html
Normal file
@ -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>
|
||||
94
Citadine.html
Normal file
94
Citadine.html
Normal file
@ -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="./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>
|
||||
96
SUV.html
Normal file
96
SUV.html
Normal file
@ -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>
|
||||
BIN
image/B1.jpg
Normal file
BIN
image/B1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
image/B2.jpg
Normal file
BIN
image/B2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
image/B3.jpg
Normal file
BIN
image/B3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
image/SUV.jpg
Normal file
BIN
image/SUV.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
image/berline.jpg
Normal file
BIN
image/berline.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
image/citadine.jpg
Normal file
BIN
image/citadine.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
92
index.html
Normal file
92
index.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!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="10" 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>You clicked <span id="counterDisplay">0</span> times</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>
|
||||
17
script.js
Normal file
17
script.js
Normal file
@ -0,0 +1,17 @@
|
||||
var counter = 0;
|
||||
|
||||
function myCounter() {
|
||||
counter++;
|
||||
document.getElementById("counterDisplay").innerText = counter;
|
||||
console.log("vous avez clické!", counter, "times");
|
||||
}
|
||||
|
||||
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)
|
||||
32
styles.css
Normal file
32
styles.css
Normal file
@ -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…
x
Reference in New Issue
Block a user
