Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE HTML> <html> <head> <title>Der Titel des Dokuments</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> html, body { height: 100%; } body { display: flex; flex-wrap: wrap; margin: 0; } .header-menu, footer { display: flex; align-items: center; width: 100%; } .header-menu { justify-content: flex-end; height: 60px; background: #1c87c9; color: #fff; } h2 { margin: 0 0 8px; } ul li { display: inline-block; padding: 0 10px; list-style: none; } aside { flex: 0.4; height: 165px; padding-left: 15px; border-left: 1px solid #666; } section { flex: 1; padding-right: 15px; } footer { padding: 0 10px; background: #ccc; } </style> </head> <body> <header class="header-menu"> <nav> <ul> <li>Menüeintrag</li> <li>Menüeintrag</li> <li>Menüeintrag</li> </ul> </nav> </header> <section> <article> <header> <h2>HTML lernen</h2> <small>Hyper Text Markup Language</small> </header> <p>In unserem kostenlosen HTML-Tutorial für Anfänger lernen Sie HTML und wie Sie Ihre Website von Anfang an erstellen können. HTML ist nicht schwierig, also hoffen wir, dass Sie Spaß am Lernen haben.</p> </article> <article> <header> <h2>Quiz "HTML Basic" starten</h2> <small>Mit dem Quiz von W3docs können Sie Ihre HTML-Kenntnisse testen.</small> </header> <p>Für jede richtige Antwort erhalten Sie 5% auf Single-Choice-Fragen. Bei Multiple-Choice-Fragen kann er bis zu 5% betragen. Am Ende des Quiz wird Ihre Gesamtpunktzahl angezeigt. Die maximale Punktzahl beträgt 100%.</p> </article> </section> <aside> <h2>Unsere Bücher</h2> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <p>PHP</p> </aside> <footer> <small>Gesellschaft © W3docs. Alle Rechte vorbehalten.</small> </footer> </body> </html>