I need to split these into grid.html and grid.cssand to make i need help becase right now my style is not working <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-GridThe goal of this section isto create a simple grid layout for a webpage using grid:Add the following HTML Structure to grid.html:o BodyO Division element (w/ class "grid-container")• HeaderWelcome to Grid!• Division element (w/ class image-cell)• Image element• MainParagrapho Lorem Ipsum (1 paragraph)Footer02021Set the src attribute on the image element to this URL:https://loremipsum.io/assets/images/lorem-ipsum-generator-cicero-engraving.pngStyle RequirementsCreate selectors and blank rules for the following elements:• Body• div.grid-container• Header• div.image-cell• Main• FooterBody• Remove all default margins from this element• The text color of all content should be white Div-grid-container• Make this element a grid container• This grid should have six columns of equal sizeo Use fractional units (fr)• This grid should have six rows of equal sizeo Use fractional units (fr)this element should be 100% of its parent's widthset the background color to pinkНeader• this element spans six columnso it starts in the first columnthis element spans one rowo it starts in the first rowgive this element a dark background colorset the font size to 2.5x the default font sizemake this element a flex containercenter its content using flex propertiesDiv.image-cellgive this element a light background colormake this element a flex containercenter its content using flex propertiesthis element spans four columnso it starts in the first column• this element spans four rowso it starts in the second rowMain• set the background to a unique coloro pick a color that contrasts well with the white font color• add lem of padding to this elementset the font size to 2x the default font sizethis element spans two columnso it starts in the fifth column• this element spans four rowso it starts in the second rowFooter• this element spans 6 columnso it starts in the first columnthis element spans 1 rowo it starts in the sixth rowset the background color equal to the color used for the Headermake this a flex containercenter its content using flex properties

You only need to perform these changes- 1) make new css file 2) copy the code within…

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

100%

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

and to make i need help becase right now my style is not working

<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>