<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Header Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-size: 1.2rem;
margin: 0.5rem 0;
}
h2 {
font-size: 1rem;
margin: 0.5rem 0;
}
p {
font-size: 1rem;
margin: 0.5rem 0;
}
}
/*Grundlayout - mobile first*/
/*Sticky Footer Layout*/
/* Hack für IE 10 und IE 11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
html {
height: 100%;
}
}
@media all {
body {
min-width: 1000px;
min-height: 100vh;
height: 100%;
margin: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
body>div {
margin: 0;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
}
@media only screen and (min-width: 1000px) {
}
/*header*/
@media all {
header {
background-color: hsla(0, 66%, 35%, 1);
padding: 0;
}
nav {
background-color: white;
color: black;
margin-top: 1rem;
padding-bottom: 5px;
display: flex;
justify-content: center;
}
nav a {
background-color: white;
color: black;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
outline: none;
text-transform: uppercase;
display: flex;
align-items: flex-start;
}
nav a:nth-child(2)::before,
nav a:nth-child(2)::after {
content: "|";
font-size: 1.2rem;
padding: 0 1rem;
margin-top: 0.05rem;
}
header>div {
width: 908px;
border: 5px solid black;
margin: -5px auto;
display: flex;
}
header>div>section {
width: 454px;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
header>div>section:nth-child(1) {
background-color: hsla(195, 25%, 28%, 1);
}
header>div>section:nth-child(2) {
background-color: hsla(197, 25%, 57%, 1);
}
header>div>section h2 {
color: white;
padding: 3rem 0;
}
}
/*Grundlayout Inhaltsbereich*/
@media all {
body>div {
display: flex;
margin-top: 5px;
}
body>div>main {
background-color: hsla(227, 100%, 50%, 1);
width: 908px;
border-left: 5px solid red;
border-right: 5px solid red;
margin: 0;
margin-bottom: -4rem;
}
body>div>main p {
color: white;
font-size: 1.2rem;
margin: 0.5rem;
}
body>div>:nth-child(2) {
order: -1;
}
body>div>:nth-child(1n+2) {
flex: 1 1 auto;
}
}
@media only screen and (min-width: 1000px) {
}
/*footer*/
@media all {
footer {
background-color: black;
border-radius: 70% 70% 0 0;
}
footer>div {
margin: 0 auto;
width: 908px;
display: flex;
justify-content: center;
}
footer>div h2 {
color: white;
margin: 1rem 0 2rem 0;
}
}
</style>
</head>
<body>
<header role="banner">
<nav role="navigation">
<a href="">Home</a>
<a href="">About us</a>
<a href="">Media</a>
</nav>
<div>
<section>
<h2>left section</h2>
</section>
<section>
<h2>right section</h2>
</section>
</div>
</header>
<div>
<main role="main">
<p>Es geht bei dieser Seite nur um den header oberhalb dieses Textes. Der Rest dient nur dazu eine gesame Seite anzuzeigen um einen Gesamteindruck zu bekommen.</p>
</main>
<div>
</div>
<div>
</div>
</div>
<footer role="contentinfo">
<div>
<h2>footer</h2>
</div>
</footer>
</body>
</html>
