Travel Website

1. Create a website with a home page (index.html) and at least 3 additional pages with the theme of vacations, you can choose any destination. Your html and css documents must be produced using a text processor, such as NotePad or Notepad++ on Windows, or TextEdit on the Mac.

• On each page include the elements (tags) required for a basic HTML5 document, along with reference to any one of the modernizr versions supplied by the textbook. Place the modernizr file in the same folder as your index page and make that file the src for all of your pages. Identify yourself as author by putting your name in the author meta element within the head element.
• The website must include at least four (4) images of your choice, but they must be (broadly) consistent with the theme of Travel. One of these images will be used as a background image for all your web pages; one will be used as a marker for an unordered list; the others will serve to add interest to your website. Do not use images from the textbook. Adjust the sizes of the images as needed. All images, including the provided UK_outline.jpg, must be stored in a separate images folder.
• Be sure that you replace characters with special characters (curly quotation marks, curly apostrophes, em-dashes, etc.)
• Use Free Formatter to "beautify" your html and css files before you turn in your project. https://www.freeformatter.com/

2. Include the following (do not use examples from the textbook):

• At a minimum, you must include header, nav (can be within the header element), article and footer elements on each page. The footers must include your name, the course number, the course title, and the semester.
• Include a skip link on each page.
• You must include an aside element on at least one page, as part of a 2- or 3-column layout.
• Include headings and paragraphs. Each page must include an h1 heading, a minimum of two h2 headings, and a minimum five (5) paragraphs.
• The website must include at least one ordered list and at least one unordered list; one of these lists must contain a nested list. Lists-as-navigation will not fulfill this requirement.
• The current page must not have an active link. For example, in the following nav bar, if you are on the Lunch page your links would appear as Home | Breakfast | Lunch | Dinner where Lunch is not an active link; the active hyperlinks in this example are indicated with underlines. Do not use the breakfast-lunch-dinner example in your project!
• You can choose any destination for the subject of your project. The only page that would have information about UK would be this one that requires the image map. For one of the web page right-click the image below and download UK_outline.jpg for an image map. Create the hotspots for England, Wales, Northern Ireland and Scotland (using the image to right as a guide for the shapes of the hotspots - outlined in red) and corresponding text links (for visually impaired). Use the image map and text links to jump to the relevant terms in a description list (provided in UK.txt file) placed on the same page as the image.
• One table (minimum of 8 rows, 5 columns) containing a header row and data, as well as caption, thead, tfoot, and tbody elements. Include two examples of merged (vertically and/or horizontally) cells. (Do not use examples from class or the textbook.)
• A form which includes fieldset(s), legend(s), textbox, textarea, radio buttons, selection list, check boxes, reset button and submit button. (Do not use examples from the textbook.) The form does not require you do add any action to the submit button.

3. Styling - CSS:

• Styles must be contained in an external style sheet. This will provide consistency in the look and feel" of your website. Your CSS file must have a clear organization. Use CSS template from class (or another organization which clearly indicates logical groupings). Use comments to identify the groupings. Include your name in comment at beginning of each file.
• Choose colors appropriate to your images. Use Kuler (or https://coolors.cou or http://colormind.io ) to determine your color pallet. Do not use examples from the textbook.
• On each page you must use a container div to ensure that the web page can be easily viewed on narrower screens (example - image below). You must use an article element for the main content. Use fixed-width layout or liquid layout of your choice.
• Include and use the following:
  • An external style sheet with appropriate link element in each of the html documents.
  • Background image and background color for the body.
  • Styles for at least three independent classes
  • Styles for at least three id selectors in addition to the ids used for divs
  • Styles for headings (using a display font from Google Fonts) and for body text.
  • Use an image as the marker for your unordered list.
  • Styles for the header, nav, footer and aside elements (use aside for 2- or 3-column layout)
  • Styles for the divs.
  • Styles for hyperlinks: link, visited, hover, active.
  • Styles for skip links.
  • Styles for the table and at least two of its components
  • Styles for two of the components of the description list.
  • Styles for the form and for at least two of its components
  • Validate your both CSS files. Correct any and all errors.