-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (144 loc) · 7.13 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
<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Personal website</title>
<link href="css/normalize.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navigation navigation--js">
<ul class="navigation__list">
<li class="navigation__item"><a class="navigation__link" href="index.html">Homepage</a></li>
<li class="navigation__item"><a class="navigation__link" href="articles/article1.html">First article</a>
</li>
<li class="navigation__item"><a class="navigation__link" href="articles/article2.html">Second article</a>
</li>
<li class="navigation__item"><a class="navigation__link" href="articles/article3.html">Third article</a>
</li>
<li class="navigation__item"><a class="navigation__link" href="articles/article4.html">Fourth article</a>
</li>
<li class="navigation__item"><a class="navigation__link" href="articles/article5.html">Fifth article</a>
</li>
</ul>
</nav>
<div class="navigation-menu-toggle">
<button class="navigation-menu-toggle__button navigation-menu-toggle__button--js">☰</button>
</div>
</header>
<main class="main" id="top">
<header class="header">
<h1 class="header__title">Łukasz Chruściel - Homepage</h1>
<a class="header__link" href="#blog">Checkout my blog</a>
</header>
<section class="about">
<h2 class="about__header">About me</h2>
<p class="about__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus esse
exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente soluta
temporibus vel voluptate!
</p>
<p class="about__content about__content--js">
</p>
</section>
<section class="blog blog--anchor" id="blog">
<header>
<h2 class="blog__header">Blog</h2>
</header>
<div class="blog__articles">
<section class="post">
<h3 class="post__header">Fourth blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">Third blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">Second blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
<section class="post">
<h3 class="post__header">First blog post</h3>
<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid asperiores dolorum, ducimus
esse exercitationem fugiat harum, illo magnam maxime nisi obcaecati, odit perferendis quo sapiente
soluta temporibus vel voluptate!
</p>
</section>
</div>
</section>
<section>
<form action="http://dev.cotenfrontend.pl/" method="post">
<label for="name">Your name: </label>
<input type="text" id="name" name="name" />
<label for="riddle">Your riddle: </label>
<input type="text" id="riddle" name="riddle"/>
<br />
<button type="submit">Submit</button>
</form>
</section>
</main>
<footer class="footer">
<a href="#top" class="footer_top">To the top</a>
Personal homepage of Łukasz Chruściel.
</footer>
<script src="js/main.js"></script>
</body>
</html>