layout example

calweb · May 17, 2016 · 26fe683 · 26fe683
1 parent 6e5ca48
commit 26fe683
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 0 deletions.
diff --git a/html-css-layout/index.html b/html-css-layout/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Woody's Bio</title>
+    <link rel="stylesheet" href="
+https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.css">
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <header>
+      Header
+    </header>
+    <aside class="">
+      Aside
+    </aside>
+    <div class='main-content'>
+      <div class="">
+        helter
+      </div>
+      <section id="one">
+        Main Content One
+      </section>
+      <section id="two">
+        Main Content Two
+      </section>
+      <section id="three">
+        Main Content Three
+      </section>
+      <section id="four">
+        Main Content Four
+      </section>
+      <section id="five">
+        Main Content Five
+      </section>
+    </div>
+
+    <footer>
+      Footer
+    </footer>
+  </body>
+</html>
diff --git a/html-css-layout/styles.css b/html-css-layout/styles.css
@@ -0,0 +1,54 @@
+* {
+  border: 2px solid black;
+  margin: 20px 0;
+}
+
+header {
+  height: 80px;
+  background-color: orange
+  width: 100%;
+}
+
+aside {
+  background-color: yellow;
+  display: inline-block;
+  width: 20%;
+}
+
+section {
+  float: left;
+}
+
+.main-content div {
+  margin: 0;
+  display: inline-block;
+}
+
+footer {
+  background-color: pink;
+}
+
+div {
+  width: 79%;
+  display: inline-block;
+}
+
+#one {
+  background-color: aliceblue;
+}
+
+#two {
+  background-color: tomato;
+}
+
+#three {
+  background-color: salmon;
+}
+
+#four {
+  background-color: cornsilk;
+}
+
+#five {
+  background: lawngreen;
+}