Update Home and Details Pages to allign with Wireframe Design [Sprint 2]

[wildal99]

Feature: Home page and Details page. Sprint 2.

User Story. Caleb would like to go on a camping trip this weekend. He tried to use our website to find a campground. However, he has been put off by the appearance of our webpages. He would like our website to look nicer and make it easy to find the specific information he is looking for.

Tasks:

• [x] Update the home page layout to appear similar to our wireframe diagrams.
  • [x] Display a single centered campround for a single campground
  • [x] Display a centered row for 2-4 campgrounds
  • [x] Display up to 3 rows for 4+ campgrounds
• [ ] Update the campground details page layout to appear similar to our wireframe diagrams.
  • [ ] Arrange page to match design of wireframe with campground details
  • [ ] Make a review section for campground detail page

Acceptance tests:

1. If a single campground is returned, the homepage displays a single centered campground
2. If multiple campgrounds are returned, display them in a centered row of up to 4 campgrounds, up to a maximum of 3 rows.
3. The home page mobile friendly (appears clean and orderly on mobile devices)
4. The details page appears similar to our wireframe diagram
5. The details page mobile friendly (appears clean and orderly on mobile devices)

Dependencies: PBI1, Clone and Transfer EC2 Repository completed. Existing code from Sprint 1.

Task 1- By 10/22 10/20 1 day learning more react front end / CSS 10/21 1 day reviewing existing code, 10/21-10/22 2 days updating existing front end CSS / app javascript files to display campsites properly.

Task 2 by 10/23: Day 1- 10/18: Review existing code/learn more about react Day 2 - 10/20: Arrange Campground details section Day 3 - 10/23: Create a leave a review section on campground details page

[sjiang1]

1. I fixed the format of the indented checkboxes
2. Please add a label: sprint-2
3. The dependencies are for "PBIs" or other related parts. For example, do you need anything to be finished before you start your work?
4. Please double check your time line (the start and end dates of your issue.)