-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
78 lines (75 loc) · 12.7 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
---
layout: default
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>SnackBar-Notofication</title>
</head>
<body>
<button type="button" class="btn">Click To Reveal Snackbar</button>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita dolorem dolore modi accusamus placeat fugit debitis voluptatem, praesentium quisquam labore ipsam repellendus cupiditate quasi ad iure cumque minus, quaerat nam.</span>
<span>Repudiandae quos veniam nemo, consequuntur hic maxime temporibus ad, perferendis dolorem dolor labore magni eius voluptatum assumenda odio esse qui, suscipit omnis inventore nihil. Rem id voluptatem tenetur dolorem laborum?</span>
<span>Odit voluptatum tenetur dignissimos illo cupiditate veritatis eveniet molestias ab provident expedita consequuntur ex ratione, libero magni impedit praesentium architecto. Esse eveniet nisi laboriosam provident assumenda optio placeat neque facilis.</span>
<span>Minima voluptates eos nulla optio ut nihil neque recusandae esse aut veniam. Aperiam, ipsa, laborum quam ad impedit sequi similique quae laboriosam ipsam veniam voluptatem molestias provident. Excepturi, recusandae fuga?</span>
<span>Cumque suscipit itaque sint, quod, minus amet, repudiandae consequatur repellendus at laudantium ut dolorem totam perferendis dolorum esse rem rerum eaque delectus praesentium quisquam. Eveniet atque quod vero reprehenderit asperiores?</span>
<span>Placeat officiis, nam architecto dignissimos cumque in eligendi illum dicta possimus eius quasi corporis dolore magnam quaerat mollitia non! Maiores placeat necessitatibus beatae laborum nihil sint natus ex et in!</span>
<span>Quas officia eum ab harum illo, necessitatibus, non rem ratione nam perferendis est. Alias doloribus ullam quae nesciunt! Dolor, aliquid? Quam enim consectetur et ex magnam odit asperiores explicabo laboriosam.</span>
<span>Temporibus consectetur libero, assumenda deserunt explicabo, beatae quasi, autem quam veniam nam veritatis repellendus vel. Ducimus veritatis repudiandae nemo, alias tempore voluptates natus incidunt recusandae porro illum, ut explicabo delectus!</span>
<span>Ipsam at accusantium illo unde consequatur suscipit doloribus iure nihil nobis rem minima alias, dolores libero hic aperiam expedita temporibus numquam distinctio ut ad excepturi. Quo non alias officiis ducimus?</span>
<span>Ad culpa tempore asperiores, eos voluptatem molestiae quis sequi est officiis, aspernatur accusantium libero. Ipsa dolore amet ex nulla cumque laborum repudiandae quam, alias dolorem, iure, sequi accusantium voluptate dolorum?</span>
<span>Dolorem mollitia unde natus assumenda animi ad vitae provident ex reiciendis? Ipsa laudantium, tenetur eius quod delectus voluptates modi vel, cumque praesentium consectetur, illum voluptas eligendi. Facere officiis tenetur nisi.</span>
<span>Doloremque impedit earum asperiores et officia natus itaque, iure quasi nesciunt ipsam sapiente deserunt laborum! Molestiae sapiente, natus qui, nulla, odio debitis ullam asperiores tempore minima ratione iste voluptatibus deserunt!</span>
<span>Quas, voluptatem non tempora accusamus delectus quaerat beatae iste culpa illum laboriosam earum natus possimus nostrum sed distinctio dicta repellendus rerum! Magnam perferendis corporis facilis unde, quae hic asperiores accusantium!</span>
<span>Distinctio, voluptatibus tempore. Maxime illum, impedit eveniet, quae voluptatum amet dolor quod quasi totam dignissimos ea voluptates ipsam aspernatur! Fugit natus ea recusandae quibusdam iusto sit aliquid laboriosam labore corrupti?</span>
<span>Deleniti inventore rerum, quidem minima fugit at id facilis nemo harum nisi, incidunt explicabo nesciunt optio. Temporibus excepturi cum expedita distinctio, amet architecto sunt vel error quo blanditiis asperiores iusto.</span>
<span>Corrupti dolores modi pariatur obcaecati soluta, quaerat doloribus consequuntur rerum ab eaque placeat ea, blanditiis atque officia quia hic reprehenderit. Expedita odio dolor, perspiciatis ad soluta nulla saepe cumque animi.</span>
<span>Neque consequatur impedit aperiam magnam explicabo praesentium, dolor provident. Aspernatur magnam ducimus, natus iusto dolorum doloribus quidem, ullam asperiores totam nobis illum possimus nihil voluptas distinctio dicta suscipit deserunt provident!</span>
<span>Nihil ratione id ex assumenda porro vero itaque ad, doloribus explicabo, deleniti quaerat sit harum praesentium esse atque animi autem hic dolores omnis tempore impedit ullam suscipit est quasi. Doloremque.</span>
<span>Ex at omnis nam! Quae, aliquam incidunt eos officia quia inventore repellendus distinctio eveniet sapiente. Alias itaque nam nisi, earum nobis adipisci autem repellat facere, at accusamus ullam, atque temporibus.</span>
<span>Rem iusto incidunt modi est eum, nihil, laborum adipisci dolorum accusantium libero similique possimus! Facere, harum error beatae sit repellat a asperiores molestias eaque perspiciatis eveniet sapiente, omnis iste optio!</span>
<span>Et non illo in corrupti ipsa quasi a nihil, quia libero reprehenderit tenetur labore distinctio quas eius animi reiciendis excepturi quis eos. Sapiente, placeat id iusto maxime quaerat unde porro.</span>
<span>Dolores animi earum ullam eaque consequuntur sit eius expedita tempora illum rerum? Et eaque distinctio omnis obcaecati molestiae, cumque odio reiciendis, eius minus reprehenderit itaque cupiditate dolores earum magni sunt.</span>
<span>Nobis aliquam quia vel, harum natus quae facere sit, dignissimos reiciendis possimus officia unde, ex veniam maxime explicabo. Quasi impedit maiores natus expedita beatae perferendis ratione dolores praesentium a aspernatur!</span>
<span>Inventore quam itaque ut! Repellat quae deleniti obcaecati laborum quidem quam autem similique? Quidem quasi ad aliquid fuga dolore vero nemo fugit numquam, minima, delectus cupiditate ut! Officia, maiores sunt?</span>
<span>Cumque recusandae ut nesciunt a est ad veritatis laudantium nemo facilis at debitis itaque, consectetur architecto iusto unde fuga repellat distinctio eaque asperiores explicabo consequuntur tempora. Vitae debitis ut asperiores.</span>
<span>Quod impedit veniam excepturi eos, veritatis quam porro est deleniti sint dolor? Aliquid, asperiores maxime soluta optio dolores quibusdam? Unde, eveniet atque. Ullam distinctio, eaque earum fugit iure repellendus similique!</span>
<span>Ad officia deleniti culpa nemo atque soluta et quasi, voluptatum accusantium sint aspernatur ut iusto cum ratione nihil omnis rerum eius modi. In, temporibus? Illo dolor accusamus voluptatibus unde fugit.</span>
<span>Tempora porro nobis aut ex itaque unde, dignissimos ullam sit dolore error iusto dolorum ratione reprehenderit vitae reiciendis odit hic qui fugiat veritatis saepe tenetur! Eum autem iusto tenetur assumenda.</span>
<span>Ratione vel a voluptate tempora ipsa nobis aut! Necessitatibus minima aliquam voluptatibus nesciunt libero quia perspiciatis illum expedita sapiente consequuntur distinctio, dolore a nemo earum magnam aperiam corrupti? Similique, unde?</span>
<span>Voluptatibus similique suscipit tenetur placeat, quidem aspernatur blanditiis perspiciatis amet accusantium labore atque error omnis culpa, libero nihil non. Rerum minima cupiditate recusandae autem consectetur, corporis unde laborum repellat veniam.</span>
<span>Sunt explicabo a cum nobis totam eos, ipsum ducimus provident corporis neque praesentium nulla hic pariatur culpa numquam quidem veniam consectetur quibusdam omnis dolorum temporibus non magni. Illo, excepturi sint?</span>
<span>Dignissimos est veniam fugiat ipsa ipsam, dolor itaque veritatis, iure voluptas voluptates tenetur aut error et in ducimus? Quisquam maxime sint deserunt odit. Eius veniam quaerat odio reprehenderit vel eveniet!</span>
<span>Nemo magni blanditiis sequi, quos ab aspernatur ipsam nam ad, vitae dignissimos ducimus aliquam voluptates, cum minima tenetur perferendis omnis dolorum obcaecati dolore? Reiciendis voluptates omnis sint, repellat possimus unde.</span>
<span>Nihil, consectetur, dolore aliquid necessitatibus soluta inventore atque harum sit assumenda ad dolorum perferendis eligendi quae ullam! Perferendis esse quo, velit explicabo nostrum corporis delectus possimus alias vitae veritatis accusamus.</span>
<span>Debitis dicta eligendi, delectus explicabo doloremque aliquam tenetur non aliquid veritatis? Odit minus inventore suscipit, deserunt corporis facere temporibus ipsa iusto recusandae beatae quidem, atque dolore. Magni quidem facilis voluptas.</span>
<span>Placeat voluptates harum aperiam asperiores delectus aspernatur numquam amet dolorem ipsam, quaerat in nobis ab sequi consequatur, fugiat error repellat soluta dignissimos ullam? Excepturi, suscipit soluta voluptatum optio saepe labore.</span>
<span>Dolor aliquam magnam enim in! Aspernatur laudantium voluptate modi veritatis vero delectus eveniet laborum reprehenderit, optio odit temporibus saepe nisi possimus quasi aperiam sunt ab placeat nobis et quo cumque?</span>
<span>Tenetur dolor molestiae nobis fuga possimus nam nesciunt accusamus, architecto, obcaecati voluptates similique eius? Odit exercitationem, iusto qui enim voluptatem id vero veniam earum, quibusdam numquam necessitatibus explicabo aliquam aliquid.</span>
<span>Cum, nesciunt! Autem sapiente aut esse ut earum repudiandae minus inventore aliquam molestias blanditiis ullam doloribus consequuntur voluptatum eaque, qui fugit et quam impedit necessitatibus. Provident similique placeat excepturi minima.</span>
<span>Iure dolor similique quis ex odio saepe, repellat id aspernatur, optio esse quibusdam temporibus tempora officiis eveniet ab voluptatem voluptatum natus, incidunt quam ea fugiat sunt. At quidem hic dolore.</span>
<span>Veritatis, esse! Excepturi, quam molestias. Velit, ea quos. Repellendus placeat enim quidem delectus fuga tempore soluta incidunt porro, molestias ab. Numquam corrupti itaque non ab iusto dignissimos, assumenda voluptas adipisci.</span>
<span>Culpa delectus recusandae nostrum eveniet exercitationem, non ratione quaerat saepe aperiam nam aspernatur enim dolore debitis ducimus. Quam veniam libero neque vero voluptate tempore, praesentium, recusandae sit ad et laboriosam.</span>
<span>Quis recusandae, eaque eos fuga voluptas officiis enim ducimus tempore porro, commodi, adipisci tenetur? Corrupti voluptate inventore assumenda laboriosam quia officiis, a porro consectetur et nesciunt fuga earum quo laborum.</span>
<span>Cupiditate a nihil dolorum rerum tempora velit recusandae voluptate laudantium quisquam exercitationem, veritatis eius obcaecati maiores iusto distinctio excepturi repellendus molestiae facilis fugit voluptatem autem at necessitatibus. Eaque, quisquam repudiandae.</span>
<span>Quia, dolor in! Reiciendis, dicta qui vero explicabo repudiandae suscipit earum esse quibusdam facere labore vitae dignissimos aliquam? Provident officiis, eligendi tempore quisquam excepturi consequuntur aspernatur ducimus voluptates earum explicabo.</span>
<span>Maiores soluta nihil amet rem iusto ipsam consectetur exercitationem repellat suscipit, ad facilis minima animi vero aperiam quisquam dicta. Magnam eaque rerum ab provident assumenda vero. Corrupti sapiente cum delectus!</span>
<span>Soluta quia esse, minima illum placeat beatae! Laborum, recusandae. Illum harum nihil mollitia unde quas labore dolores quia iure non voluptas. Debitis reprehenderit veritatis neque eaque, eligendi fugit aut. Voluptatum?</span>
<span>Odit fugiat delectus quibusdam ab. Quasi distinctio natus impedit, voluptatum nisi vitae rerum, culpa fuga quo est qui maxime nulla quas nemo, velit eius? Distinctio iste aliquam odio odit ad!</span>
<span>Quam placeat eaque nulla et totam culpa possimus ipsam maxime voluptatum, tempore eligendi atque, obcaecati qui nisi magnam! Saepe temporibus, ex perferendis magnam explicabo asperiores vero nesciunt nostrum magni earum.</span>
<span>Similique amet quod sint? Cumque, delectus consequuntur. Harum, aliquid commodi. Eligendi incidunt eum illo ut voluptate a nesciunt alias provident, in, debitis ipsam quia aliquid eos id, facilis ad quas.</span>
</p>
<div class="snackbar-wrapper">
<div class="snackbar">
<img src="notification.svg" alt="notification-icon">
<p>This is a SanckBar Notification !</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>