-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
155 lines (149 loc) · 3.77 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
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>National Parks
</title>
<link rel="stylesheet"
href="./style.css">
<style>
a {
text-decoration: none;
}
a {
color: inherit;
}
</style>
</head>
<body>
<header class="header">
<div class="navBar container">
<img class="headerLogo"
src='images/hikerlogo.jpeg'>
<ul class="topLinks">
<li> <a
href="https://www.nps.gov/subjects/camping/what-to-bring.htm"
target="_blank">Gear
You Will Need</a>
</li>
<li> <a
href="https://backpackerspantry.com/blogs/news/what-not-to-do-in-national-parks"
target="_blank">What
Not To Do</a>
</li>
<li><a
href="https://www.youtube.com/watch?v=1iBlNW-yEWw"
target="_blank">How
To Say Hello To A
Bear</a> </li>
</ul>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<div class="heroText">
<h1>National Parks Are
Awesome!</h1>
<p>Everyone should vist
as least one park.
They have so much to
offer and cater to all
people and intrests.
</p>
<button type="button">
<a href="https://www.nps.gov/planyourvisit/passes.htm"
target="_blank">
Click for
Membership</a>
</button>
</div>
<div class="heroPic">
<img
src="images/ys park.jpeg">
</div>
</div>
</section>
<section class="parksPic">
<div class="h2">
<h2>Top 4 Parks</h2>
</div>
<div class="content-info container">
<div class="content-info_item">
<img
src="images/Glacier.jpeg">
<div
class="content-text">
Glacier National Park</div>
</div>
<div class="content-info_item">
<img
src="images/Grand Canyon.jpeg">
<div
class="content-text">
Grand Canyon</div>
</div>
<div class="content-info_item">
<img
src="images/yellowstone.jpeg">
<div
class="content-text">
Yellowstone</div>
</div>
<div>
<img
src="images/Yosemite.jpeg">
<div
class="content-text">
Yosemite</div>
</div>
</div>
</section>
<section class="quoteBox">
<div class="container">
<blockquote class="quote">
"There are no words that
can tell the hidden
spirit of the
wilderness, that can
reveal its mystery, its
melancholy, and its
charm."
</blockquote>
<div class="speaker">
-Theodore Roosevelt
</div>
</div>
</section>
<section class="sign-up-box">
<div class="container">
<div class="action-text">
Dont let The Parks Go
Away!
<p>
Keep them around forever so that everyone enjoy them no matter what
</p>
</div>
<button type="button"> <a
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
target="_blank">Join
The Fight!</a>
</button>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
Christian Medders - <a
href="https://github.com/clmedders/odin-landing-page"
target="_blank">Check
Out My Code</a>
</div>
</footer>
</body>
</html>