Skip to content

Commit 43e7521

Browse files
author
DevTech-Solution
committed
init: add files project Luxdrive
1 parent 346af0b commit 43e7521

16 files changed

+1009
-1
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
# Website-Luxdrive-Car

‎catalogue.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<link rel="icon" type="image/png" href="#">
5+
<meta charset="UTF-8">
6+
<meta name="description" content="test avec JS">
7+
<title>Luxdrive</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<link rel="stylesheet" href="./css/styles.css">
10+
</head>
11+
<body>
12+
<header>
13+
<div class="logo-entreprise">
14+
<a href="./index.html" title="Home">
15+
<img src="./images/logo/logo.png" alt="Luxdrive L'expert en voiture de luxe.">
16+
</a>
17+
</div>
18+
19+
<div class="container">
20+
<div class="title">
21+
<p>Luxdrive</p>
22+
<p>Une expérience de luxe pour un jour unique</p>
23+
</div>
24+
</div>
25+
<nav>
26+
<ul>
27+
<li>
28+
<a href="./index.html" title="Accueil">Accueil</a>
29+
</li>
30+
<li>
31+
<a href="./catalogue.html" title="Catalogue">Catalogue</a>
32+
</li>
33+
</ul>
34+
</nav>
35+
</header>
36+
<main>
37+
<container class="container-catalogue">
38+
<div class="title-catalogue">
39+
<h1>Notre catalogue de voitures</h1>
40+
</div>
41+
<div class="cards">
42+
<!----- JS / CSS ----->
43+
<div class="cars-line1">
44+
</div>
45+
<div class="cars-line2">
46+
</div>
47+
<div class="cars-line3">
48+
</div>
49+
</div>
50+
</container>
51+
</main>
52+
<footer>
53+
<container class="container-footer"></container>
54+
</footer>
55+
<script src="./js/script.js"></script>
56+
</body>
57+
</html>

