-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (93 loc) · 4.2 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
<!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>Document</title>
<style>
body {
font-size: 1.5rem;
}
.container {
margin: 5vw;
}
button {
width: 10vw;
padding: 1vw;
background-color: #eee;
margin: 5vw auto;
border-radius: 1vw;
border: none;
font-size: 1rem;
cursor: pointer;
display: block;
}
</style>
</head>
<body>
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Error non voluptate, ea obcaecati aspernatur nam,
voluptatibus veritatis nulla ad velit possimus dignissimos.
<span class="tooltip" data-message="I'm a tooltip!!">Laboriosam doloribus</span>
mollitia iure magni eligendi blanditiis
quae quis consectetur, nihil ipsum labore officia sit fuga
aperiam quaerat, dicta enim laudantium molestiae tempora
perferendis commodi at, animi voluptatem.
</p>
<h2>Services</h2>
<div class="dropdown">
<div class="trigger">Dropdown header #1</div>
<div class="content">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Molestias, quis accusantium? Dolore temporibus debitis
accusamus earum doloribus ea, repudiandae, quasi ratione
provident officiis neque? Repellendus quidem velit
nesciunt sed excepturi provident, adipisci est alias
consequuntur omnis veritatis assumenda eveniet, suscipit inventore.
Vitae dolorum necessitatibus quod commodi maxime officiis quis veniam.
</div>
</div>
<div class="dropdown">
<div class="trigger">Dropdown header #2</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem nam commodi porro ab. Tempore, atque optio ipsam
ducimus error harum nam ex id incidunt illum maxime sunt.
Voluptatum doloremque dolorum architecto, assumenda nisi
quos natus nesciunt facere quis, eius tenetur quaerat sit,
cumque exercitationem dolorem velit soluta earum molestiae dolore!
</div>
</div>
<div class="tabs">
<ul>
<li class="trigger active" data-target="#home">Home</li>
<li class="trigger" data-target="#about">About</li>
<li class="trigger" data-target="#info">Info</li>
</ul>
<div id="home" class="content active">
<h3>Home</h3>
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptatum nobis magnam veritatis deserunt fugiat blanditiis.
Sunt eaque voluptatibus sapiente reprehenderit.
</div>
<div id="about" class="content">
<h3>About</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Omnis harum voluptatum temporibus distinctio repellendus
sunt optio, veniam laudantium eligendi! Eos!
</div>
<div id="info" class="content">
<h3>Information</h3>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Error ducimus minus ad laborum quisquam dicta neque sapiente
natus vero. Pariatur!
</div>
</div>
<button class="snackbar-button">Click me</button>
</div>
<script src="dist/asserts/bundle.js"></script>
</body>
</html>