This is a very small CSS-HTML project which consists of 2 pages. It should look like a multiple-choice online test. All elements should be able to scale to the user's screen size. (What you are designing is part of what will go into a larger page. This is just a portion of the page).
Please see the attached images which show the default sizes. The first image shows the first page which you will need to create: "test1.html". It shows a larger grey box with rounded corners which holds the question, and 4 slightly smaller light-blue boxes with rounded corners which hold the 4 choices for the question.
No images should be used in this project; CSS should be used instead of images.
The 4 choice boxes should all have these features:
* When the user hovers over a box, the color of the box should turn to light-green, as seen in the 3rd choice in the first picture. CSS should control this.
* Each of the choices should be hyperlinked to a different page. The user should be able to click anywhere inside of a choice (even in areas of the box where there is no text) to follow the link (which indicates their answer). CSS should control the hyperlink area as well as the colors.
- choice 1 should link to "bad.html" (you don't need to create this page, but the hyperlink should be in the HTML)
- choice 2 should link to "test2.html" (see below)
- choice 3 should link to "bad3.html" (you don't need to create this page, but the hyperlink should be in the HTML)
- choice 4 should link to "bad4.html" (you don't need to create this page, but the hyperlink should be in the HTML)
* The second attached image shows what the second page ("test2.html") should look like after the user clicks on the 2nd choice from "test1.html".
The 2nd choice should now appear in light-orange to indicate that it was the correct choice. All of the 4 choices on this page should now have a hyperlink of instead of links to different pages because the user has made their choice.
All of the above (the question and 4 choices) should be inside of a .
The 2 finished HTML pages should closely resemble the attached pictures.
Your deliverables will be:
* CSS file
* possibly will need JS and/or JQuery script