├── css
    ├── images
    │   ├── avi.jpeg
    │   ├── bag.png
    │   ├── ball.png
    │   ├── gym.jpeg
    │   ├── more.png
    │   ├── landscape.png
    │   └── missandei.png
    └── style.css
├── README.md
└── final.html


/css/images/avi.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/avi.jpeg


--------------------------------------------------------------------------------
/css/images/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/bag.png


--------------------------------------------------------------------------------
/css/images/ball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/ball.png


--------------------------------------------------------------------------------
/css/images/gym.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/gym.jpeg


--------------------------------------------------------------------------------
/css/images/more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/more.png


--------------------------------------------------------------------------------
/css/images/landscape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/landscape.png


--------------------------------------------------------------------------------
/css/images/missandei.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshlobaptista/finalProject/HEAD/css/images/missandei.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # finalProject
 2 | This is done only in HTML and CSS. This is the begining of my final project which I will turn into a full-stack web application.
 3 | 
 4 | # What I want to do
 5 | I want to make a app that allows users to select a sport which will then display to them near by parks which will have its set of features including park reputation, difficulty, and account for people attended.
 6 | 
 7 | # How It's Made:
 8 | Tech used: HTML, CSS
 9 | 
10 | # Lessons Learned:
11 | I'm learning how to step by step document my progress while creating a full stack application
12 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | header {
  6 |   border: 1px solid black;
  7 |   width: 100%;
  8 |   height: auto;
  9 |   color: black;
 10 | }
 11 | 
 12 | footer {
 13 |   background-color: #f5f5f5;
 14 |   display: inline-block;
 15 |   width: 100%;
 16 |   text-align: center;
 17 |   font-size: 14px;
 18 | }
 19 | 
 20 | h2 {
 21 |   color: red;
 22 | 
 23 | }
 24 | 
 25 | a {
 26 |   position: relative;
 27 |   text-decoration: none;
 28 | }
 29 | 
 30 | body {
 31 |   font-size: 16px;
 32 |   font-family: helvetica;
 33 |   background-color: #BF6890;
 34 | }
 35 | 
 36 | main {
 37 |   margin-left: 21.3%;
 38 |   margin-right: 15.3%;
 39 |   padding: 0 15px;
 40 |   text-align: center;
 41 | }
 42 | 
 43 | i {
 44 |   background-color: red;
 45 | 
 46 | }
 47 | 
 48 | ul > h3 {
 49 |   color: red;
 50 | 
 51 | }
 52 | 
 53 | .veryBottom {
 54 |   display: block;
 55 |   width: auto;
 56 |   text-align: center;
 57 | }
 58 | 
 59 | .footerList {
 60 |   margin-left: 25%;
 61 | 
 62 | }
 63 | 
 64 | .footerList > nav > ul {
 65 |   list-style: none;
 66 |   display: inline-block;
 67 |   float: left;
 68 |   padding-right: 30px;
 69 |   text-align: left;
 70 | }
 71 | 
 72 | .footerList > nav > ul > li {
 73 |   padding-bottom: 10px;
 74 |   margin-right: 20px;
 75 | 
 76 | 
 77 | }
 78 | 
 79 | .apps {
 80 |   width: 100%;
 81 |   height: auto;
 82 |   display: inline-block;
 83 |   text-align: center;
 84 |   margin-bottom: 50px;
 85 | }
 86 | 
 87 | .browse {
 88 |   text-align: center;
 89 |   margin-left: auto;
 90 |   margin-right: auto;
 91 |   height: auto;
 92 |   width: auto;
 93 |   display: inline-block;
 94 | }
 95 | 
 96 | .cities {
 97 |   padding-top: 72px;
 98 |   border-bottom: 1px solid grey;
 99 | }
