Ada-C10 · marshi23 · Sep 16, 2018 · Sep 16, 2018 · Sep 17, 2018 · Sep 17, 2018
diff --git a/about.html b/about.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link href="stylesheets/about.css" rel="stylesheet">
+  <link href="stylesheets/normalize.css" rel="stylesheet">
+  <link href="stylesheets/styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="hobby-blog.html">Visual Blog</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+  </header>
+
+<main>
+  <section class="about">
+    <section class="about-image">
+      <img src="images/box-clipart-face-9.png" alt="avatar">
+    </section>
+    <section class="bio">
+      <h1>About me</h1>
+      <p>Mountains are so simple that they're hard! Just practice, and you really can do this. Don't get carried away.</p>
+    </section>
+  </main>
+
+  <footer>
+    <section class="pages">
+      <h2>Check out my other pages</h2>
+      <!-- TODO: Add links to portfolio and instagram page-->
+      <ul class="icons">
+        <li class="github"><a href='https://github.com/marshi23' target="_blank"><img src="images/github.png" alt="github-icon"/></a></li>
+        <li class="linkedin"><a href='http://www.linkedin.com/in/maryamshitu' target="_blank" ><img src="images/linkedin.png" alt="linkedin-icon"/></a></li>
+        <li class="instagram"><a href='https://www.instagram.com' target="_blank"><img src="images/instagram.png" alt="github-icon"/></a></li>
+        <li class="art-portfolio"><a href='https://www.wix.com/'><img src="images/art.png" alt="art-icon"/></a></li>
+      </ul>
+    </section>
+  </footer>
+
+</body>
+
+</html>
diff --git a/images/art.png b/images/art.png
diff --git a/images/box-clipart-face-9.png b/images/box-clipart-face-9.png
diff --git a/images/federico-bottos-744760-unsplash.jpg b/images/federico-bottos-744760-unsplash.jpg
diff --git a/images/github.png b/images/github.png
diff --git a/images/hotel.png b/images/hotel.png
diff --git a/images/instagram.png b/images/instagram.png
diff --git a/images/linkedin.png b/images/linkedin.png
diff --git a/images/rideshare.png b/images/rideshare.png
diff --git a/images/starly.png b/images/starly.png
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link href="stylesheets/index.css" rel="stylesheet">
+  <link href="stylesheets/normalize.css" rel="stylesheet">
+  <link href="stylesheets/styles.css" rel="stylesheet">
+
+
+</head>
+
+<body>
+
+<header>
+
+  <nav>
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="portfolio.html">Portfolio</a></li>
+      <li><a href="hobby-blog.html">Visual Blog</a></li>
+      <li><a href="about.html">About</a></li>
+    </ul>
+  </nav>
+
+  <section class="hero-img">
+    <section>
+      <h1>Maryam Shitu</h1>
+      <h3>Software Developer</h3>
+    </section>
+  </section>
+
+</header>
+
+<!-- TODO: -->
+<footer>
+ <!-- social media icons -->
+</footer>
+</body>
+
+</html>
diff --git a/photo-blog.html b/photo-blog.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link href="stylesheets/photo-blog.css" rel="stylesheet">
+  <link href="stylesheets/normalize.css" rel="stylesheet">
+  <link href="stylesheets/styles.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <nav>
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="portfolio.html">Portfolio</a></li>
+      <li><a href="photo-blog.html">Visual Blog</a></li>
+      <li><a href="about.html">About</a></li>
+    </ul>
+  </nav>
+
+  <section class="grid-container">
+      <h1 class="section-header">Photo Jounral</h1>
+      <p>Through a phone lense.</p>
+
+      <!-- TODO: Import photos from phone -->
+      <!-- Note: Not my images, grid style found on code pen -->
+      <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg" alt="black-white-image">
+
+      <img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg" alt="black-white-image">
+
+      <img src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg" alt="black-white-image">
+      <img src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg" alt="black-white-image">
+  </section>
+
+</body>
+
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Portfolio</title>
+  <link href="stylesheets/portfolio.css" rel="stylesheet">
+  <link href="stylesheets/normalize.css" rel="stylesheet">
+  <link href="stylesheets/styles.css" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="index.html">Home</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+        <li><a href="photo-blog.html">Visual Blog</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+
+    <section class="projects-container">
+      <h2 class="section-header">Projects</h2>
+      <ul class="projects">
+        <li class="project-hotel">
+          <a href="https://github.com/marshi23/hotel" target="_blank"><img src="images/hotel.png" alt="greybox"/></a>
+          <strong>Hotel</strong>
+          <p>
+            Language: Ruby. Hotel Reservation Managment Software
+        </li>
+        <li class="project-starly">
+        <a href="https://github.com/marshi23/startrly" target="_blank"><img src="images/starly.png" alt="greybox"/></a>
+          <strong>Starly</strong>
+          <p>
+            Html & CSS. At vero eos et accusamus et iusto odio dignissimos ducimus qui.
+          </p>
+        </li>
+        <li class="project-rideshare">
+        <a href="https://github.com/marshi23/ride-share" target="_blank"><img src="images/rideshare.png" alt="greybox"/></a>
+          <strong>Ride Share</strong>
+          <p>
+            Ruby. Itaque earum rerum hic tenetur a sapiente delectus.
+          </p>
+        </li>
+      </ul>
+    </section>
+
+  </main>
+
+</body>
+
+</html>
diff --git a/stylesheets/about.css b/stylesheets/about.css
@@ -0,0 +1,51 @@
+nav  li {
+  border-right: 1px solid black;
+  color: black;
+}
+
+ul {
+  list-style: none;
+}
+
+a:visited {
+    color: black;
+}
+
+.about {
+  display: flex;
+  /* flex-wrap: wrap; */
+  height: 100%;
+  align-items: center;
+}
+
+.about-image img {
+	width: 100%;
+	float: left;
+	margin: 1.66%;
+}
+
+.bio {
+  padding-left: 10%;
+}
+
+.bio h1 {
+  font-size: 3rem;
+}
+footer h2 {
+  padding-top: 2vh;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.icons {
+  padding-top: 1vh;
+  /* border: 5px solid #ffcc5c; */
+  display: flex;
+  justify-content: center;
+   justify-content: space-between;
+}
+
+.icons img {
+  padding-top: 1vh;
+   width: 30%;
+}
diff --git a/stylesheets/index.css b/stylesheets/index.css
@@ -0,0 +1,50 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+}
+
+header {
+  width: 100vw;
+  height: 100%;
+  background-image: url(../images/federico-bottos-744760-unsplash.jpg);
+  background-size: cover;
+}
+
+nav li {
+border-right: 1px solid white;
+color: white;
+}
+
+a:hover {
+  color: white;
+}
+a:visited {
+    color: white;
+}
+
+.hero-img {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+}
+
+.hero-img h1 {
+    /* Text styles */
+    font-size: 5em;
+    color: orange;
+    color: white;
+    text-shadow: 2px 2px 4px #000000;
+
+}
+
+h3 {
+  color: yellow;
+  font-size: 1.5em;
+}