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
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 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.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F8edf343a-02ab-4ce4-8a88-39991bcb784d%2F1f4604a5-cc3d-4276-9f64-baba98cbdb48%2Fj65h3v_processed.png&w=3840&q=75)
Step by step
Solved in 2 steps
