cgawron/beispiel_html5.markdown

## beispiel_html5.markdown

      
    Raw
  

              beispiel_html5.markdown
            
          
    Beispiel_HTML5

A Pen by Christian Gawron on CodePen.
License.

  
## index.html
<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <link id="stylesheet" type="text/css" href="style.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>

    <nav>
        <menu>
            <li>Link 1</li>
            <li>Link 2</li>
        </menu>
    </nav>

    <header>
        <h1>Hallo Welt</h1>
        Willkommen in der Vorlesung Internettechnologien.
    </header>

  <div class="flex">
    <aside class="sidebar">
        <h1>titel sidebar</h1>
    </aside>
    <main>
        <article>
            <h1>Artikel</h1>
            <section>
                <h2>titel section</h2>
            </section>
        </article>
    </main>
</div>

    <footer>
        <h1>das ist ein footer</h1>
    </footer>
</body>

## style.css
body {
    display: block;
    font-family: 'Open Sans', sans-serif;
    padding: 0px;
    margin: 0px;
}

.flex {
  display: flex;
}

main {
    display: block;
    background: #E1E2E1;
    flex: 2;
}

.sidebar {
    background: #5472d3;
    width: 200px;
    flex-height: 1;
}

article {
    width: 500px;
}

header {
    display: block;
    background: #002171;
    color: white;
}

nav {
    display: block;
    padding: 2px;
    border: 0px;
    width: 100%;
    background: #0d47a1;
    color: white;
}

nav ::before {}

nav menu {
    list-style-type: none;
    padding-left: 0;
}

nav menu li {
    display: inline-block;
}

footer {
    display: flex;
    justify-content: center;
    padding: 5px;
    background-color: #5472d3;
    color: #fff;
}
	<!DOCTYPE html>

	<head>
	<meta charset="utf-8" />
	<link id="stylesheet" type="text/css" href="style.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	</head>

	<body>

	<nav>
	<menu>
	<li>Link 1</li>
	<li>Link 2</li>
	</menu>
	</nav>

	<header>
	<h1>Hallo Welt</h1>
	Willkommen in der Vorlesung Internettechnologien.
	</header>

	<div class="flex">
	<aside class="sidebar">
	<h1>titel sidebar</h1>
	</aside>
	<main>
	<article>
	<h1>Artikel</h1>
	<section>
	<h2>titel section</h2>
	</section>
	</article>
	</main>
	</div>

	<footer>
	<h1>das ist ein footer</h1>
	</footer>
	</body>
	body {
	display: block;
	font-family: 'Open Sans', sans-serif;
	padding: 0px;
	margin: 0px;
	}

	.flex {
	display: flex;
	}

	main {
	display: block;
	background: #E1E2E1;
	flex: 2;
	}

	.sidebar {
	background: #5472d3;
	width: 200px;
	flex-height: 1;
	}

	article {
	width: 500px;
	}

	header {
	display: block;
	background: #002171;
	color: white;
	}

	nav {
	display: block;
	padding: 2px;
	border: 0px;
	width: 100%;
	background: #0d47a1;
	color: white;
	}

	nav ::before {}

	nav menu {
	list-style-type: none;
	padding-left: 0;
	}

	nav menu li {
	display: inline-block;
	}

	footer {
	display: flex;
	justify-content: center;
	padding: 5px;
	background-color: #5472d3;
	color: #fff;
	}