-
Notifications
You must be signed in to change notification settings - Fork 29
/
demo3.html
102 lines (97 loc) · 5.11 KB
/
demo3.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="">
<title>Paradeiser Demo</title>
<style>
.content{
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
body, html{
margin: 0;
padding: 0;
}
.content{
margin: 20px;
}
h1{
margin-top: 60px;
font-size: 22px;
}
</style>
<link rel="stylesheet" href="../dist/min/paradeiser.min.css">
</head>
<body>
<nav class="paradeiser">
<a href="#">
<img src="http://danielwinter.at/apple-touch-icon_76x76.png" alt="Logo of Daniel Winter" class="paradeiser_logo">
</a>
<a href="#" class="paradeiser-hidden-phone">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_home.svg" alt="Navigate to Home">
</icon>
<span>Home</span>
</a>
<a href="#">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_shop.svg" alt="Navigate to Shop">
</icon>
<span>Shop</span>
</a>
<a href="#">
<icon class="paradeiser_icon_canvas">
<b>5.99 €</b>
</icon>
<span>Cart</span>
</a>
<a href="#" class="paradeiser-hidden-phone paradeiser-hidden-tablet">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_contact.svg" alt="Navigate to Contact">
</icon>
<span>Desktop Only</span>
</a>
<a href="#" class="paradeiser-hidden-desktop paradeiser-hidden-tablet">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_contact.svg" alt="Navigate to Contact">
</icon>
<span>Mobile Only</span>
</a>
<a href="#" class="paradeiser-hidden-phone paradeiser-hidden-desktop">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_contact.svg" alt="Navigate to Contact">
</icon>
<span>Tablet Only</span>
</a>
<div class="paradeiser_dropdown">
<a href="#paradeiser-more">
<icon class="paradeiser_icon_canvas">
<img src="img/menu_overflow.svg" alt="">
</icon>
<span>More</span>
</a>
<ul class="paradeiser_children" id="paradeiser-more">
<li><a href="#">Terms of Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Yolo</a></li>
<li class="paradeiser-hidden-desktop"><a href="#">Hidden on desktop</a></li>
<li class="paradeiser-hidden-tablet"><a href="#">Hidden on tablet</a></li>
<li class="paradeiser-hidden-phone"><a href="#">Hidden on phone</a></li>
<li><a href="#!"></a></li>
</ul>
</div>
</nav>
<div class="content">
<h1>Get rid of those hamburgers.</h1>
<p>We need something healthy.</p>
<p>Meet <i>Paradeiser.</i></p>
<h4>Filling some Text in.</h4>
<p>For the sake of the demo.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>
</body>
</html>