Ada-C6 · dschrimm · Sep 16, 2016 · Sep 16, 2016 · Sep 17, 2016 · Sep 17, 2016
diff --git a/about.html b/about.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>About Me</title>
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/about.css">
+</head>
+<body>
+  <nav>
+    <a href="./index.html">Home</a>
+    <a href="./portfolio.html">Portfolio</a>
+    <a href="./code-journal.html">Code journal</a>
+  </nav>
+
+  <p class="introduction">
+    Here is some more fascinating information about me...
+  </p>
+
+  <section class="interests">
+
+    <article>
+      <img src="imgs/mountains.jpg" alt="Mountains" />
+      <p>
+        I like mountains and would like to visit this one.
+      </p>
+    </article>
+
+    <article>
+      <img src="imgs/buffet.jpg" alt="Buffet" />
+      <p>
+        I like food, a lot.
+      </p>
+    </article>
+
+  </section>
+
+  <footer>
+    <h3>Something charming, contact me because I can learn to do things.</h3>
+  </footer>
+
+</body>
+</html>
diff --git a/code-journal.html b/code-journal.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Code Journal</title>
+    <link rel="stylesheet" href="styles/styles.css">
+    <link rel="stylesheet" href="styles/code-journal.css">
+  </head>
+  <body>
+    <nav>
+      <a href="./index.html">Home</a>
+      <a href="./portfolio.html">Portfolio</a>
+      <a href="./about.html">More about me</a>
+    </nav>
+
+    <p class="introduction">
+      Here are some interesting things I have to say about my experiences...
+    </p>
+    <section class="journal">
+
+      <article>
+        <h2>On being a n00b:</h2>
+        <p>
+          3 wolf moon neutra asymmetrical air plant fingerstache before they sold out. Fashion axe vaporware raw denim butcher, hell of semiotics retro narwhal tofu whatever blog. Hot chicken bitters unicorn, austin photo booth yr mumblecore sartorial pour-over tumblr asymmetrical lo-fi four dollar toast helvetica. Live-edge plaid hoodie, XOXO blue bottle affogato umami ennui deep v edison bulb tattooed wayfarers fixie. Gastropub brooklyn marfa mumblecore, iPhone ugh knausgaard pok pok health goth. Wolf pabst hella waistcoat, portland deep v asymmetrical before they sold out. Typewriter whatever portland man braid bicycle rights, slow-carb green juice godard jean shorts selfies truffaut thundercats.
+        </p>
+      </article>
+
+      <article>
+        <h2>On being slightly more knowledgeable about how much I don't know:</h2>
+        <p>
+          Blue bottle enamel pin bitters humblebrag street art gluten-free taxidermy activated charcoal pabst. Fanny pack hell of ennui ugh 3 wolf moon. Activated charcoal normcore squid keffiyeh. Master cleanse DIY succulents, blue bottle put a bird on it tacos helvetica pour-over ramps mixtape. Everyday carry typewriter keffiyeh ugh. Mustache etsy chicharrones pitchfork. Post-ironic subway tile try-hard before they sold out man braid.
+        </p>
+      </article>
+
+    </section>
+
+    <footer>
+      <h3>Something charming, contact me because I can learn to do things.</h3>
+    </footer>
+
+  </body>
+</html>
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
diff --git a/imgs/abstract.jpg b/imgs/abstract.jpg
diff --git a/imgs/buffet.jpg b/imgs/buffet.jpg
diff --git a/imgs/frozen-lake.jpg b/imgs/frozen-lake.jpg
diff --git a/imgs/mountains.jpg b/imgs/mountains.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Portfolio - Home</title>
+    <link rel="stylesheet" href="styles/styles.css">
+  </head>
+  <body>
+    <header>
+      <h1 class="name">Danielle</h1>
+      <h2 class="tagline">Something witty about  me</h2>
+      <h2>Some main skills or interests I have</h2>
+    </header>
+
+    <nav>
+      <a href="./portfolio.html">Portfolio</a>
+      <a href="./about.html">More about me</a>
+      <a href="./code-journal.html">Code journal</a>
+    </nav>
+
+    <footer>
+      <h3>Something charming, contact me because I can learn to do things.</h3>
+    </footer>
+
+  </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link rel="stylesheet" href="styles/styles.css">
+  <link rel="stylesheet" href="styles/portfolio.css">
+</head>
+<body>
+  <nav>
+    <a href="./index.html">Home</a>
+    <a href="./about.html">More about me</a>
+    <a href="./code-journal.html">Code journal</a>
+  </nav>
+
+  <p class="introduction">
+    Here are some of my projects...
+  </p>
+  <section class="project-list">
+
+    <article>
+      <img src="imgs/abstract.jpg" alt="Project One" />
+      <p>
+        Here is some general information about my project and <a href="https://www.petfinder.com/">here</a> is where you can find it.
+      </p>
+      <p>
+        3 wolf moon neutra asymmetrical air plant fingerstache before they sold out. Fashion axe vaporware raw denim butcher, hell of semiotics retro narwhal tofu whatever blog. Hot chicken bitters unicorn, austin photo booth yr mumblecore sartorial pour-over tumblr asymmetrical lo-fi four dollar toast helvetica. Live-edge plaid hoodie, XOXO blue bottle affogato umami ennui deep v edison bulb tattooed wayfarers fixie. Gastropub brooklyn marfa mumblecore, iPhone ugh knausgaard pok pok health goth. Wolf pabst hella waistcoat, portland deep v asymmetrical before they sold out. Typewriter whatever portland man braid bicycle rights, slow-carb green juice godard jean shorts selfies truffaut thundercats.
+      </p>
+    </article>
+
+    <article>
+      <img src="imgs/frozen-lake.jpg" alt="Project Two" />
+      <p>
+        Here is some general information about my project and <a href="https://jenis.com/">here</a> is where you can find it.
+      </p>
+      <p>
+        Blue bottle enamel pin bitters humblebrag street art gluten-free taxidermy activated charcoal pabst. Fanny pack hell of ennui ugh 3 wolf moon. Activated charcoal normcore squid keffiyeh. Master cleanse DIY succulents, blue bottle put a bird on it tacos helvetica pour-over ramps mixtape. Everyday carry typewriter keffiyeh ugh. Mustache etsy chicharrones pitchfork. Post-ironic subway tile try-hard before they sold out man braid.
+      </p>
+    </article>
+
+  </section>
+
+  <footer>
+    <h3>Something charming, contact me because I can learn to do things.</h3>
+  </footer>
+
+</body>
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,29 @@
+p {
+  color: #506C64;
+}
+
+article {
+  border: 1px dotted #75B8C8;
+  margin: 3%;
+  border-radius: 3%;
+  display: inline-block;
+  padding: 5%;
+}
+
+article img {
+  margin: 3%;
+  width: 70vmin;
+}
+
+article p {
+  margin: 3%;
+}
+
+article:nth-of-type(2) {
+  float: right;
+}
+
+footer {
+  position: relative;
+  clear: both;
+}
diff --git a/styles/code-journal.css b/styles/code-journal.css
@@ -0,0 +1,8 @@
+p {
+  color: #506C64;
+}
+
+h2 {
+  padding: 2px 4px;
+  display: inline-block;
+}
diff --git a/styles/portfolio.css b/styles/portfolio.css
@@ -0,0 +1,29 @@
+p {
+  color: #506C64;
+}
+
+article {
+  display: inline-block;
+  border: 1px dotted #75B8C8;
+  margin-bottom: 5%;
+  border-radius: 3%;
+}
+
+article img {
+  margin: 3%;
+  width: 30%;
+  float: left;
+}
+
+article:nth-of-type(even) img {
+  float: right;
+}
+
+article p {
+  margin: 3%;
+}
+
+footer {
+  position: relative;
+  clear: both;
+}
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,75 @@
+* {
+  background-color: #712835;
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+}
+
+header {
+  background-color: #77CBB9;
+  margin-bottom: 50px;
+  margin-top: 40px;
+  border-radius: 20%;
+  padding: 15px;
+}
+
+h1, h2 {
+  background-color: #77CBB9;
+}
+
+h1 {
+  margin: 3px 30px;
+}
+
+h2 {
+  margin: 3px 30px;
+}
+
+h3 {
+  margin-bottom: 0;
+}
+
+.tagline {
+  font-style: italic;
+}
+
+.introduction {
+  font-weight: bolder;
+  font-size: 150%;
+  font-style: italic;
+}
+
+nav {
+  margin-top: 20px;
+}
+
+nav a {
+  border: 1px black groove;
+  padding: 5px;
+  margin: 10%;
+  border-radius: 25%;
+  background-color: #75B8C8;
+}
+
+nav a:hover {
+  border-radius: 50%;
+  padding: 7px;
+}
+
+footer {
+  font-style: oblique;
+  border-top: 1px dotted #75B8C8;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  margin-top: 5%;
+}
+
+h3 {
+  margin-top: 0;
+  color: #75B8C8;
+}
+
+a:hover {
+  color: #D0E562;
+}