metehandoenmez / html-css-group-ex-mar-27 Goto Github PK

We will be reusing project files from last time.

Start by editing the grid.html and grid.css files in this repo. Add the style code at the end of the style.css file.

We will be building the layout in layout1.png

Inside of body, add a div with id "body-container";

• create a header tag
• create an h1 tag with text "Header" inside the header tag. Make sure the Header text is centered.
• create an aside tag
• create an unordered list of 5 elements, each with text Item 1 - 5 inside of it
• style the list so that the text is centered in the container.
• add an article tag inside the "body-container" div
• add 3 images inside of it, with width and height 150px, source assets/image1.png.
• make them spaced out evenly inside their parent; give the article tag a padding of 20px;
• create a footer tag, with an h4 tag with text "Footer" inside of it. Make sure the Footer text is centered

Style the "body-container" div:

• background-color #c4ebf9
• add a min-width: 100%; to it
• add padding: 35px;
• make it display grid.
• define your columns and rows using grid-template-columns and grid-template-rows
• aside tag should be 40% the size of the article tag.
• add a gap between the items in the grid, using gap, of 30px;
• header an footer should be of height 80px

Header, footer should have background-color #02bfb1; Aside should have background color #6edb6e; Article tag should have background color #fbb04c;