-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
472 lines (463 loc) · 24.4 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
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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidra</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<div class="container-fluid text-light">
<div class=" barra row align-items-center">
<div class="col-lg-2 col d-flex">
<img src="img/logohi.png" class="img-fluid d-none d-lg-block" alt="">
<img src="img/Frame2.png" class="log img-fluid d-lg-none " alt="">
<img src="img/Frame1.png" class="hyd img-fluid d-lg-none w-80" alt="">
</div>
<div class="col-lg-1 d-none d-lg-block">
</div>
<div class="col-lg-4 d-none d-lg-block">
<ul class="d-flex gap-4 mb-0 ">
<li>About</li>
<li>SERVICES</li>
<li>TECHNOLOGIES</li>
<li>HOW TO</li>
</ul>
</div>
<div class="col-lg-1 d-none d-lg-block">
</div>
<div class="col-lg-4 gap-4 align-items-center justify-content-center d-none d-lg-flex fw-bold">
<div class="border rounded-pill px-3 py-2">
CONTACT US
</div>
<div class="boton2 rounded-pill px-3 py-2">
JOIN HYDRA
</div>
</div>
<div class="boton0 col d-lg-none justify-content-end">
<img class="boton1 d-lg-none" src="img/boton1.png">
</div>
</div>
<div class="seccion1 row mt-5 ">
<div class=" part1 d-none d-lg-block col-lg">
<img class="li0 d-none d-lg-block position-absolute" img src="img/Vector 4.png">
<h1 class="hse1 d-lg-block"><span class="textogradiente ">Dive</span> Into The Depths<br>Of <span class="textogradiente">Virtual
Reality</span></h1>
<p class="lore text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
nisl tincidunt eget. Lectus mauris eros in vitae .</p>
<div class="d-flex align-items-center gap-2">
<div class="bot3 d-none d-lg-block rounded-pill px-3 py-2 fw-bold">
BUILD YOUR WORLD
</div>
<svg class="svg1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<path d="M70.8333 50L29.1667 50M70.8333 50L54.1667 66.6667M70.8333 50L54.1667 33.3333"
stroke="#C0B7E8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="d-none">
</div>
<div class="par2 col col-lg relative">
<svg class=" li4 position-absolute w-100" xmlns="http://www.w3.org/2000/svg" width="736" height="423"
viewBox="0 0 736 423" fill="none">
<path d="M738.5 4.5C491.667 -7.66666 -0.900015 58.9 3.49999 422.5" stroke="url(#paint0_linear_2_33)"
stroke-width="6" />
<defs>
<linearGradient id="paint0_linear_2_33" x1="700.5" y1="-3.99998" x2="14.5" y2="361"
gradientUnits="userSpaceOnUse">
<stop stop-color="#343045" />
<stop offset="0.213542" stop-color="#C0B7E8" />
<stop offset="0.71875" stop-color="#8176AF" />
<stop offset="1" stop-color="#343045" />
</linearGradient>
</defs>
</svg>
<svg class="li2 position-absolute" xmlns="http://www.w3.org/2000/svg" width="383" height="846"
viewBox="0 0 383 846" fill="none">
<path
d="M3.19293 0C-0.0879101 140.127 37.2087 433.314 212.642 485.053C388.075 536.792 391.776 746.576 371.697 845"
stroke="url(#paint0_linear_1_24)" stroke-width="6" />
<defs>
<linearGradient id="paint0_linear_1_24" x1="16.5" y1="39.5" x2="363" y2="814"
gradientUnits="userSpaceOnUse">
<stop offset="0.0104167" stop-color="#343045" />
<stop offset="0.229167" stop-color="#C0B7E8" />
<stop offset="0.776042" stop-color="#8176AF" />
<stop offset="1" stop-color="#343045" />
</linearGradient>
</defs>
</svg>
<img class="li3 position-absolute" src="img/Vector1.png">
<img class="muj z-index-2 position relative" src="img/mujer.png" id="imborde">
</div>
<div class="par3 col d-lg-none">
<h1 class="hse1"><span class="textogradiente">Dive</span> Into The Depths<br>Of <span class="textogradiente">Virtual
Reality</span></h1>
<div class="bot3 rounded-pill px-3 py-2 fw-bold">
BUILD YOUR WORLD
</div>
</div>
</div>
<div class="seccion2 row justify-content-center">
<div class="fs2 d-flex justify-content-center align-items-center py-3 ">
<div class="col-lg d-flex gap-3 align-items-center justify-content-center">
<img class="d-lg-none" src="img/fle2.png">
<svg class="ubi" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M35 5.83334C46.2758 5.83334 55.4166 14.9742 55.4166 26.25C55.4166 29.6593 54.5834 32.8717 53.1039 35.6983L35 67.0833L17.3154 36.4595C15.575 33.4542 14.5833 29.9693 14.5833 26.25C14.5833 14.9742 23.7242 5.83334 35 5.83334ZM35 11.6667C26.9458 11.6667 20.4166 18.1959 20.4166 26.25C20.4166 28.566 20.9509 30.7882 21.962 32.7943L22.452 33.6893L35 55.4167L47.6366 33.5362C48.9071 31.3423 49.5833 28.8555 49.5833 26.25C49.5833 18.1959 43.0541 11.6667 35 11.6667ZM35 17.5C39.8325 17.5 43.75 21.4175 43.75 26.25C43.75 31.0825 39.8325 35 35 35C30.1675 35 26.25 31.0825 26.25 26.25C26.25 21.4175 30.1675 17.5 35 17.5ZM35 23.3333C33.3891 23.3333 32.0833 24.6392 32.0833 26.25C32.0833 27.8608 33.3891 29.1667 35 29.1667C36.6108 29.1667 37.9166 27.8608 37.9166 26.25C37.9166 24.6392 36.6108 23.3333 35 23.3333Z"
fill="#C0B7E8" />
</svg>
<div>
<h3 class="fw-bold d-none d-lg-block">
Pay Us a Visit
</h3>
<p class="ps2">
Union St, Seattle, WA 98101, United States
</p>
</div>
<img class="d-lg-none" src="img/fle1.png">
</div>
<div class="col-lg-1 d-none d-lg-block linea1">
<svg xmlns="http://www.w3.org/2000/svg" width="1" height="117" viewBox="0 0 1 117" fill="none">
<path d="M0.5 116.5V0" stroke="#C0B7E8" stroke-opacity="0.33" />
</svg>
</div>
<div class="col-lg d-none d-lg-flex gap-3 align-items-center justify-content-center">
<svg class="svg2" xmlns="http://www.w3.org/2000/svg" width="59" height="59" viewBox="0 0 59 59" fill="none">
<path
d="M35.6458 15.9792C37.458 16.3327 39.2569 17.1319 40.5625 18.4375C41.8681 19.7431 42.6673 21.542 43.0208 23.3542M36.875 7.375C40.64 7.79326 44.028 9.61471 46.7083 12.2917C49.3887 14.9686 51.202 18.3605 51.625 22.125M51.6237 40.5051V47.1666C51.634 49.7131 49.3443 51.8395 46.7734 51.6077C24.5835 51.625 7.37515 34.2568 7.39252 12.2159C7.16097 9.65866 9.27686 7.37761 11.8201 7.37522H18.4948C19.5746 7.36461 20.6214 7.74621 21.4401 8.4489C23.7676 10.4467 25.2648 17.2274 24.6887 19.923C24.239 22.0276 22.1175 23.4999 20.6752 24.9394C23.8425 30.4985 28.4545 35.1014 34.0247 38.2624C35.467 36.823 36.9423 34.7057 39.051 34.2568C41.7561 33.6811 48.5805 35.1803 50.5702 37.5241C51.2758 38.3552 51.6507 39.4161 51.6237 40.5051Z"
stroke="#C0B7E8" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="giv">
<h3 class="fw-bold">
Give Us a Call
</h3>
<p class="ps2 ">
(110) 1111-1010
</p>
</div>
</div>
<div class="col-lg-1 linea2 d-none d-lg-block">
<svg xmlns="http://www.w3.org/2000/svg" width="1" height="117" viewBox="0 0 1 117" fill="none">
<path d="M0.5 116.5V0" stroke="#C0B7E8" stroke-opacity="0.33" />
</svg>
</div>
<div class="col-lg d-none d-lg-flex d-flex gap-3 align-items-center justify-content-center ">
<svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" viewBox="0 0 65 65" fill="none">
<path
d="M8.91825 14.3349C9.40836 13.8448 10.0854 13.5417 10.8333 13.5417H54.1667C54.9146 13.5417 55.5916 13.8448 56.0817 14.3349M8.91825 14.3349C8.42814 14.825 8.125 15.5021 8.125 16.25V48.75C8.125 50.2458 9.33756 51.4583 10.8333 51.4583H54.1667C55.6624 51.4583 56.875 50.2458 56.875 48.75V16.25C56.875 15.5021 56.5719 14.825 56.0817 14.3349M8.91825 14.3349L28.6698 34.0864C30.7852 36.2017 34.2148 36.2017 36.3302 34.0864L56.0817 14.3349"
stroke="#C0B7E8" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div>
<h3 class="fw-bold">
Send Us a Message
</h3>
<p class="ps2">
Contact@HydraVTech.com
</p>
</div>
</div>
</div>
</div>
<div class="seccion3 row ">
<div class="part1 col-lg">
<h2 class="in fw-bold">INTRODUCTION</h2>
<div class=" intro d-flex ">
<p class="to">TO HYDRA VR</p>
<img class="d-none d-lg-block" src="img/fle.png">
</div>
</div>
<div class=" col-lg">
<P class="p2 d-none d-lg-block">Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Mi sit amet mauris commodo
quis imperdiet massa tincidunt nunc. Viverra aliquet eget sit amet tellus. Ornare
lectus sit amet est placerat in. Lectus magna fringilla urna porttitor rhoncus vitae.</P>
</div>
</div>
<div class="seccion4 row d-flex">
<img class="li5 d-none d-lg-block position-absolute" src="img/Vector 7.png">
<img class="li6 d-none d-lg-block position-absolute" src="img/Vector 8.png">
<div class="col-lg">
<img class="paimg position-absolute" src="img/man.png">
</div>
<div class=" parte1 col-lg">
<h1 class="ab fw-bold d-none d-lg-block">
ABOUT
</h1>
<h1 class="font2 d-none d-lg-block">
HYDRA VR
</h1>
<p class="eget">
Eget mi proin sed libero enim sed faucibus turpis. Nisl rhoncus mattis rhoncus
urna neque viverra justo. Vivamus at augue eget arcu dictum. Ultrices gravida
dictum fusce ut placerat orci. Aenean et tortor at risus viverra adipiscing at in.
Mattis aliquam faucibus purus in massa. Est placerat in egestas erat imperdiet
sed. Consequat semper viverra nam libero justo laoreet sit amet. Aliquam
etiam erat velit scelerisque in dictum non consectetur a. Laoreet sit amet
cursus sit amet. Vel eros donec ac odio tempor orci dapibus. Sem nulla pha
retra diam sit amet nisl suscipit adipiscing bibendum. Leo a diam sollicitudi
n tempor.
</p>
<div class="bot1 rounded-pill px-3 py-2">
LET’S GET IN TOUCH
</div>
</div>
</div>
<div class="seccion3 row ">
<div class="part1 col-lg">
<h2 class="in fw-bold">WHY BUILD</h2>
<div class=" intro d-flex ">
<p class="to">WITH HYDRA?</p>
<img class="d-none d-lg-block" src="img/fle.png">
</div>
</div>
<div class=" col-lg d-none d-lg-block">
<P class="p2">Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Mi sit amet mauris commodo
quis imperdiet massa tincidunt nunc. Viverra aliquet eget sit amet tellus. Ornare
lectus sit amet est placerat in. Lectus magna fringilla urna porttitor rhoncus vitae.</P>
</div>
</div>
<!-- esta seccion 3 se repite x q son las mismas con otros textos -->
<div class="seccion6 row text-center gap-3">
<img class="li7 d-none d-lg-block position-absolute" src="img/Vector 14.png">
<div class="carta position-relative col-lg">
<div class="imaf1"></div>
<div class="d-lg-none">
<div class="fpi1"><img class="fpi2" src="img/fpi.png"></div>
<div class="fpd1"><img class="fpd2" src="img/fpd.png"></div>
</div>
<p class="psecc6">SIMULATION</p>
<img src="img/Vector 10.png">
<p class="lor">Vitae sapien pellentesque habitant morbi
nunc. Viverra aliquet porttitor rhoncus
libero justo laoreet sit amet vitae.</p>
<div class="boto rounded-pill px-3 py-3">
TRY IT NOW
</div>
</div>
<div class="carta d-none d-lg-block col-lg">
<div class="imaf2"></div>
<p class="psecc6">EDUCATION</p>
<img src="img/Vector 10.png">
<p class="lor">Vitae sapien pellentesque habitant morbi
nunc. Viverra aliquet porttitor rhoncus
libero justo laoreet sit amet vitae.</p>
<div class="boto rounded-pill px-3 py-3">
TRY IT NOW
</div>
</div>
<div class="carta d-none d-lg-block position-relative col-lg">
<div class="imaf3"></div>
<p class="psecc6">SELF-CARE</p>
<img src="img/Vector 10.png">
<p class="lor">Vitae sapien pellentesque habitant morbi
nunc. Viverra aliquet porttitor rhoncus
libero justo laoreet sit amet vitae.</p>
<div class="boto rounded-pill px-3 py-3">
TRY IT NOW
</div>
</div>
<div class="carta d-none d-lg-block position-relative col-lg">
<div class="imaf4"></div>
<p class="psecc6">OUTDOOR</p>
<img src="img/Vector 10.png">
<p class="lor">Vitae sapien pellentesque habitant morbi
nunc. Viverra aliquet porttitor rhoncus
libero justo laoreet sit amet vitae.</p>
<div class="boto rounded-pill px-3 py-3">
TRY IT NOW
</div>
</div>
</div>
<div class="seccion7 row">
<div class="fon position-relative col-lg">
<h1 class="hu">TECHNOLOGIES & HARDWARE</h1>
<h1 class="hd">USED BY HYDRA VR.</h1>
<div class="circ d-none d-lg-block">
<img class="flech" src="img/fleba.png">
</div>
</div>
</div>
<div class="seccion8 row">
<div class="col-lg d-none d-lg-block">
<img src="img/unreal.png" alt="">
</div>
<div class="col-lg d-none d-lg-block">
<img src="img/unity.png" alt="">
</div>
<div class="col-lg d-none d-lg-block">
<img src="img/oculus.png" alt="">
</div>
<div class="col-lg">
<div class="fp d-lg-none">
<div class="fpi1"><img class="fpi2" src="img/fpi.png"></div>
<div class="fpd1"><img class="fpd2" src="img/fpd.png"></div>
</div>
<img class="vive" src="img/vive.png" alt="">
</div>
</div>
<div class="seccion3a row ">
<div class="part1 col-lg">
<h2 class="in1 fw-bold">HOW WE BUILD</h2>
<div class=" intro d-flex ">
<p class="to1">WITH HYDRA VR?</p>
<img class=" d-none d-lg-block" src="img/fle.png">
</div>
</div>
<div class=" col-lg d-none d-lg-block">
<P class="p2">Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Feugiat
nibh sed pulvinar proin gravida hendrerit lectus. Mi sit amet mauris commodo
quis imperdiet massa tincidunt nunc. Viverra aliquet eget sit amet tellus. Ornare
lectus sit amet est placerat in. Lectus magna fringilla urna porttitor rhoncus vitae.</P>
</div>
</div>
<!-- esta seccion9 tambien se repite igual a la seccion3 -->
<div class="seccion10 row justify-content-center">
<div class="espa d-none d-lg-block col-lg">
</div>
<div class="t1 col-lg justify-content-center">
<div class="uno">
<p class="pa1">01</p>
</div>
<div class="fp d-lg-none">
<div class="fpi1"><img class="fpi2" src="img/fpi.png"></div>
<div class="fpd1"><img class="fpd2" src="img/fpd.png"></div>
</div>
<div class="ta gap-2">
<img class="im1 d-none d-lg-block" src="img/flepe.png">
<p class="tex10">3D Conception<br>
& Design</p>
</div>
</div>
<div class="t1 d-none d-lg-block col-lg justify-content-center">
<div class="uno">
<p class="pa1">02</p>
</div>
<div class="ta2 gap-2">
<img class="im1" src="img/flepe.png">
<p class="tex10">Interaction<br>
Design</p>
</div>
</div>
<div class="t1 d-none d-lg-block col-lg justify-content-center">
<div class="uno">
<p class="pa1">03</p>
</div>
<div class="ta3 gap-2">
<img class="im1" src="img/flepe.png">
<p class="tex10">VR World<br>
User Testing</p>
</div>
</div>
<div class="t1 d-none d-lg-block col-lg justify-content-center">
<div class="uno">
<p class="pa1">04</p>
</div>
<div class="ta4 gap-2">
<img class="im1" src="img/flepe.png">
<p class="tex10">Hydra VR<br>
Deploy</p>
</div>
</div>
<div class=" d-none d-lg-block col-lg">
</div>
</div>
<div class="seccion11 row text-center">
<div class="col-lg">
<h1 class="h11 text-center">JOIN HYDRA</h1>
<img class="img11" src="img/Vector123.png">
<h1 class="honce">Let’s Build<br class="d-lg-none"> Your VR Experience</h1>
<div class="fl d-flex justify-content-center gap-3">
<div class="first">
<p class="p11">First Name</p>
</div>
<div class="first">
<p class="p11">Last Name</p>
</div>
</div>
<div class="fl d-flex justify-content-center gap-3">
<div class="first">
<p class="p11">Email</p>
</div>
<div class="first">
<p class="p11">Phone Number</p>
</div>
</div>
<div class="subject mb-5">
<p class="p11">Subject</p>
</div>
<div class="tell">
<p class="ptell">Tell Us Something...</p>
</div>
<div class="send">
<p>SEND TO HYDRA</p>
</div>
</div>
</div>
<div class="seccion12 row">
<img class="li8 position-absolute d-none d-lg-block" src="img/Vector 19.png">
<img class="li9 position-absolute d-none d-lg-block" src="img/Vector 18.png">
<div class="ims12 col-lg">
<img class="li1 position-absolute d-lg-none" src="img/li1se12.png">
<img class="li2 d-lg-none" src="img/li2se12.png">
<img class="im12 position-absolute" src="img/Frame2.png">
</div>
<div class="ims12 col-lg d-none d-lg-block">
<img class="v22" src="img/Vector 22.png">
</div>
<div class="ims12 col-lg d-none d-lg-block">
<p class="p12">
ABOUT<br>
SERVICES<br>
TECHNOLOGIES<br>
HOW TO<br>
JOIN HYDRA
</p>
</div>
<div class="ims12 col-lg d-none d-lg-block">
<img class="v22" src="img/Vector 22.png">
</div>
<div class="ims12 col-lg d-none d-lg-block">
<p class="p12">
F.A.Q<br>
SITEMAP<br>
CONDITIONS<br>
LICENSES
</p>
</div>
<div class="ims12 col-lg d-none d-lg-block">
<img class="v22" src="img/Vector 22.png">
</div>
<div class="ima12 col-lg-3">
<p class="socia">SOCIALIZE WITH HYDRA</p>
<div class="redes">
<img src="img/facebook.png">
<img src="img/twitter.png">
<img src="img/linkedin.png">
<img src="img/youtube.png">
<img src="img/instagram.png">
<img src="img/pinterest.png">
</div>
<div class="bu">
<p class="bui">BUILD YOUR WORLD</p>
</div>
</div>
</div>
<div class="seccion13 row text-center">
<div class="col-lg">
<img class="v17" src="img/Vector 17.png">
<p class="lan d-none d-lg-block">2023 © HYDRA LANDING PAGE - BY ZINE. E. FALOUTI - ALL RIGHTS RESERVED </p>
<p class="p13 mt-5 d-lg-none">2023 © HYDRA LANDING PAGE <br><br> BY ZINE. E. FALOUTI <br><br> ALL RIGHTS RESERVED </p>
</div>
</div>
</div>
</body>
</html>