Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

These instructions are for those of you who choose to use floats for your page. If you want to use flexbox, you can set the

These instructions are for those of you who choose to use floats for your page. If you want to use flexbox, you can set the display of the parent containers to flex, and then alter the widths/margins of the flex items (child elements) from there. You could realistically leave the .row styles and add display: flex to the .row CSS declaration for this part.
You can also use other methods as you see fit, but I wouldnt recommend trying to use the position property as it is cumbersome and difficult to do. Please note that this list isnt exhaustive, it will help get you started. You may edit the HTML to better fit your positioning method. The only caveat is that the content should remain the same on the page as far as text, images, links, etc.
General/Body Styles
Add a font-size of 16px to the body and set the margin to 0
Give the container a max-width of 900px, a width of 100%, and center it with margin: 0 auto
Most containers have a padding of 10px
Border-radius has been set to 10px for any rounded corners
Border-radius has been set to 50% for circular images
Link tag colors have been altered
Images have a max-width of 100%
Header Styles
I gave the header a height of 4.5em, a black background, a white color, and padding of 0 on top/bottom and 10px on the left/right sides
The h2 is floated to the left with some margins on it
The nav has a margin on top of it (1.8em) and is also floated to the left
Aside Styles
Aside has been floated to the left and has a width of 30% and a margin on the right side of 5%
Both images are centered, the first one has a 2px solid black border, the second one is circular
Main Styles
The main class is also floated to the left with a width of 65%
The images in the section tags are floated with a margin around them
The paragraphs In the section tags have no margin on top
The blog posts have a width of 45% and margins of 2.5% on all sides
The images/containers in the blue blog posts have a top-left and top-right border radius applied
The blog post h4 tags have margin applied: .5em .5em 1em
The blog post p tags have padding applied: 0.5em
Footer Styles

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions