I need to split these into grid.html and grid.css
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>
![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](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F8edf343a-02ab-4ce4-8a88-39991bcb784d%2F7dafa68d-9c9c-471a-a8b9-cd7b5833fe8d%2Fcp46bs3_processed.png&w=3840&q=75)
![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](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F8edf343a-02ab-4ce4-8a88-39991bcb784d%2F7dafa68d-9c9c-471a-a8b9-cd7b5833fe8d%2Fdwbfg4l_processed.png&w=3840&q=75)
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 2 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Concepts of Database Management](https://www.bartleby.com/isbn_cover_images/9781337093422/9781337093422_smallCoverImage.gif)
![Prelude to Programming](https://www.bartleby.com/isbn_cover_images/9780133750423/9780133750423_smallCoverImage.jpg)
![Sc Business Data Communications and Networking, T…](https://www.bartleby.com/isbn_cover_images/9781119368830/9781119368830_smallCoverImage.gif)