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.jpegAnd 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 catsCats are awesomeLorem ipsum dolor sit amet, consectetur adipiscing elit. Fuscehendrerit ante turpis, non convallis velit commoda auctor.Aenean a egestas massa. Suspendisse turpis neque, sodales sitamet est a, maximus pulvinar metus. Sed hendrerit magna dolar.sed tincidunt nibh actor sed. Proin vitae dui congue, commodoorci id, varius sem.semantic html example with a cute kittyCute kity cat

The html code and output snapshot is given below

Answered: Write the whole HTML page from the…

Database System Concepts

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE

See similar textbooks

Related questions

Question

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

Expert Solution

Step by step

Solved in 5 steps with 4 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.

Similar questions