dougwilson0000 · dougwilson0000 · Oct 29, 2021 · Oct 29, 2021 · Oct 29, 2021 · Oct 29, 2021
diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md
@@ -2,11 +2,11 @@
 
 From the images above, chose a wireframe to guide your design for today's project. Remember that your final project must include:
 
-- [ ]  A navigation bar with `About`, `Projects`, and `Contact` pages
-- [ ]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you.
-- [ ]  Information about you in place of the given placeholder
-- [ ]  A `My Projects` button (doesn't need to be functional)
-- [ ]  A `Contact Me` button (doesn't need to be functional)
-- [ ]  Link navigation items to new HTML pages
+- [done ]  A navigation bar with `About`, `Projects`, and `Contact` pages
+- [done ]  Gallery of projects created with flexbox - you may use random images in place of project screenshots for now with the random image link: https://picsum.photos/ or you may use images that mean something to you.
+- [done ]  Information about you in place of the given placeholder
+- [done ]  A `My Projects` button (doesn't need to be functional)
+- [done ]  A `Contact Me` button (doesn't need to be functional)
+- [done ]  Link navigation items to new HTML pages
 
 Some choices are easier than others, pick something that feels right to you. 
diff --git a/index.html b/index.html
@@ -3,9 +3,61 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Douglas Wilson's Site</title>
+    <link rel="stylesheet" href="./style/index.css">
 </head>
 <body>
+    <header>
+        <div class="top-title">
+            <h1>Douglas Wilson</h1>
+        </div>
+        <div class="top-links">
+            <nav>
+                <a class="button" href="#">Home</a>
+                <a class="button" href="about.html">About</a>
+                <a class="button" href="contact.html">Contact</a>
+                <a class="button" href="projects.html">Projects</a>
+            </nav>
+        </div>
+    </header>
+    <section class="one">
+        <div class="img1">
+
+        </div>
+        <div class="section-text">
+            <h2>Douglas Wilson</h2>
+            <a class="button2" href="projects.html">My Projects</a>
+            <p>I have always had a passion to understand computer programming. Now that I am a father of two amazing young boys, I know I want a career in this field. Ideally I will find a remote position full or part time. Happy Coding!</p>
+        </div>
+        </section>
+        <section class="two">
+        <div class="images">
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="text-below"><a href="#p1">Project 1</a></div>
+            <div class="text-below"><a href="#p2">Project 2</a></div>
+            <div class="text-below"><a href="#p3">Project 3</a></div>
+            <div class="text-below"><a href="#p4">Project 4</a></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="text-below"><a href="#p5">Project 5</a></div>
+            <div class="text-below"><a href="#p6">Project 6</a></div>
+            <div class="text-below"><a href="#p7">Project 7</a></div>
+            <div class="text-below"><a href="#p8">Project 8</a></div>
+        </div>
+    </section>
+
+    <footer>
+        <h3>Like What You See</h3>
+        <a class="button" href="contact.html">Contact Me</a>
+    </footer>
+
+
+
 
 </body>
-</html>
+</html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,168 @@
-/* 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;
+
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+* {
+    box-sizing: border-box;
+
+}
+html {
+    font-size: 62.5%;
+
+}
+
+body {
+    font-size: 1.6rem;
+    line-height: 1.5;
+}
+
+header {
+    background-color: gray;
+
+}
+
+h1 {
+    font-size: 5rem;
+    margin-top: 3%;
+    margin-left: 2%;
+}
+
+.top-links nav {
+    margin-top: 1%;
+    margin-left: 4%;
+
+}
+
+
+
+.top-links nav a{
+    color: white;
+
+}
+
+.top-links nav a:hover{
+    color: black;
+
+}
+
+.button {
+    border: 1px darkgrey solid;
+    background: grey;
+    padding: .5rem 1rem 0 1rem;
+  }
+.button:hover, {
+    background: white;
+}  
+
+.button2 {
+    border: 1px darkgrey solid;
+    background: white;
+    padding: .5rem 1rem .5rem 1rem;
+    margin-left: 3%;
+    margin-bottom: 3%;
+    color: black;
+}
+
+.button2:hover {
+    background: black;
+    color: white;
+}
+.one {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+}
+
+.img1 {
+    background-image: url('//www.html.am/images/samples/remarkables_queenstown_new_zealand-300x225.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+     width: 50%;
+     padding: 20%;
+     margin: 2%;
+}
+
+.section-text{
+
+      width: 50%;
+      padding: 0 3rem;
+}
+
+.section-text p {
+    margin-top: 2%;
+    font-size: 2.2rem;
+}
+
+h2 {
+    font-size: 3.2rem;
+    margin-bottom: 2%;
+}
+
+.images {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.box {
+    background-color: gray;
+    width: 20%;
+    height: 20vh;
+    margin: 1.3%;
+}
+
+.text-below {
+    text-align: center;
+    width: 25%;
+    height: 4vh;
+
+}
+
+.text-below a:hover {
+    color: black;
+}
+
+footer {
+    background-color: gray;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24vh;
+    flex-direction: column;
+}
+
+h3 {
+    font-size: 2.8rem;
+
+}
+
+footer a {
+    color: white;
+}
+
+footer a:hover {
+    color: black;
+}