-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnavbar1.html
More file actions
191 lines (168 loc) · 5.27 KB
/
Copy pathnavbar1.html
File metadata and controls
191 lines (168 loc) · 5.27 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
</style>
<style>
nav {
color: #fff;
background: #1a5ef0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 3.6rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 0 1rem;
}
nav .logo {
font-size: 1.5em;
font-weight: bold;
letter-spacing: 1px;
}
nav ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
letter-spacing: 1px;
padding: 0.5rem 0.6rem;
border-radius: 5px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav ul li a:hover {
background: #2749e2;
}
nav ul li .active,
nav ul li .active:hover {
background: #1700eb;
font-weight: bold;
cursor: default;
}
#menu-checkbox {
display: none;
}
nav .menu-btn {
font-size: 2.5rem;
cursor: pointer;
display: none;
padding: 0 1rem;
}
nav .menu-btn:before {
content: "=";
}
@media (max-width: 650px) {
nav {
justify-content: space-between;
padding-left: 2rem;
}
nav .menu-btn {
display: block;
}
nav ul {
position: fixed;
display: block;
text-align: center;
top: 3.6rem;
left: 100%;
background: #1056ee;
height: 100vh;
width: 100%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#menu-checkbox:checked~ul {
left: 0%;
width: 100%;
}
#menu-checkbox:checked~.menu-btn {
font-size: 2rem;
}
nav ul li {
margin: 2px 4px;
}
nav ul li a {
display: block;
font-size: 1.15em;
padding: 1rem;
}
}
/*# sourceMappingURL=style.css.map */
</style>
</head>
<body>
<header style="position: sticky; top:0px;">
<nav>
<div class="logo">The Title</div>
<label for="menu-checkbox" class="menu-btn"></label>
<input type="checkbox" hidden name="menu-checkbox" id="menu-checkbox">
<ul>
<li>
<a href="#" class="">Home</a>
</li>
<li>
<a href="#" class="active">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
<p style="text-align:justify; padding:1rem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, quisquam
alias omnis, qui ab consectetur nihil
aspernatur distinctio enim sint a, obcaecati adipisci aut tenetur! Nostrum itaque, dolores quas consequuntur
libero
incidunt saepe facilis distinctio tempora, laboriosam magni nam veniam unde natus culpa aut quae laborum dolorum
numquam in. Id mollitia neque repellendus odit tempore error blanditiis consequuntur quaerat ullam doloribus
maiores
dolores unde nisi nam atque possimus, sequi voluptas dicta aut. Fugit, ipsum doloremque ut quidem, dolorem quod
vitae deleniti consequatur facilis distinctio earum temporibus aspernatur nisi aut voluptas odit aliquid beatae
cupiditate. Eveniet enim omnis blanditiis ullam deserunt commodi quis nam a sint aliquid amet, perferendis atque
exercitationem nulla odio, autem quam velit nesciunt placeat quas eos quaerat quisquam? Amet voluptatibus
maiores
debitis nisi facere praesentium ad beatae, architecto molestiae omnis repudiandae at quo assumenda corporis
consequatur, officia ipsum dicta velit culpa! Magni rem veniam, delectus cupiditate iste ex sequi. Ducimus
excepturi
adipisci, quas ptatibus, v
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum iusto aperiam eligendi dolorem! Tenetur velit
itaque qui sapiente ad laborum nihil cum, vel reprehenderit maiores, ipsa incidunt odit tempora dicta. Fugiat
quia nostrum cupiditate dolorem, eius sed voluptatem officiis exercitationem ipsa, excepturi impedit mollitia
minima illum iure minus possimus aperiam.oluptatem, ullam eos magni
libero ut. Magnam ullam expedita quas fugit perspiciatis mollitia fuga quam eius, esse amet delectus? Dicta
officia Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio commodi ipsam ratione, minus autem
doloremque rem consequuntur similique perspiciatis? Doloremque enim incidunt ratione modi placeat veniam
corrupti eaque laboriosam quisquam eligendi accusantium ducimus rem laborum nostrum sed, perferendis eius sint?
dolore nostrum molestiae mollitia sapiente, laboriosam saepe repellat similique inventore, tenetur doloremque
delectus aspernatur. Sapiente, nisi recusandae. Aut repellendus, ad autem harum veniam at voluptatibus iure
consequatur tempore hic eveniet distinctio et accusantium accusamus aperiam aliquid vel doloribus deleniti totam
invtatibus, minima, quis maiores vero nostrum animi sed aspernatur quibusdam ea, esse veniam rem.
</p>
</body>
</html>