-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
498 lines (469 loc) · 17.1 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
<!DOCTYPE html>
<html class="scroll-smooth" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Besnik | Digital College - Landing Page</title>
<!-- Links -->
<link
rel="shortcut icon"
href="./src/assets/img/icons/favicon.png"
type="image/x-icon"
/>
<link href="/dist/output.css" rel="stylesheet" />
</head>
<body
class="bg-gradient-to-t from-violet-700 to-purple-600 overflow-x-hidden"
>
<header class="text-white">
<!-- Navbar -->
<nav
class="flex flex-wrap w-screen justify-between items-center top-0 left-0 py-10 px-32"
>
<!-- Logo Left -->
<a href="#" class="flex gap-3">
<img src="./src/assets/img/logo.svg" class="contain w-7" />
<p class="text-2xl font-serif italic">Besnik</p>
</a>
<!-- Menu List -->
<ul class="flex gap-12">
<li>
<a href="#" class="flex items-center text-center py-2">Home</a>
</li>
<li>
<a
href="#feature"
class="flex items-center font-semibold text-center py-2"
>Feature</a
>
</li>
<li>
<a
href="#service"
class="flex items-center font-semibold text-center py-2"
>Service</a
>
</li>
<li>
<a
href="#aboutUs"
class="flex items-center font-semibold text-center py-2"
>About Us</a
>
</li>
<!-- Login Buttons -->
<div class="flex gap-12">
<li><button class="font-semibold pl-8 py-2">Login</button></li>
<li>
<button class="bg-white text-purple-900 font-semibold px-8 py-2">
Sign Up
</button>
</li>
</div>
</ul>
</nav>
</header>
<!-- Main -->
<main class="w-full">
<!-- Hero Section -->
<div class="text-white">
<section class="flex px-32 pt-11">
<div class="flex flex-wrap w-6/12 gap-8">
<h1 class="text-5xl leading-snug font-bold">
The best payment service you have ever discovered.
</h1>
<p class="text-lg">
There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form.
</p>
<form
class="flex flex-row w-4/5 h-16 focus-within:outline focus-within:outline-cyan-400 text-center"
action=""
>
<img
class="bg-white h-full p-4"
src="./src/assets/img/svg/mail.svg"
alt=""
/>
<input
class="flex grow border-none focus:outline-none placeholder:font-medium text-slate-900"
type="email"
placeholder="Enter your email address..."
/>
<button
class="bg-orange-500 w-36 p-1.5 border-solid border-8 border-white font-medium"
>
Send
</button>
</form>
</div>
<div class="flex items-center w-6/12">
<img class="contain" src="./src/assets/img/sideImage.png" />
</div>
</section>
<!-- Partners List -->
<section class="flex px-32 pt-11">
<div>
<ul class="flex flex-row w-full justify-start mt-16">
<li class="flex items-center mr-20 object-contain w-1/12">
<img src="./src/assets/img/airbnb.png" alt="Airbnb" />
</li>
<li class="flex items-center mr-20 object-contain w-1/12">
<img src="./src/assets/img/dropbox.png" alt="Dropbox" />
</li>
<li class="flex items-center mr-20 object-contain w-1/12">
<img src="./src/assets/img/microsoft.png" alt="Microsoft" />
</li>
<li class="flex items-center mr-20 object-contain w-1/12">
<img src="./src/assets/img/stripe.png" alt="Stripe" />
</li>
</ul>
</div>
</section>
</div>
<!-- Feature Section 1 -->
<div>
<img class="w-full h-full" src="./src/assets/img/topDivisory.svg" />
</div>
<section
id="feature"
class="flex items-center gap-24 h-screen px-32 pt-11 bg-white text-slate-900 decoration-slate-900"
>
<div class="flex items-center w-6/12 h-full">
<img
class="object-cover h-3/4"
src="./src/assets/img/featureSideBanner.jpg"
/>
</div>
<div class="flex flex-col w-3/5 gap-12">
<h2 class="text-5xl font-semibold">How to use this site?</h2>
<ol class="flex flex-col list-decimal list-inside">
<li class="font-semibold text-lg">Sign In</li>
<p class="pt-3 font-medium text-lg text-slate-400">
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam.
</p>
<li class="font-semibold text-lg pt-8">Add your bank account</li>
<p class="pt-3 font-medium text-lg text-slate-400">
There are many variations of passages of Lorem Ipsum available.
</p>
<li class="font-semibold text-lg pt-8">Send payment request</li>
<p class="pt-3 font-medium text-lg text-slate-400">
Nor again is there anyone who loves or pursues or desires to
obtain pain of itself.
</p>
</ol>
<button
class="bg-orange-500 text-white h-12 w-36 p-1.5 font-medium"
>
Read more
</button>
</div>
</section>
<!-- Feature Section 2 -->
<section
class="flex items-center h-screen gap-14 px-32 py-24 bg-white text-slate-900 decoration-slate-900"
>
<div class="flex flex-col items-start w-3/6 gap-12">
<h2 class="text-5xl font-semibold">
Our world class support is available.
</h2>
<p class="pt-3 font-medium text-lg text-slate-400">
All the Lorem Ipsum generators on the internet tend to repeat
predefined chunks as necessary, making this the first true generator
on the Internet.
</p>
<button class="bg-orange-500 text-white h-12 w-36 p-1.5 font-medium">
Read more
</button>
</div>
<div class="grid grid-cols-2 grid-rows-2 w-3/6 h-full gap-8">
<img
class="object-cover w-full h-full"
src="./src/assets/img/feature1.jpg"
alt=""
/>
<img
class="object-cover w-full h-full"
src="./src/assets/img/feature2.jpg"
alt=""
/>
<img
class="object-cover col-span-2 w-full h-full"
src="./src/assets/img/feature3.jpg"
alt=""
/>
</div>
</section>
<div>
<img class="w-full" src="./src/assets/img/bottomDivisory.svg" />
</div>
<!-- Service Section -->
<section
id="service"
class="w-screen h-screen flex flex-col justify-evenly items-center px-48"
>
<div class="flex flex-row">
<h2 class="text-white text-5xl font-semibold block pb-8">
Our best service
</h2>
</div>
<div class="grid grid-cols-3 md:grid-cols-2 gap-x-20 gap-y-8">
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/verified-user.png"
alt="icon-verified"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
Verify your identity
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/register.png"
alt="icon-register"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
Register for free
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/suport.png"
alt="icon-support"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
All time suport
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/pay.png"
alt="icon-pay"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
Pay for your transfer
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/handshaking.png"
alt="icon-handshaking"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
Expertise built
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
<div class="min-w-72 max-w-xs">
<img src="src/assets/img/topDivisory.svg" />
<div
class="flex flex-col items-center justify-evenly bg-white min-w-72 max-w-xs px-4 py-6"
>
<img
src="./src/assets/img/icons/safest.png"
alt="icon-money"
class="bg-slate-200 p-2 rounded-full"
/>
<h3 class="text-slate-900 text-center font-bold pb-2">
Safest tansection
</h3>
<p class="text-sm text-gray-400 text-center">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit.
</p>
</div>
<img src="src/assets/img/bottomDivisory.svg" />
</div>
</div>
</section>
<!-- About Us Section -->
<div>
<img class="w-full" src="src/assets/img/topDivisory.svg" alt="" />
</div>
<section
id="aboutUs"
class="flex flex-col items-center px-32 py-24 bg-white text-slate-900 decoration-slate-900"
>
<div class="flex flex-col items-center">
<h2 class="text-5xl font-semibold">Our beloved customer</h2>
<p class="pt-8 font-medium text-lg text-slate-400">
All the Lorem Ipsum generators on the Internet tend to repeat
predefined chunks.
</p>
</div>
<div class="flex justify-center h-full w-full mt-8">
<div
class="flex flex-col justify-center items-center px-16 py-16 gap-3 bg-white drop-shadow-2xl h-3/5 w-4/6 z-20"
>
<img
class="rounded-full w-24"
src="./src/assets/img/avatar1.jpg"
alt="Client picture"
/>
<div class="flex flex-col justify-center items-center">
<h3 class="text-3xl font-semibold">Stephan Louis</h3>
<p class="text-lg font-medium text-slate-400">Developer</p>
</div>
<q class="text-center font-medium text-slate-400"
>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</q
>
</div>
</div>
<div class="flex flex-col items-center justify-center h-20 w-4/6">
<div class="bg-white drop-shadow-2xl h-1/2 w-85 z-10"></div>
<div class="bg-white drop-shadow-2xl h-1/2 w-65 z-0"></div>
</div>
<div class="flex justify-center items-center h-4 mt-8">
<img
class="object-cover h-full"
src="./src/assets/img/svg/dot.svg"
alt=""
/>
<img
class="object-cover h-full"
src="./src/assets/img/svg/selectedDot.svg"
alt=""
/>
<img
class="object-cover h-full"
src="./src/assets/img/svg/dot.svg"
alt=""
/>
<img
class="object-cover h-full"
src="./src/assets/img/svg/dot.svg"
alt=""
/>
<img
class="object-cover h-full"
src="./src/assets/img/svg/dot.svg"
alt=""
/>
</div>
</section>
</main>
<footer class="bg-white px-32 py-10 flex flex-col">
<!-- News Section -->
<section>
<div
class="flex items-center px-16 py-24 gap-12 bg-gradient-to-t from-violet-700 to-purple-600"
>
<div class="w-7/12">
<h3 class="text-white text-5xl font-semibold mb-8">
Get your updated news
</h3>
<p class="text-slate-300 font-semibold">
If you are going to use a passage of Lorem Ipsum, you need to be
sure theres isn't anything embarrassing.
</p>
</div>
<form
class="flex justify-end h-16 w-5/12 focus-within:outline focus-within:outline-cyan-400"
action=""
>
<input
class="pl-6 w-full border-none focus:outline-none placeholder:font-medium text-slate-900 text-sm font-medium"
type="email"
placeholder="Enter your email "
/>
<button
class="bg-orange-500 w-44 p-1.5 border-solid border-8 border-white text-white font-semibold"
>
Send
</button>
</form>
</div>
</section>
<!-- Copyrights Section -->
<section>
<div
class="flex justify-between text-xs text-slate-400 font-semibold mt-14"
>
<p class="font-semibold">© Besnik 2021. All rigths reserved</p>
<p class="font-semibold">Made From Bangladesh</p>
<div class="flex gap-4">
<img
class="w-4"
src="src/assets/img/icons/facebook.png"
alt="Facebook Icon"
/>
<img
class="w-4"
src="src/assets/img/icons/twitter.png"
alt="Twitter Icon"
/>
<img
class="w-4"
src="src/assets/img/icons/letra-b.png"
alt="iicon-b"
/>
<img
class="w-4"
src="src/assets/img/icons/linkedin.png"
alt="LinkedIn Icon"
/>
</div>
</div>
</section>
</footer>
</body>
</html>