Name the home page simple.html. It should contain your full name, plus links to animals.html, minerals.html, and vegetables.html.

In the css directory create one and only one CSS file, named simple.css. Put all your CSS code in simple.css.

Do NOT use CSS Flex or Grid to do this assignment

animals.html should contain a level two heading which says "Animals." Below the heading use a pair of main tags to hold the main content. Inside the main tags create four [4] sections. Each of the four sections should contain::

A level four heading showing the name of an animal.

A paragraph telling us about the animal. The paragraph should be about 250-300 words. We want enough text to see the page be responsive.

minerals.html should contain a level two heading which says "Minerals." Below the heading use a pair of main tags to hold the main content. Inside the main tags create four [4] sections. Each of the four sections should contain:

A level four heading showing the name of a mineral.

A paragraph telling us about the mineral. Again, use a good chunk of text.

vegetables.html should, you guessed it, be structured exactly like animals.html and minerals.html, but the subject is vegetables.

Do not add links on the animals, vegetables and minerals page. Each page should have this structure within the body tags:header

h2 ... /h2

/header

mainsection

h4 .. /h4

p .. /p

/section

section

h4 .. /h4

p .. /p

/section

section

h4 .. /h4

p .. /p

/section

section

h4 .. /h4

p .. /p

/section

/main

Styling: Use one external style sheet named simple.css to style all the HTML pages.

Do NOT use CSS Flex or Grid to do this assignment

The styling should use classes and media queries, as appropriate, to make the pages responsive, as follows:

animals.html: on a mobile device, each section should go all the way across the viewport; in other words, the sections should have a width of 100%. When the viewport is 500px or wider, the sections should display two across; in other words, each section should have a width of 50%. When the viewport is 1000px or wider, the sections should display four across.

minerals.html: at each breakpoint [500px and 1000px], change the background color of the sections.

vegetables.html: at each breakpoint [500px and 1000px], change the font color and font size of each section.

Do NOT use CSS Flex or Grid to do this assignment

Video demo: Watch this video demoLinks to an external site. showing how each HTML page should respond to the breakpoints. The video shows exactly how the completed assignment should look. Do not do anything extra or different. Don't forget: no images.

Indentation: Be sure you indent the HTML and CSS correctly. If you are not sure what correct indentation looks like, take a look at Shay Howe's code. If your indentation is incorrect I will deduct 10 points from your grade. I can't understand your code if it is not indented properly, and neither can you.