A Pen by Christian Gawron on CodePen.
Created
February 4, 2019 21:49
-
-
Save cgawron/1869d4bc7b3a0c0e258c90c55ce397b9 to your computer and use it in GitHub Desktop.
Beispiel_HTML5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment