-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (138 loc) · 6.71 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
<!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">
<ul class="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 1" class="your-active-class">
<div class="landing__container">
<h2>Section 1</h2>
<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. Donec bibendum, nulla
eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam
nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis
lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a
tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus
vitae elit. Integer nec libero venenatis libero ultricies molestie
semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum
consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget
elementum tortor mollis non.
</p>
</div>
</section>
<section id="section2" data-nav="Section 2">
<div class="landing__container">
<h2>Section 2</h2>
<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. Donec bibendum, nulla
eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam
nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis
lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a
tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus
vitae elit. Integer nec libero venenatis libero ultricies molestie
semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum
consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget
elementum tortor mollis non.
</p>
</div>
</section>
<section id="section3" data-nav="Section 3">
<div class="landing__container">
<h2>Section 3</h2>
<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. Donec bibendum, nulla
eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam
nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis
lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a
tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus
vitae elit. Integer nec libero venenatis libero ultricies molestie
semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum
consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget
elementum tortor mollis non.
</p>
</div>
</section>
<section id="section4" data-nav="section4" class="your-active-class">
<div class="landing__container">
<h2>Section 4</h2>
<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. Donec bibendum, nulla
eget bibendum consectetur, sem nisi aliquam leo, ut pulvinar quam
nunc eu augue. Pellentesque maximus imperdiet elit a pharetra. Duis
lectus mi, aliquam in mi quis, aliquam porttitor lacus. Morbi a
tincidunt felis. Sed leo nunc, pharetra et elementum non, faucibus
vitae elit. Integer nec libero venenatis libero ultricies molestie
semper in tellus. Sed congue et odio sed euismod.
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu, vitae rhoncus purus. Vestibulum fermentum
consectetur porttitor. Suspendisse imperdiet porttitor tortor, eget
elementum tortor mollis non.
</p>
</div>
</section>
</main>
<footer class="page__footer">
<p>© Udacity</p>
</footer>
<script src="js/app.js" defer></script>
</body>
</html>