-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (88 loc) · 3.45 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" />
<link rel="stylesheet" href="css/media-queries.css" />
</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>Landing Page</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 One">
<div class="landing__container">
<h3>Section One</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus lectus pharetra dapibus. Suspendisse
potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget
lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt.
</p>
</div>
</section>
<section id="section2" data-nav="Section Two">
<div class="landing__container">
<h3>Section Two</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus lectus pharetra dapibus. Suspendisse
potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget
lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt.
</p>
</div>
</section>
<section id="section3" data-nav="Section Three">
<div class="landing__container">
<h3>Section Three</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus lectus pharetra dapibus. Suspendisse
potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget
lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt.
</p>
</div>
</section>
<section id="section4" data-nav="Section Four">
<div class="landing__container">
<h3>Section Four</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus lectus pharetra dapibus. Suspendisse
potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget
lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed
convallis sollicitudin mauris ac tincidunt.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="js/app.js"></script>
</body>
</html>