h1 { text-algin: center; } h1,h2,h3 { font-family: "Montez", cursive: font-weight:900; font-style:normal; color:darkblue } * { box-sizing: border-box; } .grid-container { display: grid; grid-template-areas: 'header' 'menu' 'main' 'facts' 'footer'; background-color: lightblue; gap: 10px; } div#Über mich{ width: 50% background-color:darkblue; color: #ffffff } div{ color:darkblue } body { /*Eigenschaften*/ background-color:lightblue; } .header { grid-area: header; background-color: darkblue; 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: darkblue; color: #ffffff; } .menu li:hover { background-color: lightblue; } .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: lightblue; padding: 10px; } .facts > h2 { font-size: 20px; } .facts li { margin-bottom: 5px; } .footer { grid-area: footer; background-color: darkblue; 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;} }