Question
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,
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.
Do not make any changes to the index.html 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
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started