-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (236 loc) · 14.3 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Athens Skatepark Project</title>
<meta name="description" content="The Athens Skatepark Project: Empowering the Athens skatepark community with expanded, high-quality skateparks for exercise, engagement, and belonging. Get involved today!">
<link rel="stylesheet" href="./styles.css">
<link rel="icon" type="image/png" href="/mainImages/logos/asp-favicon-2.png">
</head>
<body>
<nav>
<div id="logo-container">
<a href="https://athensskateparkproject.org" aria-label="Athens Skatepark Project Logo"><img src="./mainImages/logos/Board-Wordmark.png" alt="" id="logo"></a>
</div>
<a class="nav-link" href="#upcoming-events">Upcoming Events</a>
<a class="nav-link call-to-action" href="#get-involved-section">Get Involved!</a>
</nav>
<section id="hero-section">
<div id="hero-img-container"> <!-- Photo source: https://accls.smugmug.com/Southeast-Clarke-Park/Skate-Camp-2023/n-vv7X64/i-VrXNgDS/A -->
<div id="hero-shade"></div>
<div id="hero-content">
<h1 id="page-title" class="edge">Athens Skatepark Project</h1>
<p id="intro-text" class="edge">At Athens Skatepark Project, we know that skateparks enrich the lives of people in our community through recreation, exercise, engagement, and belonging. We are dedicated to increasing access to skateparks in and around Athens Clarke County. We collaborate with public and private agencies to expand and create safe, high-quality skateparks.</p>
<br>
<a id="main-button" class="call-to-action" href="#get-involved-section">Get Involved!</a>
</div>
</div>
</section>
<section id="get-involved-section">
<h2 class="edge">Three ways to get involved:</h2>
<div id="get-involved-container">
<!-- help out: step 1 -->
<h3 class="edge" id="donate">Donate now!</h3>
<div class="edge" id="donation-container">
<a href="https://account.venmo.com/u/athensskateparkproject" class="call-to-action action-button donate-button" target="_blank">Venmo</a>
<a href="https://www.paypal.com/donate/?hosted_button_id=94M9KYMUM3TR6" class="call-to-action action-button donate-button" target="_blank">Paypal</a>
</div>
<div id="fundraising-thermometer">
<span id="percent-announcement">We've raised <b>20%</b> of our target so far!</span>
<svg id="uuid-bcefca09-4aa4-4739-a709-15c4a7cffd63" class="edge" xmlns="http://www.w3.org/2000/svg" width="11.1111in" height="2.6978in" viewBox="0 0 800 194.2446">
<defs>
<style>
.uuid-f1d6eb4a-3380-4bc1-92dc-2d7db28438c5 {
fill:transparent;
stroke: black;
stroke-width:5px;
}
</style>
<clipPath id="clip-path">
<path class="outline uuid-f1d6eb4a-3380-4bc1-92dc-2d7db28438c5" d="M784.1416,32.3847c-4.2715-10.187-15.9917-14.9795-26.1787-10.709l-115.5122,48.4438H157.5493L42.0371,21.6757c-10.187-4.2705-21.9072.522-26.1787,10.709-4.272,10.186.5229,21.9067,10.709,26.1787l106.958,44.8562v10.3972c-9.6736,6.4737-16.0576,17.4966-16.0576,29.9849,0,19.8818,16.1753,36.0576,36.0576,36.0576s36.0571-16.1758,36.0571-36.0576c0-12.4881-6.3838-23.5109-16.0571-29.9846v-3.697h452.9492v3.697c-9.6733,6.4737-16.0571,17.4965-16.0571,29.9846,0,19.8818,16.1753,36.0576,36.0571,36.0576s36.0576-16.1758,36.0576-36.0576c0-12.4882-6.384-23.5112-16.0576-29.9849v-10.3972l106.958-44.8562c10.186-4.272,14.981-15.9927,10.709-26.1787Z"></path>
</clipPath>
</defs>
<g>
<rect style="height: 200px; fill: red; width: 20%;" clip-path="url(#clip-path)"></rect>
</g>
<path class="outline uuid-f1d6eb4a-3380-4bc1-92dc-2d7db28438c5" d="M784.1416,32.3847c-4.2715-10.187-15.9917-14.9795-26.1787-10.709l-115.5122,48.4438H157.5493L42.0371,21.6757c-10.187-4.2705-21.9072.522-26.1787,10.709-4.272,10.186.5229,21.9067,10.709,26.1787l106.958,44.8562v10.3972c-9.6736,6.4737-16.0576,17.4966-16.0576,29.9849,0,19.8818,16.1753,36.0576,36.0576,36.0576s36.0571-16.1758,36.0571-36.0576c0-12.4881-6.3838-23.5109-16.0571-29.9846v-3.697h452.9492v3.697c-9.6733,6.4737-16.0571,17.4965-16.0571,29.9846,0,19.8818,16.1753,36.0576,36.0571,36.0576s36.0576-16.1758,36.0576-36.0576c0-12.4882-6.384-23.5112-16.0576-29.9849v-10.3972l106.958-44.8562c10.186-4.272,14.981-15.9927,10.709-26.1787Z"/>
</svg>
<span class="edge money" >$20,000 of $100,000</span>
</div>
<!-- help out: step 2 -->
<h3 class="edge" id="sign-up">Sign up for updates on how to contribute:</h3>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSe5B2ss91SOoVzhqBUY8Zyfy_2sC0BlW-xUBel78b2QlBX91w/viewform?usp=sf_link" class="call-to-action action-button" target="_blank">Sign up</a>
<!-- help out: step 3 -->
<h3 class="edge" id="attend-event">Come to an event!</h3>
<a href="#upcoming-events" class="call-to-action action-button">Upcoming events</a>
</div>
</section>
<section id="upcoming-events">
<h2 class="edge">Upcoming events:</h2>
<!-- standard event -->
<div class="edge" id="standard-event">
<h3 class="edge" id="standard-event-text">Community meetings are the third Sunday of every month, 6:30pm at Nuci's Space. Next meeting: </h3>
</div>
<!-- event 1 -->
<div class="event" id="event-1">
<div id="event-1-img-container" class="event-image"></div>
<div>
<h3>Turkey Shoot</h3>
<div>
<h4>What: </h4>
<p>A Thanksgiving jam in the bowl at Skatepark of Athens! An annual tradition since 2005.</p>
</div>
<div>
<h4>When: </h4>
<p>November 30, 1pm</b></p>
</div>
<div>
<h4>Where: </h4>
<p>Skatepark of Athens</p>
</div>
<br>
</div>
</div>
<!-- event 2 -->
<div class="event" id="event-2">
<div id="event-2-img-container" class="event-image"></div>
<div>
<h3>Parade of Lights</h3>
<div>
<h4>What: </h4>
<p>Athens Skatepark Project will be in the annual Athens Downtown Parade of Lights. Come join us to raise money and raise awareness for our cause!</p>
</div>
<div>
<h4>When: </h4>
<p>December 5th, 7pm</p>
</div>
<div>
<h4>Where: </h4>
<p>Downtown Athens</p>
</div>
<br>
</div>
</div>
<!-- event 3 -->
<div class="event" id="event-3">
<div id="event-3-img-container" class="event-image"></div>
<div>
<h3>Watkinsville Holiday Parade</h3>
<div>
<h4>What: </h4>
<p>Athens Skatepark Project will be rolling through the Watkinsville Holiday Parade! Come out to support us in rasing money and awareness for our project!</p>
</div>
<div>
<h4>When: </h4>
<p>December 8, 4pm</p>
</div>
<div>
<h4>Where: </h4>
<p>Downtown Watkinsville</p>
</div>
<br>
</div>
</div>
</section>
<section id="road-map">
<h2 class="edge">Our Road Map</h2>
<div id="steps">
<img src="./mainImages/progressBars/ASP-Web-Checkbox -3.jpg" id="progress-bar" alt="" class="edge">
<ol id="step-list">
<li>Form a non-profit</li>
<li>Increase community support and awareness</li>
<li>Raise Funds</li>
<li>Get county approval</li>
<li>Skatepark of Athens Phase 2 is built!</li>
<li>Select next project: Greenway, West Side, Oconee, etc.</li>
</ol>
</div>
</section>
<!-- FAQ's -->
<section id="faq">
<h2 class="edge">FAQ</h2>
<ul id="faq-list">
<li class="question">
Why do we need more skateparks?
<p>
There are many reasons our community would benefit from more skateparks! Skateparks are a place of belonging for people who might not fit into team sports. They are especially beneficial to kids; they provide a way for them to be active and creative outside, require little planning/scheduling for parents, and have a low cost of entry. Kids also make friends and learn social skills at the skatepark.
</p>
<p>
Other sports and recreation facilities have received consistent funding over time, but the skatepark has not received any investment in 20 years. We hope to change that with an extension to the existing Skatepark of Athens (SPOA). We also hope to increase community accessibility and engagement with skateparks by advocating for them to be built in more locations around Athens Clarke County.
</p>
</li>
<li class="question">
What's wrong with the skatepark we have?
<p>
The kids and beginners of Athens deserve a place to skate/ride that is accessible and safe for beginners, i.e. with smaller obstacles. The current skatepark could be discouraging and scary for them, leading them to quit a sport they might otherwise love. ACC has also neglected the skatepark for years to the point that it is unsafe and outdated.
</p>
</li>
<li class="question">
Is it really ever going to happen?
<p>
It has taken many years to get the ball rolling because we weren't organized. Now, we are organized. We have a strong core group of people working together to make it happen. We have a roadmap. We have a deadline. We have a fundraising goal of $100,000. We have been in contact with county officials and they are supportive and excited to work with us. We can do this!
</p>
</li>
<li class="question">
When is it going to happen?
<p>
Our goal is to have the new extension in motion by the 20th anniversary of the Skatepark of Athens: April 19, 2025.
</p>
</li>
<li class="question">
What will the new skatepark look like?
<p>
The extension of SPOA will be focused on street skating; obstacles will include ledges/boxes, rails, stairs, ramps, and quarter pipes. These obstacles will be smaller than those at the existing park, making the extension much more beginner friendly. It will also be more modern, keeping up with newer trends in skateparks that bring people from all over to try them out.
</p>
<figure class="layout-figure">
<img src="./mainImages/SPOA_Phase_II_Tentative_Layout.png" alt="tentative skatepark layout" id="skatepark-layout"/>
<figcaption id="layout-caption">An early artist's rendition of the new park.</figcaption>
</figure>
</li>
<li class="question">
When is the next public meeting?
<p>
Every third Sunday at 6:30pm at Nuçi's Space.
</p>
</li>
<li class="question">
When is the next event?
<p>
See the <a href="#upcoming-events" class="inline-link">events section</a> of our website.
</p>
</li>
<li class="question">
How can I help out?
<p id="many-ways">
There are many ways you can get involved!
</p>
<ul class="help-out-list">
<li>Donate!</li>
<li>Visit our website and <a href="https://www.instagram.com/athensskateparkproject" class="inline-link" target="_blank">Instagram</a>, and send them to friends</li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSe5B2ss91SOoVzhqBUY8Zyfy_2sC0BlW-xUBel78b2QlBX91w/viewform?usp=sf_link" class="inline-link" target="_blank">Sign up</a> to our mailing list</li>
<li>Come to our <a href="#upcoming-events" class="inline-link">events</a> and invite your friends</li>
<li>Come to our public meeting on the third Sunday of every month</li>
<li>Do you have a business that could donate services or goods? <a href="mailto: [email protected]" class="inline-link">Let us know!</a></li>
<li>Do you have event planning, legal, fundraising, organizing etc. skills? <a href="mailto: [email protected]" class="inline-link">Let us know!</a></li>
</ul>
</li>
</ul>
</section>
<!-- Photo Gallery -->
<section id="photo-gallery-section">
<h2 class="edge">Skatepark Gallery</h2>
<div id="gallery-image-container">
<img id="gallery-image" class="edge">
</div>
</section>
<footer>
<a id="footer-cta" class="nav-link call-to-action" href="#get-involved-section">Get Involved!</a>
<div id="social-media-info">
<p class="edge">On Instagram @ <a class="social-link" href="https://www.instagram.com/athensskateparkproject" target="_blank">athensskateparkproject</a></p>
<p class="edge">Or email us: <a class="social-link" href="mailto: [email protected]">[email protected]</a></p>
</div>
</footer>
<script src="./main.js"></script>
</body>
</html>