Hi everybody!
This is my first post, and I’m just starting to learn html and css…
This is my first page I have made (or try to make).
I have made 4 boxes (two red, two blue), and they shoud be below each other, not as now, where the red ones are on top of the blue ones…
As I said, this is my first attemt, so please bear with me 
One other thing is, I would like the footer to be fullwidth, but cant figure out how to.
Thank’s in advance, if someone wants to help me with these thing <3
<div class="wrapper">
<div class="logo"><p>LOGO</p></div>
<div class="topnav">
<a class="active" href="#portfolio">Portfolio</a>
<a href="#om">Om</a>
<a href="#kontakt">Kontakt</a>
</div>
<div class="banner"><h3>Hej!<br>
text text text<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class=r1> blue box R1 </div>
<div class=l1> dark blue box L1 </div>
<div class=r2> red box R2 </div>
<div class=l2> dark red box L2 </div>
Footer
body {
padding: 0;
font-size: 140%;
margin: 0% 10% 0%;
}
.wrapper {
width: 100%;
}
.logo p {
padding: 10px 20px;
}
.topnav a {
font-family: sans-serif;
padding: 50 10px;
font-size: 15px;
width: 20px;
text-align: center;
text-decoration: none;
text-decoration: none;
margin: 10px 2px;
color: #3E474F;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
img {
max-width: 100%;
}
.logo {grid-area: logo;
}
.topnav {grid-area: topnav;
text-align: right;
padding: 10px;
padding-right: 25px;
}
.banner {grid-area: banner;
background-color: #FFF0CF;
color: dimgray;
padding: 10px;
text-align: center;}
/* BLOKKE START */
.r1 {grid-area: r1;
background-color: skyblue;
font-family: sans-serif;
color: white;
text-align: center;
height: 200px;
padding: 10px;}
.l1 {grid-area: l1;
background-color: darkblue;
font-family: sans-serif;
color: white;
text-align: center;
height: 200px;
padding: 10px;}
.r2 {grid-area: r1;
background-color: palevioletred;
font-family: sans-serif;
color: white;
text-align: center;
height: 200px;
padding: 10px;
}
.l2 {grid-area: l1;
background-color: darkred;
font-family: sans-serif;
color: white;
text-align: center;
height: 200px;
padding: 10px;}
/* BLOKKE SLUT */
.footer {grid-area: footer;
background-color: #3E474F;
color: white;
height: 150px;
padding: 10px;
text-align: center;}
.wrapper {
display: grid;
grid-template-areas:
“logo”
“topnav”
“banner”
“r1”
“l1”
“r2”
“l2”
“footer”;
}
@media only screen and (min-width: 500px) {
.wrapper {
grid-template-columns: 50% auto;
grid-template-areas:
“logo logo”
“topnav topnav”
“banner banner”
“r1 r1”
“l1 l1”
“r2 r2”
“l2 l2”
“footer footer”;
}
}
@media only screen and (min-width: 600px) {
.wrapper {
grid-template-columns: 250px auto 250px;
grid-template-areas:
“logo logo logo logo”
“topnav topnav topnav topnav”
“banner banner banner banner”
“r1 r1 l1 l1”
“r2 r2 l2 l2”
“footer footer footer footer”;
}
.topnav {
color: aqua;
text-align: right;
border: black;
}
}
