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  Grid

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

  <div>
<footer>
  <p>2021</p>
</footer>
</div>
</body>
</html>

 

Part 2-Grid
The goal of this section isto create a simple grid layout for a webpage using grid:
Add the following HTML Structure to grid.html:
o Body
O Division element (w/ class "grid-container")
• Header
Welcome to Grid!
• Division element (w/ class image-cell)
• Image element
• Main
Paragraph
o Lorem Ipsum (1 paragraph)
Footer
02021
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
Transcribed Image Text:Part 2-Grid The goal of this section isto create a simple grid layout for a webpage using grid: Add the following HTML Structure to grid.html: o Body O Division element (w/ class "grid-container") • Header Welcome to Grid! • Division element (w/ class image-cell) • Image element • Main Paragraph o Lorem Ipsum (1 paragraph) Footer 02021 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
Div-grid-container
• Make this element a grid container
• This grid should have six columns of equal size
o Use fractional units (fr)
• This grid should have six rows of equal size
o Use fractional units (fr)
this element should be 100% of its parent's width
set the background color to pink
Нeader
• this element spans six columns
o it starts in the first column
this element spans one row
o it starts in the first row
give this element a dark background color
set the font size to 2.5x the default font size
make this element a flex container
center its content using flex properties
Div.image-cell
give this element a light background color
make this element a flex container
center its content using flex properties
this element spans four columns
o it starts in the first column
• this element spans four rows
o it starts in the second row
Main
• set the background to a unique color
o pick a color that contrasts well with the white font color
• add lem of padding to this element
set the font size to 2x the default font size
this element spans two columns
o it starts in the fifth column
• this element spans four rows
o it starts in the second row
Footer
• this element spans 6 columns
o it starts in the first column
this element spans 1 row
o it starts in the sixth row
set the background color equal to the color used for the Header
make this a flex container
center its content using flex properties
Transcribed Image Text:Div-grid-container • Make this element a grid container • This grid should have six columns of equal size o Use fractional units (fr) • This grid should have six rows of equal size o Use fractional units (fr) this element should be 100% of its parent's width set the background color to pink Нeader • this element spans six columns o it starts in the first column this element spans one row o it starts in the first row give this element a dark background color set the font size to 2.5x the default font size make this element a flex container center its content using flex properties Div.image-cell give this element a light background color make this element a flex container center its content using flex properties this element spans four columns o it starts in the first column • this element spans four rows o it starts in the second row Main • set the background to a unique color o pick a color that contrasts well with the white font color • add lem of padding to this element set the font size to 2x the default font size this element spans two columns o it starts in the fifth column • this element spans four rows o it starts in the second row Footer • this element spans 6 columns o it starts in the first column this element spans 1 row o it starts in the sixth row set the background color equal to the color used for the Header make this a flex container center its content using flex properties
Expert Solution
steps

Step by step

Solved in 2 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY