Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include: A header element with the heading: "I love kitty cats" A navigation element including links to "Cat 1" and "Cat 2" which link to cat1.html and cat2.html respectively. A main element containing: a heading; a paragraph of lorem ipsum text; a 300px wide editorial image using this url: https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg And this caption: "Cute kitty cat"; A footer element with the following content: "semantic html example with a cute kitty". Add internal CSS (and extra HTML if you need to) so that your page looks like the image below and: Use flexbox to make the nav items sit side-by-side; Make the image take up the whole width of its parent container, on all screen sizes; On screens wider than 820px only, use flexbox to make the image of the cat sit next to the written content in the main element; On screens wider than 1200px only, give the whole page a width of 960 pixels and centre the page on the screen; Make any other CSS adjustment you need until the page looks like the image below.
Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include:
-
A header element with the heading: "I love kitty cats"
-
A navigation element including links to "Cat 1" and "Cat 2" which link to cat1.html and cat2.html respectively.
-
A main element containing:
-
a heading;
-
a paragraph of lorem ipsum text;
-
a 300px wide editorial image using this url: https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg
And this caption: "Cute kitty cat";
-
-
A footer element with the following content: "semantic html example with a cute kitty".
Add internal CSS (and extra HTML if you need to) so that your page looks like the image below and:
-
Use flexbox to make the nav items sit side-by-side;
-
Make the image take up the whole width of its parent container, on all screen sizes;
-
On screens wider than 820px only, use flexbox to make the image of the cat sit next to the written content in the main element;
- On screens wider than 1200px only, give the whole page a width of 960 pixels and centre the page on the screen;
- Make any other CSS adjustment you need until the page looks like the image below.
![I love kitty cats
Cats are awesome
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
hendrerit ante turpis, non convallis velit commoda auctor.
Aenean a egestas massa. Suspendisse turpis neque, sodales sit
amet est a, maximus pulvinar metus. Sed hendrerit magna dolar.
sed tincidunt nibh actor sed. Proin vitae dui congue, commodo
orci id, varius sem.
semantic html example with a cute kitty
Cute kity cat](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F7801903d-abd7-4870-9467-e5c58d59c06d%2Fb43626f8-57d9-4a28-ade4-8b94217c5659%2Fzpsm3e_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 5 steps with 4 images
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![Database System Concepts](https://www.bartleby.com/isbn_cover_images/9780078022159/9780078022159_smallCoverImage.jpg)
![Starting Out with Python (4th Edition)](https://www.bartleby.com/isbn_cover_images/9780134444321/9780134444321_smallCoverImage.gif)
![Digital Fundamentals (11th Edition)](https://www.bartleby.com/isbn_cover_images/9780132737968/9780132737968_smallCoverImage.gif)
![C How to Program (8th Edition)](https://www.bartleby.com/isbn_cover_images/9780133976892/9780133976892_smallCoverImage.gif)
![Database Systems: Design, Implementation, & Manag…](https://www.bartleby.com/isbn_cover_images/9781337627900/9781337627900_smallCoverImage.gif)
![Programmable Logic Controllers](https://www.bartleby.com/isbn_cover_images/9780073373843/9780073373843_smallCoverImage.gif)