-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
157 lines (139 loc) · 6.93 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
156
157
<!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">
<!-- Materialized: Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Google Fonts: Monsterrat -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto&display=swap" rel="stylesheet">
<!-- Project CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
<title>National Park Geeks</title>
</head>
<body>
<header>
<!-- Navigation -->
<nav>
<div class="nav-wrapper">
<img src="./assets/images/npgeek.png" id="npg-logo">
<a href="./index.html" class="brand-logo">National Park Geek</a>
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect waves-light btn" href="./contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<main>
<!-- <div class="welcome">
<h4 class="header">Welcome Park Geeks!</h4>
</div> -->
<!-- Search Form with Tabs -->
<form id="form-1-parks">
<div class="welcome">
<h4 class="header">Welcome Park Geeks!</h4>
</div>
<div class="tabs">
<a class="waves-effect waves-light btn parks" id="btn-search">Search Parks</a>
<a class="waves-effect waves-light btn weather" id="btn-weather">Local Weather</a>
</div>
<div class="search-parks">
<div class="input-field col s12">
<input id="input-park" type="text" class="validate">
<label for="input_inline">Search Parks (Example: Arches National Park)</label>
</div>
</div>
<a class="waves-effect waves-light btn" id="parks-search">Search</a>
<div class="search-weather">
<div class="input-field col s12">
<input id="input-weather" type="text" class="validate">
<label for="input_inline">Find Current Weather In Your Location (Example: Sacramento)</label>
</div>
</div>
<a class="waves-effect waves-light btn" id="weather-search">Search</a>
</form>
<div class="searched-parks" id="user-selected-parks">
<h4 class="header">Plan Your Trip</h4>
<p>While you checkout the latest info on your favorite National Parks, we save your searches so you can revisit them anytime you please.</p>
<p>While out on the trail, it's comforting to know that we have your back!</p>
<div class="show-searched-parks" id="searched-parks">
<div class="row" id="card-show-row">
</div>
</div>
</div>
<div class="featured-parks" id="featured-parks">
<h4 class="header">Parks of the Month: November 2019</h4>
<p>Each month our NPGeek Team picks three of the nations best parks to feature!</p>
<p>We look for a wide variety of parks that feature: interesting locations, scenic views, unusal interests and of course the best park trails!</p>
<p>Plan your next trip to one of our featured National Parks!</p>
<p>Happy Trails!</p>
<div class="show-featured-parks" id="show-parks">
<div class="row" id="card-row">
</div>
</div>
</div>
<div class="searched-weather" id="searched-weather">
<h4 class="header">Park Weather</h4>
<p>The NPGeek Team knows the weather can change in an instant! We've been caught trekking through our far share of muddy trails.</p>
<p>Search for a city close to a National Park, to view the 1hr Current Conditions for the park.</p>
<p>May the weather be in your favor.</p>
<div class="show-weather" id="show-current">
<table class="striped">
<thead>
<tr>
<th>City</th>
<th>Current Conditions</th>
<th>High Temp (F)</th>
<th>Low Temp</th>
<th>Humidity (%)</th>
<th>Wind Speed (mph)</th>
</tr>
</thead>
<tbody>
<td>Example City</td>
<td>Sunny</td>
<td>23</td>
<td>77</td>
<td>53</td>
<td>4</td>
</tbody>
</table>
</div>
</div>
</main>
<!-- Footer -->
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Thank you for visiting our site!</h5>
<p class="grey-text text-lighten-4">Please remember to leave us a message on our contact page!</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Social Media</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="./contact.html">Contact Us</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.facebook.com/nationalparkservice">Facebook</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.instagram.com/nationalparkservice/?hl=en">Instagram</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.linkedin.com/company/national-park-service">LinkedIn</a></li>
<li><a class="grey-text text-lighten-3" href="https://github.com/nationalparkservice">GitHub</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">© 2019 Copyright 'National Park Geek Project - 1'</div>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!-- Materialized: Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Fiirebase -->
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase-database.js"></script>
<!-- Project Javascript -->
<script src="./assets/javascript/javascript.js"></script>
</body>
</html>