-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
183 lines (153 loc) · 7.95 KB
/
about.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
<!--
~ LazareC
~ EDUCATION PROJECT
~ FILE: about.html
~ Humorous site, a real mask really saves lives
-->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="styles/tailwind.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<title>About us</title>
</head>
<body>
<!--https://dev.to/adrianbdesigns/you-can-create-these-elements-without-javascript-525a-->
<div class="fixed right-0 top-0 z-50">
<!-- ICON BY https://heroicons.com/-->
<a href="index.html">
<svg class="w-12 h-12 stroke-current text-gray-700" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6l12 12" stroke-width="1.5"/>
</svg>
</a>
</div>
<div class=" bg-green-300" id="1">
<div class=" flex flex-col items-center justify-between w-full h-screen bg-opacity-5">
<div></div>
<div class="bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-blue-500 md:text-5xl text-3xl text-center uppercase font-extrabold ">
Mais qui somme nous?
</div>
<a href="#2">
<svg class="animate-bounce w-12 h-12 stroke-current text-purple-600" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M19 14l-7 7m0 0l-7-7m7 7V3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<div class="bg-red-300" id="2">
<div class="flex flex-col items-center justify-between h-screen bg-opacity-5">
<div class="about_divider absolute">
<svg class="fill-current text-green-300" data-name="Layer 1" preserveAspectRatio="none"
viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
<path class="shape-fill"
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path>
</svg>
</div>
<div></div>
<div class="flex items-center mx-4 flex-col md:flex-row ">
<div class="align-middle md:mr-4 text-center md:text-left">
<div class="text-white md:text-5xl text-3xl uppercase font-extrabold ">Geox Mask</div>
<p class="text-gray-200 text-base italic ">Nous sommes les premiers à avoir commercialisé <br
class="hidden md:block"> les masques respirants </p>
</div>
<div class="w-32 about_mask_spin">
<img alt="UN TRES BEAU MASQUE" class=" object-contain " src="img/MASQUE-DETOURE_0.png">
</div>
</div>
<div class="">
<a href="#3">
<svg class="animate-bounce w-12 h-12 stroke-current text-purple-600" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M19 14l-7 7m0 0l-7-7m7 7V3" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"/>
</svg>
</a>
</div>
</div>
</div>
<div class="bg-blue-300" id="3">
<div class="flex flex-col items-center justify-between h-screen bg-opacity-5">
<div class="about_divider absolute">
<svg class="fill-current text-red-300" data-name="Layer 1" preserveAspectRatio="none"
viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
<path class="shape-fill"
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path>
</svg>
</div>
<div></div>
<div class="flex items-center mx-4 flex-row content-start ">
<div class="align-middle text-center md:text-left">
<div class="text-white md:text-5xl text-3xl uppercase font-extrabold ">On vous aime</div>
<p class="text-gray-200 text-base italic ">Vous n'êtes pas satisfait? <br class="hidden md:block"> Vous
avez 20 jours pour vous faire rembourser!</p></div>
<div class="">
<svg class="fill-current h-12 w-12 text-red-400 animate-pulse" xmlns="http://www.w3.org/2000/svg">
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</div>
</div>
<div class="">
<a href="#4">
<svg class="animate-bounce w-12 h-12 stroke-current text-purple-600" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path d="M19 14l-7 7m0 0l-7-7m7 7V3" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"/>
</svg>
</a>
</div>
</div>
</div>
<div class="bg-indigo-300" id="4">
<div class="flex flex-col items-center justify-between h-screen bg-opacity-5">
<div class="about_divider absolute">
<svg class="fill-current text-blue-300" data-name="Layer 1" preserveAspectRatio="none"
viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg">
<path class="shape-fill"
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"></path>
</svg>
</div>
<div></div>
<div class="bg-white w-full md:w-auto mx-4 text-gray-600 shadow-2xl flex-col shadow-2xl py-4 ">
<form action="#" method="get">
<div class="flex flex-col md:mx-4 mx-2 ">
<p class="text-gray-800 font-medium text-center">Contactez nous !</p>
<div class="flex flex-col md:flex-row mt-8 text-center">
<div class="flex flex-col">
<label class="w-auto " for="user">Entrez votre nom: </label>
<input class="bg-gray-200 pl-4 mx-8 h-14 rounded text-sm focus:outline-none justify-center"
id="user"
name="user"
placeholder="Jean Marque">
</div>
<div class="flex flex-col">
<label class="w-auto " for="email">Entrez votre email: </label>
<input class="bg-gray-200 pl-4 mx-8 h-14 rounded text-sm focus:outline-none justify-center"
id="email"
name="user"
placeholder="[email protected]">
</div>
</div>
<div class="flex flex-col text-center mt-4">
<label class="" for="comment">Entrez votre commentaire: </label>
<textarea
class="mx-8 pl-4 pt-4 resize-none mt-4 bg-gray-200 h-24 rounded text-sm focus:outline-none justify-center"
id="comment"
name="comment"
placeholder="Dites nous tout :)"></textarea>
</div>
<button class="md:w-1/3 w-1/2 mx-auto my-8 text-2xl text-white px-2 h-11 font-semibold rounded uppercase bg-green-400 hover:bg-green-300"
type="submit">
Envoyer
</button>
</div>
</form>
</div>
<div></div>
</div>
</div>
</body>
</html>