In the Lab Chapter $8,$ Pages $456-461$

You have already developed a responsive website and now need to add a table and a form to the website. Use the template.html file to create the Partnership page and add a table to the page. Update the Contact page by adding a form. Figure $873$ shows the Partnership page in mobile and desktop viewports. Figure $874$ shows the form on the Contact page in mobile, tablet, and desktop viewports.

$1.$ Open the template.html file in your text editor and use it to create a new page with the file name partnership.html$.$ Update the comment with the file name and todays date. In the title element, replace the word Template with Partnership.

$2.$ In the partnership.html file, nest a heading $2$ element within the main element $($above the empty div element$)$ that contains the following text: We are grateful for the support from our community partners. We have many sponsorship opportunities.

$3.$ Add a class attribute with the value mobile$-$tablet to the empty div element. Nest the following elements within this div element:

a$.$ Heading $3$ element with the text Sponsorship Levels.

b$.$ Paragraph element with the text Green: $$200.$

c$.$ Paragraph element with the text Blue: $$400.$

d$.$ Paragraph element with the text Red: $$600.$

e$.$ Paragraph element with the text Purple: $$800.$

f$.$ Paragraph element with the text Silver: $$1,000.$

g$.$ Paragraph element with the text Gold: $$1,500.$

h$.$ Paragraph element with the text Each sponsorship supports our animals and operations. Business recognition is given at every sponsorship level. Contact us today to become a sponsor.

$4.$ Insert a new div element below the mobile$-$tablet div element. Add an id attribute with a value of partner to the empty div element nested within the main element. Then, add a class attribute with a value of desktop to the div element.

$5.$ Nest a table within the partner div element. Include a caption with the text Sponsorship Opportunities. Insert seven rows within the table and include a comment for each row to note the row number. Follow the example below:

$6.$ In Row $1,$ add four table header elements and use Sponsorship Level, Dollar Amount, Details, and Sponsorship Benefits as the column header text.

$7.$ Add the following table data to rows two through seven:

Green $$200$ The green sponsorship helps us maintain green pastures for our grazing friends. Recognition on our website.

Blue $$400$ The blue sponsorship helps us provide food for the animals. Recognition on our website and our brochure.

Red $$600$ The red sponsorship helps us provide medical care for the animals. Recognition on our website and our brochure. Business logo displayed on a banner at our facility.

Purple $$800$ The purple sponsorship helps us maintain homes for the animals. Recognition on our website and our brochure. Business logo displayed on a banner at our facility. Business name and logo displayed at the annual community event.

Silver $$1,000$ The silver sponsorship supports our monthly expenses. Recognition on our website and our brochure. Business logo displayed on a banner at our facility. Business name and logo displayed at the annual community event. Recognition plaque with business name prominently displayed within the facility.

Gold $$1,500$ The gold sponsorship supports our operation costs. Recognition on our website and our brochure. Business logo displayed on a banner at our facility. Business name and logo displayed at the annual community event. Recognition plaque with business name prominently displayed within the facility. Display table at the annual community event. Recognition in all media releases.

$8.$ In the styles.css file, locate the mobile style rule for $.$mobile and add the mobile$-$tablet class selector as another selector for this style rule. Locate the mobile style rule for $.$tab$-$desk and add the desktop class selector as another selector for this style rule.

$9.$ In the desktop media query, modify the first comment within the query to$,$ Desktop Viewport: Show desktop class, hide mobile$-$tablet class. Below the $.$desktop style rule, create a new style rule for the mobile$-$tablet class selector that sets the display to none.

$10.$ In the desktop media query, add the following comment after the style rule for aside: $/*$ Style rules for table $*/$

$11.$ Below the comment, add the following style rules:

a$.$ Create a style rule for the table selector that specifies a border with values of $1$px solid #$2$a$1$f$14,$ margins to auto.

b$.$ Create a style rule for the caption selector that specifies a font size of $1\mathrm{.}5$em$,$ font weight of bold, and sets the padding to $1\%.$

c$.$ Create a style rule for th and td selectors that specifies a border with values of $1$px solid #$2$a$1$f$14,$ and sets the padding to $1\%.$

d$.$ Create a style rule for the th selector that sets the background color to $2$a$1$f$14,$ color to white $($fff$),$ and the font size to $1\mathrm{.}15$em$.$

e$.$ Create a style rule for the tr selector that sets the background color to #deccba for odd rows.

$12.$ In the contact.html file, insert a new div element with an id attribute value of form below the contact div within the main element. Insert a heading $2$ element within the form div and include the text Complete the form below and we will contact you soon. Insert a form element with a class attribute value of form$-$grid below the heading $2$ element. Include a comment to note where the form begins. Follow the example below.