-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
299 lines (272 loc) · 26.6 KB
/
Copy pathindex.html
File metadata and controls
299 lines (272 loc) · 26.6 KB
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/styles.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>.logo{position:absolute;bottom:16px;right:16px;width:32px;height:32px;z-index:2;background-image:url(https://app.spline.design/_assets/_icons/icon_favicon32x32.png);background-size:cover;}.logo:hover{opacity:0.8;}</style>
<script defer src="https://cloud.umami.is/script.js" data-website-id="fdb5217c-6641-4c89-9c40-5afa8298d11b"></script>
</head>
<body>
<section id="hero">
<div id="fusee">
<canvas id="canvas3d"></canvas>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@splinetool/runtime": "https://unpkg.com/@splinetool/runtime@0.9.522/build/runtime.js"
}
}
</script>
<script type="module" src="./src/main.js"></script>
</div>
<div id="header">
<svg id="logo" width="174" height="108" viewBox="0 0 174 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2925_147)">
<path d="M27.1199 107.418L9.1748 48.5901L61.7419 48.1719L50.4823 87.3881H38.3795L34.2103 74.0372H40.8824L44.64 61.5228L26.2834 61.941L40.0525 107.418H27.1199Z" fill="#D9D7FF"/>
<path d="M27.5317 44.6401H13.7692L0 26.7017L21.6961 10.4297L28.3682 18.7748L15.4355 28.3681L27.5317 44.6401Z" fill="#6869F7"/>
<path d="M25.8655 6.67214L34.6289 0L51.3125 21.6961L38.7981 31.7076L48.8096 44.6402L34.2106 45.0585L22.9443 30.0412L35.877 19.6114L25.8655 6.67214Z" fill="#6869F7"/>
<path d="M55.4883 44.2216L63.8334 37.5495L54.6518 26.2832L46.3066 32.9553L55.4883 44.2216Z" fill="#6869F7"/>
<path d="M69.1516 78.1138L66.6752 71.508H65.9582L64.8363 78.1138H59.1533L62.34 60.0625H69.7624C70.7449 60.0625 71.6412 60.1754 72.4378 60.3944C73.2345 60.6135 73.9183 60.9388 74.476 61.3637C75.0337 61.7886 75.4652 62.3131 75.764 62.9305C76.0627 63.5546 76.2088 64.2583 76.2088 65.0616C76.2088 66.5554 75.8569 67.7902 75.1532 68.7595C74.4494 69.7288 73.4802 70.3927 72.2586 70.7512L75.7772 78.1204H69.1449L69.1516 78.1138ZM67.8503 67.7637C68.6337 67.7637 69.2445 67.6309 69.6893 67.372C70.1341 67.1064 70.3532 66.6882 70.3532 66.1106C70.3532 65.5861 70.1673 65.221 69.8022 65.0284C69.437 64.8359 68.9391 64.7363 68.3084 64.7363H67.213L66.6752 67.7703H67.8503V67.7637Z" fill="#D9D7FF"/>
<path d="M86.6651 78.5718C85.2178 78.5718 83.9431 78.3726 82.8278 77.9742C81.7125 77.5759 80.7764 77.0116 80.0195 76.2813C79.2627 75.551 78.6917 74.6813 78.3001 73.6789C77.9084 72.6764 77.7158 71.5743 77.7158 70.366C77.7158 68.8723 77.9814 67.4648 78.5059 66.1569C79.0303 64.8491 79.7739 63.7072 80.7233 62.7379C81.6726 61.7686 82.8278 61.0051 84.1755 60.4408C85.5299 59.8831 87.0236 59.5977 88.6767 59.5977C90.1373 59.5977 91.4252 59.7968 92.5406 60.1952C93.6559 60.5935 94.5854 61.1578 95.3422 61.8881C96.099 62.6184 96.67 63.4881 97.0617 64.4906C97.4534 65.493 97.6459 66.6017 97.6459 67.8034C97.6459 69.2971 97.387 70.7046 96.8692 72.0125C96.3513 73.3204 95.6078 74.4622 94.6518 75.4315C93.6891 76.4008 92.5339 77.1643 91.1862 77.7286C89.8319 78.2929 88.3248 78.5718 86.6585 78.5718H86.6651ZM91.5115 68.2482C91.5115 67.7901 91.4385 67.3586 91.2925 66.9602C91.1464 66.5619 90.934 66.21 90.6551 65.9113C90.3763 65.6125 90.0244 65.3802 89.6128 65.2076C89.1945 65.0416 88.7232 64.9553 88.1987 64.9553C87.5348 64.9553 86.9373 65.0947 86.3996 65.3735C85.8618 65.6524 85.4104 66.0242 85.0386 66.4822C84.6668 66.9403 84.3747 67.4714 84.1689 68.0623C83.9631 68.6598 83.8635 69.264 83.8635 69.8747C83.8635 70.3328 83.9365 70.7644 84.0826 71.1627C84.2286 71.561 84.4411 71.9129 84.7199 72.205C84.9987 72.5038 85.3506 72.7361 85.7622 72.9087C86.1738 73.0813 86.6585 73.161 87.2029 73.161C87.8668 73.161 88.4576 73.0282 88.9887 72.756C89.5132 72.4838 89.9647 72.1187 90.3431 71.6606C90.7149 71.2025 91.007 70.6781 91.2128 70.0805C91.4186 69.483 91.5182 68.8723 91.5182 68.2482H91.5115Z" fill="#D9D7FF"/>
<path d="M114.768 78.1138L116.779 67.6575H116.626L111.295 78.1138H107.139L105.533 67.6575H105.407L103.853 78.1138H98.3428L101.529 60.0625H109.051L110.631 69.9545H110.758L115.451 60.0625H123.69L120.504 78.1138H114.768Z" fill="#D9D7FF"/>
<path d="M123.922 78.1138L127.109 60.0625H138.913L138.043 64.982H131.796L131.491 66.7147H137.459L136.643 71.3022H130.674L130.342 73.1877H137.326L136.457 78.1071H123.909L123.922 78.1138Z" fill="#D9D7FF"/>
<path d="M150.053 65.0351L147.756 78.1138H141.841L144.138 65.0351H139.57L140.46 60.0625H155.351L154.461 65.0351H150.053Z" fill="#D9D7FF"/>
<path d="M164.925 78.1138L166.147 71.1761H160.995L159.774 78.1138H153.885L157.071 60.0625H162.934L161.838 66.2566H166.99L168.085 60.0625H174.001L170.814 78.1138H164.925Z" fill="#D9D7FF"/>
</g>
<defs>
<clipPath id="clip0_2925_147">
<rect width="174" height="107.418" fill="white"/>
</clipPath>
</defs>
</svg>
<nav>
<a id="active" href="#" >Accueil</a>
<a href="#formu">Abonnement</a>
<a href="#">Communauté</a>
</nav>
<div id="dl-btn">
<a id="btn-hover" href="#">Télécharger</a>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6464 19.2571C14.4806 19.4384 14.2464 19.5417 14.0007 19.5417C13.755 19.5417 13.5207 19.4384 13.3549 19.2571L8.68822 14.1529C8.36213 13.7963 8.38691 13.2428 8.74356 12.9167C9.10023 12.5907 9.65368 12.6154 9.97976 12.972L13.1257 16.4129V3.5C13.1257 3.01675 13.5174 2.625 14.0007 2.625C14.4839 2.625 14.8757 3.01675 14.8757 3.5V16.4129L18.0216 12.972C18.3477 12.6154 18.9011 12.5907 19.2578 12.9167C19.6144 13.2428 19.6392 13.7963 19.3131 14.1529L14.6464 19.2571Z" fill="white"/>
<path d="M4.375 17.5C4.375 17.0168 3.98326 16.625 3.5 16.625C3.01676 16.625 2.625 17.0168 2.625 17.5V17.5641C2.62498 19.1596 2.62495 20.4456 2.76094 21.4571C2.90213 22.5072 3.20417 23.3913 3.90641 24.0935C4.60865 24.7959 5.49283 25.0979 6.54296 25.2391C7.55442 25.375 8.84046 25.375 10.436 25.375H17.5641C19.1596 25.375 20.4456 25.375 21.4571 25.2391C22.5072 25.0979 23.3913 24.7959 24.0936 24.0935C24.7959 23.3913 25.0979 22.5072 25.2391 21.4571C25.375 20.4456 25.375 19.1596 25.375 17.5641V17.5C25.375 17.0168 24.9832 16.625 24.5 16.625C24.0168 16.625 23.625 17.0168 23.625 17.5C23.625 19.1746 23.6231 20.3426 23.5047 21.2239C23.3896 22.08 23.1791 22.5332 22.8562 22.8562C22.5332 23.1791 22.08 23.3896 21.2239 23.5047C20.3426 23.6231 19.1746 23.625 17.5 23.625H10.5C8.82536 23.625 7.65738 23.6231 6.77614 23.5047C5.92008 23.3896 5.46673 23.1791 5.14385 22.8562C4.82096 22.5332 4.61043 22.08 4.49534 21.2239C4.37686 20.3426 4.375 19.1746 4.375 17.5Z" fill="white"/>
</svg>
</div>
</div>
<div id="hero-content">
<h1><span>L’apprentissage immersif</span><br><span style="font-weight: 500;">avec la</span> <span style="color:#6869F7">réalité augmentée</span></h1>
<h2>Une nouvelle manière de s’enrichir</h2>
<a id="dl-btn2" href="#">Télécharger</a>
</div>
</section>
<section id="stats">
<div id="stat">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M52.3089 68.7754C51.7168 69.4229 50.8801 69.7917 50.0026 69.7917C49.1251 69.7917 48.2885 69.4229 47.6964 68.7754L31.0296 50.5462C29.865 49.2725 29.9535 47.2958 31.2273 46.1312C32.5011 44.9667 34.4777 45.055 35.6423 46.3288L46.8776 58.6175V12.5C46.8776 10.7741 48.2768 9.375 50.0026 9.375C51.7285 9.375 53.1276 10.7741 53.1276 12.5V58.6175L64.363 46.3288C65.5276 45.055 67.5043 44.9667 68.778 46.1312C70.0518 47.2958 70.1401 49.2725 68.9755 50.5462L52.3089 68.7754Z" fill="#6869F7"/>
<path d="M15.625 62.5C15.625 60.7742 14.2259 59.375 12.5 59.375C10.7741 59.375 9.375 60.7742 9.375 62.5V62.7288C9.37492 68.4271 9.37484 73.02 9.8605 76.6325C10.3648 80.3829 11.4435 83.5404 13.9515 86.0483C16.4595 88.5567 19.6173 89.6354 23.3677 90.1396C26.9801 90.625 31.5731 90.625 37.2714 90.625H62.7288C68.4271 90.625 73.02 90.625 76.6325 90.1396C80.3829 89.6354 83.5404 88.5567 86.0487 86.0483C88.5567 83.5404 89.6354 80.3829 90.1396 76.6325C90.625 73.02 90.625 68.4271 90.625 62.7288V62.5C90.625 60.7742 89.2258 59.375 87.5 59.375C85.7742 59.375 84.375 60.7742 84.375 62.5C84.375 68.4808 84.3683 72.6521 83.9454 75.7996C83.5342 78.8571 82.7825 80.4758 81.6292 81.6292C80.4758 82.7825 78.8571 83.5342 75.7996 83.9454C72.6521 84.3683 68.4808 84.375 62.5 84.375H37.5C31.5191 84.375 27.3478 84.3683 24.2005 83.9454C21.1431 83.5342 19.524 82.7825 18.3709 81.6292C17.2177 80.4758 16.4658 78.8571 16.0548 75.7996C15.6316 72.6521 15.625 68.4808 15.625 62.5Z" fill="#6869F7"/>
</svg>
<h3>10K</h3>
<p>Téléchargements</p>
</div>
<div id="stat">
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.1378 22.5346C43.4155 13.0669 46.0543 8.33301 49.9997 8.33301C53.9451 8.33301 56.5838 13.0668 61.8613 22.5345L63.2268 24.984C64.7268 27.6744 65.4763 29.0196 66.6459 29.9072C67.8151 30.7948 69.2709 31.1243 72.1834 31.7832L74.8351 32.3831C85.0834 34.702 90.208 35.8614 91.4272 39.7819C92.6463 43.7022 89.153 47.7876 82.1659 55.9576L80.3584 58.0713C78.373 60.393 77.3801 61.5538 76.9334 62.9901C76.4872 64.4263 76.6372 65.9751 76.9372 69.073L77.2105 71.893C78.2668 82.7938 78.7951 88.2442 75.6034 90.6672C72.4113 93.0901 67.6134 90.8809 58.0176 86.463L55.5351 85.3197C52.8084 84.0642 51.4451 83.4363 49.9997 83.4363C48.5543 83.4363 47.1909 84.0642 44.4643 85.3197L41.9818 86.463C32.3858 90.8809 27.5879 93.0901 24.3961 90.6672C21.2043 88.2442 21.7325 82.7938 22.7888 71.893L23.0621 69.073C23.3623 65.9751 23.5124 64.4263 23.0658 62.9901C22.6192 61.5538 21.6265 60.393 19.641 58.0713L17.8334 55.9576C10.8466 47.7876 7.3531 43.7022 8.57227 39.7819C9.79143 35.8614 14.9158 34.702 25.1644 32.3831L27.8159 31.7832C30.7282 31.1243 32.1844 30.7948 33.3536 29.9072C34.5228 29.0196 35.2727 27.6744 36.7725 24.984L38.1378 22.5346Z" fill="#6869F7"/>
</svg>
<h3>4.8/5</h3>
<p>sur l'Appstore</p>
</div>
<div id="stat">
<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M55.0003 45.8337C65.1255 45.8337 73.3337 37.6255 73.3337 27.5003C73.3337 17.3751 65.1255 9.16699 55.0003 9.16699C44.8751 9.16699 36.667 17.3751 36.667 27.5003C36.667 37.6255 44.8751 45.8337 55.0003 45.8337Z" fill="#6869F7"/>
<path d="M55.0003 96.2497C72.7195 96.2497 87.0837 88.0416 87.0837 77.9163C87.0837 67.7911 72.7195 59.583 55.0003 59.583C37.2812 59.583 22.917 67.7911 22.917 77.9163C22.917 88.0416 37.2812 96.2497 55.0003 96.2497Z" fill="#6869F7"/>
</svg>
<h3>90%</h3>
<p>d'utilisateur actifs</p>
</div>
</section>
<section id="concept">
<div id="prez" data-aos="fade-up"
data-aos-anchor-placement="top-bottom"
data-aos-duration="3000">
<h4>Notre concept</h4>
<h2>Une nouvelle manière
<span style="color:#6869F7">d’apprendre</span> en <span style="color:#6869F7">s’amusant</span> !</h2>
<p>L'application permet aux apprenants de voir des modèles 3D de structures et de processus scientifiques.</p>
<div id="d-btn">
<a href="#">Découvrir</a>
<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 6.51694H17M17 6.51694L11 12.0342M17 6.51694L11 0.999697" stroke="#6869F7" stroke-width="1.39655" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div id="valors">
<div id="v-top">
<div id="valor" data-aos="zoom-out" data-aos-duration="3000">
<svg width="133" height="133" viewBox="0 0 133 133" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2929_311)">
<path d="M48.0278 7.38867C41.1238 7.38867 35.3974 12.1222 33.758 18.5182C33.5733 18.5182 33.4347 18.472 33.25 18.472C25.0991 18.472 18.4722 25.0989 18.4722 33.2498C18.4722 34.3581 18.6108 35.4434 18.8648 36.4824C12.1224 39.2533 7.38889 45.8571 7.38889 53.5692C7.38889 56.4786 8.12778 59.1802 9.30538 61.6277C3.76372 64.8142 0 70.7253 0 77.5831C0 85.2722 4.71042 91.876 11.4066 94.6468C11.1988 95.709 11.0833 96.7942 11.0833 97.9026C11.0833 107.092 18.5184 114.528 27.7083 114.528C28.655 114.528 29.5786 114.412 30.4792 114.25C32.6958 120.831 38.8378 125.611 46.1806 125.611C55.3705 125.611 62.8056 118.176 62.8056 108.986V22.1664C62.8056 14.0156 56.1786 7.38867 48.0278 7.38867ZM133 77.5831C133 70.7253 129.236 64.8142 123.695 61.6277C124.895 59.1802 125.611 56.4786 125.611 53.5692C125.611 45.8571 120.878 39.2533 114.135 36.4824C114.366 35.4434 114.528 34.3581 114.528 33.2498C114.528 25.0989 107.901 18.472 99.75 18.472C99.5653 18.472 99.4036 18.5182 99.242 18.5182C97.6026 12.1222 91.8762 7.38867 84.9722 7.38867C76.8214 7.38867 70.1944 13.9925 70.1944 22.1664V108.986C70.1944 118.176 77.6295 125.611 86.8194 125.611C94.1622 125.611 100.304 120.831 102.521 114.25C103.421 114.412 104.345 114.528 105.292 114.528C114.482 114.528 121.917 107.092 121.917 97.9026C121.917 96.7942 121.801 95.709 121.593 94.6468C128.29 91.876 133 85.2722 133 77.5831Z" fill="#D9D7FF"/>
</g>
<defs>
<clipPath id="clip0_2929_311">
<rect width="133" height="133" fill="white"/>
</clipPath>
</defs>
</svg>
<h3>Apprentissage</h3>
<p>Loreum Ipsum apanyan
quoicoubeh feur</p>
</div>
<div id="valor" data-aos="zoom-out" data-aos-duration="3000">
<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.6147 101.77H82.3839V109.483H43.6147V101.77ZM68.8147 125.031H57.1839C52.9014 125.031 49.4301 121.56 49.4301 117.277V115.339H76.5685V117.277C76.5685 121.56 73.0972 125.031 68.8147 125.031ZM62.0175 0.981293C39.7867 1.50468 21.9349 20.1197 22.2974 42.3534C22.4685 52.8647 26.6241 62.4073 33.319 69.5369C39.8323 76.4737 43.6147 85.5312 43.6147 95.0471V95.9141H60.0916V62.0312H52.3378V56.2158H73.6608V62.0312H65.907V95.9141H82.3839V95.0451C82.3839 85.5462 86.1377 76.4882 92.6481 69.5708C99.5054 62.2851 103.707 52.4722 103.707 41.6774C103.707 18.8689 84.9485 0.441432 62.0175 0.981293Z" fill="#D9D7FF"/>
</svg>
<h3>Innovation</h3>
<p>Loreum Ipsum apanyan
quoicoubeh feur</p>
</div>
</div>
<div id="v-top">
<div id="valor" data-aos="zoom-out" data-aos-duration="3000">
<svg id="excellence" width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2929_315)">
<path d="M117.188 7.8125H93.75C93.75 3.48633 90.2559 0 85.9375 0H39.0625C34.7441 0 31.25 3.48633 31.25 7.8125H7.8125C3.49414 7.8125 0 11.2988 0 15.625V31.25C0 48.5078 13.9922 62.5 31.25 62.5C31.6172 62.5 31.959 62.4004 32.3184 62.3848C35.125 73.3789 43.709 81.9785 54.6875 84.8242V109.375H39.0625C34.7441 109.375 31.25 112.861 31.25 117.188V125H93.75V117.188C93.75 112.861 90.2559 109.375 85.9375 109.375H70.3125V84.8242C81.291 81.9785 89.875 73.3809 92.6816 62.3867C93.041 62.4004 93.3828 62.5 93.75 62.5C111.008 62.5 125 48.5078 125 31.25V15.625C125 11.2988 121.506 7.8125 117.188 7.8125ZM15.625 31.25V23.4375H31.25V46.875C22.6211 46.875 15.625 39.8711 15.625 31.25ZM109.375 31.25C109.375 39.8711 102.379 46.875 93.75 46.875V23.4375H109.375V31.25Z" fill="#D9D7FF"/>
</g>
<defs>
<clipPath id="clip0_2929_315">
<rect width="125" height="125" fill="white"/>
</clipPath>
</defs>
</svg>
<h3>Excellence</h3>
<p>Loreum Ipsum apanyan
quoicoubeh feur</p>
</div>
<div id="valor" data-aos="zoom-out" data-aos-duration="3000">
<svg id="star" width="187" height="187" viewBox="0 0 187 187" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M136.369 93.7571L103.325 74.6052L119.984 34.6262C120.498 33.5821 120.786 32.4055 120.786 31.1667C120.786 26.8657 117.319 23.375 113.018 23.375C111.078 23.4062 109.457 24.0217 108.171 25.0424L107.626 25.5099L49.1885 80.8307C47.4042 82.5215 46.5237 84.9525 46.8042 87.3913C47.0847 89.8301 48.5106 91.9962 50.6299 93.2351L83.6822 112.403L66.8288 152.841C65.4029 156.238 66.5639 160.165 69.5871 162.254C70.935 163.173 72.4856 163.625 74.0205 163.625C75.9528 163.625 77.8852 162.9 79.3812 161.49L137.819 106.154C139.603 104.463 140.483 102.032 140.203 99.5931C139.915 97.1543 138.489 94.9882 136.369 93.7571Z" fill="#D9D7FF"/>
</svg>
<h3>Autonomie</h3>
<p>Loreum Ipsum apanyan
quoicoubeh feur</p>
</div>
</div>
</div>
<span id="carre-bg"></span>
</section>
<section id="formu">
<div id="intro">
<h2 >Formules & tarifs</h2>
<hr >
</div>
<div id="prix">
<p id="pinte" >L'application permet aux apprenants de voir des modèles 3D de structures et de processus</p>
<div id="cards">
<div data-aos="fade-right"
data-aos-offset="300"
data-aos-easing="ease-in-sine" id="card">
<h3>Basique</h3>
<p>L'application permet aux apprenants de voir des modèles 3D de structures et de processus</p>
<div id="fonctions">
<div id="fonctio" class="well">
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5624 16.2627C30.9126 16.6129 30.9126 17.1808 30.5624 17.531L20.4014 27.6921C20.0534 28.04 19.4899 28.0426 19.1388 27.6977L13.2684 21.9322C12.915 21.5851 12.9099 21.0173 13.257 20.6639C13.6041 20.3105 14.1719 20.3054 14.5253 20.6525L19.7615 25.7952L29.294 16.2627C29.6443 15.9124 30.2121 15.9124 30.5624 16.2627Z" fill="#6869F7"/>
</svg>
<p id="true">Accès fonctionnalités</p>
</div>
<div id="fonctio">
<svg width="44" height="45" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.086 15.2222L14.543 29.7652M14.543 15.2222L29.086 29.7652" stroke="#25244E" stroke-width="2.14999" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p>Accès fonctionnalités</p>
</div>
<div id="fonctio">
<svg width="44" height="45" viewBox="0 0 44 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.086 15.2222L14.543 29.7652M14.543 15.2222L29.086 29.7652" stroke="#25244E" stroke-width="2.14999" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p>Accès fonctionnalités</p>
</div>
</div>
<a href="#">Choisir</a>
</div>
<div id="card2" data-aos="fade-left"
data-aos-offset="300"
data-aos-easing="ease-in-sine">
<h3>Premium</h3>
<p id="caca">L'application permet aux apprenants de voir des modèles 3D de structures et de processus</p>
<div id="fonctions">
<div id="fonctio" class="well">
<svg id="coubeh" width="45" height="45" viewBox="0 0 45 45" fill="black" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5624 16.2627C30.9126 16.6129 30.9126 17.1808 30.5624 17.531L20.4014 27.6921C20.0534 28.04 19.4899 28.0426 19.1388 27.6977L13.2684 21.9322C12.915 21.5851 12.9099 21.0173 13.257 20.6639C13.6041 20.3105 14.1719 20.3054 14.5253 20.6525L19.7615 25.7952L29.294 16.2627C29.6443 15.9124 30.2121 15.9124 30.5624 16.2627Z" fill="#6869F7"/>
</svg>
<p id="true">Accès fonctionnalités</p>
</div>
<div id="fonctio">
<svg width="45" height="45" viewBox="0 0 45 45" fill="black" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5624 16.2627C30.9126 16.6129 30.9126 17.1808 30.5624 17.531L20.4014 27.6921C20.0534 28.04 19.4899 28.0426 19.1388 27.6977L13.2684 21.9322C12.915 21.5851 12.9099 21.0173 13.257 20.6639C13.6041 20.3105 14.1719 20.3054 14.5253 20.6525L19.7615 25.7952L29.294 16.2627C29.6443 15.9124 30.2121 15.9124 30.5624 16.2627Z" fill="#6869F7"/>
</svg>
<p>Accès fonctionnalités</p>
</div>
<div id="fonctio">
<svg width="45" height="45" viewBox="0 0 45 45" fill="black" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.5624 16.2627C30.9126 16.6129 30.9126 17.1808 30.5624 17.531L20.4014 27.6921C20.0534 28.04 19.4899 28.0426 19.1388 27.6977L13.2684 21.9322C12.915 21.5851 12.9099 21.0173 13.257 20.6639C13.6041 20.3105 14.1719 20.3054 14.5253 20.6525L19.7615 25.7952L29.294 16.2627C29.6443 15.9124 30.2121 15.9124 30.5624 16.2627Z" fill="#6869F7"/>
</svg>
<p>Accès fonctionnalités</p>
</div>
</div>
<a href="#">Choisir</a>
</div>
</div>
</div>
</section>
<section id="newsletter">
<h2>Restez à l'affût !</h2>
<p>Inscrivez-vous à notre newsletter pour recevoir des mises à jour sur nos dernières ressources et des conseils d'apprentissage.</p>
<div id="mail">
<input type="text" placeholder="Entrez votre email...">
<a href="#">S'inscrire</a>
</div>
</section>
<footer>
<div id="f-left">
<a href="#">Politiques de confidentialités</a>
<a href="#">Mentions légales</a>
</div>
<svg width="263" height="162" viewBox="0 0 263 162" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2941_87)">
<path d="M40.8503 161.8L13.8203 73.1901L93.0003 72.5601L76.0403 131.63H57.8103L51.5303 111.52H61.5803L67.2403 92.6701L39.5903 93.3001L60.3303 161.8H40.8503Z" fill="#D9D7FF"/>
<path d="M41.47 67.24H20.74L0 40.22L32.68 15.71L42.73 28.28L23.25 42.73L41.47 67.24Z" fill="#6869F7"/>
<path d="M38.9596 10.05L52.1596 0L77.2896 32.68L58.4396 47.76L73.5196 67.24L51.5296 67.87L34.5596 45.25L54.0396 29.54L38.9596 10.05Z" fill="#6869F7"/>
<path d="M83.58 66.6098L96.15 56.5598L82.32 39.5898L69.75 49.6398L83.58 66.6098Z" fill="#6869F7"/>
<path d="M104.16 117.66L100.43 107.71H99.3496L97.6596 117.66H89.0996L93.8996 90.4702H105.08C106.56 90.4702 107.91 90.6402 109.11 90.9702C110.31 91.3002 111.34 91.7902 112.18 92.4302C113.02 93.0702 113.67 93.8602 114.12 94.7902C114.57 95.7302 114.79 96.7902 114.79 98.0002C114.79 100.25 114.26 102.11 113.2 103.57C112.14 105.03 110.68 106.03 108.84 106.57L114.14 117.67H104.15L104.16 117.66ZM102.2 102.07C103.38 102.07 104.3 101.87 104.97 101.48C105.64 101.08 105.97 100.45 105.97 99.5802C105.97 98.7902 105.69 98.2402 105.14 97.9502C104.59 97.6602 103.84 97.5102 102.89 97.5102H101.24L100.43 102.08H102.2V102.07Z" fill="#D9D7FF"/>
<path d="M130.54 118.35C128.36 118.35 126.44 118.05 124.76 117.45C123.08 116.85 121.67 116 120.53 114.9C119.39 113.8 118.53 112.49 117.94 110.98C117.35 109.47 117.06 107.81 117.06 105.99C117.06 103.74 117.46 101.62 118.25 99.65C119.04 97.68 120.16 95.96 121.59 94.5C123.02 93.04 124.76 91.89 126.79 91.04C128.83 90.2 131.08 89.77 133.57 89.77C135.77 89.77 137.71 90.07 139.39 90.67C141.07 91.27 142.47 92.12 143.61 93.22C144.75 94.32 145.61 95.63 146.2 97.14C146.79 98.65 147.08 100.32 147.08 102.13C147.08 104.38 146.69 106.5 145.91 108.47C145.13 110.44 144.01 112.16 142.57 113.62C141.12 115.08 139.38 116.23 137.35 117.08C135.31 117.93 133.04 118.35 130.53 118.35H130.54ZM137.84 102.8C137.84 102.11 137.73 101.46 137.51 100.86C137.29 100.26 136.97 99.73 136.55 99.28C136.13 98.83 135.6 98.48 134.98 98.22C134.35 97.97 133.64 97.84 132.85 97.84C131.85 97.84 130.95 98.05 130.14 98.47C129.33 98.89 128.65 99.45 128.09 100.14C127.53 100.83 127.09 101.63 126.78 102.52C126.47 103.42 126.32 104.33 126.32 105.25C126.32 105.94 126.43 106.59 126.65 107.19C126.87 107.79 127.19 108.32 127.61 108.76C128.03 109.21 128.56 109.56 129.18 109.82C129.8 110.08 130.53 110.2 131.35 110.2C132.35 110.2 133.24 110 134.04 109.59C134.83 109.18 135.51 108.63 136.08 107.94C136.64 107.25 137.08 106.46 137.39 105.56C137.7 104.66 137.85 103.74 137.85 102.8H137.84Z" fill="#D9D7FF"/>
<path d="M172.87 117.66L175.9 101.91H175.67L167.64 117.66H161.38L158.96 101.91H158.77L156.43 117.66H148.13L152.93 90.4702H164.26L166.64 105.37H166.83L173.9 90.4702H186.31L181.51 117.66H172.87Z" fill="#D9D7FF"/>
<path d="M186.66 117.66L191.46 90.4702H209.24L207.93 97.8802H198.52L198.06 100.49H207.05L205.82 107.4H196.83L196.33 110.24H206.85L205.54 117.65H186.64L186.66 117.66Z" fill="#D9D7FF"/>
<path d="M226.02 97.9602L222.559 117.66H213.649L217.109 97.9602H210.229L211.57 90.4702H233.999L232.66 97.9602H226.02Z" fill="#D9D7FF"/>
<path d="M248.42 117.66L250.26 107.21H242.5L240.66 117.66H231.79L236.59 90.4702H245.42L243.77 99.8002H251.53L253.18 90.4702H262.09L257.29 117.66H248.42Z" fill="#D9D7FF"/>
</g>
<defs>
<clipPath id="clip0_2941_87">
<rect width="262.09" height="161.8" fill="white"/>
</clipPath>
</defs>
</svg>
<div id="f-right">
<a href="#">Accueil</a>
<a href="#">Abonnement</a>
<a href="#">Communauté</a>
<a href="#">Télécharger</a>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>