Reference no: EM133542720

Assignment: Computer Science

Objectives

Update index.html:

1. Insert an image in the "Featured Campsites" section, the same way as in the previous lesson.
2. Create a reservation form within a Bootstrap card.
3. Create a button in the header that will scroll down to the reservation form when clicked.

Task I: Featured Campsites Image

A. Locate the Feature Section: Inside index.html find the feature section within the main element.

B. Insert Image: Place the react-lake-thumb.jpg from your img folder to the right of the text (after the text) describing React Lake Campground.

C. Styling:

1. Add a Bootstrap class to style the image as a thumbnail.

2. Apply the appropriate Bootstrap spacing utility class to the image, so that the margin is the same size as the other thumbnail images, but on the left side rather than the right.

3. Add a div with an appropriate Bootstrap flex utility class around the image and text for the featured section, as you did with the other sections.

4. Align the h3 and p elements relative to the center of the image, as you did with the other sections

Task II: Reservation Form

A. Locate the Main Container: Find the main element tagged with the "container" class, containing the discover, feature, and partner sections.

B. Insert a New Section: Before the closing </main> tag, insert a new section. Add the classes row and row-content.

C. Column Setup: Within this section, create a column div (an empty div with a Bootstrap column class) that will occupy 9 columns on small-and-up viewports, and use the mx-auto class to center it.

D. Build the Reservation Form:

1. Start with a Card: Inside your column, create a Bootstrap card (an empty div with the card class on it).

2. Card Header:

a. Use an h3 inside this card and give it the card-header class.

b. Add the text: "Reserve a Campsite".

c. Add Bootstrap classes to give it a teal ("info") background and white text.

3. Card Body: Below the header, add a div with the card-body class. Inside the card body, create a new formelement containing three row divs, as follows:

a. Row 1:

i. Label: "Number of Campers".

ii. Dropdown: Use an appropriate HTML element to allow users to select an option from a dropdown list of options. The options should start with "Select..." and then list numbers from 1 to 6. Give this element appropriate attributes, including a name and id, and wrap this element in

a column div.

b. Row 2:

i. Label: "Date".

ii. Input Field: Users should input a date here. Give this element appropriate attributes, including type, id, name, and placeholder. Wrap this element in a column div.

c. Row 3:

i. Create a column div, and inside this div, create a button. Label it "Search". The button doesn't need to do anything at this time, but its type should be "submit."

ii. Use the Bootstrap button classes to give it the base styles and make it blue (primary).

E. Responsiveness and Styling:

1. Column Layout: On XS screens, make sure the labels and their associated inputs or dropdowns stack atop one another. For all other viewports sized small and up, the columns should sit side by side, each consuming half the available space.

2. Margin Bottom: Ensure each row gets a little space at the bottom by using a Bootstrap margin, size 3.

3. Form Styles: Use the col-form-label and form-control classes on the appropriate elements for a polished look.

Task III: Header Button

A. Form ID: Add an id of "reserveForm" to the form you created in Task 2.

B. Create a new button in the header:

1. Location: Add a button in the header. This button should be placed to the right of the "Nucamp" text.

2. Design: Style the button with Bootstrap. Aim for a teal-colored, large button with white text, as shown in the screenshot below.

3. Function: This button, when clicked, should take the user to the "reserveForm" at the bottom of the page. Use an anchor link for this.

4. Layout: Wrap the button in its own column div, and ensure this div spans across:

a. 4 columns for MD viewports.
b. 2 columns for XL viewports.
c. For XS viewports, it should naturally stack.
d. Add a size 4 top margin to this div using Bootstrap's spacing utility.

5. Optional Text Wrapping Note:

a. The "Reserve Campsite" text inside the button might break into two lines due to Bootstrap updates.
b. If you prefer the text on one line, use the text-nowrap class on the button's anchor element. This is not required