-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
69 lines (69 loc) · 3.8 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
<!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">
</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>Ranking Page</h1>
<h4>(for Landing Sections)</h4>
</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="active">
<div class="landing__container">
<h2>Section 1</h2>
<p>There is nothing like a first section. Most of the sections look up to it.</p>
<p>But what about any improvements? Can the first section still get better if there is no section above it? The burden of being above everyone else is that you need to find your own motivation to become better. Always strive for the better.</p>
<button class="top__button">Go to Top</button>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<p>The second in a row, envied by the followers, but working hard to stand in the second best position.</p>
<p>Even if there is the inner question of "why can't I be on first place?" the second section still shows itself as being of high value for the page. There can not always be several first places, which makes the second even more important.</p>
<button class="top__button">Go to Top</button>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<p>The third section, stabilizer for everything main stream.</p>
<p>What could be better then being worshiped for just being good enough to be "normal". Enjoying the lack of pressure.</p>
<button class="top__button">Go to Top</button>
</div>
</section>
<section id="section4" data-nav="Section 4">
<div class="landing__container">
<h2>Section 4</h2>
<p>Hello section number four. New to the area but already accepted as being one of the main sections.</p>
<p>Sometimes even a section needs to get out of it comfort zone and change the environment. Here in the new main it can get some new experience by showing its quality to the other sections.</p>
<button class="top__button">Go to Top</button>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity, finished by Martin Schuhmacher</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>