I need to split these into grid.html and grid.cssand to make I need help because right now my style is not working what I have so far below <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid</title><style type="text/css"> header { text-align: center; font-size: 32px; color: white; background-color: #000000; padding: 29px;}* { box-sizing: border-box; } footer { background-color: #000000; padding: 9px; text-align: center; color: white;}img { float: left; width: 60%; padding: 19px; height: 310px; background: #808080;}main { float: left; width: 40%; padding: 19px; background-color: #800000; height: 310px;}div.image-cell { display: table; clear: both;}</style></head><body><div class="grid-container"><header><h2>Welcome to Grid!</h2></header> <div class="image-cell"> <img src="#image_url" alt="image" width="100" height="500"> <main> <p>lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph</p> </main> <div><footer> <p>2021</p></footer></div></body></html> **Part 2 – Grid**The goal of this section is to create a simple grid layout for a webpage using grid:![A sample image of a webpage grid layout, showing a division of sections with text and an image of a classical statue. The layout includes a header with the text "Welcome to Grid!", a section with a paragraph, and a footer labeled "©2021".]---**Instructions:**Add the following HTML Structure to `grid.html`:- **Body** - Division element (w/ class "grid-container") - Header - "Welcome to Grid!" - Division element (w/ class "image-cell") - Image element - Main - Paragraph - "Lorem Ipsum" (1 paragraph) - Footer - "©2021"Set the `src` attribute on the image element to this URL: `https://loremipsum.io/assets/images/lorem-ipsum-generator-cicero-engraving.png`**Style Requirements:**Create selectors and blank rules for the following elements:- Body- div.grid-container- Header- div.image-cell- Main- Footer**Body:**- Remove all default margins from this element.- The text color of all content should be white.---This section guides users through creating a basic webpage layout using the CSS grid system. Users will learn how to structure their HTML and apply basic styling to create a visually appealing and functional grid layout. ## Educational Content on Grid and Flexbox Layouts### Div.grid-container- **Grid Setup:** - Make this element a grid container. - Configure the grid to have six columns of equal size using fractional units (fr). - Configure the grid to have six rows of equal size using fractional units (fr).- **Size and Background:** - Set the element's width to 100% of its parent’s width. - Set the background color to pink.### Header- **Column and Row Spans:** - The element spans six columns, starting in the first column. - It spans one row, starting in the first row.- **Styling:** - Apply a dark background color to the element. - Set the font size to 2.5 times the default font size. - Use a flex container to center its content using flex properties.### Div.image-cell- **Styling:** - Assign a light background color to the element.- **Flexbox Layout:** - Make this element a flex container. - Center its content using flex properties.- **Grid Specification:** - The element spans four columns, starting in the first column. - It spans four rows, starting in the second row.### Main- **Background and Padding:** - Set a unique background color that contrasts well with the white font color. - Add 1em of padding to this element.- **Font and Grid:** - Set the font size to 2 times the default font size. - The element spans two columns, beginning in the fifth column. - Spans four rows, starting in the second row.### Footer- **Grid Parameters:** - Spans six columns, starting in the first column. - Spans one row, starting in the sixth row.- **Background and Layout:** - Set the background color to match the Header’s color. - Implement a flex container. - Center content using flex properties.This detailed guide illustrates how to design a responsive layout using CSS Grid and Flexbox, focusing on setting up grid areas and using flex properties for alignment.

Answered: I need to split these into grid.html…

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

I need to split these into grid.html and grid.css

and to make I need help because right now my style is not working

what I have so far below

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid</title>
<style type="text/css">
header {
text-align: center;
font-size: 32px;
color: white;
background-color: #000000;
padding: 29px;
}

* {
box-sizing: border-box;
}

footer {
background-color: #000000;
padding: 9px;
text-align: center;
color: white;
}
img {
float: left;
width: 60%;
padding: 19px;
height: 310px;
background: #808080;
}
main {
float: left;
width: 40%;
padding: 19px;
background-color: #800000;
height: 310px;
}
div.image-cell {
display: table;
clear: both;
}

</style>
</head>
<body>
<div class="grid-container">
<header>
<h2>Welcome to Grid!</h2>
</header>
<div class="image-cell">
<img src="#image_url" alt="image" width="100" height="500">
<main>
<p>lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph lorem ipsum demo text as a paragraph</p>
</main>

**Part 2 – Grid**

The goal of this section is to create a simple grid layout for a webpage using grid:

![A sample image of a webpage grid layout, showing a division of sections with text and an image of a classical statue. The layout includes a header with the text "Welcome to Grid!", a section with a paragraph, and a footer labeled "©2021".]

---

**Instructions:**

Add the following HTML Structure to `grid.html`:

- **Body**
- Division element (w/ class "grid-container")
- Header
- "Welcome to Grid!"
- Division element (w/ class "image-cell")
- Image element
- Main
- Paragraph
- "Lorem Ipsum" (1 paragraph)
- Footer
- "©2021"

Set the `src` attribute on the image element to this URL:
`https://loremipsum.io/assets/images/lorem-ipsum-generator-cicero-engraving.png`

**Style Requirements:**

Create selectors and blank rules for the following elements:
- Body
- div.grid-container
- Header
- div.image-cell
- Main
- Footer

**Body:**
- Remove all default margins from this element.
- The text color of all content should be white.

---

This section guides users through creating a basic webpage layout using the CSS grid system. Users will learn how to structure their HTML and apply basic styling to create a visually appealing and functional grid layout.

## Educational Content on Grid and Flexbox Layouts

### Div.grid-container
- **Grid Setup:**
- Make this element a grid container.
- Configure the grid to have six columns of equal size using fractional units (fr).
- Configure the grid to have six rows of equal size using fractional units (fr).
- **Size and Background:**
- Set the element's width to 100% of its parent’s width.
- Set the background color to pink.

### Header
- **Column and Row Spans:**
- The element spans six columns, starting in the first column.
- It spans one row, starting in the first row.
- **Styling:**
- Apply a dark background color to the element.
- Set the font size to 2.5 times the default font size.
- Use a flex container to center its content using flex properties.

### Div.image-cell
- **Styling:**
- Assign a light background color to the element.
- **Flexbox Layout:**
- Make this element a flex container.
- Center its content using flex properties.
- **Grid Specification:**
- The element spans four columns, starting in the first column.
- It spans four rows, starting in the second row.

### Main
- **Background and Padding:**
- Set a unique background color that contrasts well with the white font color.
- Add 1em of padding to this element.
- **Font and Grid:**
- Set the font size to 2 times the default font size.
- The element spans two columns, beginning in the fifth column.
- Spans four rows, starting in the second row.

### Footer
- **Grid Parameters:**
- Spans six columns, starting in the first column.
- Spans one row, starting in the sixth row.
- **Background and Layout:**
- Set the background color to match the Header’s color.
- Implement a flex container.
- Center content using flex properties.

This detailed guide illustrates how to design a responsive layout using CSS Grid and Flexbox, focusing on setting up grid areas and using flex properties for alignment.

Expert Solution

Step by step

Solved in 2 steps

SEE SOLUTION Check out a sample Q&A here