100 | 
101 | .cubes {
102 |   padding-right: 5px;
103 | }
104 | 
105 | .grey {
106 |   background-color: #f5f5f5;
107 |   width: 100%
108 | 
109 | }
110 | 
111 | .hot {
112 |   display: inline-block;
113 |   float: left;
114 |   height: auto;
115 |   width: 900px;
116 | }
117 | 
118 | .mobile {
119 |   width: 50%;
120 |   float: left;
121 |   margin-left: 25.8%;
122 | }
123 | 
124 | .ipad, .android {
125 |   border: 1px solid darkblue;
126 |   border-radius: 4px 4px 4px 4px;
127 |   width: 48%;
128 |   display: block;
129 |   float: left;
130 |   margin-left: 10px;
131 | }
132 | 
133 | .newBusinesses {
134 |   border: 1px solid grey;
135 |   float: left;
136 |   display: block;
137 |   height: 350px;
138 |   width: 32%;
139 |   margin-left: 12px;
140 |   text-align: left;
141 |   border-radius: 4px 4px 4px 4px;
142 | }
143 | 
144 | .topLeft {
145 |   float: left;
146 | 
147 | }
148 | 
149 | .topRight {
150 |   float: right;
151 |   margin-right: 3%;
152 | }
153 | 
154 | .logo {
155 |   margin-left: auto;
156 |   margin-right: auto;
157 |   text-align: center;
158 |   padding-top: 80px;
159 | }
160 | 
161 | .inTown {
162 |   display: inline-block;
163 |   width: 100%;
164 | }
165 | 
166 | .find {
167 |   text-align: center;
168 |   display: inline;
169 | }
170 | 
171 | .headerContent {
172 |   padding-top: 30px;
173 |   margin-left: 15.8%;
174 |   margin-right: 15.8%;
175 | 
176 | }
177 | 
178 | .restaurant {
179 |   text-align: center;
180 | }
181 | 
182 | .bottomHeader {
183 |   text-align: center;
184 |   padding-top: 50px;
185 | }
186 | 
187 | .recentReview {
188 |   display: inline-block;
189 |   float: left;
190 |   height: auto;
191 |   width: 100%;
192 |   text-align: left;
193 | 
194 | }
195 | 
196 | .dailyReview {
197 |   display: block;
198 |   float: left;
199 |   width: 70%;
200 | }
201 | 
202 | .activity {
203 |   border: 1px solid lightgrey;
204 |   border-radius: 4px 4px 4px 4px;
205 |   margin-left: 10px;
206 |   margin-top: 10px;
207 |   width: 30%;
208 |   height: auto;
209 |   display: block;
210 |   float: left;
211 |   padding-left: 10px;
212 |   padding-top: 15px;
213 |   text-align: left;
214 | }
215 | 
216 | .greyBox {
217 |   background-color: #f5f5f5;
218 |   height: auto;
219 |   display: inline-block;
220 |   width: 100%;
221 |   float: left;
222 |   text-align: center;
223 |   padding-top: 40px;
224 |   padding-bottom: 40px;
225 | }
226 | 
227 | .recentActivity {
228 |   height: auto;
229 |   width: 100%;
230 |   display: inline-block;
231 |   padding-bottom: 40px;
232 |   margin-top: 30px;
233 | }
234 | 
235 | .recentLists {
236 |   display: block;
237 |   float: left;
238 |   width: 22%;
239 |   text-align: left;
240 | }
241 | 
242 | .recentLists > ul {
243 |   display: inline;
244 | 
245 | }
246 | 
247 | .activity span + a > img {
248 |   width: 100%;
249 |   height: 150px;
250 |   border-top: 1px solid lightgrey;
251 | }
252 | 
253 | .bottomHeader > a {
254 |   color: white;
255 |   text-decoration: none;
256 | }
257 | 
258 | .newBusinesses > img {
259 |   width: 100%;
260 |   height: 180px;
261 |   float: left;
262 |   border-radius: 4px 4px 4px 4px;
263 | }
264 | 
265 | .topFour > section {
266 |   display: block;
267 |   background-color: white;
268 |   border-radius: 4px 4px 4px 4px;
269 |   float: left;
270 |   width: 25%;
271 |   margin-left: 9px;
272 |   width: 220px;
273 | }
274 | 
275 | .bottomFour > section {
276 |   display: block;
277 |   float: left;
278 |   width: 25%;
279 |   background-color: white;
280 |   border-radius: 4px 4px 4px 4px;
281 |   margin-left: 9px;
282 |   margin-top: 5px;
283 |   width: 220px;
284 | }
285 | 
286 | .topLeft > a {
287 |   color: black;
288 |   text-decoration: none;
289 |   padding-left: 15px;
290 | }
291 | 
292 | .userPhoto > img {
293 |   border-radius: 4px 4px 4px 4px;
294 |   width: 50px;
295 |   height: 50px;
296 |   float: left;
297 | }
298 | 
299 | .veryBottom > img {
300 |   width: 810px;
301 | 
302 | }
303 | 
304 | .cubes > a > img {
305 |   border-radius: 4px 4px 4px 4px;
306 | }
307 | 
308 | .bottomHeader > h4 > a {
309 |   color: white;
310 |   padding-left: 10px;
311 |   text-decoration: none;
312 | }
313 | 
314 | .find > form > input {
315 |   width: 458px;
316 |   height: 23px;
317 |   padding: 13px;
318 |   border-radius: 4px 0 0 4px;
319 | }
320 | 
321 | 
322 | .find > form > button {
323 |   border-radius: 0 4px 4px 0;
324 |   border: 0;
325 |   background: #d32323;
326 |   padding: 19px 20px 13px;
327 |   box-shadow: none;
328 | }
329 | 
330 | .topRight > span > a {
331 |   color: white;
332 |   text-decoration: none;
333 |   padding-right: 15px;
334 | 
335 | }
336 | 
337 | .cities > nav > ul > li {
338 |   list-style:  none;
339 |   display: inline;
340 |   padding-right: 12px;
341 | 
342 | }
343 | 
344 | .recentLists > ul > li {
345 |   list-style: none;
346 |   display: inline-block;
347 |   float: left;
348 | }
349 | 
350 | .recentLists > ul > li > img {
351 |   height: 75px;
352 |   width: 75px;
353 |   float: left;
354 | 
355 | }
356 | 
357 | .restaurant > nav > ul > li {
358 |   list-style: none;
359 |   display: inline;
360 |   padding-left: 20px;
361 |   padding-right: 20px;
362 | }
363 | 
364 | .logo > h1 > a > img {
365 |   width: 200px;
366 |   height: 160px;
367 |   padding: 0;
368 | }
369 | 
370 | .inTown {
371 |   display: inline-block;
372 |   width: 100%;
373 | 
374 | }
375 | 
376 | .restaurant > nav > ul > li > a {
377 |   color: white;
378 |   text-decoration: none;
379 | }
380 | 
381 | .inTown > .cubes {
382 | float: left;
383 | 
384 | }
385 | 
386 | /* MOBILE */
387 | 
388 | @media only screen and (max-width: 768px) {
389 | 
390 | header {
391 |   width: 100%;
392 |   text-align: left;
393 |   margin: 0;
394 |   height: auto;
395 |   }
396 | 
397 | footer {
398 |   display: none;
399 | }
400 | 
401 | .activity {
402 |   width: 100%
403 | }
404 | 
405 | .headerContent {
406 |   margin: 0px;
407 | 
408 | }
409 | 
410 | .browse {
411 |   text-align: center;
412 | }
413 | 
414 | .apps {
415 |   display: none;
416 | }
417 | 
418 | .topLeft {
419 |   display: none;
420 |   }
421 | 
422 | .find {
423 |   width: 100%;
424 | 
425 |   }
426 | 
427 | .location {
428 |   display: none;
429 | 
430 | }
431 | 
432 | .topRight {
433 |   width: 100%;
434 |   text-align: center;
435 | 
436 |   }
437 | 
438 | .grey {
439 |   width: 100%;
440 |   height: auto;
441 |   }
442 | 
443 | .greyBox {
444 |   width: 100%;
445 |   height: auto;
446 |   }
447 | 
448 | .hot {
449 |   display: none;
450 | 
451 |   }
452 | 
453 | 
454 | .recentReview {
455 |   display: none;
456 | 
457 |   }
458 | 
459 | .cubes  {
460 |   width: 100%;
461 | 
462 |   }
463 | 
464 | }
465 | 
466 | @media (min-width:769px) and (max-width: 1025px) {
467 | 
468 | header {
469 |   width: 100%;
470 |   text-align: left;
471 |   }
472 | 
473 | footer {
474 |   margin-left: 0px;
475 | 
476 | }
477 | 
478 | .headerContent {
479 |   margin: 0;
480 | 
481 | }
482 | 
483 | .recentLists {
484 |   display: none;
485 | }
486 | 
487 | .topLeft {
488 |   display: none;
489 |   }
490 | 
491 |   .find {
492 |   width: 100%;
493 | 
494 |   }
495 | 
496 | .apps {
497 |   display: none;
498 | 
499 | }
500 | 
501 | .topRight {
502 |   width: 100%;
503 |   text-align: center;
504 |   }
505 | 
506 | .hot {
507 |   width: auto;
508 |   height: auto;
509 | 
510 | }
511 | 
512 | .newBusinesses {
513 |   width: auto;
514 |   height: auto;
515 | 
516 | }
517 | 
518 | .grey {
519 |   width: 100%;
520 |   height: auto;
521 |   }
522 | 
523 | .greyBox {
524 |   width: 100%;
525 |   height: auto;
526 | 
527 |   }
528 | 
529 | .cubes {
530 |   width: 100%;
531 | 
532 |   }
533 | 
534 | .veryBottom > img {
535 |   max-width: 100%;
536 | }
537 | 
538 | }
539 | 


