-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (240 loc) · 12.2 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="une phrase d'environs 170 caractère">
<link rel="stylesheet" href="./assets/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet">
</head>
<body>
<!--début de la partie codée par Enzo-->
<header class="dom-header">
<div class="banner">
<div>
<h1>GUIDE DU SEVRAGE</h1>
<p>Un accompagnement sur mesure <br> Pour tous fumeurs désirant se sevrer</p>
</div>
<div class="header-btn">
<a class="b1" target="_blank" href="https://mathis915135.typeform.com/to/sg0ouV">J’AIMERAIS DEVENIR COACH</a>
<a class="b2" target="_blank" href="https://mathis915135.typeform.com/to/jbZp58">J’AIMERAIS ME SEVRER</a>
</div>
</div>
<div class="nav-bar">
<ul>
<li><a href="#process">Processus</a></li>
<li><a href="#sol">Les solutions</a></li>
<li><a href="#propos">À propos</a></li>
<li><a href="#venir">À venir</a></li>
<li><a href="#signup">S'inscrire</a></li>
<li><a href="#contact">Contacts</a></li>
</ul>
</div>
</header>
<main>
<!--début de la Partie 1 codé par JOURNO nathan-->
<section class="welcome">
<div class="title">
<h1><strong class="strong">Fumeurs,</strong> <br> bienvenue dans le <strong class="strong">premier jour</strong> <br> du <strong class="strong">reste de votre vie</strong></h1>
</div>
<div class="button">
<a href="#signup" class="myButton">Répondre aux sondages</a>
</div>
</section>
<!--fin de la Partie 1 codé par JOURNO nathan-->
<!--début de la Partie 2 codé par JOURNO nathan-->
<section id="process" class="accompanying">
<div class="title">
<h1>Un accompagnement <br> pendant votre sevrage pour <br> arrêter de fumer</h1>
</div>
<div class="steps">
<div class="square square_1">
<div class="number">
1
</div>
</div>
<hr>
<div class="square square_2">
<div class="number">
2
</div>
</div>
<hr>
<div class="square square_3">
<div class="number">
3
</div>
</div>
<hr>
<div class="square square_4">
<div class="number">
4
</div>
</div>
</div>
<div class="all_text_steps">
<div class="text_steps text_steps_1">
Faite le test <br> d'appartenance <br> en 2 minutes
</div>
<div class="text_steps text_steps_2">
Trouver une <br> solution <br> sur mesure
</div>
<div class="text_steps text_steps_3">
Bénéficiez <br> d'un <br> accompagnement
</div>
<div class="text_steps text_steps_4">
Suivez votre <br> progression <br> et economies
</div>
</div>
</section>
<!--fin de la Partie 2 codé par JOURNO nathan-->
<!--début de la Partie 1 codé par Heddadi Jessim-->
<section class="Les-Fait">
<h2>LES FAITS</h2>
<article class="icon-txt">
<div class="icon-template">
<div class="icon"></div>
<div class="txt1">Chaque fumeur à une sensibilité Différente quand Aux différentes méthodes Pour arrêter</div>
</div>
<div class="icon-template">
<div class="smoker"></div>
<div class="txt2">
80% des personnes qui reprennent la cigarette Ou qui échouent dans leurs Objectifs, ont craqué Pendant leur sevrage
</div>
</div>
<div class="icon-template">
<div class="cigarettes"></div>
<div class="txt3">
Avec l'augmentation Constante du prix du Paquet de cigarette, Il est grand temps D’aller de l’avant !
</div>
</div>
</article>
</section>
<!--fin de la Partie 1 codé par Heddadi Jessim-->
<!--dévut de la Partie codé par Clément-->
<section id="sol" class="block">
<div class="block-text">
<div class="text">
<h3>Une solution <br> pour tout type de fumeur</h3>
<p>Entre coach (ex: fumeurs), thérapeute, Hypnose, acuponcture, Accomplissement personnel, Produits nicotines et contenu dissuasifs, une solution existe pour tous types de fumeurs.</p>
<p>Nous les avons réunis sur une seul et même plateforme.</p>
</div>
</div>
<div class="img">
<img src="./assets/img/1STSCREENGS.png" alt="">
</div>
</section>
<section class="block">
<div class="img">
<img src="./assets/img/2ndGDS.png" alt="">
</div>
<div class="block-text">
<div class="text">
<h3>Un accompagnement <br> sur mesure</h3>
<p>Définissez vos objectif, vos critéres d'appartenance, de dépendance, votre budget. Et rencontrez nos experts qui vous quideront vers des bonnes pratiques spécifiquement adaptées à votre profil.</p>
<p>Vous êtes plus sensibles à des produits, des images ou à un accompagnement et des conseils d'experts ? Nous sommes la pur vous.</p>
</div>
</div>
</section>
<section class="block">
<div class="block-text">
<div class="text">
<h3>Un espace non fumeur</h3>
<p>L'espace non fumeur est votre espace personnel, Vous pourrez suivre votre progression, Vos économies, votre durée de vie supplementaire ainsi que toutes informations liées à votre profil.</p>
<p>Cet espace à été pensé par d'anciens fumeurs mobilisant tous leurs efforts pour vous aider à vous sentir mieux;</p>
</div>
</div>
<div class="img">
<img src="./assets/img/3rdGDS.png" alt="">
</div>
</section>
<section id="propos" class="block-talk">
<h4>à propos</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod
non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat
libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque
rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla
et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p>
</section>
<!--fin de la Partie codé par Clément-->
<!--dévut de la Partie 2 codé par Heddadi Jessim-->
<section id="venir" class="A-venir">
<h2>À VENIR</h2>
<article class="icon-txt">
<div class="icon-template">
<div class="star"></div>
<div class="txt1">Des mains expertes Pour tous fumeurs À dispositions</div>
</div>
<div class="icon-template">
<div class="nico"></div>
<div class="txt2">
Des produits sur mesures à base de Nicotine À dispositions
</div>
</div>
<div class="icon-template">
<div class="layout"></div>
<div class="txt3">
Du contenu dissuasif Et un espace personnel À dispositions
</div>
</div>
</article>
</section>
<section id="signup" class="questionnaire">
<h2>QUESTIONNAIRE</h2>
<article class="Buttondiv">
<a class="b1" target="_blank" href="https://mathis915135.typeform.com/to/sg0ouV">J’AIMERAIS DEVENIR COACH</a>
<a class="b2" target="_blank" href="https://mathis915135.typeform.com/to/jbZp58">J’AIMERAIS ME SEVRER</a>
</article>
</section>
<section id="contact" class="form">
<form class="formulaire" action="" method="post">
<div class="info">
<div class="NomMail">
<input name="name" type="text" class="nom" placeholder="Nom" required>
<input name="email" type="email" class="email" placeholder="Mail" required>
</div>
<div class="PrenomSujet">
<input name="firstname" type="text" class="firstname" placeholder="Prénom" required>
<input name="sujet" type="email" class="subject" placeholder="Sujet" required>
</div>
<textarea name="message" class="message" placeholder="un message ?" required></textarea>
<input class="envoyer" type="submit" value="Envoyer">
</div>
</form>
</section>
<footer>
<ul>
<li> <a href="">Our team</a> </li>
<li> <a href="">Contact us</a> </li>
<li> <a href="">Plug-Ins</a> </li>
<li> <a href="">Partnerships</a> </li>
</ul>
<ul>
<li> <a href="">About Us</a> </li>
<li> <a href="">Newsletter</a> </li>
<li> <a href="">Tech</a> </li>
<li> <a href=""> Reviews</a></li>
</ul>
<ul>
<li> <a href=""> Legal</a></li>
<li> <a href="">FAQ</a> </li>
<li> <a href="">Features</a> </li>
<li> <a href="">Pricing</a> </li>
</ul>
<ul>
<li> <a href="">Position</a></li>
<li> <a href="">API</a></li>
<li> <a href="">Tips</a> </li>
<li> <a href=""> Policy</a></li>
</ul>
</footer>
<!--FIN de la Partie codé par Heddadi Jessim-->
</main>
<script src="assets/js/main.js"></script>
</body>
</html>