Question: It is T3 Coding Challenge 4: Debug. I have got all of the steps except the 5th check mark. I have included what I have
It is T3 Coding Challenge 4: Debug. I have got all of the steps except the 5th check mark. I have included what I have done so far minus the comments at the top but starting with /* Page Body Styles */.
/* Page Body Styles */
body {
width: 90%;
min-width: 600px;
max-width: 1024px;
margin: 10px auto;
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-areas: "headers headers headers";
grid-template-areas: "links links links";
grid-template-areas: "navs main sides";
grid-template-areas: "navs coupons sides";
grid-template-areas: "footers footers footers";
grid-gap: 10px 25px;
}
/* Grid Areas */
header {
grid-area: headers;
}
nav.horizontal {
grid-area: links;
}
nav.vertical {
grid-area: navs;
}
article {
grid-area: main;
}
section {
grid-area: coupons;
}
aside {
grid-area: sides;
}
footer {
grid-area: footers;
}
/* Image Styles */
header img {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal ul {
width: 100%;
display: grid;
grid-template-columns: repeat (5, 1fr);
}
nav.horizontal ul li {
display: block;
text-align: center;
}
/* Coupon Section Styles */
section {
display: grid;
grid-template-columns: repeat (3, 1fr);
grid-gap: 20px;
}
section div {
outline: 4px dashed gray;
position: relative;
}
section div p:last-of-type {
position: absolute;
bottom: 1px;
right: 5px;
}
Step by Step Solution
3.58 Rating (155 Votes )
There are 3 Steps involved in it
Below find the Solution body width 90 minwidth 600px maxwidth 102... View full answer
Get step-by-step solutions from verified subject matter experts
Study Help