-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (58 loc) · 5.05 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
<html>
<head>
<title>Hyper Modal </title>
<link href="css/hyperBox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hyper Box</h1>
<a href="#modal1">Modal - simple</a>
<div id="modal1" class="hyperBox">
<div>
<div class="dialog-header">
<h2>Hyper Box</h2>
</div>
<div class="dialog-content">
<p>Welcome to Hyper Modal</p>
<p>Hyper Modal is a simple css to create Modal Dialog. Really fast to create.</p>
</div>
<div class="dialog-footer">
<a href="#close" title="Close" class="toClose">close</a>
</div>
</div>
</div>
<br />
<a href="#modal2">Modal - Pragraph</a>
<div id="modal2" class="hyperBox">
<div >
<div class="dialog-header">
<h2>Hyper Box</h2>
</div>
<div class="dialog-content">
<p>Hyper Modal is a simple css to create Modal Dialog. Really fast to create.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium massa at lectus lacinia viverra dignissim nisi sodales. Pellentesque imperdiet justo sit amet sapien varius sit amet egestas purus viverra. Aliquam pellentesque ante lacinia eros tristique sollicitudin ac nec augue. Curabitur porttitor magna nec nisi blandit fermentum. Duis sapien libero, auctor sed bibendum in, varius vel massa. Suspendisse potenti. Nulla placerat, nisl sit amet iaculis viverra, mi ante fermentum tortor, et consectetur nisi lacus et nunc. Aliquam dapibus odio sed diam lobortis sit amet vulputate nulla commodo. Nulla sollicitudin congue tellus ut consectetur. Vivamus lacinia, enim a faucibus accumsan, tellus diam consectetur nulla, id sodales nunc sapien eget quam.</p>
<p>Ut felis arcu, pharetra et ultrices a, consectetur eget orci. Nulla accumsan facilisis gravida. Proin eget turpis tincidunt leo fermentum dapibus. Ut congue porta metus. Nunc non dictum massa. Curabitur vestibulum nibh ut eros rutrum placerat. Donec nulla sapien, fringilla nec euismod sit amet, egestas nec massa. Vestibulum egestas ultrices feugiat. Nunc in enim vitae orci ultrices semper ac sed lacus. Sed molestie orci placerat arcu iaculis ut pharetra tortor commodo.</p>
<p>In bibendum ante ipsum. Nunc dapibus porttitor orci id volutpat. Quisque nec lacus diam, eget consequat ipsum. Morbi eu lorem turpis. In vitae ante eu ligula consequat tincidunt. Praesent quis mi neque, id lobortis mi. Aenean gravida, nunc pellentesque semper condimentum, erat leo malesuada elit, sit amet accumsan tellus odio at dui. Phasellus porttitor velit sed justo auctor semper vestibulum leo tincidunt. Nullam accumsan varius scelerisque. Vestibulum metus dui, lobortis vel porttitor a, congue id velit. Vivamus diam tortor, suscipit et imperdiet pulvinar, sollicitudin pulvinar tellus. Nam augue justo, dictum et pulvinar ut, tempus id est. Pellentesque in bibendum libero.</p>
<p>Sed viverra molestie purus at viverra. Donec sit amet dui sed leo pharetra molestie. Ut nibh magna, sagittis ac euismod et, auctor in lorem. Sed tristique arcu eget ipsum porttitor aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec lorem sit amet ipsum lobortis rhoncus. Mauris dui urna, dapibus sed interdum a, interdum et mauris. Nullam ut mi blandit metus lacinia imperdiet at sed augue. Mauris id elit et sapien suscipit consequat quis nec orci. Maecenas pretium velit in ligula ullamcorper pharetra et vitae ipsum. Nam sapien erat, euismod vel malesuada vel, molestie at lacus. Proin convallis congue dapibus. Aliquam consectetur neque molestie purus scelerisque pulvinar. Integer tempus, purus in viverra aliquam, augue nisl tincidunt tortor, eu fringilla lorem massa eget sem. Vivamus fermentum hendrerit viverra.</p>
<p>Aliquam feugiat purus at turpis auctor non blandit mauris vehicula. Cras mi est, imperdiet non ultrices sed, euismod sit amet odio. Vivamus quis purus quis diam laoreet molestie id ac sapien. Fusce sed quam sit amet tortor suscipit commodo. In id dolor eget elit dapibus scelerisque eget quis erat. Curabitur sollicitudin lorem et orci suscipit egestas. Phasellus vel condimentum lacus. Fusce imperdiet augue eget ante faucibus molestie. Phasellus lacus lectus, sollicitudin sit amet gravida non, placerat in ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tortor sapien, cursus ac imperdiet nec, sollicitudin at orci. Vestibulum rhoncus hendrerit ligula, vel tempus nisl molestie porta. Pellentesque pellentesque massa eu dolor vulputate convallis.</p>
<a href="#close" title="Close" class="toClose">close</a>
</div>
<div class="dialog-footer">
<a href="#close" title="Close" class="toClose">close</a>
</div>
</div>
</div>
<br />
<a href="#modal3">Modal - Option and Emboss</a>
<div id="modal3" class="hyperBox">
<div class="make-emboss make-round">
<h2>Hyper Box</h2>
<select>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
<a href="#close" title="close" class="toClose left bottom">close</a>
</div>
</div>
</body>
</html>