Ada-C6 · mjohnson3038 · Sep 16, 2016 · Sep 16, 2016 · Sep 16, 2016 · Sep 17, 2016
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>M.Johnson About Me</title>
+    <link href="styles/styles.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  </head>
+  <body id="aboutp">
+    <header>
+      <nav>
+        <ul>
+          <li class="home"><a href="index.html"><h5>HOME</h5></a></li>
+          <li class="portfolio"><a href="portfolio.html"><h5>Portfolio</h5></a></li>
+          <li class="blog"><a href="blog.html"><h5>Blog</h5></a></li>
+          <li class="contact"><a href="contact.html"><h5>Contact Me</h5></a></li>
+        </ul>
+      </nav>
+      <h1>About Me</h1>
+    </header>
+
+    <main>
+      <section class="block">
+        <div id=top>
+
+          <!-- NOTE - both the div and words are connected to the other pages so no matter where the user clicks, it works.  -->
+          <div class=split>
+            <div class="top-left"></div>
+          </div>
+
+          <div class="top-right"></div>
+          <h4 class="top-right">Maddie Johnson</h4>
+
+        </div>
+        <div id=bottom>
+          <div class=split>
+            <a href="http://adadevelopersacademy.org/"><div class="bottom-left"></div></a>
+            <a href="http://adadevelopersacademy.org/"><h4 class="bottom-left">Student @ Ada Developers</h4></a>
+          </div>
+
+          <div class="bottom-right"></div>
+
+        </div>
+      </section>
+
+    </main>
+
+    <footer>
+        <h3> &copy; 2016 </h4>
+
+    </footer>
+
+  </body>
+</html>
diff --git a/blog.html b/blog.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>M.Johnson Contact Me</title>
+    <link href="styles/styles.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  </head>
+  <body id="blog">
+    <header>
+      <nav>
+        <ul>
+          <li class="home"><a href="index.html"><h5>HOME</h5></a></li>
+          <li class="about"><a href="about.html"><h5>About Me</h5></a></li>
+          <li class="portfolio"><a href="portfolio.html"><h5>Portfolio</h5></a></li>
+          <li class="contact"><a href="contact.html"><h5>Contact Me</h5></a></li>
+        </ul>
+      </nav>
+      <h1>Blog</h1>
+    </header>
+
+    <main class="text-heavy">
+      <article>
+        <div></div>
+        <h2>Title One</h2>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor est egestas lectus finibus, eu porttitor metus congue. Praesent hendrerit justo vitae dui aliquam, ac gravida turpis placerat.</p>
+      </article>
+      <article>
+        <div></div>
+        <h2>Title Two</h2>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor est egestas lectus finibus, eu porttitor metus congue. Praesent hendrerit justo vitae dui aliquam, ac gravida turpis placerat.</p>
+
+        <p>In hendrerit auctor varius. Etiam ac accumsan elit. Integer eu egestas turpis, quis euismod eros. Praesent vitae semper sapien, ac gravida elit. Curabitur nec volutpat lacus. Ut sodales venenatis arcu vel elementum. Cras eu dignissim purus, eu lobortis dui. Praesent ut est eu ex dapibus blandit. Nunc enim sapien, dapibus sed urna nec, fringilla bibendum neque. Aliquam nec dui ut ante pulvinar vestibulum quis eget urna. Vestibulum eu gravida urna. Duis nunc tellus, tincidunt quis venenatis a, pretium vulputate mi. Cras nec tincidunt nulla. Phasellus augue nisi, maximus sed enim vel, faucibus lobortis mauris. Integer vehicula diam id nunc dignissim, in hendrerit quam sollicitudin. Nam blandit viverra dictum.</p>
+
+        <p>Maecenas aliquam purus at mi tincidunt, sit amet sodales ante posuere. Sed ligula nisi, viverra vel sodales in, cursus eget tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam hendrerit nisi non turpis volutpat, non ornare augue elementum. Nunc justo velit, luctus eget nulla eu, interdum lacinia mauris. Morbi ullamcorper dui nec sem efficitur, tristique viverra mi bibendum. Quisque nec iaculis tellus, facilisis tristique quam.</p>
+
+      </article>
+      <article>
+        <div></div>
+        <h2>Title Three</h2>
+        <h5>Day, Month, Year</h5>
+        <p>Maecenas aliquam purus at mi tincidunt, sit amet sodales ante posuere. Sed ligula nisi, viverra vel sodales in, cursus eget tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam hendrerit nisi non turpis volutpat, non ornare augue elementum. Nunc justo velit, luctus eget nulla eu, interdum lacinia mauris. Morbi ullamcorper dui nec sem efficitur, tristique viverra mi bibendum. Quisque nec iaculis tellus, facilisis tristique quam.</p>
+      </article>
+      <article>
+        <div></div>
+        <h2>Title Four</h2>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor est egestas lectus finibus, eu porttitor metus congue. Praesent hendrerit justo vitae dui aliquam, ac gravida turpis placerat.
+
+        In hendrerit auctor varius. Etiam ac accumsan elit. Integer eu egestas turpis, quis euismod eros. Praesent vitae semper sapien, ac gravida elit. Curabitur nec volutpat lacus. Ut sodales venenatis arcu vel elementum. Cras eu dignissim purus, eu lobortis dui. Praesent ut est eu ex dapibus blandit. Nunc enim sapien, dapibus sed urna nec, fringilla bibendum neque. Aliquam nec dui ut ante pulvinar vestibulum quis eget urna. Vestibulum eu gravida urna. Duis nunc tellus, tincidunt quis venenatis a, pretium vulputate mi. Cras nec tincidunt nulla. Phasellus augue nisi, maximus sed enim vel, faucibus lobortis mauris. Integer vehicula diam id nunc dignissim, in hendrerit quam sollicitudin. Nam blandit viverra dictum.
+
+        Maecenas aliquam purus at mi tincidunt, sit amet sodales ante posuere. Sed ligula nisi, viverra vel sodales in, cursus eget tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam hendrerit nisi non turpis volutpat, non ornare augue elementum. Nunc justo velit, luctus eget nulla eu, interdum lacinia mauris. Morbi ullamcorper dui nec sem efficitur, tristique viverra mi bibendum. Quisque nec iaculis tellus, facilisis tristique quam.
+
+        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia orci ac arcu interdum condimentum. Vestibulum eleifend magna vitae risus tempor vulputate. Nam sit amet leo ultrices, accumsan sapien a, euismod turpis. Vestibulum luctus purus ac dui bibendum, eu iaculis orci maximus. Etiam ut felis et lectus luctus feugiat eu sed magna. Nunc ut sem condimentum, ornare dolor nec, aliquam augue. Nunc mollis convallis interdum. Aenean dignissim dolor pulvinar magna mattis congue.</p>
+      </article>
+      <article>
+        <div></div>
+        <h2>Title Five</h2>
+        <h5>Day, Month, Year</h5>
+        <p>Maecenas aliquam purus at mi tincidunt, sit amet sodales ante posuere. Sed ligula nisi, viverra vel sodales in, cursus eget tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam hendrerit nisi non turpis volutpat, non ornare augue elementum. Nunc justo velit, luctus eget nulla eu, interdum lacinia mauris. Morbi ullamcorper dui nec sem efficitur, tristique viverra mi bibendum. Quisque nec iaculis tellus, facilisis tristique quam.
+
+        In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed auctor est egestas lectus finibus, eu porttitor metus congue. Praesent hendrerit justo vitae dui aliquam, ac gravida turpis placerat.
+
+        In hendrerit auctor varius. Etiam ac accumsan elit. Integer eu egestas turpis, quis euismod eros. Praesent vitae semper sapien, ac gravida elit. Curabitur nec volutpat lacus. Ut sodales venenatis arcu vel elementum. Cras eu dignissim purus, eu lobortis dui. Praesent ut est eu ex dapibus blandit. Nunc enim sapien, dapibus sed urna nec, fringilla bibendum neque. Aliquam nec dui ut ante pulvinar vestibulum quis eget urna. Vestibulum eu gravida urna. Duis nunc tellus, tincidunt quis venenatis a, pretium vulputate mi. Cras nec tincidunt nulla. Phasellus augue nisi, maximus sed enim vel, faucibus lobortis mauris. Integer vehicula diam id nunc dignissim, in hendrerit quam sollicitudin. Nam blandit viverra dictum.</p>
+      </article>
+    </main>
+
+    <footer>
+        <h3> &copy; 2016 </h4>
+
+    </footer>
+
+  </body>
+</html>
diff --git a/contact.html b/contact.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>M.Johnson Contact Me</title>
+    <link href="styles/styles.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  </head>
+  <body id="contact">
+    <header>
+      <nav>
+        <ul>
+          <li class="home"><a href="index.html"><h5>HOME</h5></a></li>
+          <li class="about"><a href="about.html"><h5>About Me</h5></a></li>
+          <li class="portfolio"><a href="portfolio.html"><h5>Portfolio</h5></a></li>
+          <li class="blog"><a href="blog.html"><h5>Blog</h5></a></li>
+        </ul>
+      </nav>
+      <h1>Contact Me</h1>
+    </header>
+
+    <main>
+      <section class="block">
+        <div id=top>
+
+          <!-- NOTE - both the div and words are connected to the other pages so no matter where the user clicks, it works.  -->
+          <div class=split>
+            <a href="@embeejay03"><div class="top-left"></div></a>
+            <a href="@embeejay03"><h4 class="top-left">Twitter:  @embeejay03</h4></a>
+          </div>
+
+          <a href="mjohnson3038@gmail.com"><div class="top-right"></div><a>
+          <a href="mjohnson3038@gmail.com"><h4 class="top-right">Email: mjohnson3038 @gmail.com</h4></a>
+        </div>
+        <div id=bottom>
+          <a href="mjohnson3038@gmail.com"><div class="bottom-right"></div></a>
+          <a href="mjohnson3038@gmail.com"><h4 class="bottom-right">Instagram: @mmjohnson3038</h4></a>
+          <div class="bottom-left"></div>
+        </div>
+      </section>
+
+    </main>
+
+    <footer>
+        <h3> &copy; 2016 </h4>
+
+    </footer>
+
+  </body>
+</html>
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/Animals.jpg b/imgs/Animals.jpg
diff --git a/imgs/Friends.jpg b/imgs/Friends.jpg
diff --git a/imgs/Glass.jpg b/imgs/Glass.jpg
diff --git a/imgs/Hiking.jpg b/imgs/Hiking.jpg
diff --git a/imgs/Logo.jpg b/imgs/Logo.jpg
diff --git a/imgs/Tree.jpg b/imgs/Tree.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>M.Johnson</title>
+    <link href="styles/styles.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <nav>
+        <ul>
+          <li class="about"><a href="about.html"><h5>About Me</h5></a></li>
+          <li class="blog"><a href="blog.html"><h5>Blog</h5></a></li>
+          <li class="portfolio"><a href="portfolio.html"><h5>Portfolio</h5></a></li>
+          <li class="contact"><a href="contact.html"><h5>Contact Me</h5></a></li>
+        </ul>
+      </nav>
+
+      <h1>Maddie Johnson</h1>
+    </header>
+
+    <main>
+      <section class="block">
+        <nav>
+          <div id=top>
+            <div class="tl">
+              <!-- NOTE - both the div and words are connected to the other pages so no matter where the user clicks, it works.  -->
+              <a href="about.html"><div class="top-left"></div></a>
+              <a href="about.html"><h4 class="top-left">About Me</h4></a>
+            </div>
+            <div class="tr">
+              <a href="portfolio.html"><div class="top-right"></div></a>
+              <a href="portfolio.html"><h4 class="top-right">Projects</h4></a>
+            </div>
+          </div>
+          <div id=bottom>
+            <a href="contact.html"><div class="bottom-right"></div></a>
+            <a href="contact.html"><h4 class="bottom-right">Contact Me</h4></a>
+            <a href="blog.html"><div class="bottom-left"></div></a>
+            <a href="blog.html"><h4 class="bottom-left">Blog</h4></a>
+          </div>
+        </nav>
+      </section>
+
+    </main>
+
+    <footer>
+        <h3> &copy; 2016 </h4>
+
+    </footer>
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>M.Johnson Portfolio</title>
+    <link href="styles/styles.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  </head>
+  <body id="port">
+    <header>
+      <nav>
+        <ul>
+          <li class="home"><a href="index.html"><h5>HOME</h5></a></li>
+          <li class="about"><a href="about.html"><h5>About Me</h5></a></li>
+          <li class="blog"><a href="blog.html"><h5>Blog</h5></a></li>
+          <li class="contact"><a href="contact.html"><h5>Contact Me</h5></a></li>
+        </ul>
+      </nav>
+      <h1>Portfolio</h1>
+      <h5>Click the Titles to link to the project</h5>
+    </header>
+
+    <main class="text-heavy">
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project One</h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project Two</h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project Three</h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project Four</h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project Five </h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+      <article>
+        <div></div>
+        <a href="https://github.com/mjohnson3038/door"><h2>Project Six</h2><a>
+        <h5>Day, Month, Year</h5>
+        <p>In vulputate velit ante, at ullamcorper lacus iaculis vel. In pharetra in augue quis maximus. Nulla sapien ligula, iaculis nec tincidunt ac, efficitur quis urna. Proin sodales nunc sed accumsan mollis. Click the Title above to learn more </p>
+      </article>
+    </main>
+
+    <footer>
+        <h3> &copy; 2016 </h4>
+
+    </footer>
+
+  </body>
+</html>