Task 1: Create the HTML and CSS code needed to reproduce the following web application interface. Extend your code by including the JavaScript functionality listed in “Design Requirements”. You must use the same layout and inclusions as shown below. Design Requirements: ? The heading text should be displayed within a h2 element. ? All images must have their border specified within the same CSS ruleset (see “Design Resources”). ? The above ruleset should also adjust the width of each img element to 110px. ? A border radius effect with a shorthand value of 5px 15px must be applied to each image. ? The text featured directly beneath the images should be displayed within a h3 element. ? The input element that follows must have its alignment set by a ruleset with an ‘attribute’ selector. ? The abovementioned ruleset should also adjust the width of the input element to 500px. ? A placeholder attribute must be included where appropriate. ? Double-clicking the first image should display a JavaScript prompt (see Figure 1). ? The value entered into the prompt must then be displayed within a JavaScript alert (see Figure 2). ? Moving the mouse over the second image should alter the text contained within the h3 element. ? The altered text must match the output displayed within the “Final State” image (see Figure 3). ? Scrolling the mouse wheel over the third image should display a text value inside the input element. ? The text value must also match the output shown within the “Final State” image (see Figure 3).