Create a scrapbook site using HTML and CSS. The site will contain images, audio, video, and explanatory text for a topic of your choice. Choose a topic that lends itself to the use of images, audio, and video. It may be a learn-how-to site (one that shows images of certain types of trees or flowers, for instance) or a personal scrapbook for an occasion or time period in your life.

Specific requirements:

Your home page, index.html, will serve two purposes:

It will describe the topic/purpose of your site (a short paragraph with an accompanying image).

It will list the required features for the assignment (given in #2 below) and the page on which they will be found. Clicking any of the list items will lead directly to that feature. The bullet for each item in the list should be an image that represents the topic of your site.

You will need a header and logo at the top of this page. This header and logo should repeat on all pages. On all but the home page, the logo should link back to the home page.

Include a navigation menu with links to all pages except the home page. This navigation menu should repeat on all pages, with the link for the current page highlighted. Although you will use a different font for the main content on each page (see item #3 below), the font for the navigation menu should be the same on all pages.

Create the navigation menu as a linked list. Remove the bullets from the list, and style it in a horizontal line (display: inline; or display: inline-block;).

You will need to incorporate the following items into your site. You must use at least three pages in addition to index.html, but you may use more if you wish. Each page should have some text describing the content of the images, audio, or video. Use an attractive layout for all pages.

rollover images

thumbnail images

image map

embedded audio (use the HTML5 audio element to link to an audio file stored with your website)

embedded video (use the HTML5 video element to link to a video file stored with your website)

At least two different images that are transformed over a 2-3 second period (each image uses a different transformation)

At least two different images with filters applied (each image uses a different filter)

Using embedded and web-based fonts:

Use an embedded font for the main content on index.html

Use a Google Web Font for the main content on another page in your site.

Use an Adobe Edge Font for the main content on another page in your site.

Use a media query for the index.html page so that the image in the first paragraph disappears on a narrow screen. Also for the narrow screen, have the navigation menu on display vertically (display: block).