-
Notifications
You must be signed in to change notification settings - Fork 90
/
Copy pathindex.html
211 lines (206 loc) · 11.5 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
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mobile menu workshop</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.0.0/modern-normalize.min.css"
integrity="sha512-ISS7cAi1PEhQ8jnbJpJZMd29NlhNj4AWYyLOSp2CE/CsHxTCu+r+t0D2yoJudVrd0/8fTVPUVDzY5Tvli75u/g=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="page-header">
<div class="container">
<button
class="menu-toggle js-open-menu"
aria-expanded="false"
aria-controls="mobile-menu"
>
<svg
width="24"
height="24"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>
<ul class="menu">
<li><a href="" class="link">About</a></li>
<li><a href="" class="link">Products</a></li>
<li><a href="" class="link">Contacts</a></li>
<li><a href="" class="link">Career</a></li>
</ul>
</div>
</header>
<main>
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
possimus doloribus modi numquam quaerat reprehenderit, necessitatibus
consectetur corrupti recusandae consequatur ut dolor odio itaque iusto
beatae? Quaerat minima sint laborum ex, est eos quidem, quisquam,
magnam sed quos voluptatum. Pariatur veritatis quam neque aliquid quis
quod est deserunt tempora assumenda veniam modi, voluptatem temporibus
ab repellendus excepturi. Dolore architecto, sit molestias animi et
pariatur dolorem voluptatum nam laudantium veniam consectetur ratione
quod suscipit inventore dicta illum cum non. Fugit nobis recusandae
rerum! Recusandae ab maiores eveniet at laborum delectus iure. Nisi
commodi quam iusto, omnis quasi corporis incidunt perferendis, vel
voluptatem, rem eligendi! Ea pariatur voluptas odio consectetur non
blanditiis nam iure voluptate veniam cupiditate modi molestias quas
temporibus quo facilis, consequatur natus officiis sit accusamus
exercitationem placeat itaque. Placeat, non sed consequuntur quia modi
inventore a nemo recusandae officia, maxime accusamus eligendi id
mollitia quibusdam cumque? Cupiditate nam iusto praesentium
exercitationem doloremque provident, quidem, dolor vero totam dolores
veritatis fugiat. Ipsam omnis sapiente, voluptates consectetur earum
dolorum est enim natus aliquid aliquam reprehenderit mollitia tempore,
eius sunt, velit laudantium fugiat! Eaque tenetur voluptatum ipsa
voluptas harum tempora corporis. Corrupti cumque delectus aperiam
beatae et sequi at, assumenda odit minima!
</p>
<p>
Asperiores nesciunt aliquid dicta? Eaque similique iste et velit
tenetur pariatur veniam praesentium optio ducimus? Dicta doloribus,
quas magnam consectetur distinctio placeat numquam eius maiores ab
consequuntur facere dignissimos laboriosam itaque qui animi.
Exercitationem possimus est iusto id ab quod dolorem harum, commodi
distinctio voluptas eaque beatae consequuntur enim voluptatem alias
repellat architecto aperiam eius ullam fugit dolorum magnam fuga
vitae. Vel obcaecati rem, similique id necessitatibus sed, eius animi
hic iure provident fuga tempore odit ullam accusantium ad nobis
explicabo illum officia debitis natus facere! Facere sed placeat nihil
delectus ipsa quaerat dicta repellendus distinctio rem! Tenetur,
aperiam ea. Nulla corrupti laborum doloremque numquam dignissimos non
quam, quas, repellendus dolores maiores molestias dicta magnam!
Repudiandae quibusdam ducimus possimus ipsa consequuntur expedita,
excepturi sint, fuga temporibus pariatur eveniet sed nihil facere
dolor velit porro. Quidem voluptatem accusamus itaque numquam atque,
assumenda iusto hic inventore, quo, maxime illo explicabo ullam
doloremque neque voluptates necessitatibus nisi? Illo, praesentium
hic! Necessitatibus perferendis alias sunt quia vero at distinctio
harum deserunt, modi dolores numquam omnis doloremque nostrum, illo
reiciendis nemo officiis perspiciatis explicabo nobis possimus,
nesciunt molestiae rem? Magnam deserunt suscipit, dicta, veritatis sed
nisi iusto eveniet saepe corporis adipisci voluptates autem quasi
praesentium.
</p>
<p>
Id veritatis, suscipit sit sunt at tempora delectus? Itaque rerum ea,
vitae ullam reprehenderit modi. Deserunt blanditiis fugit accusamus,
dolore architecto assumenda sint aspernatur aut, error corrupti
deleniti voluptatibus sapiente alias autem repudiandae molestias
repellendus? Provident ratione laborum ab pariatur itaque odio facere
eius. Porro facilis commodi quaerat quis velit, esse sequi cum modi?
Sapiente laborum assumenda dolorem voluptates deserunt magnam sit, vel
non doloribus perferendis, ipsum quis eveniet. Consequuntur sapiente
obcaecati incidunt suscipit veritatis, eum officiis cum enim vel
quaerat laudantium corrupti, modi dignissimos facere quo praesentium,
exercitationem quae est delectus? Rem ipsam deleniti atque modi cum,
velit, autem maxime ullam expedita non adipisci. Quisquam, excepturi
culpa, quo praesentium minima ipsa inventore molestias possimus
commodi fugit voluptatibus repellendus in vitae nihil provident
temporibus. Sed pariatur perspiciatis assumenda. Excepturi vitae
temporibus ab, voluptates sapiente dicta! Quod, cumque sed dolor quae
obcaecati fugit doloribus placeat dolorum nulla tenetur odit eum
minima impedit ullam nemo vitae sunt? Porro pariatur facere deserunt
aperiam obcaecati libero, doloremque velit corporis ex commodi nemo
ratione, iusto minima animi perspiciatis beatae nulla natus, eveniet
tenetur corrupti architecto tempore? Aperiam vel nulla officiis
dignissimos repellendus perspiciatis provident, pariatur eligendi
itaque, beatae modi delectus iure deleniti? Iste, iusto? Quae.
</p>
<p>
Sint exercitationem expedita ut sed labore! Possimus molestiae
blanditiis quasi recusandae, quaerat temporibus sit numquam ut,
quisquam repudiandae asperiores repellendus dolor veritatis aperiam,
debitis dolorem consequuntur error deserunt id. Atque praesentium,
totam sequi debitis voluptates fugit eum deleniti hic provident nisi
eos perferendis qui libero soluta vero nostrum unde, magni fuga.
Inventore qui dolorem temporibus vel quas. Quam mollitia obcaecati
temporibus nulla non ad eos distinctio, minus quod voluptate?
Laudantium, alias amet quia nesciunt doloribus reprehenderit, ex
facilis iure, blanditiis nemo assumenda. Autem voluptatum ut facere.
Non harum a aliquam cumque maiores dicta aspernatur, eos, quia esse
quam facilis, eaque praesentium omnis quaerat molestiae tenetur optio.
Modi aperiam tenetur eligendi repellat expedita, pariatur repudiandae,
neque quasi molestiae enim dolor earum omnis eius delectus eveniet
ipsam rem beatae porro consectetur? Soluta maxime debitis quaerat
nulla laudantium, harum eaque earum dolores, quia aut similique
dolorum. Ex debitis veniam nostrum fuga odio sequi aliquam
exercitationem praesentium beatae nisi explicabo voluptatibus quis,
hic iusto corporis quas dolor dolorem adipisci? Iste porro sit
exercitationem assumenda obcaecati fuga tempore voluptatem, tenetur
mollitia harum non eaque. Sint, sapiente voluptatibus ipsum, eum,
possimus aliquam omnis provident iste excepturi eaque accusamus minima
ullam est minus amet ducimus veniam ea!
</p>
<p>
Numquam vitae incidunt ab fugit esse dolor quidem quibusdam iusto
suscipit aliquid dolore nihil, rem labore quisquam molestias cumque
temporibus dolorem inventore veritatis optio error tempora similique
officiis. Quos officia numquam ab, impedit veritatis ut obcaecati
fugit natus ipsam vel repellendus ratione! Vel iusto a doloribus
tempora sapiente! Ducimus vero, maxime animi modi nostrum, obcaecati
quo error cupiditate eos veritatis odio, nulla dolores est molestiae
atque dicta ex dolore ab dolor iste nam beatae. Eos harum tenetur
doloribus impedit ea ad quia cum laudantium. Animi harum quia neque
deleniti. Excepturi, quia eligendi temporibus laudantium dicta eos
quas necessitatibus nihil velit consequuntur libero cupiditate
nesciunt, explicabo quae minus tempora eum! Repellendus accusantium
aut assumenda odio porro voluptatibus rerum vero nam. Maiores
voluptatem mollitia accusantium placeat, quod quisquam animi nobis
vero et ullam omnis similique corporis quasi quam unde repudiandae
quaerat eligendi suscipit adipisci cum pariatur nemo. Provident ea
iusto et adipisci voluptatibus ratione laboriosam saepe harum ut
molestias nemo aliquid maiores necessitatibus culpa numquam asperiores
dignissimos eos qui perspiciatis beatae possimus, excepturi ipsum
placeat. Facilis, harum. Ullam veritatis rem explicabo nesciunt ea
odit, dicta porro quam consequatur commodi, vel voluptas illo
perferendis autem maiores dolorum quo. Reprehenderit veritatis
recusandae nobis sunt.
</p>
</div>
</main>
<div class="menu-container js-menu-container" id="mobile-menu">
<button class="menu-toggle js-close-menu">
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<ul class="mobile-menu">
<li><a href="" class="link">About</a></li>
<li><a href="" class="link">Products</a></li>
<li><a href="" class="link">Contacts</a></li>
<li><a href="" class="link">Career</a></li>
</ul>
</div>
<script
defer
src="https://cdnjs.cloudflare.com/ajax/libs/body-scroll-lock/3.1.5/bodyScrollLock.min.js"
integrity="sha512-HowizSDbQl7UPEAsPnvJHlQsnBmU2YMrv7KkTBulTLEGz9chfBoWYyZJL+MUO6p/yBuuMO/8jI7O29YRZ2uBlA=="
crossorigin="anonymous"
></script>
<script defer src="js/mobile-menu.js"></script>
</body>
</html>