h1 { text-align: center; } h1,h2,h3 { font-family: "Montez", cursive: font-weight: 900; font-style: normal; color: darkgreen } * { box-sizing: border-box; } .grid-container { display: grid; grid-template-areas: 'header' 'menu' 'main' 'facts' 'footer'; background-color: lightgreen; gap: 10px; } div#Über mich { width: 50% background-color:turquoise; color:darkgreen } div{ color:darkgreen } body { /*Eigenschaften*/ background-color:lightgreen; } .header { grid-area: header; background-color: darkgreen; text-align: center; color: #ffffff; } .header > h1 { font-size: 40px; } .menu { grid-area: menu; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color: darkgreen; color: #ffffff; } .menu li:hover { background-color: lightgreen; } .content { grid-area: main; } .content > h1 { font-size: 30px; margin-bottom: 7px; } .content > p { margin-bottom: 7px; } .facts { grid-area: facts; border: 1px solid #0099cc; background-color: lightgreen; padding: 10px; } .facts > h2 { font-size: 20px; } .facts li { margin-bottom: 5px; } .footer { grid-area: footer; background-color: darkgreen; color: #ffffff; text-align: center; } @media (min-width: 600px) { .header {grid-area: 1 / span 6;} .menu {grid-area: 2 / span 1;} .content {grid-area: 2 / span 4;} .facts {grid-area: 3 / span 6;} .footer {grid-area: 4 / span 6;} } @media (min-width: 768px) { .header {grid-area: 1 / span 6;} .menu {grid-area: 2 / span 1;} .content {grid-area: 2 / span 4;} .facts {grid-area: 2 / span 1;} .footer {grid-area: 3 / span 6;} }