forked from udacity/cd0428-landing-page
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·88 lines (82 loc) · 4.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Manipulating the DOM</title>
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:900|Merriweather&display=swap" rel="stylesheet">
<!-- Load Styles -->
<link href="css/styles.css" rel="stylesheet">
<!-- Load Scripts -->
<script src="js/app.js"></script>
</head>
<body>
<!-- HTML Follows BEM naming conventions
IDs are only used for sections to connect menu achors to sections -->
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Parkstein</h1>
</header>
<!-- Each Section has an ID (used for the anchor) and
a data attribute that will populate the li node.
Adding more sections will automatically populate nav.
The first section is set to active class by default -->
<section id="section1" data-nav="Section 1" class="expanded active">
<div class="landing__container">
<a class="collapsible align-right"><img class="collapsible-icon" src="img/collapse.svg"></a>
<h2>Location</h2>
<p>Parkstein (Bavarian: Boakstoi or also Berchstoi) is a market in the Upper Palatinate district of Neustadt an
der Waldnaab. The village is surrounded by many forests and fields. At an altitude of over 541m above sea
level, the area of the municipality covers 30.84 km2.</p>
<p>Innerhalb von Parkstein gibt es 14 Gemeindeteile und folgende Nachbarorte: Stadt Weiden, Stadt Pressath,
Gemeinden Schwarzenbach, Kirchendemenreuth, Altenstadt a.d.Waldnaab.</p>
</div>
</section>
<section id="section2" data-nav="Section 2" class="expanded">
<div class="landing__container">
<a class="collapsible"><img class="collapsible-icon" src="img/collapse.svg"></a>
<h2>Population</h2>
<p>For many years, Parkstein had an increasing number of inhabitants, which could be explained by the
designation of building areas in a scenic location, by the immediate proximity to the city of Weiden and
especially by the settlement of the expanding Winkler group of companies (Witron, FAS, etc.). Since 2000, the
population development has stagnated.</p>
<p>Currently, about 2300 people live in the municipality.</p>
</div>
</section>
<section id="section3" data-nav="Section 3" class="expanded">
<div class="landing__container">
<a class="collapsible align-right"><img class="collapsible-icon" src="img/collapse.svg"></a>
<h2>History</h2>
<p>Parkstein was probably settled around the year 1000. According to legend, an imperial hunting party had
noticed the beautiful basalt cone while pursuing a boar, so one of the hunters decided to build Parkstein
Castle there. The castle at the site was first mentioned in a document in 1053. In 1052 Duke Konrad of Bavaria
burned down the castle. Emperor Heinrich IV had the imperially owned castle rebuilt at the end of the 11th
century. Parkstein subsequently had many owners, including Emperor Frederick Barbarossa and the Wittelsbach
dynasty. Several times, as was common in the Middle Ages, the village was mortgaged.</p>
</div>
</section>
<section id="section4" data-nav="Section 4" class="expanded">
<div class="landing__container">
<a class="collapsible"><img class="collapsible-icon" src="img/collapse.svg"></a>
<h2>Characteristics</h2>
<p>Parkstein is located around the basalt cone of the same name of volcanic origin in the nature park. But do
not worry the volcano is no longer active for a long time. However, it leaves a unique sight, which attracts
many visitors and tourists.</p>
</div>
</section>
<a class="page__button-up hidden">
<img src="img/sharp-arrow-circle-up.svg"></a>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
</body>
</html>