Ada-C6 · allisonhoke · Sep 16, 2016 · Sep 16, 2016 · Sep 16, 2016 · Sep 20, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>About: Allison Hoke</title>
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/about.css">
+  <link href="https://fonts.googleapis.com/css?family=Abel|Cabin+Sketch|Calligraffitti|Coming+Soon|Handlee|Homemade+Apple|IM+Fell+English|Kranky|Life+Savers|Lobster+Two|Love+Ya+Like+A+Sister|Overlock|Pacifico|Paprika|Playfair+Display|Quicksand|Salsa|Shadows+Into+Light|Shadows+Into+Light+Two|Short+Stack|Special+Elite|Yatra+One" rel="stylesheet">
+</head>
+<body>
+  <header class="header">
+    <h1>Allison Hoke</h1>
+  </header>
+
+  <nav class="main-navigation">
+    <a href="index.html">
+      home
+    </a>
+    <a href="portfolio.html">
+      portfolio
+    </a>
+    <a href="hobby-blog.html">
+      hobby-blog
+    </a>
+    <a href="about.html" class="current-location">
+      about
+    </a>
+  </nav>
+
+  <section class="main-about">
+    <img src="images/allison.jpg" alt="Photo of Allison Hoke" />
+    <article class="about-me">
+      <p>
+        I want everbody to be happy. That's what it's all about. This is an example of what you can do with just a few things, a little imagination and a happy dream in your heart. Don't fiddle with it all day.
+      </p>
+
+      <p>
+        You can do anything here - the only pre-requisite is that it makes you happy. A happy cloud. When you do it your way you can go anywhere you choose. This piece of canvas is your world. Get away from those little Christmas tree things we used to make in school. Maybe there's a little something happening right here.
+      </p>
+
+      <p>
+        In painting, you have unlimited power. You have the ability to move mountains. You can bend rivers. But when I get home, the only thing I have power over is the garbage. Let all these things just sort of happen. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Put it in, leave it alone. Don't kill all your dark areas - you need them to show the light.
+      </p>
+    </article>
+  </section>
+
+  <footer>
+    <h4>&copy 2016</h4>
+    <p>
+      some information about the page
+    </p>
+    <section>
+      <nav class="footer-navigation">
+        <a href="mailto:[email protected]">
+          <img src="images/gmail.png" alt="Gmail Logo" class="thumbnail-gmail"/>
+        </a>
+        <a href="http://twitter.com">
+          <img src="images/twitter.png" alt="Twitter Logo" class="thumbnail"/>
+        </a>
+        <a href="http://linkedin.com">
+          <img src="images/linkedin.png" alt="LinkedIn Logo" class="thumbnail"/>
+        </a>
+        <a href="http://github.com">
+          <img src="images/github.png" alt="Github Logo" class="thumbnail"/>
+        </a>
+      </nav>
+    </section>
+  </footer>
+</body>
+</html>
diff --git a/hobby-blog.html b/hobby-blog.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hobby-Blog: Allison Hoke</title>
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/hobby-blog.css">
+  <link href="https://fonts.googleapis.com/css?family=Abel|Cabin+Sketch|Calligraffitti|Coming+Soon|Handlee|Homemade+Apple|IM+Fell+English|Kranky|Life+Savers|Lobster+Two|Love+Ya+Like+A+Sister|Overlock|Pacifico|Paprika|Playfair+Display|Quicksand|Salsa|Shadows+Into+Light|Shadows+Into+Light+Two|Short+Stack|Special+Elite|Yatra+One" rel="stylesheet">
+</head>
+<body>
+  <header class="header">
+    <h1>Allison Hoke</h1>
+  </header>
+
+  <nav class="main-navigation">
+    <a href="index.html">
+      home
+    </a>
+    <a href="portfolio.html">
+      portfolio
+    </a>
+    <a href="hobby-blog.html" class="current-location">
+      hobby-blog
+    </a>
+    <a href="about.html">
+      about
+    </a>
+  </nav>
+
+  <main>
+    <section class="blog-post">
+      <section class="post-info">
+        <h3>Bob Ross Celebrates Allison's Birthday with Wisdom</h3>
+        <h5>October 14, 2016</h5>
+      </section>
+      <article class="blog-content">
+        <img src="images/nye-beach.jpg" alt="Nye Beach" class="blog-image1"/>
+        <p>
+          Volunteering your time; it pays you and your whole community fantastic dividends. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. You can do anything here - the only pre-requisite is that it makes you happy. Automatically, all of these beautiful, beautiful things will happen.
+        </p>
+
+        <p>
+          Isn't that fantastic that you can create an almighty tree that fast? Very easy to work these to death. This is unplanned it really just happens. Be so very light. Be a gentle whisper.
+        </p>
+
+        <p>
+          The man who does the best job is the one who is happy at his job. We'll do another happy little painting. The more we do this - the more it will do good things to our heart.
+        </p>
+
+        <img src="images/seal-rock.jpg" alt="Seal Rock" class="blog-image2"/>
+
+        <p>
+          We don't have to be concerned about it. We just have to let it fall where it will. Just let this happen. We just let this flow right out of our minds. It's a good way of getting rid of all your anxieties and hostilities. A tree needs to be your friend if you're going to paint him.
+        </p>
+
+        <p>
+          Let all these little things happen. Don't fight them. Learn to use them. Let's build some happy little clouds up here. Put it in, leave it alone. Everyone wants to enjoy the good parts - but you have to build the framework first. The little tiny Tim easels will let you down.
+        </p>
+      </article>
+    </section>
+
+    <section class="blog-post">
+      <section class="post-info">
+        <h3>Bob Ross Celebrates Allison's Birthday with Wisdom AGAIN</h3>
+        <h5>October 14, 2016</h5>
+      </section>
+      <article class="blog-content">
+        <img src="images/nye-beach.jpg" alt="Nye Beach" class="blog-image1"/>
+        <p>
+          Volunteering your time; it pays you and your whole community fantastic dividends. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. You can do anything here - the only pre-requisite is that it makes you happy. Automatically, all of these beautiful, beautiful things will happen.
+        </p>
+
+        <p>
+          Isn't that fantastic that you can create an almighty tree that fast? Very easy to work these to death. This is unplanned it really just happens. Be so very light. Be a gentle whisper.
+        </p>
+
+        <p>
+          The man who does the best job is the one who is happy at his job. We'll do another happy little painting. The more we do this - the more it will do good things to our heart.
+        </p>
+
+        <img src="images/seal-rock.jpg" alt="Seal Rock" class="blog-image2"/>
+
+        <p>
+          We don't have to be concerned about it. We just have to let it fall where it will. Just let this happen. We just let this flow right out of our minds. It's a good way of getting rid of all your anxieties and hostilities. A tree needs to be your friend if you're going to paint him.
+        </p>
+
+        <p>
+          Let all these little things happen. Don't fight them. Learn to use them. Let's build some happy little clouds up here. Put it in, leave it alone. Everyone wants to enjoy the good parts - but you have to build the framework first. The little tiny Tim easels will let you down.
+        </p>
+      </article>
+    </section>
+  </main>
+
+  <footer>
+    <h4>&copy 2016</h4>
+    <p>
+      some information about the page
+    </p>
+    <section>
+      <nav class="footer-navigation">
+        <a href="mailto:[email protected]">
+          <img src="images/gmail.png" alt="Gmail Logo" class="thumbnail-gmail"/>
+        </a>
+        <a href="http://twitter.com">
+          <img src="images/twitter.png" alt="Twitter Logo" class="thumbnail"/>
+        </a>
+        <a href="http://linkedin.com">
+          <img src="images/linkedin.png" alt="LinkedIn Logo" class="thumbnail"/>
+        </a>
+        <a href="http://github.com">
+          <img src="images/github.png" alt="Github Logo" class="thumbnail"/>
+        </a>
+      </nav>
+    </section>
+  </footer>
+</body>
+</html>
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/allison.jpg b/images/allison.jpg
diff --git a/images/bob-ross.jpeg b/images/bob-ross.jpeg
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/github.png b/images/github.png
diff --git a/images/gmail.png b/images/gmail.png
diff --git a/images/klee.jpg b/images/klee.jpg
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/nye-beach.jpg b/images/nye-beach.jpg
diff --git a/images/seal-rock.jpg b/images/seal-rock.jpg
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Allison Hoke</title>
+    <link rel="stylesheet" href="styles/styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Abel|Cabin+Sketch|Calligraffitti|Coming+Soon|Handlee|Homemade+Apple|IM+Fell+English|Kranky|Life+Savers|Lobster+Two|Love+Ya+Like+A+Sister|Overlock|Pacifico|Paprika|Playfair+Display|Quicksand|Salsa|Shadows+Into+Light|Shadows+Into+Light+Two|Short+Stack|Special+Elite|Yatra+One" rel="stylesheet">
+  </head>
+  <body>
+    <header class="header">
+      <h1>Allison Hoke</h1>
+    </header>
+    <nav class="main-navigation">
+      <a href="index.html" class="current-location">
+        home
+      </a>
+      <a href="portfolio.html">
+        portfolio
+      </a>
+      <a href="hobby-blog.html">
+        hobby-blog
+      </a>
+      <a href="about.html">
+        about
+      </a>
+    </nav>
+    <footer class="home-footer">
+      <h4 class="copyright">&copy 2016</h4>
+      <p>
+        some information about the page
+      </p>
+      <section>
+      <nav class="footer-navigation">
+        <a href="mailto:[email protected]">
+          <img src="images/gmail.png" alt="Gmail Logo" class="thumbnail-gmail"/>
+        </a>
+        <a href="http://twitter.com">
+          <img src="images/twitter.png" alt="Twitter Logo" class="thumbnail"/>
+        </a>
+        <a href="http://linkedin.com">
+          <img src="images/linkedin.png" alt="LinkedIn Logo" class="thumbnail"/>
+        </a>
+        <a href="http://github.com">
+          <img src="images/github.png" alt="Github Logo" class="thumbnail"/>
+        </a>
+      </nav>
+    </section>
+    </footer>
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio: Allison Hoke</title>
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/portfolio.css">
+  <link href="https://fonts.googleapis.com/css?family=Abel|Cabin+Sketch|Calligraffitti|Coming+Soon|Handlee|Homemade+Apple|IM+Fell+English|Kranky|Life+Savers|Lobster+Two|Love+Ya+Like+A+Sister|Overlock|Pacifico|Paprika|Playfair+Display|Quicksand|Salsa|Shadows+Into+Light|Shadows+Into+Light+Two|Short+Stack|Special+Elite|Yatra+One" rel="stylesheet">
+</head>
+<body>
+  <header class="header">
+    <h1>Allison Hoke</h1>
+  </header>
+
+  <nav class="main-navigation">
+    <a href="index.html">
+      home
+    </a>
+    <a href="portfolio.html" class="current-location">
+      portfolio
+    </a>
+    <a href="hobby-blog.html">
+      hobby-blog
+    </a>
+    <a href="about.html">
+      about
+    </a>
+  </nav>
+
+  <section class="main-content">
+
+    <section class="project-info">
+      <article class="project-info">
+        <img src="images/nye-beach.jpg" alt="Nye Beach" class="project-image"/>
+        <section class="project-details">
+          <p>
+            PROJECT TITLE
+          </p>
+          <p>
+            PROJECT DETAILS: I'm gonna start with a little Alizarin crimson and a touch of Prussian blue You have to make almighty decisions when you're the creator. Let's make some happy little clouds in our world. It's life. It's interesting. It's fun. I like to beat the brush.
+          </p>
+          <p>
+            LINK
+          </p>
+        </section>
+      </article>
+
+      <article class="project-info">
+        <img src="images/seal-rock.jpg" alt="Seal Rock" class="project-image"/>
+        <section class="project-details">
+          <p>
+            PROJECT TITLE
+          </p>
+          <p>
+            PROJECT DETAILS: You are only limited by your imagination. You can create the world you want to see and be a part of. I get carried away with this brush cleaning. Maybe there's a little something happening right here. Work that paint.
+          </p>
+          <p>
+            LINK
+          </p>
+        </section>
+      </article>
+    </section>
+
+    <section class="project-info">
+      <article class="project-info">
+        <img src="images/nye-beach.jpg" alt="Nye Beach" class="project-image"/>
+        <section class="project-details">
+          <p>
+            PROJECT TITLE
+          </p>
+          <p>
+            PROJECT DETAILS: I'm gonna start with a little Alizarin crimson and a touch of Prussian blue You have to make almighty decisions when you're the creator. Let's make some happy little clouds in our world. It's life. It's interesting. It's fun. I like to beat the brush.
+          </p>
+          <p>
+            LINK
+          </p>
+        </section>
+      </article>
+
+      <article class="project-info">
+        <img src="images/seal-rock.jpg" alt="Seal Rock" class="project-image"/>
+        <section class="project-details">
+          <p>
+            PROJECT TITLE
+          </p>
+          <p>
+            PROJECT DETAILS: You are only limited by your imagination. You can create the world you want to see and be a part of. I get carried away with this brush cleaning. Maybe there's a little something happening right here. Work that paint.
+          </p>
+          <p>
+            LINK
+          </p>
+        </section>
+      </article>
+    </section>
+
+  </section>
+
+  <footer>
+    <h4>&copy 2016</h4>
+    <p>
+      some information about the page
+    </p>
+    <section>
+      <nav class="footer-navigation">
+        <a href="mailto:[email protected]">
+          <img src="images/gmail.png" alt="Gmail Logo" class="thumbnail-gmail"/>
+        </a>
+        <a href="http://twitter.com">
+          <img src="images/twitter.png" alt="Twitter Logo" class="thumbnail"/>
+        </a>
+        <a href="http://linkedin.com">
+          <img src="images/linkedin.png" alt="LinkedIn Logo" class="thumbnail"/>
+        </a>
+        <a href="http://github.com">
+          <img src="images/github.png" alt="Github Logo" class="thumbnail"/>
+        </a>
+      </nav>
+    </section>
+  </footer>
+
+</body>
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,20 @@
+.main-about {
+  margin: 2em 4em;
+  border-top: black 1px solid;
+}
+
+.main-about .about-me {
+  display: inline-block;
+  width: 52%;
+  margin-bottom: 4em;
+  position: absolute;
+  margin-top: 1em;
+}
+
+.main-about img {
+  border: black 1px solid;
+  display: inline-block;
+  width: 30%;
+  margin: 2em;
+  position: relative;
+}