Archiv-Modus von Basti1012 Lösungspage

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? <img class="vorschau" src="image/css_anfertigen.jpeg" alt="bild">

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;
  list-style:none;
}
header > nav > ul > li > a{
  font-size:20px;
  display:block;
  text-align:center;
}
main{
  flex:6;
  display:flex;

  padding:20px;
  background:#afa7a3;
}
main section{
  flex:4;
background:#f99b30;
  padding:15px;
  margin-right:20px;
}
main section article{
  display:flex;
  flex-direction:column;
  background:#f1c176;
  padding:10px;

}

main section article header{
  flex:1;
  background:#ffe2ca;
}
main section article figure{
  flex:5;
  background:#ffe2ca;
}
main section article p{
  flex:1;
  text-align:center;
  background:#ffe2ca;
  margin-top:5px;
  
}
main section  article figure figcaption{
  text-align:center;
  padding:10px 0;
}

main aside{
  flex:1;
  display:flex;
  flex-direction:column;
  background:#86b7e4;
  padding:10px;
}
main aside ul{
    displax:flex;
    flex-direction:column;
}
main aside h3{
  text-align:center;
  margin-bottom:10px;
  padding:5px 0;
  background:#c3d0ea;
}
main aside ul li{
  list-style:none;
  margin:5px 0;
  padding:5px;
}
main aside ul li a{
  display:block;
  text-align:center;
  background:#c3d0ea;
}
footer{
  flex:1;
}

footer{
  background:#656977;
  max-height:50px;
}
footer p{
  text-align:center;
  color:white;
  display:block;
font-size:3em;
}
  </style>
</head>
<body>
<header>
  header
   <h1>H1</h1>
   <nav>
       <ul>
           <li><a href="#">Link</a> </li>
           <li><a href="#">Link</a> </li>
           <li><a href="#">Link</a> </li>
       </ul>
   </nav>
</header>
<main>

   <section>
       Section
       <article>
           article
           <header class="articleHeader">Header</header>

           <figure>
               <figcaption>FigureCaption</figcaption>
           </figure>

           <p>Paragraph</p>
           <p>Paragraph</p>
       </article>
   </section>
   <aside>
       <h3>H3</h3>
       <ul class="asideUl">
           <li><a href="#">Link </a></li>
           <li><a href="#">Link </a></li>
           <li><a href="#">Link </a></li>
       </ul>
   </aside>
</main>
<footer>
   <p class="footerP">Footer</p>
</footer>
</body>
</html>

basti1012.bplaced.net

aus html eine css anfertigen

Code