richmayor · richmayor · May 6, 2020 · May 7, 2020
diff --git a/about.html b/about.html
@@ -3,9 +3,39 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>About</title>
 </head>
+
+
+<!-- navigation/'about'-->
+
 <body>
-    <h1> ABOUT </h1>
-</body>
+    <section>
+      <nav>
+        <div class="About"></div>
+        <a href="projects.html">My Projects</a>
+        <a href="home.html">Home</a>
+        <a href="about.html">About</a>
+        <a href="contact.html">Contact</a>
+        </div>
+      </nav>
+    </section>
+
+    <div>
+        <section class="About">
+          <div>
+            <h2>Rich Mayor</h2>
+          </div>
+
+          <div>
+            <button type="#Projects">My Projects</button>
+          </div>
+
+          <div>
+            <p> Here are some words about me and my journey in coding so far. These words are here.</p>
+          </div>
+        </section>
+      </div>
+  </body>
+
 </html>
diff --git a/contact.html b/contact.html
@@ -3,9 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1> CONTACT </h1>
-</body>
-</html>
+    <title>Contact</title>
+
+    <footer>
+        <div>
+          <h2> Like what you see?</h2>
+        </div>
+        <div>
+          <button type="Contact Me">Contact Me</button>
+        </div>
+        <div>
+            <a href="http://facebook.com" target="Facebook"><i class="fab fa-facebook-f"></i></a>
+            <a href="http://instagram.com" target="Instagram"><i class="fab fa-instagram"></i></a>
+            <a href="http://twitter.com" target="Twitter"><i class="fab fa-twitter"></i></a>
+        </div>
+      </footer>
+
+      </html>
diff --git a/images/aaron-burden-6jYoil2GhVk-unsplash.jpg b/images/aaron-burden-6jYoil2GhVk-unsplash.jpg
diff --git a/images/annie-spratt-4-4WPFLVhAY-unsplash.jpg b/images/annie-spratt-4-4WPFLVhAY-unsplash.jpg
diff --git a/images/hal-gatewood-alntq-WvZZM-unsplash.jpg b/images/hal-gatewood-alntq-WvZZM-unsplash.jpg
diff --git a/images/jonathan-borba-Z1Oyw2snqn8-unsplash.jpg b/images/jonathan-borba-Z1Oyw2snqn8-unsplash.jpg
diff --git a/images/josh-applegate-p_KJvKVsH14-unsplash.jpg b/images/josh-applegate-p_KJvKVsH14-unsplash.jpg
diff --git a/images/kid.jpeg b/images/kid.jpeg
diff --git a/index.html b/index.html
@@ -1,11 +1,20 @@
-<!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title> Rich's portfolio</title>
+  <link rel="stylesheet" href="style/index.css">
+
 </head>
-<body>
-
-</body>
-</html>
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<nav>
+  <!-- main heading -->
+
+  <body>
+    <h1> Rich Mayor</h1>
+
+    <a href="projects.html">My Projects</a>
+</nav>
+</body>
diff --git a/projects.html b/projects.html
@@ -6,6 +6,52 @@
     <title>Document</title>
 </head>
 <body>
-    <h1> PROJECTS </h1>
+
+    <section id="projects">
+        <h2>My Projects</h2>
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1584697964190-7383cbee8277?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="one"> <!-- this opens little div #1-->
+            <h3>Here's photo one</h3>
+          </div><!-- this closes little div #1 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1549737221-bef65e2604a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="two"> <!-- this opens little div #2-->
+            <h3>Here's photo two</h3>
+          </div><!-- this closes little div #2 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1565843248736-8c41e6db117b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="three"> <!-- this opens little div #3-->
+            <h3>Here's photo three</h3>
+          </div><!-- this closes little div #3 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1531206715517-5c0ba140b2b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="four"> <!-- this opens little div #4-->
+            <h3>Here's photo four</h3>
+          </div><!-- this closes little div #4 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1530462943125-677cc511c87e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="five"> <!-- this opens little div #5-->
+            <h3>Here's photo five</h3>
+          </div><!-- this closes little div #5 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1513617859069-1d9583bc63a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="six"> <!-- this opens little div #6-->
+            <h3>Here's photo six</h3>
+          </div><!-- this closes little div #6 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1560785496-3c9d27877182?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="seven"> <!-- this opens little div #7-->
+            <h3>Here's photo seven</h3>
+          </div><!-- this closes little div #7 -->
+
+        <div class="Photos"><img src="https://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"></div>
+          <div class="eight"> <!-- this opens little div #8-->
+            <h3>Here's photo eight</h3>
+          </div><!-- this closes little div #8 -->
+
+      </section>
+
+
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,79 @@
-/* Add CSS styling here */
+/* Add CSS styling here */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+    vertical-align: baseline;
+}
+
+* {
+    box-sizing: border-box;
+    padding: 2px;
+    margin: 2px;
+    max-width: 100%; /*this is saying you can never be bigger than your parent*/
+    border: 1px solid grey;
+  }
+
+  html {
+    font-size: 62.5%;
+  }
+
+  body {
+    line-height: 2;
+    font-size: 1.5rem;
+    font-family: "Nunito Sans", sans-serif;
+  }
+
+  section {
+    padding: 4% 0;
+  }
+
+  /* Navigation section styles */
+
+  .navigation
+
+  /* about section styles */
+
+  footer {
+    background-color: grey;
+    text-align: center;
+    width: 50%;
+    height: 20%;
+  }
+
+  /* photos section */
+
+  .Photos{
+    width:50%;
+    display: flex;
+    flex-wrap: wrap;
+  /*   justify-content:space-around; */
+  }
+
+
+  @media (max-width: 800px) {
+    .navigation {
+      font-size: 2rem;
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
+  @media (max-width: 500px) {
+  }
+