-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (96 loc) · 5.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Responsive nav</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive nav demonstration">
<link rel="stylesheet" href="main.css">
</head>
<style>
main {
max-width: var(--max-width);
margin: var(--space-xs) auto 0;
}
</style>
<body>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<header class="header">
<nav role="navigation" aria-label="Main">
<a href="/" class="logo" title="home">
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" class="logoSvg" role="img" aria-labelledby="svgTitle">
<title id="svgTitle">Scruples Studio logo.</title>
<mask id="a" fill="#fff">
<path d="m0 0h60v60h-60z" fill="#fff" fill-rule="evenodd" />
</mask>
<g fill="none" fill-rule="evenodd">
<path d="m0 0h64v64h-64z" fill="none" />
<path d="m60 30c0 16.569-13.431 30-30 30-16.57 0-30-13.43-30-30 0-16.569 13.431-30 30-30s30 13.43 30 30" fill="#000" mask="url(#a)" transform="translate(2 2)" />
<path d="m28.555 45.208c-8.765-.518-9.036-5.554-3.81-6.437 4.869-.823 10.901.795 14.171 2.017-1.033 2.346-3.708 4.814-10.361 4.42m15.633-4.308c-.034-.022-.07-.046-.107-.068 2.414-4.822.603-10.658-6.892-12.408-15.351-3.539-7.84-11.98-1.285-10.725 1.91.366 3.54 1.58 2.011 2.869-1.182.997-2.307 2.942.007 4.631 1.732 1.265 5.79.506 6.69-2.842 1.23-4.569-4.126-8.282-11.171-7.844-8.645.538-13.955 7.348-8.935 12.244 7.002 6.829 15.093 4.5 15.021 11.162a7.433 7.433 0 0 1 -.043.72c-22.793-8.97-26.136 2.43-21.98 6.098 4.143 3.656 12.392 3.852 17.589 2.67 3.317-.753 5.903-2.423 7.614-4.482 1.093 1.018 1.204 1.865 1.893 2.917 2.537 3.879 6.22 2.211 6.22-.257 0-3.042-4.301-3.17-6.632-4.685" fill="#fff" />
</g>
</svg>
</a>
<button id="nav-toggle" class="nav-toggle navIcon">
<span id="nav-toggle-text" class="navLabel">Menu</span>
</button>
<div class="nav-wrapper" id="nav-wrapper">
<ul class="nav menu-items">
<li>
<a href="#">Link A</a>
</li>
<li class="dropdown">
<a class="has-dropdown">Link B</a>
<ul class="sub-menu">
<li><a href="#">Sublink A</a></li>
<li class="dropdown">
<a class="has-dropdown">Sublink B</a>
<ul class="sub-menu">
<li><a href="#">Sub-sublink A</a></li>
<li><a href="#">Sub-sublink B</a></li>
<li><a href="#">Sub-sublink C</a></li>
</ul>
</li>
<li class="dropdown">
<a class="has-dropdown">Sublink C</a>
<ul class="sub-menu">
<li><a href="#">Sub-sublink D</a></li>
<li><a href="#">Sub-sublink E</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="has-dropdown">Link C</a>
<ul class="sub-menu">
<li><a href="#">Sublink D</a></li>
<li><a href="#">Sublink E</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<main id="content" class="site-content">
<h1>Content</h1>
<p>Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed
consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.
Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Donec id elit non mi porta gravida at eget
metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna
mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a
pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed
consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.
Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Donec id elit non mi porta gravida at eget
metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna
mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus,
porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.</p>
</main>
<script src="site-min.js"></script>
</body>
</html>