Ada-C8 · nkiruka · Sep 16, 2017 · Sep 16, 2017 · Sep 16, 2017 · Sep 16, 2017
diff --git a/about.html b/about.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Personal Website | About</title>
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/about.css">
+  </head>
+
+  <body>
+    <div id="menu-bar">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="hobby-blog.html">Musings</a></li>
+          </ul>
+        </nav>
+      </header>
+    </div>
+
+    <section class="clearfix">
+      <h2>About</h2>
+
+      <img src="./images/profile.jpg" alt="Nkiru"/>
+
+    <section id="content">
+      <p>
+        Hi, I am Nkiru.
+      </p>
+
+      <p>
+        Foodie. Explorer. Gardener. Music Lover. Aspiring software developer.
+      </p>
+
+      <p>
+        Currently on a quest to become a code slayer at Ada Developers Academy.
+      </p>
+
+      <p>
+        Mantra: Live Purely.  Be quiet.  Do your work with mastery.  Like the moon, come out from behind the clouds!  Shine!
+      </p>
+    </section>
+
+    </section>
+
+    <footer>
+      <p>&copy; 2017 Website</p>
+    </footer>
+  </body>
+</html>
diff --git a/hobby-blog.html b/hobby-blog.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Personal Website | Blog</title>
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/blog.css">
+  </head>
+
+  <body>
+    <div id="menu-bar">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="hobby-blog.html">Musings</a></li>
+          </ul>
+        </nav>
+      </header>
+    </div>
+
+    <main>
+
+    <section class="title">
+      <h2> Blog Posts </h2>
+      <p>
+        The musicals that leave us kind of staggering on our feet are the ones that really reach for a lot. ----Lin-Manuel Miranda
+      </p>
+    </section>
+
+    <section>
+      <article>
+        <h3> Sound of Music </h3>
+        <h4> September 16, 2017 </h4>
+
+          <img src="./images/soundofmusic.jpg" alt="Sound of Music"/>
+
+        <section>
+          <p>
+            One of the most uplifting sound tracks till date. Rogers and Hammerstein were well known for musicals in the 60s. "I have confidence in sunshine, <a href="https://www.scribd.com/doc/301476059/I-Have-Confidence-Sheet-Musicsongsheet">I have confidence in rain</a>. I have confidence that they will put me to the test and believe it or not I have confidence in me." If that isn’t a pep talk relevant to now, I don’t know what is.  Maria singing to herself on her way to her first job.
+
+            The ability to set such beautiful music against the backdrop of a tragic time in history is commendable.
+          </p>
+        </section>
+      </article>
+
+      <article>
+        <h3> My Fair Lady </h3>
+        <h4> September 16, 2017 </h4>
+
+          <img src="./images/myfairlady2.jpg" alt="My Fair Lady"/>
+
+        <section>
+          <p>
+            A very funny story on class, manners and how we are judged by our accents and backgrounds. It is also a story of personal branding and a lack of identity.
+          </p>
+          <p>
+            A man able to clean up a guttersnipe and present her months later to the society by changing her accent and dresscode. How many such guttersnipes (impostors) do we have in society today… <a href="http://www.onlinesheetmusic.com/i-could-have-danced-all-night-p289487.aspx">I could have danced all night</a>..beautiful!.
+          </p>
+        </section>
+      </article>
+
+      <article>
+        <h3> The King and I </h3>
+        <h4> September 16, 2017 </h4>
+
+          <img src="./images/thekingandi.jpg" alt="The King and I"/>
+
+        <section>
+          <p>
+            Subtle yet exciting film on slavery, colonization and gender politics. A king with 100 wives and concubines has to seek council of a ‘lowly’ woman to manage strained relationships with the English. She does not fit the preferred role of sex object. How much has changed..?
+          </p>
+
+          <p>
+            Yet again, another Rogers and Hammerstein collaboration. The lyrics of the songs are so clever, its hard not to smile when singing. "Whenever I am afraid, I strike a careless pose and no one ever knows <a href="http://www.musicnotes.com/sheetmusic/mtd.asp?ppn=MN0106644">I am afraid</a>. Make believe your’re brave and the trick will take you far. You will be as brave as you make believe you are.” Anna informing her son of how to maneuver palace life and politics on the boat to Siam /Thailand.
+          </p>
+        </section>
+      </article>
+
+      <article>
+        <h3> Sister Act </h3>
+        <h4> September 16, 2017 </h4>
+
+          <img src="./images/sisteract.jpg" alt="Sister Act"/>
+
+        <section>
+          <p>
+          Genius! Setting classic <a href="http://www.musicnotes.com/sheetmusic/mtd.asp?ppn=MN0122198">Motown</a> to a modern musical. Soundtrack is hard to get hold of on cd and itunes! Actually if Fraulein Maria was born in the 1960s she would be Dolores.
+          </p>
+        </section>
+      </article>
+
+      <article>
+        <h3> Carmen Jones </h3>
+        <h4> September 16, 2017 </h4>
+
+          <img src="./images/carmenjones2.jpg" alt="Carmen Jones"/>
+
+        <section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+        </section>
+      </article>
+
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2017 Website</p>
+  </footer>
+  </body>
+
+</html>
diff --git a/images/Dreamgirls.jpg b/images/Dreamgirls.jpg
diff --git a/images/Moulinrouge.jpg b/images/Moulinrouge.jpg
diff --git a/images/annie.jpg b/images/annie.jpg
diff --git a/images/bedknobsandbroomsticks.jpg b/images/bedknobsandbroomsticks.jpg
diff --git a/images/bug.jpg b/images/bug.jpg
diff --git a/images/carmenjones.jpg b/images/carmenjones.jpg
diff --git a/images/carmenjones2.jpg b/images/carmenjones2.jpg
diff --git a/images/chicago.png b/images/chicago.png
diff --git a/images/chittychitty.jpg b/images/chittychitty.jpg
diff --git a/images/grease.jpg b/images/grease.jpg
diff --git a/images/marypoppins.jpg b/images/marypoppins.jpg
diff --git a/images/myfairlady.jpg b/images/myfairlady.jpg
diff --git a/images/myfairlady2.jpg b/images/myfairlady2.jpg
diff --git a/images/nevada.jpg b/images/nevada.jpg
diff --git a/images/pap.jpg b/images/pap.jpg
diff --git a/images/porgyandbess.jpg b/images/porgyandbess.jpg
diff --git a/images/profile.jpg b/images/profile.jpg
diff --git a/images/ray.jpg b/images/ray.jpg
diff --git a/images/seven.jpg b/images/seven.jpg
diff --git a/images/sisteract.jpg b/images/sisteract.jpg
diff --git a/images/sliced.jpg b/images/sliced.jpg
diff --git a/images/soundofmusic.jpg b/images/soundofmusic.jpg
diff --git a/images/stones.jpg b/images/stones.jpg
diff --git a/images/thekingandi.jpg b/images/thekingandi.jpg
diff --git a/images/thewiz.jpg b/images/thewiz.jpg
diff --git a/images/turntable.jpg b/images/turntable.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Personal Website | Welcome</title>
+    <link href="https://fonts.googleapis.com/css?family=Cookie|Pacifico" rel="stylesheet">
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/style.css">
+  </head>
+
+  <body>
+    <div id="menu-bar">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="hobby-blog.html">Musings</a></li>
+          </ul>
+        </nav>
+      </header>
+    </div>
+
+      <div class="container">
+        <h1>Howdy!</h1>
+        <a href="about.html" class="button">Enter</a>
+      </div>
+
+      <footer>
+        <p>&copy; 2017 Website</p>
+      </footer>
+  </body>
+
+
+
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Portfolio</title>
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/style.css">
+    <link rel="stylesheet" href="styles/portfolio.css">
+  </head>
+
+  <body>
+    <div id="menu-bar">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="portfolio.html">Portfolio</a></li>
+            <li><a href="hobby-blog.html">Musings</a></li>
+          </ul>
+        </nav>
+      </header>
+    </div>
+
+
+    <main>
+        <h2>Portfolio</h2>
+          <p>
+            I am currently training to be a full stack software developer.  Over the last six weeks I have learned ruby, html and css. Check out my recent work.
+          </p>
+
+            <ul>
+              <li><a href="https://github.com/nkiruka/meowspace">Meowspace</a></li>
+              <li><a href="https://github.com/nkiruka/hotel">Hotel</a></li>
+              <li><a href="https://github.com/nkiruka/grocery-store">Grocery Store</a></li>
+              <li><a href="https://github.com/nkiruka/Word-Guess">Word Guess</a></li>
+            </ul>
+          </main>
+    <footer>
+      <p>&copy; 2017 Website</p>
+    </footer>
+  </body>
+
+</html>
diff --git a/styles/about.css b/styles/about.css
@@ -0,0 +1,36 @@
+section h2 {
+  color: white;
+  margin-left: 20px;
+}
+
+section img {
+  float:left;
+  width: 250px;
+  height: 265px;
+  border-radius: 100%;
+  border: solid 4px gray;
+  margin-left: 50px;
+}
+
+#content p {
+  color: white;
+  padding: 10px;
+  font-size: 20px;
+  margin-top: 1px;
+  margin-right: 60px;
+  padding:2px;
+}
+
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+.clearfix { display: inline-block; }
+/* start commented backslash hack \*/
+* html .clearfix { height: 1%; }
+.clearfix { display: block; }
diff --git a/styles/blog.css b/styles/blog.css
@@ -0,0 +1,56 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+
+/*body {
+  font-size: 16px;
+  font-family: helvetica;
+}*/
+
+/*hr {
+  border-color: orange;
+}*/
+
+.title h2 {
+  color: white;
+  text-align: center;
+  font-size: 30px;
+}
+
+.title p {
+  color: gray;
+  text-align: center;
+}
+
+article h3, article h4 {
+  text-align: center;
+  color: #ff6633;
+}
+
+article p {
+  line-height: 150%;
+}
+
+article img {
+  /*margin: auto;*/
+  width: 250px;
+  height: 350px;
+}
+
+article {
+  vertical-align: top;
+  display: inline-block;
+  width: 25%;
+  /*top, right, bottom, left*/
+  /*margin: 0 1%;*/
+  margin right: 20px;
+  margin-left: 50px;
+  padding: 0 1.5%;
+  background-color: lightgray;
+  border-radius: 2%;
+  /*position: relative;*/
+}
+
+footer {
+  color: white;
+  position: relative;
+  }
diff --git a/styles/main.css b/styles/main.css