‎css/styles.css‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
/* ----------------------- */
2+
/* ------- RESET ---------*/
3+
/* ----------------------- */
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
/* ------------------------------------------------------------- */
10+
/* ----------------------------- HOME PAGE-----------------------*/
11+
/* ------------------------------------------------------------- */
12+
/* ------- BODY ---------*/
13+
body{
14+
background-color: #000000;
15+
}
16+
/* ------- HEADER ---------*/
17+
header{
18+
display: flex;
19+
justify-content: space-evenly;
20+
align-items: center;
21+
height: 6rem;
22+
border-bottom: solid 1px #ffffff60;
23+
}
24+
25+
header img{
26+
height: 5rem;
27+
width: 5rem;
28+
}
29+
30+
header .title{
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
color: #ffffff;
35+
font-size: 20px;
36+
gap: 0.3rem;
37+
}
38+
39+
header nav ul{
40+
display: flex;
41+
list-style: none;
42+
gap: 3rem;
43+
}
44+
45+
header ul a {
46+
text-decoration: none;
47+
color: #ffffff;
48+
font-size: 20px;
49+
}
50+
/* --------------------------------------------------- */
51+
/* ----------------------- */
52+
/* ------- MAIN ---------*/
53+
/* ----------------------- */
54+
.titre-principal {
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
color: #ffffff;
59+
height: 100vh;
60+
padding-top: 3rem;
61+
}
62+
/* ------- CLASS JS CSS ---------*/
63+
.titre-principal .title {
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
font-size: 20px;
68+
width: 100%;
69+
color: #ffffff;
70+
gap: 0.5rem;
71+
background-color: #000000a9;
72+
border-radius: 2%;
73+
padding: 2rem;
74+
}
75+
76+
.title h1 {
77+
color: #ff0000;
78+
padding-bottom: 0.4rem;
79+
}
80+
81+
.titre-principal .title p {
82+
padding-bottom: 2rem;
83+
}
84+
85+
.title a {
86+
color: #ffffff;
87+
font-size: 17px;
88+
padding: 0.5rem 0.5rem;
89+
background-color: #000000;
90+
border-radius: 3%;
91+
border: solid 1px #ffffff;
92+
text-decoration: none;
93+
}
94+
/* --------------------------------------------------- */
95+
/* ------- STATS ---------*/
96+
.stats {
97+
color: #ffffff;
98+
display: flex;
99+
flex-direction: row;
100+
align-items: center;
101+
justify-content: center;
102+
gap: 10%;
103+
width: 100%;
104+
min-height: 5rem;
105+
border-top: solid 1px #ffffff60;
106+
}
107+
.stats p:last-child{
108+
color: red;
109+
font-weight: 700;
110+
font-size: 2.5rem;
111+
}
112+
/* ------- TESTIMONIALS ---------*/
113+
.testimonials {
114+
width: 100%;
115+
min-height: 7rem;
116+
color: #ffffff;
117+
display: flex;
118+
flex-direction: row;
119+
align-items: center;
120+
justify-content: center;
121+
gap: 3rem;
122+
font-size: 17px;
123+
border-bottom: solid 1px #ffffff60;
124+
border-top: solid 1px #ffffff60;
125+
}
126+
.testimonials p:nth-child(2){
127+
color: #ff0000;
128+
}
129+
/* ----------------------- */
130+
/* ------- FOOTER ---------*/
131+
/* ----------------------- */
132+
footer {
133+
padding-top: 8rem;
134+
}
135+
footer .container-footer{
136+
border-bottom: solid 1px #ffffff60;
137+
color: #ffffff;
138+
display: flex;
139+
justify-content: center;
140+
align-items: center;
141+
height: 3rem;
142+
}
143+
footer .container-footer .socials{
144+
display: flex;
145+
flex-direction: row;
146+
gap: 1rem;
147+
font-size: 17px;
148+
}
149+
footer .container-footer .socials a{
150+
color: #ffffff;
151+
text-decoration: none;
152+
list-style: none;
153+
}
154+
/* -------------------------------------------------------------- */
155+
/* ---------------------- PAGE CATALOGUE ------------------------*/
156+
/* -------------------------------------------------------------- */
157+
.container-catalogue {
158+
display: flex;
159+
flex-direction: column;
160+
align-items: center;
161+
width: 100%;
162+
color: #ffffff;
163+
margin-top: 3rem;
164+
}
165+
.container-catalogue h1{
166+
margin-top: 1rem;
167+
font-size: 25px;
168+
}
169+
/* ------- CONTAINER CARDS ---------*/
170+
.container-catalogue .cards {
171+
display: flex;
172+
flex-direction: column;
173+
border: solid 1px #000000;
174+
margin-top: 1rem;
175+
gap: 2rem;
176+
padding: 2rem;
177+
border: solid 1px #ffffff5b;
178+
}
179+
.container-catalogue .cards .item{
180+
border: solid 1px #ffffff81;
181+
background-color: #000000;
182+
height: 27rem;
183+
width: 25rem;
184+
display: flex;
185+
flex-direction: column;
186+
align-items: center;
187+
color: #ffffff;
188+
padding: 0.5rem;
189+
}
190+
/* ------- LINE ITEM ---------*/
191+
.container-catalogue .cards .cars-line1{
192+
display: flex;
193+
flex-direction: row;
194+
justify-content: center;
195+
align-items: center;
196+
gap: 2rem;
197+
}
198+
.container-catalogue .cards .cars-line2{
199+
display: flex;
200+
flex-direction: row;
201+
justify-content: center;
202+
align-items: center;
203+
gap: 2rem;
204+
}
205+
.container-catalogue .cards .cars-line3{
206+
display: flex;
207+
flex-direction: row;
208+
justify-content: center;
209+
align-items: center;
210+
gap: 2rem;
211+
}
212+
/* ------- IMAGES ---------*/
213+
.container-catalogue .cards .item img{
214+
width: 23rem;
215+
height: 15rem;
216+
margin-top: 1rem;
217+
margin-bottom: 1rem;
218+
}
219+
/* ------- NOM VOITURES ---------*/
220+
.container-catalogue .cards .item p:nth-child(2){
221+
margin-bottom: 1rem;
222+
}
223+
/* ------- DESCRIPTION VOITURES ---------*/
224+
.container-catalogue .cards .item p:nth-child(3){
225+
text-align: left;
226+
margin-bottom: 1rem;
227+
}
228+
/* ------- PRIX VOITURES ---------*/
229+
.container-catalogue .cards .item p:nth-child(4){
230+
color: #ff0000;
231+
text-align: left;
232+
font-size: 20px;
233+
margin-bottom: 1rem;
234+
}
235+
/* ------- DETAILS VOITURES BUTTON ---------*/
236+
.container-catalogue .cards .item button{
237+
color: #ffffff;
238+
background-color: #000000;
239+
}
240+
/* ---------------------------------------- */

‎images/banners/voiture-banner.jpg‎

1.03 MB
Loading

‎images/cars/amg_one_1.jpg‎

127 KB
Loading

‎images/cars/aston_dbs.jpg‎

397 KB
Loading

‎images/cars/bugatti_chiron_1.jpg‎

253 KB
Loading

‎images/cars/ferrari_sf90.jpg‎

191 KB
Loading

‎images/cars/jesko_1.jpg‎

253 KB
Loading

‎images/cars/lamborghini_huracan.jpg‎

90.8 KB
Loading

0 commit comments

Comments
 (0)