Instructions

In this assignment, you are given a pre-created HTML-only web site and instructions on what CSS to write to style it.

For this assignment, you will only need to make changes to the style.css file.

Write the html code for the following instructions to put in the style.css file.

Please add the following styles to the given web pages:

On the body...

Set the font-family to sans-serif

To create the header...

On the header...

Add a padding of 1em

Set display to flex

Set justify-content to space-between

Set align-items to center

On the img in the header...

Set the height to 80px

On the ul in the nav in the header...

Set padding and margin to 0 to remove the default list spacing

Set list-style to none to remove the bullets

Set display to flex

Set justify-content to flex-end to align the list items to the right

Add a 1em gap

n every a inside of the ul in the nav in the header...

Override the default link color with black

Remove the default link underlines by setting text-decoration to none

When you hover on every a inside of the ul in the nav in the header...

Set the text-decoration to underlined, to make it more obvious that the navigation links are links

To create the features section...

On the features container...

Add a 1em margin

Set display to flex

Set flex-direction to column

Set align-items to center

On the feature-cards wrapper...

Set a 1em margin

Set the max-width to 960px

Set display to flex Set flex-direction to column

Add a 1em gap between each feature card

On each feature-card...

Add a 2em padding

Add a border that is 1px thick, solid, and lightgray

Set display to flex

Set justify-content to center

Set align-items to center

Set flex-wrap to wrap

Add a 1em gap

On each img inside each feature-card...

Set the width to 100px Add a 2em margin

On the measure-feature...

Set flex-direction to row-reverse to swap the position of the image and the text without affecting the wrapping

To create the footer...

On the footer...

Add a 1em padding

Set display to flex

Set align-items to center

Add a 1em gap

On the img in the footer...

Set the width to 40px