Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
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.

Fundamentals of Information Systems
Fundamentals of Information Systems
9th Edition
ISBN:9781337097536
Author:Ralph Stair, George Reynolds
Publisher:Ralph Stair, George Reynolds
Chapter10: Ethical, Legal, And Social Issues Of Information Systems
Section: Chapter Questions
Problem 14SAT
See similar textbooks
icon
Related questions
Question

Write the whole HTML page from the DOCTYPE declaration to the closing HTML tag and include:

  1. A header element with the heading: "I love kitty cats"

  2. A navigation element including links to "Cat 1" and "Cat 2" which link to cat1.html and cat2.html respectively.

  3. 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";

  4. 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:

  1. Use flexbox to make the nav items sit side-by-side;

  2. Make the image take up the whole width of its parent container, on all screen sizes;

  3. 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;

  4. On screens wider than 1200px only, give the whole page a width of 960 pixels and centre the page on the screen;
  5. 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
Transcribed Image Text: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
steps

Step by step

Solved in 5 steps with 4 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Image Element
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
  • SEE MORE QUESTIONS
Recommended textbooks for you
Fundamentals of Information Systems
Fundamentals of Information Systems
Computer Science
ISBN:
9781337097536
Author:
Ralph Stair, George Reynolds
Publisher:
Cengage Learning
Fundamentals of Information Systems
Fundamentals of Information Systems
Computer Science
ISBN:
9781305082168
Author:
Ralph Stair, George Reynolds
Publisher:
Cengage Learning
SEE MORE TEXTBOOKS