-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
514 lines (487 loc) · 17.9 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
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Upwebstudio</title>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/tailwind.min.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;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/custom.css?ver1" />
</head>
<body class="bg-page mb-10">
<section
class="relative overflow-hidden xl:min-h-screen bg-no-repeat bg-center md:bg-top bg-cover bg-main"
style="background-image: url('images/top-splash.png')"
>
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
<div class="absolute top-5 right-5 z-10 bg-conic xl:block hidden"></div>
<div
class="absolute top-20 right-10 pt-2 z-20 text-xl font-medium text-black xl:block hidden"
>
get a quote
</div>
<div
class="absolute top-48 right-12 w-32 pt-2 z-20 text-lg xl:block hidden"
>
Taking Technology Further
</div>
<div
class="md:hidden absolute w-808 h-808 border border-white opacity-20 rounded-full left-0 xl:left-96 top-52 xl:top-20"
></div>
<div class="relative pt-7 xl:pt-20 mb-4 px-7 sm:px-6 lg:px-16">
<nav
class="relative flex items-center justify-between sm:h-14 lg:justify-start"
aria-label="Global"
>
<div
class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0"
>
<div class="flex items-center justify-between w-full md:w-auto">
<span class="sr-only">Workflow</span>
<img class="h-14 w-auto sm:h-14" src="images/upweb-logo.svg" />
<div class="-mr-2 flex items-center md:hidden">
<button
type="button"
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
</button>
</div>
</div>
</div>
<div class="hidden xl:block md:ml-28 md:pr-4 md:space-x-8">
<a
href="mailto:[email protected]"
class="font-medium underline hover:text-gray-900 mr-12"
>
<a
href="tel:(203)690-7756"
class="font-medium hover:text-gray-900"
>(203) 690-7756</a
>
</div>
</nav>
</div>
<main
class="mt-14 xl:mt-10 mx-auto max-w-7xl px-5 xl:px-2 sm:mt-12 md:mt-16 lg:mt-20 lg:pr-44 xl:mt-16 relative z-10"
>
<h1
class="text-5xl pr-0 md:pr-52 md:tracking-tight font-extrabold sm:text-5xl md:text-8xll md:leading-6 mb-5 xl:mb-0"
>
We provide innovative
<span class="whitespace-nowrap">e-commerce</span> design, expert web
development, and reliable support
</h1>
<div
class="xl:absolute top-3 right-48 z-10 w-72 h-40 ml-10 text-2xl xl:text-4xl leading-6 xl:leading-9 xl:font-normal bg-clip-grad"
>
all that takes your website to the next level and beyond.
</div>
</main>
<div class="hidden xl:block absolute top-0 z-0 w-full min-h-screen">
<svg viewBox="0 0 1900 1900" xmlns="http://www.w3.org/2000/svg">
<circle
cx="66%"
cy="13%"
r="404"
stroke="#C4C4C4"
stroke-width="0.5"
fill="none"
/>
</svg>
</div>
</div>
</section>
<section
class="relative overflow-hidden xl:min-h-screen xl:mb-20 bg-left-top md:bg-left-bottom bg-no-repeat"
style="background-image: url('images/blob.png')"
>
<div
class="flex flex-col xl:flex-row pl-2 xl:pl-40 mt-28 xl:mt-52 pr-2 xl:pr-8 mb-28"
>
<div
class="mb-10 text-5xl md:text-8xll xl:pr-36 xl:min-w-3xl md:tracking-tight font-extrabold md:leading-6"
>
UpWeb Studio provides multiple services to help meet your business
goals.
</div>
<div
class="absolute w-808 h-808 border border-white opacity-30 rounded-full left-0 xl:left-96 top-48 xl:top-20"
></div>
<div
class="absolute w-808 h-808 border border-white opacity-10 rounded-full left-96 top-20 ml-32"
></div>
<div class="text-2xl xl:text-3xl pl-5 xl:pl-0">
<p class="pb-10">
Using state-of-the-art technology, we help build your brand’s
presence while offering continual support. Our services help
companies enhance their brand’s unique voice through a variety of
tech tools. We establish relationships with our clients that serve
them well into the future.
</p>
<p class="pb-8 xl:pb-20">Take a look at whatwe can do for you:</p>
<div class="flex flex-col xl:flex-row text-lg mb-8">
<ul class="flex flex-col space-y-6 pr-16 pb-6">
<li>Custom development</li>
<li>Create your brand’s logo</li>
<li>Customize your website’s design</li>
<li>Reliable support</li>
</ul>
<ul class="flex flex-col space-y-6">
<li>Integration with 3rd party services</li>
<li>Seamless platform migration</li>
<li>UI/UX for mobile and desktop</li>
<li>QA analis for your site</li>
</ul>
</div>
<div class="text-lg underline">get a quote</div>
</div>
</div>
</section>
<section class="p-3 xl:pl-7 pt-2 xl:pt-36 mb-24 relative">
<div
class="text-5xl md:text-6xl xl:absolute xl:left-10 xl:bottom-20 pr-20 mb-14 xl:pt-64 xl:tracking-tight xl:font-semibold"
>
Main<br />
Platform<br />
Specializations
</div>
<div class="flex xl:justify-end text-xl md:text-5xl xl:pl-96 xl:ml-52">
<div
class="w-1/2 xl:w-auto flex-auto p-3 xl:p-6 pt-12 xl:pt-6 pb-14 xl:pb-20 xl:pr-32 mr-5 xl:mr-6 border-bg-lg"
>
<img src="/images/icons/shopify.svg" class="h-12 xl:h-auto" alt="" />
<div class="pt-40 xl:pt-64">Shopify<br />+<br />Shopify Plus</div>
</div>
<div
class="flex-auto p-3 xl:p-6 pt-12 xl:pt-6 xl:pr-52 md:mr-44 border border-white"
>
<img src="/images/icons/wp.svg" class="h-12 xl:h-auto" alt="" />
<div class="pt-40 xl:pt-64">WordPress<br />+<br />WooCommerce</div>
</div>
</div>
<div
class="hidden xl:flex xl:absolute w-808 h-808 xl:border xl:border-white xl:top-0 opacity-30 rounded-full xl:-left-80"
></div>
</section>
<section class="hidden md:block blob-style-2">
<div
class="flex w-full xl:h-screen pl-10 pr-8 mb-36 relative pt-36"
style="min-height: 1400px"
>
<div
class="absolute w-808 h-808 top-40 xl:left-56 pt-64 flex justify-center text-4xl tracking-tight font-semibold sm:text-5xl md:text-6xl leading-6 xl:border opacity-90 xl:rounded-full xl:border-opacity-50"
>
<div class="flex-initial">
<img src="/images/icons/profi.svg" class="w-10" alt="" />
Professional <br />
custom UI/UX <br />
Design
</div>
</div>
<div
class="absolute w-808 h-808 bottom-0 xl:left-56 pt-96 flex justify-center text-4xl tracking-tight font-semibold sm:text-5xl md:text-6xl leading-6 xl:border opacity-90 xl:rounded-full xl:border-opacity-10"
>
<div>
<img src="/images/icons/migration.svg" class="w-10" alt="" />
Migration
</div>
</div>
<div
class="absolute top-96 xl:top-40 xl:right-56 w-808 h-808 pt-72 flex justify-center text-4xl tracking-tight font-semibold sm:text-5xl md:text-6xl leading-6 xl:border xl:rounded-full xl:border-opacity-10"
>
<div>
<img src="/images/icons/support.svg" class="w-10" alt="" />
Support
</div>
</div>
<div
class="absolute bottom-0 xl:right-56 w-808 h-808 pt-96 flex justify-center text-4xl tracking-tight font-semibold sm:text-5xl md:text-6xl leading-6 xl:border xl:rounded-full xl:border-opacity-10"
>
<div>
<img src="/images/icons/support.svg" class="w-10" alt="" />
Custom <br />
Development
</div>
</div>
</div>
</section>
<section class="pl-2 xl:pl-64 relative pb-12 md:mb-20">
<div
class="pr-1 xl:pr-64 text-5xl md:text-8xll xl:min-w-3xl xl:tracking-tight font-extrabold bg-clip-grad pb-10"
>
We believe that technology can bring people together. At UpWeb Studio,
we value customizable creative vision and use that vision to build the
website of your dreams.
</div>
<div
class="text-2xl font-light pl-16 xl:pl-10 pr-5 xl:pr-0 xl:w-940 xl:absolute right-56 bottom-0"
>
Our superior design and development services are directly aligned with
our belief in using technology as a tool for innovation. Our clients are
at the center of our services, and we are dedicated to establishing
ongoing relationships with our clientele.
</div>
<div
class="xl:flex absolute w-808 h-808 border border-white top-0 opacity-10 rounded-full -left-80 hidden"
></div>
</section>
<section
class="relative overflow-hidden"
style="background: url('images/blob-3.png') no-repeat 0 0"
>
<div
style="
background: url('images/swim.png') no-repeat right center;
min-height: 1100px;
"
>
<div
class="text-4xl pl-16 pt-80 min-w-3xl tracking-tight font-extrabold text-white sm:text-5xl md:text-8xll leading-6"
>
Featured <br />
Work
</div>
<div class="pt-32 pl-36">
<div class="text-4xl pb-8 font-bold">USA Swim Caps.</div>
<div class="text-2xl font-light pb-16" style="width: 630px">
Our superior design and development services are directly aligned
with our belief in using technology as a tool for innovation. Our
clients are at the center of our services, and we are dedicated to
establishing ongoing relationships with our clientele.
</div>
<div class="text-2xl font-light underline">usaswimcaps.com</div>
</div>
</div>
</section>
<section class="relative mb-20 xl:pb-40">
<div
class="xl:w-64 text-5xl md:text-8xl pl-3 xl:pl-64 mb-7 xl:mb-0 xl:pt-64 min-w-3xl tracking-tight font-extrabold"
>
Succesful worked with
</div>
<div
class="flex flex-wrap xl:flex-auto mx-2 md:mx-0 xl:pt-5 xl:pt-24 xl:pl-64 border md:border-none"
>
<div
class="w-1/2 xl:w-auto p-10 py-16 xl:py-32 xl:mr-10 xl:border xl:border-white"
>
<img src="/images/works/baby_logo.png" class="" alt="" />
</div>
<div class="w-1/2 xl:w-auto p-10 py-16 xl:py-32 xl:mr-10">
<img src="/images/works/usa_swim_caps.png" class="" alt="" />
</div>
<div class="w-1/2 xl:w-auto p-10 py-16 xl:py-32 xl:mr-10">
<img src="/images/works/slava_f_miami_coach.png" class="" alt="" />
</div>
<div class="w-1/2 xl:w-auto p-10 py-16 xl:py-32 xl:mr-10">
<img src="/images/works/baby_logo.png" class="" alt="" />
</div>
<div class="w-1/2 xl:w-auto p-10 py-16 xl:py-32">
<img src="/images/works/usa_swim_caps.png" class="" alt="" />
</div>
</div>
<div
class="xl:block hidden absolute w-808 h-808 flex justify-center items-center border border-white text-xl top-0 border-opacity-10 rounded-full -right-20 underline"
>
get a quote
</div>
</section>
<section
class="relative pl-5 sm:pl-40 pt-20 bg-top bg-left xl:bg-right bg-no-repeat"
style="background-image: url('images/blob-4.png')"
>
<img
src="/images/upweb-logo.svg"
class="h-20 xl:h-auto mb-52 md:mb-80"
alt=""
/>
<div
class="flex flex-col xl:flex-row xl:justify-around xl:items-end xl:pt-32 px-2 xl:px-24"
>
<div
class="order-1 xl:order-first text-xl xl:w-72 pb-10 mr-10 underline"
>
Privacy Policy <br />
Terms and Conditions
</div>
<div class="pb-10">
Email
<div class="text-3xl">
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="pb-10">
Phone
<div class="text-3xl">(203) 690-7756</div>
</div>
<div class="pb-10">
Location
<div class="text-3xl">Miami, Florida</div>
</div>
</div>
</section>
<style>
html * {
font-family: 'Montserrat', sans-serif;
}
html {
color: #fff;
font-family: 'Montserrat', sans-serif;
}
section {
max-width: 1920px;
overflow: hidden;
}
.bg-page {
background-color: #131315;
}
.bg-conic {
background: conic-gradient(
from 60.49deg at 50% 50%,
#b2f2ea 0deg,
#aeb8f1 43.12deg,
#b1efeb 91.88deg,
#d8ffbe 166.87deg,
#f0d4b2 215.62deg,
#fdb5b8 260.62deg,
#cbb4fa 300deg,
#bddff3 311.25deg,
#b4feea 343.12deg,
#b2f2ea 360deg
);
border-radius: 50%;
width: 168px;
height: 168px;
filter: blur(18px);
}
.border-bg-lg {
border: 1px solid white;
/* border-image-source: linear-gradient(
180deg,
#b1efeb 0%,
#bddff3 14.58%,
#cbb4fa 29.69%,
#d8ffbe 45.31%,
#f0d4b2 59.9%,
#fdb5b8 75%,
#bddff3 89.06%
); */
}
.border-gradient {
border: 1px solid;
border-image-source: linear-gradient(
180deg,
#b1efeb 0%,
#bddff3 14.58%,
#cbb4fa 29.69%,
#d8ffbe 45.31%,
#f0d4b2 59.9%,
#fdb5b8 75%,
#bddff3 89.06%
);
}
.bg-clip-grad {
background: -webkit-linear-gradient(
126.73deg,
#b2f2ea 28.64%,
#aeb8f1 34.19%,
#b1efeb 40.48%,
#d8ffbe 50.14%,
#f0d4b2 56.42%,
#fdb5b8 62.22%,
#cbb4fa 67.3%,
#bddff3 70.92%,
#b4feea 75.03%
);
background: -moz-linear-gradient(
126.73deg,
#b2f2ea 28.64%,
#aeb8f1 34.19%,
#b1efeb 40.48%,
#d8ffbe 50.14%,
#f0d4b2 56.42%,
#fdb5b8 62.22%,
#cbb4fa 67.3%,
#bddff3 70.92%,
#b4feea 75.03%
);
background: linear-gradient(
126.73deg,
#b2f2ea 28.64%,
#aeb8f1 34.19%,
#b1efeb 40.48%,
#d8ffbe 50.14%,
#f0d4b2 56.42%,
#fdb5b8 62.22%,
#cbb4fa 67.3%,
#bddff3 70.92%,
#b4feea 75.03%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-custom-c13 {
color: #030207;
}
ul > li {
background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.2249 0H6.32488L10.4249 4.1L1.42488 13.1C-0.475122 15 -0.475122 18 1.42488 19.8C3.32488 21.7 6.32488 21.6 8.12488 19.8L17.1249 10.8L21.2249 14.9V0Z' fill='url(%23paint0_linear_1_56)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_56' x1='23.5248' y1='-8' x2='34.5842' y2='19.1656' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B2F2EA'/%3E%3Cstop offset='0.119792' stop-color='%23AEB8F1'/%3E%3Cstop offset='0.255208' stop-color='%23B1EFEB'/%3E%3Cstop offset='0.463542' stop-color='%23D8FFBE'/%3E%3Cstop offset='0.598958' stop-color='%23F0D4B2'/%3E%3Cstop offset='0.723958' stop-color='%23FDB5B8'/%3E%3Cstop offset='0.833333' stop-color='%23CBB4FA'/%3E%3Cstop offset='0.911458' stop-color='%23BDDFF3'/%3E%3Cstop offset='1' stop-color='%23B4FEEA'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center left;
padding-left: 2.5rem;
}
.w-808 {
width: 404px;
}
.h-808 {
height: 404px;
}
.w-940 {
width: 940px;
}
.h-500 {
height: 500px;
}
@media (min-width: 768px) {
.md\:text-8xll {
font-size: 6.25rem;
line-height: 6.293rem;
}
.w-808 {
width: 808px;
}
.h-808 {
height: 808px;
}
}
@media (min-width: 1200px) {
.blob-style-2 {
background: url('images/blob-2.png') no-repeat right bottom;
max-width: 1920px;
}
}
@media (max-width: 768px) {
.bg-main {
background-position-y: 80px;
}
}
</style>
</body>
</html>