-
Notifications
You must be signed in to change notification settings - Fork 0
/
hiking.html
153 lines (140 loc) · 5.54 KB
/
hiking.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Henry's Hiking Page!</title>
<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/printstyle.css" media="print">
</head>
<body>
<!-- This HTML5 main element was needed to keep the footer at the bottom of the page on mobile-->
<div id="main">
<!-- This HTML5 header element will contain a picture, title of the page, and the nav element -->
<header>
<figure>
<img src="images/hike.jpg" alt="Cooper on Mt Cannon." title="Cooper on Mt Cannon."
width="600" height="450"/>
<figcaption>My dog Cooper on Mt Cannon</figcaption>
</figure>
<h1>Henry's Hiking Adventures</h1>
<!-- This HTML5 nav element will contain the nav bar -->
<nav>
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="academic.html">School</a> </li>
<li><a href="professional.html">Work</a> </li>
<li class="dropdown">
<a href="#" class="active">Play</a>
<ul>
<li><a class="active" href="hiking.html">Hiking</a></li>
<li><a href="music.html">Music</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Apps</a>
<ul>
<li><a href="weather.html">Weather</a></li>
<li><a href="stocks.html">Stocks</a></li>
<li><a href="covid.html">Covid</a></li>
<li><a href="todo.html">To-Do</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</li>
</ul>
</nav>
<hr>
</header>
<!-- This HTML5 section element will contain my article about NH48 hiking -->
<section>
<h2>Hiking Goals</h2>
<article class="with-aside">
<h3>New Hampshire's 48 4000 Footers</h3>
<p>
I recently took an interest in hiking after being cooped up in my home for six months during the pandemic. My goal is to reach a
popular hiking milestone known as the NH48, which is to climb all of New Hampshire’s 48 peaks that are 4000 feet or more in
elevation. Below is a table of all the peaks I have completed so far. Check out the links on the right for a full list of
the NH48 and other cool articles.
</p>
<table>
<thead>
<tr>
<th>Mountain</th>
<th>Elevation (ft)</th>
<th>Date Completed</th>
</tr>
</thead>
<tbody>
<tr>
<td class="row-name">Tecumseh</td>
<td>4003</td>
<td>9/6/2020</td>
</tr>
<tr>
<td class="row-name">Osceola</td>
<td>4340</td>
<td>9/12/2020</td>
</tr>
<tr>
<td class="row-name">East Osceola</td>
<td>4156</td>
<td>9/12/2020</td>
</tr>
<tr>
<td class="row-name">Moosilauke</td>
<td>4802</td>
<td>9/27/2020</td>
</tr>
<tr>
<td class="row-name">Lincoln</td>
<td>5089</td>
<td>10/6/2020</td>
</tr>
<tr>
<td class="row-name">Lafayette</td>
<td>5260</td>
<td>10/6/2020</td>
</tr>
<tr>
<td class="row-name">Cannon</td>
<td>4100</td>
<td>10/10/2020</td>
</tr>
<tr>
<td class="row-name">Garfield</td>
<td>4500</td>
<td>7/5/2021</td>
</tr>
<tr>
<td class="row-name">Hale</td>
<td>4054</td>
<td>7/11/2021</td>
</tr>
</tbody>
</table>
<!-- This HTML5 aside element will articles about NH48 -->
<aside>
<h4>Articles</h4>
<ul>
<li><a href="https://www.outdoors.org/trip-ideas-tips-resources/plan-your-trip/nh-4000-footers" target ="_blank">Outdoors.org - NH 4000 Footers Guide</a></li>
<li><a href="http://4000footers.com/nh.shtml" target ="_blank">4000footers.com - NH48 List</a></li>
</ul>
</aside>
</article>
</section>
<!-- This HTML5 footer element will contain my name, email, and last updated date, as well as printed from line -->
<footer>
<div id="footer-left"><p>© 2020 Henry Choy</p></div>
<div id="footer-center"><p><a href="mailto:henrychoy@gmail.com">henrychoy@gmail.com</a></p></div>
<div id="footer-right"><p id="last-updated"></p></div>
<p class="printed-from">Printed from http://henrychoy.com/</p>
</footer>
</div>
<br>
<br>
<br>
<script>
// last updated in footer
document.getElementById("last-updated").textContent = "Last Updated: " + document.lastModified;
</script>
</body>
</html>