-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
586 lines (560 loc) · 77.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
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
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
<!DOCTYPE html>
<html 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>vaspacx/home</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="progressbar"></div>
<div id="scrollPath"></div>
<div id="intro" class="header-container">
<div class="sidebar">
<span class="vaspacx">vaspac<i class="fa fa-xing" aria-hidden="true"></i></span>
<ul>
<li><h3>Getting Started</h3></li>
<a href="index.html#intro"><li class="margin-10px">Intro</li></a>
<li><h3>Components</h3></li>
<a href="index.html#avatar"><li class="margin-10px">Avatar</li></a>
<a href="index.html#badge"><li class="margin-10px" >Badge</li></a>
<a href="index.html#alert"><li class="margin-10px" >Alert</li></a>
<a href="index.html#button"><li class="margin-10px" >Button</li></a>
<a href="index.html#card"><li class="margin-10px" >Card</li></a>
<a href="img.html#image"><li class="margin-10px" >Image</li></a>
<a href="img.html#input"><li class="margin-10px" >Input</li></a>
<a href="img.html#typography"><li class="margin-10px" >Typography</li></a>
<a href="img.html#list"><li class="margin-10px" >List</li></a>
<a href="img.html#navigation"><li class="margin-10px" >Navigation</li></a>
<a href="modal.html#modal"><li class="margin-10px" >Modal</li></a>
<a href="modal.html#rating"><li class="margin-10px" >Rating</li></a>
<a href="modal.html#toast"><li class="margin-10px" >Toast</li></a>
<a href="modal.html#grid"><li class="margin-10px" >Grid</li></a>
</ul>
</div>
<div class="nav">
<ul>
<a href="home.html"><li>HOME</li></a>
<a href="index.html#avatar"><li>DOCUMENTATION</li></a>
</ul>
<ul class="social-icons">
<li>
<a href="https://twitter.com/VashnaviChauhan"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://www.instagram.com/streamofthought18/"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://github.com/vashnavichauhan1825"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/vash-chauhan-b6222514b/"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="detail">
<h3 class="heading-detail">aspacx allows you to design and build web Apps faster by
providing a range of reusable components. And It's a dark-themed component library</h3>
<p class="para-heading">The name Vaspacx is inspired from my name <b>VASHNAVI</b> and <b>SPACE</b> ! => <b>VAS+PAC+'X'</b></p>
<h1 class="clr-blue">Installation</h1>
<p class="para"><i class="fa fa-check-square-o" aria-hidden="true"></i> Copy and paste the css link tag in the head tag of your html document. So that you can style your components by just adding
class names to your html elements.</p>
<p class="para"><i class="fa fa-check-square-o" aria-hidden="true"></i> To quickly get started , place the following code in the head section of your HTML page.</p>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%253Clink%2520rel%253D%2522stylesheet%2522%2520href%253D%2522https%253A%252F%252Fvaspacx-components.netlify.app%252Fstyle.css%2522%253E"
style="width: 800px; height: 188px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<!-- <button class="primary-btn mg-btn">GET STARTED !</button> -->
</div>
</div>
<section id="avatar">
<h1 class="clr-blue h1-heading">AVATAR</h1>
<p class="para md-sz">Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.</p>
<h2 class="clr-blue">Group Avatar</h2>
<p class="para">An avatar group is an element that communicates to the user that there is more than 1 person associated to an item.</p>
<div class="flex-col">
<div class="avatar-group">
<div class="hidden-avatars avatar-s-x">
+10
</div>
<div class="avatar avatar-s-x">
<img src="https://pixinvent.com/materialize-material-design-admin-template/app-assets/images/user/12.jpg"/>
</div>
<div class="avatar avatar-s-x">
<img src="https://htmlstream.com/preview/unify-v2.6.2/assets/img-temp/400x450/img5.jpg"/>
</div>
<div class="avatar avatar-s-x">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
<div class="avatar avatar-s-x">
<img src="https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/04/a0004213/img/basic/a0004213_main.jpg?20200710184501&q=80&rw=750&rh=536"/>
</div>
<div class="avatar avatar-s-x">
<img src="https://da4e1j5r7gw87.cloudfront.net/wp-content/uploads/sites/768/2018/08/glasses-american-man-20s-hipster.jpg"/>
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%253Cdiv%2520class%253D%2522flex-col%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-group%2522%253E%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522hidden-avatars%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%252B10%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fpixinvent.com%252Fmaterialize-material-design-admin-template%252Fapp-assets%252Fimages%252Fuser%252F12.jpg%2522%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fhtmlstream.com%252Fpreview%252Funify-v2.6.2%252Fassets%252Fimg-temp%252F400x450%252Fimg5.jpg%2522%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.pexels.com%252Fphotos%252F220453%252Fpexels-photo-220453.jpeg%253Fauto%253Dcompress%2526cs%253Dtinysrgb%2526dpr%253D1%2526w%253D500%2522%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Frimage.gnst.jp%252Flivejapan.com%252Fpublic%252Farticle%252Fdetail%252Fa%252F00%252F04%252Fa0004213%252Fimg%252Fbasic%252Fa0004213_main.jpg%253F20200710184501%2526q%253D80%2526rw%253D750%2526rh%253D536%2522%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fda4e1j5r7gw87.cloudfront.net%252Fwp-content%252Fuploads%252Fsites%252F768%252F2018%252F08%252Fglasses-american-man-20s-hipster.jpg%2522%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Round Avatar</h2>
<p class="para">It is simply a circle avatar,with 3 different sizes small,medium and large.</p>
<div class="flex-row">
<div class="avatar-group">
<div class="avatar-offline avatar-s-x">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
</div>
</div>
<div class="avatar-group">
<div class="avatar-offline avatar-md-x">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
</div>
</div>
<div class="avatar-group">
<div class="avatar-offline avatar-lg-x">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%253Cdiv%2520class%253D%2522avatar-offline%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%253Cdiv%2520class%253D%2522avatar-offline%2520avatar-md-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-offline%2520avatar-lg-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 215px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Rectangle Avatar</h2>
<p class="para">It is simply a rectangle avatar,with 3 different sizes small,medium and large.</p>
<div class="flex-row">
<div class="avatar-group">
<div class="avatar-rect avatar-s-x">
<img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
</div>
</div>
<div class="avatar-group">
<div class="avatar-rect avatar-md-x">
<img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
</div>
</div>
<div class="avatar-group">
<div class="avatar-rect avatar-lg-x">
<img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80">
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%253Cdiv%2520class%253D%2522avatar-rect%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1567532939604-b6b5b0db2604%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D687%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-rect%2520avatar-md-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1567532939604-b6b5b0db2604%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D687%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-rect%2520avatar-lg-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1567532939604-b6b5b0db2604%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D687%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
style="width: 1024px; height: 215px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Online Avatar</h2>
<p class="para">It is simply show that our avatar is online !</p>
<div class="avatar-group">
<div class="avatar-circle-wht avatar-s-x">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%253Cdiv%2520class%253D%2522avatar-circle-wht%2520avatar-s-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-circle-wht%2520avatar-md-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522avatar-circle-wht%2520avatar-lg-x%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 215px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</section>
<section id="badge">
<h1 class="clr-blue h1-heading">BADGE</h1>
<p class="para md-sz">Badges are used to add additional information to any content.For example, some websites associate
some number of notifications to the link. The notification number is seen when logged in to a particular website
which tells the numbers of news or notifications to see by clicking it.</p>
<h2 class="clr-blue">Avatar With Badges</h2>
<p class="para">Use the Avatar + Badge Pattern to complement the graphical representation that the Avatar provides with
indication for a status</p>
<div class="flex-row">
<div class="avatar-group">
<div class="badge-avatar">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
<span class="span-badge"></span>
</div>
</div>
<div class="avatar-group">
<div class="badge-avatar border-badge">
<img src="https://rimage.gnst.jp/livejapan.com/public/article/detail/a/00/04/a0004213/img/basic/a0004213_main.jpg?20200710184501&q=80&rw=750&rh=536">
<span class="span-badge"></span>
</div>
</div>
<div class="avatar-group">
<div class="badge-avatar border-badge-On">
<img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80">
<span class="gr-badge"></span>
</div>
</div>
<div class="avatar-group">
<div class="badge-avatar">
<img src="https://htmlstream.com/preview/unify-v2.6.2/assets/img-temp/400x450/img5.jpg">
<span class="span-badge-On"></span>
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%253Cdiv%2520class%253D%2522badge-avatar%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522span-badge%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522badge-avatar%2520border-badge%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Frimage.gnst.jp%252Flivejapan.com%252Fpublic%252Farticle%252Fdetail%252Fa%252F00%252F04%252Fa0004213%252Fimg%252Fbasic%252Fa0004213_main.jpg%253F20200710184501%2526q%253D80%2526rw%253D750%2526rh%253D536%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522span-badge%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522badge-avatar%2520border-badge-On%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fimages.unsplash.com%252Fphoto-1487412720507-e7ab37603c6f%253Fixlib%253Drb-1.2.1%2526ixid%253DMnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8%2526auto%253Dformat%2526fit%253Dcrop%2526w%253D1171%2526q%253D80%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522gr-badge%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522badge-avatar%2522%253E%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522https%253A%252F%252Fhtmlstream.com%252Fpreview%252Funify-v2.6.2%252Fassets%252Fimg-temp%252F400x450%252Fimg5.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522span-badge-On%2522%253E%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 215px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Icon Badge</h2>
<p class="para">A number badge over the notification icon is one of the useful elements in a user-friendly interface. This badge alerts the users to read their unread notifications as well as
shows the number of notifications</p>
<div class="flex-row">
<div class="badge">
<i class="fa fa-bell clr-grey x-icon" aria-hidden="true"></i>
<span class="icon-badge icon-bell">+99</span>
</div>
<div class="badge">
<i class="fa fa-shopping-cart x-icon" aria-hidden="true"></i>
<span class="icon-badge icon-bell">+11</span>
</div>
<div class="badge">
<i class="fa fa-envelope x-icon" aria-hidden="true"></i>
<span class="icon-badge icon-bell">6</span>
</div>
<div class="badge">
<i class="fa fa-home x-icon" aria-hidden="true"></i>
<span class="icon-badge icon-bell">6</span>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%252F%252F--badge%2520for%2520bell%2520icon---%252F%252F%250A%250A%253Cdiv%2520class%253D%2522badge%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-bell%2520clr-grey%2520x-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522icon-badge%2520icon-bell%2522%253E%252B99%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F--badge%2520for%2520shopping%2520cart--%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%253Cdiv%2520class%253D%2522badge%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-shopping-cart%2520x-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522icon-badge%2520icon-bell%2522%253E%252B11%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F--badge%2520for%2520mail%2520--%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%253Cdiv%2520class%253D%2522badge%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-envelope%2520x-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522icon-badge%2520icon-bell%2522%253E6%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%252F%252F--badge%2520for%2520home--%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522badge%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-home%2520x-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522icon-badge%2520icon-bell%2522%253E6%253C%252Fspan%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
style="width: 782px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Button Badge</h2>
<p class="para" > Button badge represents a label which holds a small amount of information,
such as the number of unread notifications.</p>
<div class="flex-row">
<div class="badge-btn">
<button class="x-btn clr-btn-home">Home</button>
<span class="btn-icon bg-white">6</span>
</div>
<div class="badge-btn">
<button class="x-btn clr-btn-inbox">Inbox</button>
<span class="btn-icon bg-red">3</span>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F--button%2520badge%2520for%2520home--%252F%252F%250A%250A%253Cdiv%2520class%253D%2522badge-btn%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522x-btn%2520clr-btn-home%2522%253EHome%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522btn-icon%2520bg-white%2522%253E6%253C%252Fspan%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%250A%252F%252F--button%2520badge%2520for%2520inbox--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522badge-btn%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522x-btn%2520clr-btn-inbox%2522%253EInbox%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cspan%2520class%253D%2522btn-icon%2520bg-red%2522%253E3%253C%252Fspan%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 622px; height:220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</section>
<section id="alert">
<h1 class="clr-blue h1-heading">ALERT</h1>
<p class="para md-sz">An alert box is an important feature. It is used to inform the client or the user about the click events. Like if the user subscribes to your page for daily updates then you can wish them back,
or thanks them by showing an alert box message.</p>
<h2 class="clr-blue">Alert Box</h2>
<p class="para">Alert messages can be used to notify the user about something special: error, success, information or Invalid.</p>
<div class="alert-container">
<div class="alert-box border-left-gr">
<div>
<i class="fa fa-check green-icon icon" aria-hidden="true"></i>
<h4 class="al-heading">SUCCESS</h4><br>
<small class="small">Your account has been saved</small>
</div>
<p class="close-font">close</p>
</div>
<div class="alert-box border-left-red">
<div>
<i class="fa fa-times red-icon icon" aria-hidden="true"></i>
<h4 class="al-heading">Error</h4><br>
<small class="small">Your email address is invalid</small>
</div>
<p class="close-font">close</p>
</div>
<div class="alert-box border-left-yw">
<div>
<i class="fa fa-exclamation-triangle icon yellow-icon" aria-hidden="true"></i>
<h4 class="al-heading">Invalid</h4><br>
<small class="small"> Indicates a warning that might need attention.</small>
</div>
<p class="close-font">close</p>
</div>
<div class="alert-box border-left-blue">
<div>
<i class="fa fa-info icon blue-icon" aria-hidden="true"></i>
<h4 class="al-heading">Info</h4><br>
<small class="small">Indicates a neutral informative change or action.</small>
</div>
<p class="close-font">close</p>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F---alert%2520success--%252F%252F%250A%250A%2520%253Cdiv%2520class%253D%2522alert-box%2520border-left-gr%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-check%2520green-icon%2520icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520class%253D%2522al-heading%2522%253ESUCCESS%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2522%253EYour%2520account%2520has%2520been%2520saved%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%252F%252Falert%2520error---%252F%252F%250A%2520%2520%2520%2520%2520%2520%250A%2520%253Cdiv%2520class%253D%2522alert-box%2520border-left-red%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-times%2520red-icon%2520icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520%2520class%253D%2522al-heading%2522%253EError%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2522%253EYour%2520email%2520address%2520is%2520invalid%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252Falert%2520Invalid---%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520border-left-yw%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-exclamation-triangle%2520icon%2520yellow-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520%2520class%253D%2522al-heading%2522%253EInvalid%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2522%253E%2520Indicates%2520a%2520warning%2520that%2520might%2520need%2520attention.%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252Falert%2520info----%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520border-left-blue%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-info%2520icon%2520blue-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520%2520class%253D%2522al-heading%2522%253EInfo%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2522%253EIndicates%2520a%2520neutral%2520informative%2520change%2520or%2520action.%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%2520%2520%2520%2520%2520"
style="width: 1000px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Alert Outline</h2>
<p class="para">Alert outline messages can be used to notify the user about something special: error, success, information or Invalid.</p>
<div class="alert-container">
<div class="alert-box bg-color-grey outl-gr">
<div>
<i class="fa fa-check green-icon icon" aria-hidden="true"></i>
<h4 class="al-heading gr-color">SUCCESS</h4><br>
<small class="small gr-color">Your account has been saved</small>
</div>
<p class="close-font gr-color">close</p>
</div>
<div class="alert-box bg-color-grey outl-red">
<div>
<i class="fa fa-times red-icon icon" aria-hidden="true"></i>
<h4 class="al-heading red-color">Error</h4><br>
<small class="small red-color">Your email address is invalid</small>
</div>
<p class="close-font red-color">close</p>
</div>
<div class="alert-box bg-color-grey outl-yw">
<div>
<i class="fa fa-exclamation-triangle icon yellow-icon" aria-hidden="true"></i>
<h4 class="al-heading yw-color">Invalid</h4><br>
<small class="small yw-color"> Indicates a warning that might need attention.</small>
</div>
<p class="close-font yw-color">close</p>
</div>
<div class="alert-box bg-color-grey outl-blue">
<div>
<i class="fa fa-info icon blue-icon" aria-hidden="true"></i>
<h4 class="al-heading blue-color">Info</h4><br>
<small class="small blue-color">Indicates a neutral informative change or action.</small>
</div>
<p class="close-font blue-color">close</p>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%250A%2520%2520%2520%252F%252F--alert-outline-sucess--%252F%252F%250A%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520bg-color-grey%2520outl-gr%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-check%2520green-icon%2520icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520class%253D%2522al-heading%2520gr-color%2522%253ESUCCESS%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2520gr-color%2522%253EYour%2520account%2520has%2520been%2520saved%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2520gr-color%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%252F%252F--alert%2520outline-error--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520bg-color-grey%2520outl-red%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-times%2520red-icon%2520icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520%2520class%253D%2522al-heading%2520red-color%2522%253EError%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2520red-color%2522%253EYour%2520email%2520address%2520is%2520invalid%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2520red-color%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F--alert%2520outline%2520%2520invalid--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520bg-color-grey%2520outl-yw%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-exclamation-triangle%2520icon%2520yellow-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch4%2520%2520class%253D%2522al-heading%2520yw-color%2522%253EInvalid%253C%252Fh4%253E%253Cbr%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%2520class%253D%2522small%2520yw-color%2522%253E%2520Indicates%2520a%2520warning%2520that%2520might%2520need%2520attention.%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522close-font%2520yw-color%2522%253Eclose%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252Falert%2520otline%2520info--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522alert-box%2520bg-color-grey%2520outl-blue%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-info%2520icon%2520blue-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</section>
<section id="button">
<h1 class="clr-blue h1-heading">BUTTON</h1>
<p class="para md-sz">The CSS Buttons are used to decorate the web pages by applying the various styling properties to the button. Buttons are used for
event processing and interacting with the user.</p>
<h2 class="clr-blue">Primary Button</h2>
<p class="para">By default, .btn-primary has white text on a blue background. There are 3 types of primary btn
normal primary btn , hover btn
</p>
<div class="btn-container">
<button class="primay-btn label-btn">Primary</button>
<button class="primay-btn outl-btn">Primary</button>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%2520%252F%252F--Normal-primary-btn--%252F%252F%2520%2520%250A%250A%2520%2520%2520%2520%253Cbutton%2520class%253D%2522primay-btn%2520label-btn%2522%253EPrimary%253C%252Fbutton%253E%250A%2520%2520%2520%2520%250A%252F%252F--outline%2520with%2520hover%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%253Cbutton%2520class%253D%2522primay-btn%2520outl-btn%2522%253EPrimary%253C%252Fbutton%253E"
style="width: 630px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Link Button</h2>
<p class="para"> Simply link buttons are for links so that we diffrentiate between normal button and link button there are
two types of link button one is simple other have hover property.
</p>
<div class="btn-container">
<button class="sec-btn normal-btn">Link</button>
<button class="sec-btn outl-sec-btn">Link</button>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%2520%252F%252F--Normal-link-btn--%252F%252F%2520%2520%250A%250A%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522sec-btn%2520normal-btn%2522%253ELink%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%252F%252F--hover-link%2520-button--%252F%252F%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522sec-btn%2520outl-sec-btn%2522%253ELink%253C%252Fbutton%253E%250A%2520%2520%2520"
style="width: 630px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Icon Button</h2>
<p class="para"> Icon buttons are button with text and icon to symbolize the action.
</p>
<div class="btn-container">
<button class="primay-btn icon-btn"><i class="fa fa-heart" aria-hidden="true"></i>Primary</button>
<button class="sec-btn icon-sec-btn"><i class="fa fa-times" aria-hidden="true"></i>Secondary</button>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%2520%252F%252F--icon-btn--%252F%252F%2520%2520%250A%250A%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522primay-btn%2520icon-btn%2522%253E%253Ci%2520class%253D%2522fa%2520fa-heart%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253EPrimary%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F--icon-remove-btn--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522sec-btn%2520icon-sec-btn%2522%253E%253Ci%2520class%253D%2522fa%2520fa-times%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253ESecondary%253C%252Fbutton%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Float Action Button</h2>
<p class="para">A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types:
normal , with shadows , and half bg color button.
</p>
<div class="btn-container">
<button class="float-btn add-float"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button class="float-btn click-grey"><i class="fa fa-camera" aria-hidden="true"></i></button>
<button class="float-btn mail-btn"><i class="fa fa-envelope" aria-hidden="true"></i></button>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%2520%252F%252F--icon-btn--%252F%252F%2520%2520%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522float-btn%2520add-float%2522%253E%253Ci%2520class%253D%2522fa%2520fa-plus%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%252F%252F--shadow-float-btn--%252F%252F%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522float-btn%2520click-grey%2522%253E%253Ci%2520class%253D%2522fa%2520fa-camera%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F--mail-btn-half-bg--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522float-btn%2520mail-btn%2522%253E%253Ci%2520class%253D%2522fa%2520fa-envelope%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%253C%252Fbutton%253E%250A%2520%2520%2520%250A%2520%2520%2520"
style="width: 1010px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
</section>
<section id="card">
<h1 class="clr-blue h1-heading">CARD</h1>
<p class="para md-sz">CSS cards are great for organizing and enhancing
a website's user interface. Each card is uniquely designed to make it easy for users to read the card content. CSS cards are great for organizing
and enhancing a website's user interface.</p>
<h2 class="clr-blue">Card With Badge</h2>
<p class="para">Ribbon badges are a great way to
highlight something on your website, especially on Card UI designs. This simple pure CSS ribbon badge can by easily
placed on the top left corner of your designs.
</p>
<div class="card-flex-section">
<div class="card-cont">
<img src="./assets/maldives.jpg">
<h2 class="card-heading">Maldives</h2>
<p class="card-para"> The Maldives are known for their
<strong>natural environment</strong> including the blue ocean,
white beaches, and clean air, attracting tourists.
</p>
<button class="primay-btn outl-btn card-button">Explore ➡</button>
<div class="card-bookmark">
<i class="fa fa-bookmark bookmark-icon" aria-hidden="true"></i>
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%252F%252F--card-with%2520--ribbon--%252F%252F%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-cont%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520src%253D%2522.%252Fassets%252Fmaldives.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%2520class%253D%2522card-heading%2522%253EMaldives%253C%252Fh2%253E%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522card-para%2522%253E%2520The%2520Maldives%2520are%2520known%2520for%2520their%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cstrong%253Enatural%2520environment%253C%252Fstrong%253E%2520including%2520the%2520blue%2520ocean%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520white%2520beaches%252C%2520and%2520clean%2520air%252C%2520attracting%2520tourists.%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fp%253E%250A%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522primay-btn%2520outl-btn%2520card-button%2522%253EExplore%2520%25E2%259E%25A1%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-bookmark%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-bookmark%2520bookmark-icon%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 799px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Card With Dismiss</h2>
<p class="para">Card with Dismiss , this card generally contain dismiss icon so, if the
user want to remove card from the website they can easily do it.
</p>
<div class="card-flex-section">
<div class="card-cont bg-wht diss-card">
<img class="image-sub" src="./assets/mail.jpg">
<h2 class="diss-heading">Subscribe To Newsletter</h2>
<p class="card-para black-clr">Never miss any
<strong>updates !</strong>
</p>
<button class="primay-btn outl-btn card-button-diss">Subscribe ✉</button>
<div class="card-dissmiss-icon">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F--dissmiss-card---%252F%252F%250A%250A%253Cdiv%2520class%253D%2522card-cont%2520bg-wht%2520diss-card%2522%253E%250A%2520%2520%2520%2520%253Cimg%2520class%253D%2522image-sub%2522%2520src%253D%2522.%252Fimg%252Fmail.jpg%2522%253E%250A%2520%2520%2520%2520%253Ch2%2520class%253D%2522diss-heading%2522%253ESubscribe%2520To%2520Newsletter%253C%252Fh2%253E%250A%250A%2520%2520%2520%2520%253Cp%2520class%253D%2522card-para%2520black-clr%2522%253ENever%2520miss%2520any%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cstrong%253Eupdates%2520%21%253C%252Fstrong%253E%250A%2520%2520%2520%2520%253C%252Fp%253E%250A%250A%2520%2520%2520%2520%253Cbutton%2520class%253D%2522primay-btn%2520outl-btn%2520card-button-diss%2522%253ESubscribe%2520%25E2%259C%2589%253C%252Fbutton%253E%250A%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-dissmiss-icon%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fa%2520fa-times%2522%2520aria-hidden%253D%2522true%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%253C%252Fdiv%253E"
style="width: 788px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Card With Text-Overlay</h2>
<p class="para">Basically its a card in which text is overlay the card or say ,
card having text above ! and below cards also have hover property. Download image in the <b>assests</b> file
</p>
<div class="card-flex-section">
<div class="card-overlay">
<img class="img-card-overlay" src="./assets/dog-img.jpg">
<h1 class="oy-head">Playful Doggyyy</h1>
<p class="oy-txt-subhead">Meet <strong>Alex</strong>!</p>
<p class="oy-para">Happiness is a warm puppy. Money can buy you a fine dog, but only love can make him wag his tail. Dogs are not our whole life,
but they make our lives whole.</p>
</div>
<div class="card-overlay-bottom">
<img class="img-card-overlay" src="./assets/sleepy-dog.jpg">
<h1 class="oy-head-btm">Sleppy Doggyyy</h1>
<p class="oy-txt-subhead-btm">Meet <strong>Bruno</strong>!</p>
<p class="oy-para">While fur babies are super adorable when they’re being playful, it's those quiet moments that
really get you in your feels.</p>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F--Text-overlay-card--%252F%252F%250A%250A%2520%253Cdiv%2520class%253D%2522card-overlay%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522img-card-overlay%2522%2520src%253D%2522.%252Fimg%252Fdog-img.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%2520class%253D%2522oy-head%2522%253EPlayful%2520Doggyyy%253C%252Fh1%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-txt-subhead%2522%253EMeet%2520%253Cstrong%253EAlex%253C%252Fstrong%253E%21%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-para%2522%253EHappiness%2520is%2520a%2520warm%2520puppy.%2520Money%2520can%2520buy%2520you%2520a%2520fine%2520dog%252C%2520but%2520only%2520love%2520can%2520make%2520him%2520wag%2520his%2520tail.%2520Dogs%2520are%2520not%2520our%2520whole%2520life%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520but%2520they%2520make%2520our%2520lives%2520whole.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%252F%252F--text-overlay-bottom--%252F%252F%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522card-overlay-bottom%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522img-card-overlay%2522%2520src%253D%2522.%252Fimg%252Fsleepy-dog.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%2520class%253D%2522oy-head-btm%2522%253ESleppy%2520Doggyyy%253C%252Fh1%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-txt-subhead-btm%2522%253EMeet%2520%253Cstrong%253EBruno%253C%252Fstrong%253E%21%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-para%2522%253EWhile%2520fur%2520babies%2520are%2520super%2520adorable%2520when%2520they%25E2%2580%2599re%2520being%2520playful%252C%2520it%27s%2520those%2520quiet%2520moments%2520that%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520really%2520get%2520you%2520in%2520your%2520feels.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Card With Text-Only</h2>
<p class="para">Text only card is used for tells something important or fact about something to user
mainly used for display information ! There are two types of card here first one have gradient in it as bg another card have only text with border color .primary-color .
</p>
<div class="card-flex-section">
<div class="text-card-cont">
<h2 class="text-card-head">This Fact card Feature Intresting fact About SPACE !</h2>
<p>In the observable universe there are an
estimated 2 trillion (2,000,000,000,000) galaxies. The International Space Station is the largest ever crewed object in space. Spacecraft have visited
all the known planets in our solar system.</p>
</div>
<div class="text-card-trans">
<h2 class="text-card-head">This Fact card Feature Intresting fact About SPACE !</h2>
<p>The National Aeronautics and Space
Administration (NASA), is responsible for unique scientific and technological achievements in human spaceflight, aeronautics, space science, and space applications
that have had widespread impacts on our nation and the world.</p>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F--text%2520card%2520-%2520bg%2520as%2520gradient%2520effect--%252F%252F%250A%250A%253Cdiv%2520class%253D%2522text-card-cont%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%2520class%253D%2522text-card-head%2522%253EThis%2520Fact%2520card%2520Feature%2520Intresting%2520fact%2520About%2520SPACE%2520%21%253C%252Fh2%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%253EIn%2520the%2520observable%2520universe%2520there%2520are%2520an%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520estimated%25202%2520trillion%2520%282%252C000%252C000%252C000%252C000%29%2520galaxies.%2520The%2520International%2520Space%2520Station%2520is%2520the%2520largest%2520ever%2520crewed%2520object%2520in%2520space.%2520Spacecraft%2520have%2520visited%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520all%2520the%2520known%2520planets%2520in%2520our%2520solar%2520system.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%252F%252F---text-card%2520-border%2520as%2520primary%2520color--%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522text-card-trans%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%2520class%253D%2522text-card-head%2522%253EThis%2520Fact%2520card%2520Feature%2520Intresting%2520fact%2520About%2520SPACE%2520%21%253C%252Fh2%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%253EThe%2520National%2520Aeronautics%2520and%2520Space%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Administration%2520%28NASA%29%252C%2520is%2520responsible%2520for%2520unique%2520scientific%2520and%2520technological%2520achievements%2520in%2520human%2520spaceflight%252C%2520aeronautics%252C%2520space%2520science%252C%2520and%2520space%2520applications%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520that%2520have%2520had%2520widespread%2520impacts%2520on%2520our%2520nation%2520and%2520the%2520world.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Card Vertical and Horizontal</h2>
<p class="para">
card display in two different layout one is horizontal other is vertical . This card usually use for product display.
</p>
<div class="card-flex-section">
<div class="horizontal-card">
<img class="img-card-hor" src="./assets/star-gazing.jpg">
<div class="detail-hor">
<h3 class="pri-clr-head">STARGAZING BASICS</h3>
<small>Vaspacx-2022 -Four Seasons under the stars</small>
<p>Vaspacx is back ! Whether you're new to astronomy or a seasoned practioner,
Vaspacx 2022 has something for everyone.
</p>
</div>
</div>
<div class="vertical-card">
<img class="img-card-ver" src="./assets/star-gazing.jpg">
<div class="detail-ver">
<h3 class="pri-clr-head">STARGAZING BASICS</h3>
<small>Vaspacx-2022 -Four Seasons under the stars</small>
<p>Vaspacx is back ! Whether you're new to astronomy or a seasoned practioner,
Vaspacx 2022 has something for everyone.
</p>
</div>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%2520%252F%252F--card-horizontal---%252F%252F%250A%2520%250A%2520%253Cdiv%2520class%253D%2522horizontal-card%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522img-card-hor%2522%2520src%253D%2522.%252Fimg%252Fstar-gazing.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522detail-hor%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch3%2520class%253D%2522pri-clr-head%2522%253ESTARGAZING%2520BASICS%253C%252Fh3%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%253EVaspacx-2022%2520-Four%2520Seasons%2520under%2520the%2520stars%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%253EVaspacx%2520is%2520back%2520%21%2520Whether%2520you%27re%2520new%2520to%2520astronomy%2520or%2520a%2520seasoned%2520practioner%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Vaspacx%25202022%2520has%2520something%2520for%2520everyone.%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%252F%252F---card-vertical---%252F%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522vertical-card%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522img-card-ver%2522%2520src%253D%2522.%252Fimg%252Fstar-gazing.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522detail-ver%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch3%2520class%253D%2522pri-clr-head%2522%253ESTARGAZING%2520BASICS%253C%252Fh3%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Csmall%253EVaspacx-2022%2520-Four%2520Seasons%2520under%2520the%2520stars%253C%252Fsmall%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%253EVaspacx%2520is%2520back%2520%21%2520Whether%2520you%27re%2520new%2520to%2520astronomy%2520or%2520a%2520seasoned%2520practioner%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Vaspacx%25202022%2520has%2520something%2520for%2520everyone.%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%253C%252Fdiv%253E%2520%2520%2520%2520%2520%2520"
style="width: 901px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<h2 class="clr-blue">Card With Shadow</h2>
<p class="para">
card having shadow means something is important , or user needs to pay attention
on this card . Just add class .box-shadow-wht for white shadow or add .box-shadow-hover-blue for blue shadow if hover on the card .
</p>
<div class="card-flex-section">
<div class="text-card-trans box-shadow-hover-blue">
<h2 class="text-card-head">This Fact card Feature Intresting fact About SPACE !</h2>
<p>The National Aeronautics and Space
Administration (NASA), is responsible for unique scientific and technological achievements in human spaceflight, aeronautics, space science, and space applications
that have had widespread impacts on our nation and the world.</p>
</div>
<div class="card-overlay box-shadow-wht">
<img class="img-card-overlay" src="./assets/dog-img.jpg">
<h1 class="oy-head">Playful Doggyyy</h1>
<p class="oy-txt-subhead">Meet <strong>Alex</strong>!</p>
<p class="oy-para">Happiness is a warm puppy. Money can buy you a fine dog, but only love can make him wag his tail. Dogs are not our whole life,
but they make our lives whole.</p>
</div>
</div>
<iframe
src="https://carbon.now.sh/embed?bg=rgba%280%2C0%2C0%2C1%29&t=twilight&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=1x&wm=false&code=%252F%252F--for%2520hover%2520blue%2520shadow--%252F%252F%250A%250A%253Cdiv%2520class%253D%2522text-card-trans%2520box-shadow-hover-blue%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch2%2520class%253D%2522text-card-head%2522%253EThis%2520Fact%2520card%2520Feature%2520Intresting%2520fact%2520About%2520SPACE%2520%21%253C%252Fh2%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%253EThe%2520National%2520Aeronautics%2520and%2520Space%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520Administration%2520%28NASA%29%252C%2520is%2520responsible%2520for%2520unique%2520scientific%2520and%2520technological%2520achievements%2520in%2520human%2520spaceflight%252C%2520aeronautics%252C%2520space%2520science%252C%2520and%2520space%2520applications%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520that%2520have%2520had%2520widespread%2520impacts%2520on%2520our%2520nation%2520and%2520the%2520world.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%252F%252F---white%2520shadow---%252F%252F%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%253Cdiv%2520class%253D%2522card-overlay%2520box-shadow-wht%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cimg%2520class%253D%2522img-card-overlay%2522%2520src%253D%2522.%252Fimg%252Fdog-img.jpg%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%2520class%253D%2522oy-head%2522%253EPlayful%2520Doggyyy%253C%252Fh1%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-txt-subhead%2522%253EMeet%2520%253Cstrong%253EAlex%253C%252Fstrong%253E%21%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cp%2520class%253D%2522oy-para%2522%253EHappiness%2520is%2520a%2520warm%2520puppy.%2520Money%2520can%2520buy%2520you%2520a%2520fine%2520dog%252C%2520but%2520only%2520love%2520can%2520make%2520him%2520wag%2520his%2520tail.%2520Dogs%2520are%2520not%2520our%2520whole%2520life%252C%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520but%2520they%2520make%2520our%2520lives%2520whole.%253C%252Fp%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
style="width: 1024px; height: 220px; border:0; transform: scale(1); overflow:hidden;"
sandbox="allow-scripts allow-same-origin">
</iframe>
<a href="img.html"><button class="primay-btn icon-btn next-btn"><i class="fa fa-arrow-right" aria-hidden="true"></i>Next</button></a>
</section>
<script type="text/javascript">
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight =(window.pageYOffset / totalHeight)*100;
progress.style.height = progressHeight + "%";
}
</script>
</body>
</html>