aus html eine css anfertigen

Hallo an alle Könner und Helfer...stehe auf dem Schlauch. Ich benötige aus dieser HTML Datei eine dazugehörige CSS damit das ganze aussieht wie auf dem Bild. Kann, wer helfen? bild
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>11.01</title>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
padding:10px;
background:#989491;
}
header{
padding:15px;
flex:2;
background:#63966e;
}
header h1{
text-align:center;
background:#a0bda6;
margin-bottom:10px;
}
header nav{
padding:10px;
background:#a0bda6;
}
header nav ul{
display:flex;
}
header nav ul li {
flex:1;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX