HTML/CSS Refactor Project

In this project, you will be given a page in HTML/CSS built for you. Your job is to follow the instructions below and make the necessary changes to the HTML and CSS.

For every specification you complete, make a new branch and go through the process of committing your changes, pushing, and merging when they're completed.

Clone the starter.

Part 1: Nav

CSS:

• The links still have the bullets as default with li elements.
• The links should be spaced evenly along the nav instead of on the left.
• The links are also small and hard to read. Increase the font size and bold them.

Part 2: Articles

HTML:

• The two articles should go one after the other instead of split by the list section.
• In Article 1, split the last paragraph into two separate paragraphs.
• In Article 2, combine the two paragraphs into a single paragraph.

Part 3: List

HTML:

• Right now the elements in the list aren't actual list elements. Make each fruit an li element in an ordered list instead of an unordered list.
• The list should also be in alphabetical order.
• The list also seems long with there being a lot of empty space to the right of it. Split the list into two columns.

Part 4: Form

HTML:

• The order of the form is incorrect right now. What the order should look like is:
  • First name
  • Last name
  • Email
  • Comments
  • Submit button
• The last name element should only have one input element instead of two.
• The comments input seems rather small for lengthy comments. Make it a multi-line text input.

CSS:

• Change the format from vertical to horizontal.

Part 5: General Styling

• The color scheme for the page right now is very unappealing. Customize the color scheme using a palette of your choosing. You may want to check out coolors to generate complementary color schemes.

• Change the font to something softer (e.g. Arial, Helvetica).