1 Description
The objective of this assignment is to expose you to the layering and positioning features that CSS provides. In this assignment you will create the rainbow squares page. The page itself will only contain the html (no styling). Styling will be placed in a separate file.
2 Requirements
Develop the rainbow squares page as seen below using HTML5 and CSS. Your styling should be contained within a separate file. Please pay careful attention to the color settings and overlay behavior of each square: from top to bottom, the color of each square corresponds to a color of the rainbow and each subsequent square overlaps the preceding one. However, the text and border color of each square corresponds to the colors of the rainbow from bottom to top. The odd square out (the black one) should be positioned relative to the right side of the square, whereas all of the others should be positioned relative to the left. This will allow the black square to move from left to right as the screen size changes.
You should test your webpage with either Firefox or Chrome. Tell us which was used at the bottom of your webpage.
3 Evaluation
Your submission will be graded on the following items:
HTML and CSS files pass w3schools validator (http://validator.w3.org) without errors. Warnings are accepted. 20 points
Styling is present in a separate file. 10 points
Each square is colored accordingly. 10 points
Border and text colors are correct. 10 points
Squares overlap each other. 10 points
All text appears in italics. 5 points
At the bottom of the webpage, tell us which browsers you used to test your HTML. Should include at least Firefox or Chrome. 5 points
Your submission should be packaged in a zip file. When opened, it must create a directory titled ‘<UMN internet ID’ containing all of your files. 10 points
