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?
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;
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>