-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (71 loc) · 4.63 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
<!DOCTYPE html>
<html lang="ru">
<head>
<title>E100Site</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Pavel Kiselev">
<meta name="description" content="Experiment for learning html css and js.
This page contains no actual content">
<link href="assets/stylesheets/reset.css" rel="stylesheet">
<link href="assets/stylesheets/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet">
</head>
<body>
<input id="toggle" type="checkbox"><label for="toggle">≡</label>
<nav class="menu">
<ul>
<li><a href="#">сайт 1</a></li>
<li><a href="#">сайт 2</a></li>
<li><a href="#">сайт 3</a></li>
</ul>
<footer>
<p>© <a href="mailto:[email protected]">Pavel Kiselev</a> 2016</p>
</footer>
</nav>
<div id="overlay"></div>
<div class="grid">
<header class="main-header">
<h1>E100Site</h1>
<p>Сайт Павла Киселева</p>
</header>
<div class="content">
<article>
<h2>Статья</h2>
<h3 id="Lorem_ipsum">Lorem ipsum</h3>
<p>
Dolor sit amet, consectetur adipiscing elit. Nunc ut lacus in risus commodo placerat. Maecenas fringilla tincidunt urna, et semper mauris fringilla sed. Duis fermentum sem at sapien cursus commodo. Nunc feugiat in mauris a rhoncus. Mauris in sem eu libero eleifend bibendum. Nullam quis nibh nec ante semper pulvinar. Quisque dictum dui nec tellus laoreet tristique. Aenean id diam eget risus porttitor molestie. Sed euismod gravida mi, a ultricies urna viverra sit amet. Nullam ut finibus urna. Maecenas eget urna quam. In commodo posuere leo a ultrices. Etiam porttitor lacinia sapien ut rhoncus.
</p>
<h3 id="Cras_a_nisl_ante">Cras a nisl ante</h3>
<p>
Mauris eu urna rutrum, viverra nulla in, varius nunc. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam consequat eros. Ut id lacus felis. Curabitur egestas purus ac quam auctor blandit.
</p>
<p>
Sed volutpat, erat sit amet consectetur pretium, arcu augue maximus arcu, a mattis ipsum erat ac est. Mauris suscipit erat a pulvinar pellentesque. Vestibulum varius fringilla eros, non molestie tellus malesuada quis. Vivamus nec eros pellentesque, dapibus leo a, dictum dolor. Vestibulum convallis iaculis nisi. Vestibulum at mi non dolor ultricies luctus. Nulla elementum tempus lacus, non tincidunt ipsum sodales sit amet.
</p>
<p>
Aenean id ex sagittis, lacinia justo vel, molestie nibh. Nunc venenatis vel quam nec consequat. Ut risus eros, efficitur sed maximus eu, bibendum in massa. Proin id arcu sed odio dictum placerat ac vel erat. Etiam volutpat arcu sit amet velit tempor mattis. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta eros a lacinia imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas euismod neque augue, ut sodales diam eleifend rutrum. Ut sed rhoncus eros.
</p>
<iframe src="mines.html" width="100%" height="500" frameborder=0>
<p> <a href="mines.html">
Fallback link for browsers that don't support iframes
</a> </p>
</iframe>
<h3 id="Etiam_in_nibh">Etiam in nibh</h3>
<p>
Vel quam facilisis molestie. Cras quis magna ullamcorper, dapibus elit at, molestie erat. Vivamus egestas felis vitae malesuada gravida. Donec a mauris dapibus, convallis tellus ac, convallis nisl. Cras tristique dolor nec eros commodo, sed posuere risus hendrerit. Donec tincidunt mattis tempor. Integer pharetra nec velit in cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</article>
<aside>
<h2>Ссылки:</h2>
<ul>
<li><a href="#Lorem_ipsum">Lorem ipsum</a></li>
<li><a href="#Cras_a_nisl_ante">Cras a nisl ante</a></li>
<li><a href="#Etiam_in_nibh">Etiam in nibh</a></li>
</ul>
</aside>
</div>
</div>
</body>
</html>