-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
169 lines (137 loc) · 7.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<title>Accueil </title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<div class="layout">
<header class="header">
<div class="wrapper">
<a href="index.html">
<img class="logo-header" src="img/logo.png" alt="" width=100 height=100>
</a>
<nav class="nav">
<ul class="nav-list">
<li class="nav-list-item">
<div>
<a href="index.html" class="nav-link nav-link-active">Accueil</a>
</div>
</li>
<li class="nav-list-item">
<a href="about-us.html" class="nav-link">Qui sommes-nous ? </a>
</li>
<li class="nav-list-item">
<a href="services.html" class="nav-link">Services</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="home-section">
<h1 class="titre-H1"> Nous prenons soin de votre vélo</h1>
<div> <img class="img-veloBleu" src="img/home/home-01.jpg" /> </div>
</section>
<section class="frame">
<div class="wrapper">
<div class="boite1">
<h2 class="titre-H2"> Nous aimons le vélo</h2>
<h2 class="new-titre-H2">Nous prenons soin de votre vélo</h2> <!--Titre pour la version tablette et ordi qui change selon Figma-->
<p class="index-paragraph">
Au-delà de l’objet, le vélo est pour nous une philosophie, un art de vivre.
Vous pouvez nous faire confiance.
</p>
<img class="illustration" src="img/home/home-02.jpg" />
<div class="button">
<a href="services.html">En savoir plus</a>
</div>
</div>
<div class=boite2>
<h2 class="titre-H2">Un atelier professionnel</h2>
<p class="index-paragraph">
C'est dans notre atelier que nous réparons les vélos de nos
clients et que nous testons les nouveaux produits. Aucun détail
ne nous échappe.
</p>
<img class="illustration" src="img/home/home-03.jpg">
<div class="button">
<a href="services.html">En savoir plus</a>
</div>
</div>
</div>
</section>
<section class="frame-img-background">
<div class="wrapper">
<div class="item-service">
<div>
<img class="img-services" src="img/map-marker.png" alt="" />
<h1 class="titre-services"> Services à domicile</h1>
<p class="paragraphe-services">
Nous nous déplaçons pour récupérer et vous
ramener votre vélo réparé chez vous, en nous adaptant à vos disponibilités.
</p>
</div>
<div>
<img class="img-services" src="img/support.png" alt="" />
<h1 class="titre-services">Service client </h1>
<p class="paragraphe-services"> Un service client à votre écoute pour vous conseiller par téléphone et vous recevoir en atelier. </p>
</div>
<div>
<img class="img-services" src="img/express.png" alt="" />
<h1 class="titre-services"> Service express </h1>
<p class="paragraphe-services"> Vous avez besoin que votre vélo soit en état de rouler demain ? C’est possible.</p>
</div>
<div>
<img class="img-services" src="img/tools.png" alt="" />
<h1 class="titre-services">Services </h1>
<p class="paragraphe-services"> Réparations, conseils, équipements... Nous avons tout ce qu’il vous faut. </p>
</div>
</div>
<div class="button">
<a href="services.html"> En savoir plus </a>
</div>
</div>
</section>
<div class="wrapper">
<section class="frame-img">
<div class="grid-img-fin">
<img class="img-fin" src="img/home/home-05.jpg" alt="">
</div>
<div class="grid-img-fin">
<img class="img-fin" src="img/home/home-06.jpg" alt="">
</div>
<div class="grid-img-fin">
<img class="img-fin" src="img/home/home-07.jpg" alt="">
</div>
</section>
</div>
<div class="background-footer">
<footer class="footer">
<div class="wrapper">
<p class="footer-adresse">
Be Biker Service<br />
143, avenue de Versailles,<br />
75015 Paris<br />
[email protected]<br />
01.23.45.67.89
</p>
<div class="footer-liens">
<nav>
<ul>
<li><a class="test" href="index.html">Accueil</a></li>
<li><a href="about-us.html">Qui sommes-nous?</a></li>
<li><a href="services.html"> Services</a></li>
</ul>
</nav>
</div>
</div>
</footer>
</div>
</main>
</div>
</body>
</html>