starting setup

Maximilian Schwarzmüller · Maximilian Schwarzmüller · commit 312b1997e1cb · 2018-03-20T14:28:52.000+01:00
diff --git a/index.html b/index.html
@@ -8,6 +8,27 @@
     <link rel="stylesheet" href="main.css">
 </head>
 <body>
+    <header>
+        <ul class="navigation-list">
+            <li class="navigation-item"><a href="#">Posts</a></li>
+            <li class="navigation-item"><a href="#">Products</a></li>
+            <li class="navigation-item"><a href="#">About Us</a></li>
+        </ul>
+    </header>
+    <aside>
+        <p>My super awesome sidebar</p>
+    </aside>
+    <main>
+        <h1>CSS Grid or Flexbox
+        </h1>
+        <p>When should you use which?</p>
+    </main>
+    <footer>
+        <ul class="navigation-list">
+            <li class="navigation-item"><a href="#">Terms of Use</a></li>
+            <li class="navigation-item"><a href="#">Support</a></li>
+        </ul>
+    </footer>
 </body>
 </html>
 
diff --git a/main.css b/main.css
@@ -0,0 +1,44 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: sans-serif;
+    margin: 0;
+}
+
+header,
+aside,
+main,
+footer {
+    padding: 16px;
+    text-align: center;
+}
+
+header {
+    background: #521751;
+}
+
+aside {
+    background: #fa923f;
+}
+
+footer {
+    background: black;
+}
+
+.navigation-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.navigation-item a {
+    text-decoration: none;
+    color: white;
+}
+
+.navigation-item a:hover,
+.navigation-item a:active {
+    color: #fa923f;
+}
