The Scenario
A startup company wishes to build a website for their online dating business. They have employed a designer who has produced the following design using graphics software. The software used by the designer only produces an image and does not produce HTML.
The company has now contracted you to implement the design, i.e. build the web page. The specifications include a working form component. The company thinks the designer has done a great job and wants you to implement the design without modifications.
Here is a mockup of the page that the client wants you to build:

Technical Overview
From a technical point of view, the webpage is constructed using HTML and CSS. Most of the HTML content are form elements. Some JavaScript will be required, but you will not have to write it, only follow the instructions to include it where needed.

Interactive Features
The client's specifications require you to have two interactive features in the web page.

When the mouse is moved over any form control or its associated label, the label text will turn blue. When the mouse moves off it, it will return to its normal color. This will be accomplished using CSS.
Immediately after the user selects the image of his/her face, the image is to be shown in the web page. A small piece of JavaScript will be provided for you to use for this. However, you are not expected to understand the JavaScript code at this stage, nor should you create any other JavaScript for this assignment.
Assignment Tasks
There are 3 tasks in this assessment.
For Task 1: You will use HTML to create the webpage structure and add content, without any CSS.
For Task 2: Apply visual styles to the webpage using CSS.
For Task 3: Add the interactive features to the webpage.
Each task has been further separated into smaller parts to help organize your approach.
Detailed requirements and instructions are given below.
Special Notes:
You will complete this assignment during the workshop using the Paired Coding method, which your instructor will explain to you before you begin. Paired Coding is a very common collaborative coding method that many teams use, especially with junior developers. Practicing the paired coding method in your workshops will give you experience with this type of collaboration, as well as make the workshop experience more interesting and productive.
As this is a mock client-contractor scenario, you will be graded for accuracy. It is important that you carefully check your work against the design specifications provided to ensure that your finished product exactly matches the design. You should especially check things like spelling, capitalization, and punctuation, as these are commonly overlooked. This exercise will help you fine-tune your attentiveness to small details, which is a critical skill for developers.

TASK 2: Apply visual styles using CSS
Now you will need to apply CSS to make the webpage look like the design given to you by the company. Below are important notes from the designer passed to you by the company. You must use this information in your work.

Use an internal stylesheet - add your CSS rulesets inside a style element in the head of your document. Do not use inline styles.

For the body element, set font-family to Verdana, Arial, sans-serif
For all p elements, set margin to 0.
For all legend elements, set background to purple, set border-radius to 10px, set color to white, set padding to 12px
For all fieldset elements, set background to lavender, border to 10px solid darkblue, border-radius to 20px, margin-bottom to 10px, and width to 720px
For all div elements, set margin to 10px
For all label elements, set display to inline-block, text-align to right, vertical-align to top, width to 200px
Create a ruleset with this selector:
input[type="radio"]+label, input[type="checkbox"]+label
This selector targets all labels that are neighboring siblings of inputs with a type of radio or checkbox. While the code has been provided for you, please try to understand it before you continue.
For all elements matching this selector, set width to auto.
For all elements with a .range-caption class, set background to darkcyan, color to white, padding to 6px, text-align to center
For all input elements with a type of "submit" (hint: use an attribute selector), set background to darkcyan, border-radius to 10px, color to white, font-size to 20px, and padding to 12px.
At the end of Task 2, your assignment should look like this in the Chrome browser (note that the slider may look a little different on Windows and Mac machines, and that is acceptable):