-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (101 loc) · 5.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>NPS Directory</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Montserrat:wght@700&display=swap" rel="stylesheet">
<!-- css -->
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="js-landing-wrapper" class="landing-wrapper">
<header class="title-wrapper">
<h1 class="title">
<span class="title-span title-note">*an unofficial</span>
<span class="title-span">national</span>
<span class="title-span">park</span>
<span class="title-span">service</span>
<span class="title-span">directory</span>
</h1>
</header>
<div class="search-wrapper">
<div class="search-details">
<h2 class="search-header">Find details on National Parks across the U.S.</h2>
<p class="search-line">Search by state</p>
<p class="search-line">Results are alphabetical</p>
<form id="js-state-form" class="state-form">
<select id="js-state-select" class="form-input state-dropdown" aria-label="state select dropdown" name="states-list" required>
<option value="">State</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
<input id="js-submit-btn" class="form-input state-submit" aria-label="state select submit" type="submit" value="Search">
</form>
<div id="js-form-msg" class="form-msg-wrapper hidden"></div>
</div>
</div>
</div>
<main id="js-directory-wrapper" class="directory-wrapper">
<!-- PARK DIRECTORY CONTENT -->
</main>
<div id="js-page-loader" class="loader"></div>
<button id="js-to-top-btn" class="to-top-btn">^</button>
<!-- scripts -->
<script src="quotes.js"></script>
<script src="main.js"></script>
</body>
</html>