--------------------------------------------------------------------------------
/final.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" dir="ltr">
  3 | <head>
  4 |   <link rel="stylesheet" href="css/style.css">
  5 |   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=none">
  8 |   <meta charset="utf-8">
  9 |   <title>Yelp</title>
 10 | </head>
 11 | <body>
 12 |   <header>
 13 |       <nav class="topLeft">
 14 |         <a href="#">Trending</a>
 15 |         <a href="#">Your Parks</a>
 16 |         <a href="#">Sports</a>
 17 |       </nav>
 18 |       <nav class="topRight">
 19 |         <span><a href="#">Log In</a><span>
 20 |           <input type="submit" name="" value="Sign Up">
 21 |         </nav>
 22 |     </header>
 23 |     <main>
 24 | 
 25 |       <section class="cities">
 26 |         <nav>
 27 |           <ul>
 28 |             <h2>Parks In</h2>
 29 |             <li><a href="#">Boston</a> </li>
 30 |             <!-- <li><a href="#">San Francisco</a> </li>
 31 |             <li><a href="#">San Jose</a> </li>
 32 |             <li><a href="#">Los Angeles</a> </li>
 33 |             <li><a href="#">Chicago</a> </li>
 34 |             <li><a href="#">Palo Alto</a> </li> -->
 35 |             <li><a href="#">More Cities</a> </li>
 36 |           </ul>
 37 |         </nav>
 38 |       </section>
 39 | 
 40 |       <section class="recentActivity">
 41 |         <h2>Park Feed</h2>
 42 |         <section class="activity">
 43 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 44 |           <h4><a href="#"> Park Name.</a> </h4>
 45 |           <span>Write a review</span>
 46 |           <a href="#"><img src="css/images/playground.png" alt=""></a>
 47 |           <a href="#">Performance Parking</a>
 48 |           <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 49 |         </section>
 50 |         <section class="activity">
 51 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 52 |           <h4><a href="#">Park Name.</a> </h4>
 53 |           <span>Write a review</span>
 54 |           <a href="#"><img src="css/images/football.jpg" alt=""></a>
 55 |           <span><a href="#">Boil Boil Ramen</a> </span>
 56 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 57 |         </section>
 58 |         <section class="activity">
 59 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 60 |           <h4><a href="#">Park Name.</a> </h4>
 61 |           <span>Write a review</span>
 62 |           <a href="#"><img src="css/images/rucker.jpg" alt=""></a>
 63 |           <a href="#">Park Location</a>
 64 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 65 |         </section>
 66 | 
 67 |         <section class="activity">
 68 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 69 |           <h4><a href="#">Park Name.</a> </h4>
 70 |           <span></span>
 71 |           <a href="#"><img src="css/images/rucker.jpg" alt=""></a>
 72 |           <span><a href="#">Park Location</a> </span>
 73 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 74 |         </section>
 75 |         <section class="activity">
 76 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 77 |           <h4><a href="#">Park Name.</a> </h4>
 78 |           <span></span>
 79 |           <a href="#"><img src="css/images/soccer.jpeg" alt=""></a>
 80 |           <span><a href="#">Park Location</a></span>
 81 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 82 |         </section>
 83 |         <section class="activity">
 84 |           <a class="userPhoto" href="#"><img src="css/images/missandei.png" alt=""></a>
 85 |           <h4><a href="#">Park Name.</a> </h4>
 86 |           <span></span>
 87 |           <a href="#"><img src="css/images/soccer.jpeg" alt=""></a>
 88 |           <span><a href="#">Park Location</a> </span>
 89 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 90 |         </section>
 91 |       </section>
 92 |       <section class="hot">
 93 |         <h2>Trending & Competitive Parks</h2>
 94 |         <section class="newBusinesses">
 95 |           <img src="css/images/soccer.jpeg" alt="">
 96 |           <h3><a href="#">Dudley St Park</a></h3>
 97 |           <i class="far fa-star"></i>
 98 |           <i class="far fa-star"></i>
 99 |           <i class="far fa-star"></i>
