-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathindex.html
111 lines (91 loc) · 5.17 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
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha256-gvEnj2axkqIj4wbYhPjbWV7zttgpzBVEgHub9AAZQD4=" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<div class="logo">
RH
</div>
<input class="hamburger-button" type="checkbox" id="hamburger-button" />
<label for="hamburger-button">
<div></div>
</label>
<div class="menu">
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About Us</a></li>
<li><a href="/">Our Work</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</nav>
<div class="buttons">
<a href="/" class="button primary">Get a Quote</a>
<a href="/" class="button">Redeem Quote</a>
</div>
</div>
</div>
</header>
<div class="page-content">
<h1>Responsive Header</h1>
<p>A fully-responsive CSS-only header for your websites and other web applications.</p>
<h2>Technology</h2>
<p>This header is built with absolutely no JavaScript dependency. It uses CSS flexbox and grid for positioning
(sorry older browsers!), and works on the smallest mobiles around.</p>
<p><strong>Please note:</strong> The menu uses a checkbox to open and close. You may need to add a handler to
ensure the checkbox is closed after a link is selected, if using React, or a similar library.</p>
<h1>Random Content Follows</h1>
<p>Below are some chunks of lorem ipsum to fill the space. Feel free to ignore them.</p>
<h2>More Content</h2>
<p>This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem
ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi
voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur
nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco.
Consequat dolor veniam consequat voluptate non ad laboris.</p>
<h2>More Content</h2>
<p>This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem
ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi
voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur
nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco.
Consequat dolor veniam consequat voluptate non ad laboris.</p>
<h2>More Content</h2>
<p>This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem
ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi
voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur
nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco.
Consequat dolor veniam consequat voluptate non ad laboris.</p>
<h2>More Content</h2>
<p>This is some page content. Ad minim non pariatur eiusmod adipisicing magna incididunt qui cupidatat. In Lorem
ullamco exercitation in laborum magna. Aliqua cillum do pariatur dolor adipisicing ea enim. Deserunt nisi
voluptate amet veniam aute ad duis cillum laborum occaecat nisi. Veniam occaecat eiusmod eu eu excepteur
nostrud consectetur velit Lorem incididunt consectetur in dolore. Non fugiat deserunt exercitation ullamco.
Consequat dolor veniam consequat voluptate non ad laboris.</p>
</div>
<footer>
Footer
</footer>
<script>
/*
THIS IS NOT NECESSARY ON REGULAR WEBSITES
If you're using a library like React, you'll need the mobile menu to close once a link has been clicked.
That's all the below code does.
*/
const hamburgerButton = document.getElementById('hamburger-button');
const headerLinks = document.querySelectorAll('header .container .menu a');
headerLinks.forEach((link) => {
link.addEventListener('click', (e) => hamburgerButton.checked = false);
})
</script>
</body>
</html>