-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (121 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Silent Lingo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="load-screen">
<img src="./images/h.png" class="h" alt="">
<img src="./images/a.png" class="a" alt="">
<img src="./images/r.png" class="r" alt="">
<img src="./images/k.png" class="k" alt="">
</div>
<div class="main">
<div class="cursor"></div>
<nav>
<img src="./images/viber_image_2024-06-09_01-04-59-342.jpg" class="logo" alt="">
<div class="nav-part2">
<div class="nav-elem">
<h1>HARK</h1>
</div>
</div>
<button class="nav-btn"><span></span>Let's Talk<svg fill="none" viewBox="0 0 20 20">
<path fill="#fff"
d="M2.5 14.375V17.5h3.125l9.217-9.217-3.125-3.125L2.5 14.375Zm14.758-8.508a.83.83 0 0 0 0-1.175l-1.95-1.95a.83.83 0 0 0-1.175 0l-1.525 1.525 3.125 3.125 1.525-1.525Z">
</path>
</svg></button>
<div id="nav-bottom"></div>
</nav>
<div id="main">
<div id="page1">
<div class="text-area">
<div class="yt-area">
<iframe width="700" height="400" src="https://www.youtube.com/embed/A3OPKurp940?si=bnyS_jvcgYrx9QY4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<svg class="cross" xmlns="http ://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#fff"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
</div>
<h1>AI & ML PR<span><svg class="c-bttn__morph" fill="white" viewBox="0 0 131 136">
<path class="g-path" data-morph="end" fill="white"
d="M48 77.457v7.224h7.224l21.307-21.306-7.224-7.225L48 77.457Zm34.118-19.67a1.919 1.919 0 0 0 0-2.716l-4.508-4.508a1.919 1.919 0 0 0-2.716 0l-3.526 3.526 7.224 7.224 3.526-3.525Z">
</path>
<path class="g-path" data-morph="start" fill="#fff"
d="M48 77.457v7.224h7.224l21.307-21.306-7.224-7.225L48 77.457Zm34.118-19.67a1.919 1.919 0 0 0 0-2.716l-4.508-4.508a1.919 1.919 0 0 0-2.716 0l-3.526 3.526 7.224 7.224 3.526-3.525Z"
data-original="M65.72 109.14c10.08 0 17.76-3.78 23.04-11.34 5.4-7.68 8.1-17.64 8.1-29.88 0-12.24-2.7-22.2-8.1-29.88-5.28-7.68-12.96-11.52-23.04-11.52-9.96 0-17.7 3.84-23.22 11.52-5.4 7.68-8.1 17.64-8.1 29.88 0 12.12 2.7 22.02 8.1 29.7 5.52 7.68 13.26 11.52 23.22 11.52Zm46.08 7.02c-11.64 12.6-27.06 18.9-46.26 18.9s-34.62-6.3-46.26-18.9C7.76 103.56 2 87.48 2 67.92c0-19.56 5.76-35.64 17.28-48.24C30.92 7.08 46.34.78 65.54.78s34.62 6.3 46.26 18.9c11.64 12.6 17.46 28.68 17.46 48.24 0 19.56-5.82 35.64-17.46 48.24Z">
</path>
</svg></span>DUCT</h1>
<h1>SILENT LINGO</h1>
</div>
<div class="content">
<span>H a n d T h a t S p e a k s</span>
<button class="btn-content"><span></span>Silent Lingo</button>
</div>
<div id="moving-div">
<div id="blur-left"></div>
<div class="move">
<img src="./Icons/hand.png" alt="" decoding="async">
<img src="./Icons/letter-v.png" alt="" decoding="async">
<img src="./Icons/moliok.png" alt="" decoding="async">
<img src="./Icons/ok.png" alt="" decoding="async">
<img src="./Icons/peace.png" alt="" decoding="async">
<img src="./Icons/plam.png" alt="" decoding="async">
<img src="Icons/thumb.png" alt="" decoding="async">
</div>
<div class="move">
<img src="./Icons/hand.png" alt="" decoding="async">
<img src="./Icons/letter-v.png" alt="" decoding="async">
<img src="./Icons/moliok.png" alt="" decoding="async">
<img src="./Icons/ok.png" alt="" decoding="async">
<img src="./Icons/peace.png" alt="" decoding="async">
<img src="./Icons/plam.png" alt="" decoding="async">
<img src="Icons/thumb.png" alt="" decoding="async">
</div>
<div id="blur-right"></div>
</div>
</div>
</div>
<div id="page2">
<div id="page2-left">
<p>Exclusive insights into <br> Sign Language</p>
<h5>Being a design studio at the forefront of digital transformation and product design, we take it upon
ourselves to drop some knowledge, share insights, let out insider tips, and put our work on full
display</h5>
</div>
<div id="page2-right">
<div class="right-elem" id="right-elem1">
<h2>Real-Time Video Translation</h2>
<img class="ww loaded" alt="Where am I" decoding="async" loading="lazy"
src="https://plus.unsplash.com/premium_photo-1668473367234-fe8a1decd456?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
<div class="right-elem">
<h2>Interactive Learning Modules</h2>
<img class="ww loaded" alt="Where am I" decoding="async" loading="lazy"
src="https://plus.unsplash.com/premium_photo-1668473367234-fe8a1decd456?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
<div class="right-elem">
<h2>Virtual Sign Language Interpreter</h2>
<img class="ww loaded" alt="Where am I" decoding="async" loading="lazy"
src="https://plus.unsplash.com/premium_photo-1668473367234-fe8a1decd456?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
<div class="right-elem">
<h2>Text-to-Sign and Sign-to-Text Conversion</h2>
<img class="ww loaded" alt="Where am I" decoding="async" loading="lazy"
src="https://plus.unsplash.com/premium_photo-1668473367234-fe8a1decd456?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
</div>
</div>
<div id="page3">
<div class="page3-center">
<div class="icon">
</div>
<h5>View ScrollReel</h5>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>