100 |           <i class="far fa-star"></i>
101 |           <i class="far fa-star"></i>
102 |           <span>37 reviews</span>
103 |           <span>$</span>
104 |           <span>Basketball Court</span>
105 |           <span>Dudley st</span>
106 |         </section>
107 |         <section class="newBusinesses">
108 |           <img src="css/images/playground.png" alt="">
109 |           <h3><a href="#">Compton</a></h3>
110 |           <i class="far fa-star"></i>
111 |           <i class="far fa-star"></i>
112 |           <i class="far fa-star"></i>
113 |           <i class="far fa-star"></i>
114 |           <i class="far fa-star"></i>
115 |           <span>13 reviews</span>
116 |           <span>$$$$</span>
117 |           <span>Playground</span>
118 |           <span>TriBeCa</span>
119 |         </section>
120 |         <section class="newBusinesses">
121 |           <img src="css/images/rucker.jpg" alt="">
122 |           <h3><a href="#">Rucker</a></h3>
123 |           <i class="far fa-star"></i>
124 |           <i class="far fa-star"></i>
125 |           <i class="far fa-star"></i>
126 |           <i class="far fa-star"></i>
127 |           <i class="far fa-star"></i>
128 |           <span>46 reviews</span>
129 |           <span>$$</span>
130 |         </section>
131 |       </section>
132 |       <section class="recentReview">
133 |         <section class="dailyReview">
134 |           <h2>Park of the Day</h2>
135 |           <img src="css/images/football.jpg" alt="">
136 |           <h4><a href="#">Megan C.</a></h4><
137 |           <i class="far fa-star"></i>
138 |           <i class="far fa-star"></i>
139 |           <i class="far fa-star"></i>
140 |           <i class="far fa-star"></i>
141 |           <i class="far fa-star"></i>
142 |           <span>3880</span>
143 |           <span>football field</span>
144 |           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
145 |         </section>
146 |         <section class="recentLists">
147 |           <h2>Recent Parks Visited</h2>
148 |           <ul>
149 |             <li><img src="css/images/rucker.jpg" alt=""></li>
150 |             <a href="#">My review - tell the truth a...</a>
151 |             <span>Keep checking back!</span>
152 |             <h5>By<a href="#"> Ms Pamella P</a></h5>
153 |             <li><img src="css/images/soccer.jpeg" alt="">
154 |               <a href="#">Smith Street</a>
155 |               <p>A delightful main street</p></li>
156 |               <h5>By <a href="#">Johanna B</a></h5>
157 |               <li><img src="css/images/rucker.jpg" alt=""></li>
158 |               <a href="#">Celestial Slices</a>
159 |               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
160 |               <span>By <a href="#">Franny A.</a></span>
161 |             </ul>
162 |           </section>
163 |         </section>
164 |       </main>
165 |       <section class="greyBox">
166 |         <section class="browse">
167 |           <h2>Browse Parks by Sport</h2>
168 |           <section class="topFour">
169 |             <section>
170 |               <a href="#"><img src="css/images/ball.png" alt=""></a>
171 |               <p>Basketball</p>
172 |             </section>
173 |             <section>
174 |               <a href="#"><img src="css/images/ball.png" alt=""></a>
175 |               <p>Soccer</p>
176 |             </section>
177 |             <section>
178 |               <a href="#"><img src="css/images/ball.png" alt=""></a>
179 |               <p>Football</p>
180 |             </section>
181 |             <section>
182 |               <a href="#"><img src="css/images/ball.png" alt=""></a>
183 |               <p>Playground</p>
184 |             </section>
185 |           </section>
186 |         </section>
187 |       </section>
188 |       <footer>
189 |         <section class="footerList">
190 |           <nav>
191 |             <ul>
192 |               <h3>About</h3>
193 |               <li><a href="#">About The Parks</a> </li>
194 |               <li><a href="#">Press</a> </li>
195 |               <li><a href="#">Investor Relations</a> </li>
196 |               <li><a href="#">Content Guidelines</a> </li>
197 |               <li><a href="#">Terms of Service</a> </li>
198 |               <li><a href="#">Privacy Policy</a> </li>
199 |             </ul>
200 |             <ul>
201 |               <h3>Languages</h3>
202 |               <li>
203 |                 <form class="" action="index.html" method="post">
204 |                   <select class="" name="">
205 |                     <option value="">English</option>
206 |                   </select>
207 |                 </li>
208 |               </ul>
209 |               <ul>
210 |                 <h3>Countries</h3>
211 |                 <li>
212 |                   <select class="" name="">
213 |                     <option value="">United States</option>
214 |                   </select>
215 |                 </li>
216 |               </ul>
217 |             </form>
218 |           </nav>
219 |         </section>
220 |       </footer>
221 |     </body>
222 |     </html>
223 | 


--------------------------------------------------------------------------------