TASK $2$: CONFIGURE THE CSS $(5$ points$).$ You will use a text editor application such as

notepad or notepad$++$ to open and modify the coffee.css file. Review the image above. Notice how

the text labels for the form controls are on the left side of the content area. Notice the empty space

WEBD$101$: Page $4$ of $7$

between each form control. When displaying on a narrow viewport, the display will be more

pleasing if there is only one column, as shown in the figure above. Open coffee.css in a text editor.

Configure the CSS as follows:

a$.$ Code a selector right after the #heroguitar for an id named herojobs $($#herojobs$)$ with $300$px

height. Set the background image to coffeecup.jpg$.$ The background image will not repeat.

Also configure background$-$size: $100\%100\%.$

b$.$ Configure the single column display for narrow viewports using flexbox. Add the following

CSS at the end of the file to configure the form element selector as a flex container with one

column, $1$em left padding, and $80\%$ width.

form $\{$ display: flex;

flex$-$direction: column;

padding$-$left: $1$em; width: $80\%$;

$\}$

c$.$ Create a label element selector to float to the left with block display. Set the text alignment to

left, assign a width of $8$em$,$ and set $1$em right padding.

d$.$ Configure the input element and textarea element selectors with block display and $1$em of

bottom margin.

e$.$ Configure an id named mySubmit with a $9\mathrm{.}5$em left margin.

Save the coffee.css file. Copy and paste the CSS code from the coffee.css file into the W$3$C CSS

code validator to make sure it validates with no syntax errors.