-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
321 lines (321 loc) · 33 KB
/
index.html
File metadata and controls
321 lines (321 loc) · 33 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My-web_dev</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=NTR&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=NTR&family=Ojuju:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Average+Sans&family=Fresca&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=NTR&family=Ojuju:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Average+Sans&family=Fresca&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=NTR&family=Ojuju:wght@200..800&family=Zen+Dots&display=swap');
</style>
</head>
<body theme="black" class="font-['Average_Sans']">
<div class="main w-full">
<div data-color="black" class="home section w-full h-[200vh] relative">
<div class="w-full sticky top-0 left-0">
<div class="btmText absolute z-[4] bottom-[7%] w-48 left-[3%]">
<h1>We build big ideas. Software. Apps. Tools. For real people. Real lives.</h1>
</div>
<div style="--clip : 100%" class="video w-full h-screen absolute z-[3] top-0 left-0 bg-black overflow-hidden">
<video class="absolute w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" src="https://xgjzloifyvgpbmyonaya.supabase.co/storage/v1/object/public/files/bBj1XfrSyi/1ENIoa5sjq" autoplay muted loop></video>
</div>
<div class="marqueesContainer w-full h-screen relative overflow-hidden">
<div class="heading absolute top-[5%] left-1/2 -translate-x-1/2 w-80 text-center">
<h1 class="text-2xl">Crafting a new paradigm of healthcare, one that is</h1>
</div>
<div class="absolute scale-[1] slidesm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] ">
<div class="row lft -translate-x-1/2 w-full flex items-center gap-10 whitespace-nowrap">
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">useful</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483188_Ellipse%20845-2.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483185_Ellipse%20844.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
</div>
</div>
<div class="row rgt -translate-x-1/3 w-full flex items-center gap-10 whitespace-nowrap">
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">useful</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317a_Ellipse%20845-10.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483181_Ellipse%20845-5.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317e_Ellipse%20845-7.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483180_Ellipse%20845-4.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
</div>
</div>
<div class="row lft -translate-x-2/3 w-full flex items-center gap-10 whitespace-nowrap">
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483182_Ellipse%20845-8.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">useful</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483185_Ellipse%20844.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317a_Ellipse%20845-10.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
</div>
</div>
<div class="row rgt -translate-x-3/4 w-full flex items-center gap-10 whitespace-nowrap">
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">useful</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483181_Ellipse%20845-5.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483181_Ellipse%20845-5.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483188_Ellipse%20845-2.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">empathetic</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
<div class="imagediv w-[3.5rem] h-[3.5rem] bg-yellow-500 rounded-full"><img class="h-full w-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" ></div>
</div>
<div class="elem flex items-center gap-8">
<h1 class=" font-semibold font-['NTR'] text-7xl">intuitive</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-color="cyan" class="craft section w-full px-10 flex gap-10 justify-between items-start py-10 relative">
<div class="ltext w-[40%] sticky top-0 left-0 ">
<p class="text-xl leading-7 font-light">Significo is a leading health software creator founded on the belief that technology can transform healthcare to put people first. Whether they are employees, members, customers, or clients, we never forget the real people we’re designing for.</p>
<h1 class="text-6xl mt-5 leading-snug">We Craft Human-Centric Health Software</h1>
<div class="px-10 py-5 w-fit border border-white overflow-hidden mt-5">
<div class="masker"><span class="inline-block ">Our Solutions</span></div>
</div>
</div>
<div class="Rcards w-[50%] h-fit">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat mollitia necessitatibus unde vero repellat esse provident delectus vel quos maxime in aspernatur, magni repudiandae cupiditate obcaecati. Dicta, perspiciatis. Cum, voluptatum libero a neque totam atque in tenetur voluptate quasi accusamus et mollitia. Iure, accusamus, voluptates fuga labore aliquid amet in doloremque illo nihil maiores distinctio eos praesentium, iste culpa? Nesciunt laudantium iure minus eum voluptate, laborum, velit unde eaque dicta consequatur expedita hic quia vel, fugiat perferendis ullam facere doloribus quod nobis alias maiores ab vero repudiandae? Vitae quae amet sint nam tempora nisi facere minus tempore velit iste quis asperiores sapiente animi dicta, nostrum culpa eius eveniet? Error dolores recusandae maxime id voluptatum labore iure nemo deleniti necessitatibus cum nam rem, fugit porro molestiae! Nihil quasi ratione aut ipsam, modi dicta, voluptates consectetur porro amet, fugit quia expedita? Distinctio reprehenderit tempore error unde eaque illum ad numquam nihil. Voluptatum harum earum at enim perferendis dolorum incidunt quam cum inventore excepturi reprehenderit magnam atque velit, explicabo eius hic, modi sint? Laboriosam doloremque sed porro repudiandae nobis quo. Vero atque nam omnis voluptate, itaque dicta, harum voluptatem impedit quod nulla quaerat laboriosam rerum sit enim delectus corrupti doloremque obcaecati sequi, asperiores eum voluptatum dolore maxime? Provident iste, dolor vitae dolorum maiores minima qui architecto, velit ab, perspiciatis odio perferendis! Quibusdam quisquam tenetur amet nesciunt, autem laboriosam unde beatae in dignissimos sit molestias ipsa harum ullam porro sint omnis ducimus labore veritatis hic obcaecati iure assumenda! Quis, consectetur impedit esse sint beatae laborum nihil debitis sequi repudiandae error nesciunt fugit facilis? Officia maiores neque corporis id repellat. Aliquid eligendi sint obcaecati libero doloremque ab molestias facilis, dolorum, unde quos ratione accusantium earum debitis cupiditate eum, sunt ipsa? Rerum odit odio porro, inventore facilis accusamus, optio nisi soluta eius quia officiis doloribus sapiente repudiandae saepe autem provident illo vitae quos. Repellendus provident architecto nihil sequi, molestias debitis non totam libero laborum. Deserunt cumque impedit in quis consequuntur. Esse dolorum quo consectetur, fugiat eveniet harum ipsa saepe accusamus nemo numquam ducimus veniam voluptatem! Ipsa quo vel numquam at, dignissimos magnam ab iste exercitationem similique impedit repellat porro modi voluptatum tempore est, totam perspiciatis veritatis laborum aperiam. Facere, voluptatem dolorum, dolores cumque quibusdam hic temporibus delectus corporis voluptate omnis quisquam quo, alias consequuntur maxime porro repudiandae rem dolorem libero ad quaerat reiciendis iusto veritatis? Reiciendis in laboriosam necessitatibus expedita suscipit corrupti illum quibusdam aliquam aut quos reprehenderit eveniet amet, placeat ab iste sequi mollitia commodi tenetur recusandae maiores voluptatem? Expedita beatae error facere praesentium amet, temporibus quaerat vel quas a commodi veritatis iure minima voluptate illo debitis saepe officia magni totam, quis dolores? Sint tenetur autem atque odit quas laudantium corrupti eligendi, blanditiis minus distinctio repudiandae dolorum ipsam quaerat, quam at praesentium iste temporibus veritatis velit quibusdam. Magnam in fuga voluptatem harum corporis, ad beatae distinctio. Esse illum deleniti quis odit placeat dolore tempore praesentium, velit maiores libero, cum vel. Aperiam, a autem! Quos doloribus adipisci minus eveniet officiis exercitationem eaque quam omnis non ipsa?</div>
</div>
<div data-color="salmon" class="real section w-full ">
<div class="cont h-[400vh] relative">
<div class="slides overflow-hidden sticky flex w-full h-[100vh] sticky top-0 left-0 gap-20">
<div class="slide w-full h-screen flex-shrink-0 flex items-center justify-center">
<div class="text font-['NTR']">
<h1 class="text-9xl ">Real Talk,</h1>
<h1 class="text-9xl ">Real Impact</h1>
</div>
<div class="image absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 w-[20rem] h-[20rem] bg-red-500 rounded-full overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9ed8426a9be08870acb09_1.jpg" alt="">
</div>
</div>
<div class="slide w-full h-screen flex-shrink-0 flex justify-center items-center relative">
<div class="img1 w-[10rem] h-[10rem] overflow-hidden absolute top-2/3 left-1/4 -translate-y-1/3 rounded-full">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9edafe67e88c12db2d78b_2.jpg" alt="">
</div>
<div class="img1 w-[15rem] h-[15rem] overflow-hidden absolute top-0 left-1/2 -translate-y-1/3 rounded-full">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9edd08cc0ac13ed6995bd_4.jpg" alt="">
</div>
<div class="image absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 w-[15rem] h-[15rem] bg-red-500 rounded-full overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9ed8426a9be08870acb09_1.jpg" alt="">
</div>
<div class="w-[60%] font-['Zen_Dots'] text-center relative">
<h3 class="absolute text-left leading-5 -translate-y-1/2 tracking-tight top-0 left-0 w-1/3">We’re on a mission to impact as many lives as possible and build a better company while we do it. Here’s our progress.</h3>
<h1 class="text-9xl leading-none text-white">20.4M</h1>
<h3 class="text-3xl leading-none tracking-tight">Real people — real lives — we have built products and solutions for.</h3>
</div>
</div>
<div class="slide w-full h-screen flex-shrink-0 flex items-center justify-center relative">
<img class="absolute bottom-0 translate-y-1/4 left-1/3 w-[25rem] h-[25rem]" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65ea1b841fcd9f50115dbe9c_RocketLaunch.png" alt="">
<img class="absolute top-0 -translate-y-1/4 left-1/3 w-[15rem] h-[15rem]" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65ea1b924ee31caf14d64b2a_TreeStructure.png" alt="">
<img class="absolute top-1/2 right-32 w-[15rem] h-[15rem]" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65ea1ba6eb9637155282b42f_Lightning.png" alt="">
<div class="w-[60%] font-['Zen_Dots'] text-center relative">
<h3 class="absolute text-left leading-5 -translate-y-1/2 tracking-tight top-0 left-0 w-1/3">Our team is global and diverse, because our individual experiences make us stronger.</h3>
<h1 class="text-9xl leading-none text-white">49%</h1>
<h3 class="text-3xl leading-none tracking-tight">Expert Women in Tech.</h3>
</div>
</div>
</div>
</div>
</div>
<div data-color="white" class="team section font-['NTR'] py-20">
<h1 class="text-center text-8xl tracking-tight ">Our Team</h1>
<div class="list w-full px-10 mt-10">
<div class="listitem relative w-full py-5 border-b-2 border-black ">
<div class="relative flex items-center justify-between z-[3]">
<div class="left flex gap-20">
<h3 class="text-6xl">01</h3>
<h3 class="text-6xl">Dr.Rick McCartney</h3>
</div>
<h3 class="text-3xl">CEO</h3>
</div>
<div class="picture absolute opacity-0 overflow-hidden z-[4] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15rem] h-[15rem] rounded-full bg-red-500"><img class="w-full h-full object-cover" src="https://plus.unsplash.com/premium_photo-1690407617542-2f210cf20d7e?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
<div class="bluelayer z-[2] absolute w-full h-[0%] bg-sky-500 bottom-0 left-0"></div>
</div>
<div class="listitem relative w-full py-5 border-b-2 border-black ">
<div class="relative flex items-center justify-between z-[3]">
<div class="left flex gap-20">
<h3 class="text-6xl">02</h3>
<h3 class="text-6xl">John Rk Masdney</h3>
</div>
<h3 class="text-3xl">Mr Dept</h3>
</div>
<div class="picture absolute opacity-0 overflow-hidden z-[4] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15rem] h-[15rem] rounded-full bg-red-500"><img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1595211877493-41a4e5f236b3?q=80&w=1430&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></div>
<div class="bluelayer z-[2] absolute w-full h-[0%] bg-sky-500 bottom-0 left-0"></div>
</div>
<div class="listitem relative w-full py-5 border-b-2 border-black ">
<div class="relative flex items-center justify-between z-[3]">
<div class="left flex gap-20">
<h3 class="text-6xl">03</h3>
<h3 class="text-6xl">Sweat paul</h3>
</div>
<h3 class="text-3xl">Manager HR</h3>
</div>
<div class="picture absolute opacity-0 overflow-hidden z-[4] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15rem] h-[15rem] rounded-full bg-red-500"><img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
<div class="bluelayer z-[2] absolute w-full h-[0%] bg-sky-500 bottom-0 left-0"></div>
</div>
<div class="listitem relative w-full py-5 border-b-2 border-black ">
<div class="relative flex items-center justify-between z-[3]">
<div class="left flex gap-20">
<h3 class="text-6xl">04</h3>
<h3 class="text-6xl">David Henry</h3>
</div>
<h3 class="text-3xl">SMO Market</h3>
</div>
<div class="picture absolute opacity-0 overflow-hidden z-[4] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15rem] h-[15rem] rounded-full bg-red-500"><img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
<div class="bluelayer z-[2] absolute w-full h-[0%] bg-sky-500 bottom-0 left-0"></div>
</div>
<div class="listitem relative w-full py-5 border-b-2 border-black ">
<div class="relative flex items-center justify-between z-[3]">
<div class="left flex gap-20">
<h3 class="text-6xl">05</h3>
<h3 class="text-6xl">Hercul Rober</h3>
</div>
<h3 class="text-3xl">GA of DB</h3>
</div>
<div class="picture absolute opacity-0 overflow-hidden z-[4] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[15rem] h-[15rem] rounded-full bg-red-500"><img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1376&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""></div>
<div class="bluelayer z-[2] absolute w-full h-[0%] bg-sky-500 bottom-0 left-0"></div>
</div>
</div>
</div>
<div data-color="black" class="para section h-[70vh] w-full para flex items-center justify-center mt-10">
<div class="text w-[80%] flex flex-col items-center justify-center m-10">
<h3 class=" textpara text-2xl leading-[2.5rem] text-center font-light">Working with the Significo team has been such a pleasure! We took on a significant project to rebuild our entire platform and the team approached the project with our best interests in mind. They continue to prioritize the end user experience and offer amazing expertise in all of the areas we lack internally. I would personally be lost without this team, their ability to problem solve, their openness to feedback and desire to build the product like it is their own.</h3>
<div class="person flex flex-col items-center justify-center mt-8 gap-3">
<div class="image w-32 h-32 bg-sky-500 rounded-full overflow-hidden"></div>
<h1 class="text-2xl">Miranda Ernst</h1>
<h3>Product Manager @ HealthChe</h3>
</div>
</div>
</div>
<div data-color="white" class="capsules section w-full h-screen mt-60 flex items-start justify-between gap-10 px-10">
<div class="left w-1/3 flex flex-col justify-between h-full py-10">
<h1 class="text-xl leading-[2rem]">Stay up-to-date on the
latest healthcare
innovations and thought
leadership.</h1>
<div class="heading">
<h1 class="text-7xl">Explore Our Insights</h1>
<div class="px-10 py-5 w-fit border border-black overflow-hidden mt-5">
<div class="masker overflow-hidden">
<span class="inline-block ">Our Solutions</span>
</div>
</div>
</div>
</div>
<div class="right flex h-full items-center gap-10">
<div class="capsule section -rotate-[16deg] flex flex-col items-center justify-between border-black border py-10 px-6 rounded-full gap-8">
<div class="image w-60 h-60 bg-yellow-400 rounded-full overflow-hidden">
<img class="w-full h-full object-cover rounded-full" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/65e61826ab9558e05e681a7f_Untitled%20design.png" alt="">
</div>
<div class="text text-center ">
<h3 class=" text-xl">Equity in Tech : An</h3>
<h3 class=" text-xl">International Women's Day</h3>
<h3 class=" text-xl">Day Conversation with</h3>
<h3 class=" text-xl">Caroline Nieto</h3>
<h3 class=" text-xl">Significo's CPO</h3>
</div>
<button class="bg-purple-400 text-white rounded-full px-4 py-3 text-xs mt-5 mb-10">thought leadership</button>
</div>
<div class="capsule section translate-y-32 -rotate-[16deg] flex flex-col items-center justify-between border-black border py-10 px-6 rounded-full gap-8">
<button class="bg-purple-400 text-white rounded-full px-4 py-3 text-xs mt-5 mb-10">thought leadership</button>
<div class="text text-center ">
<h3 class=" text-xl">Equity in Tech : An</h3>
<h3 class=" text-xl">International Women's Day</h3>
<h3 class=" text-xl">Day Conversation with</h3>
<h3 class=" text-xl">Caroline Nieto</h3>
<h3 class=" text-xl">Significo's CPO</h3>
</div>
<div class="image w-60 h-60 bg-yellow-400 rounded-full overflow-hidden">
<img class="w-full h-full object-cover rounded-full" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/65e61826ab9558e05e681a7f_Untitled%20design.png" alt="">
</div>
</div>
</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="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>
<script src="script.js"></script>
</body>
</html>