nahword · nahword · Oct 29, 2020 · Oct 29, 2020 · Oct 29, 2020 · Oct 29, 2020
diff --git a/.gitmodules b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "User-Interface"]
+	path = User-Interface
+	url = https://github.com/nahword/User-Interface-II
diff --git a/ReadMe.md b/ReadMe.md
@@ -23,19 +23,19 @@ Portfolio websites are a great way to show off your work to friends, family, and
 
 Follow these steps to set up and work on your project:
 
-- [ ] Create a forked copy of this project.
-- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!).
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
+- [X] Create a forked copy of this project.
+- [X] Clone your OWN version of the repository (Not Lambda's by mistake!).
+- [X] Create a new branch: git checkout -b `<firstName-lastName>`.
+- [X] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
+- [X] Push commits: git push origin `<firstName-lastName>`.
 
 ### Task 2: Minimum Viable Product
 
 Once your repository is set up, practice what you learned today to create a portfolio site from the wireframe of your choosing. **You may choose any of the three wireframes in the "Wireframe Options" folder above.** Your complete project should look similar to the wireframe you chose, and include all of the following elements:
 
-- [ ]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding pages
+- [X]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding 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
+- [X]  Information about you in place of the given placeholder
 - [ ]  A `My Projects` button that links to the projects page
 - [ ]  A `Contact Me` button that links to the contact page
 - [ ]  Links to any social media profiles (Instagram, linkedIn, Twitter) into the footer section of your home page

diff --git a/User-Interface b/User-Interface
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
+- [X]  A navigation bar with `About`, `Projects`, and `Contact` pages
+- [X]  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.
+- [X]  Information about you in place of the given placeholder
+- [X]  A `My Projects` button (doesn't need to be functional)
+- [X]  A `Contact Me` button (doesn't need to be functional)
+- [X]  Link navigation items to new HTML pages
 
 Some choices are easier than others, pick something that feels right to you. 
diff --git a/about.html b/about.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/index.css"/>
     <title>Document</title>
 </head>
 <body>

diff --git a/contact.html b/contact.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/index.css"/>
     <title>Document</title>
 </head>
 <body>

diff --git a/index.html b/index.html
@@ -3,9 +3,68 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="style/index.css"/>
+    <link href="https://fonts.googleapis.com/css2?family=Neuton:wght@700;800&display=swap" rel="stylesheet">
+    <title>Jammal Williams</title>
 </head>
 <body>
+    <header>
+        <h1>Jammal Williams</h1>
+        <nav>
+            <a class="home" href="index.html">Home</a>
+            <a class="about" href="about.html">About</a>
+            <a class="contact" href="contact.html">Contact</a>
+            <a class="projects" href="projects.html">Projects</a>
+        </nav>
+    </header>
+    <section class="info">
+        <div class="mainPhoto">
+            <img src="style/pexels-tom-swinnen-1309766.jpg" alt="A keyboard with a dark background">
+        </div>
+        <div class="infoText">
+            <h2>Jammal Williams</h2>
+            <a class="button" href="projects.html">My projects</a>
+            <p>My interest in the tech sector stems from my desire to advocate for poor people. I hope to build far-reaching and accessible projects that encourage people's creativity. I believe that regular people can change the world in unexpected ways when we foster our ability to create. Here are some projects that I've created.</p>
+        </div>
+    </section>
+    <section class="projects">
+        <div class="project1">
+                <img src="https://images.unsplash.com/photo-1545038495-06c466616626?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project1</p>
+        </div>
+        <div class="project2">
+              <img src="https://images.unsplash.com/photo-1516081073616-833a87ca7516?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project2</p>
+        </div>
+        <div class="project3">
+                <img src="https://images.unsplash.com/photo-1595943623251-cb926c618a4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project3</p>
+        </div>
+        <div class="project4">
+                <img src="https://images.unsplash.com/photo-1597879994760-3cf0105b1686?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project4</p>
+        </div>
+        <div class="project5">
+                <img src="https://images.unsplash.com/photo-1602126729293-4d567f8d99fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project5</p>
+        </div>
+        <div class="project6">
+                <img src="https://images.unsplash.com/photo-1576086085526-0de1930a57c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project6</p>
+        </div>
+        <div class="project7">
+                <img src="https://images.unsplash.com/photo-1477093782505-e10aaeb27c6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
+            <p>Project7</p>
+        </div>
+        <div class="project8">
+                <img src="https://images.unsplash.com/photo-1492285231531-94cb637b064c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
+            <p>Project8</p>
+        </div>
+    </section>
+    <footer>
+        <h2>Like what you see?</h2>
+        <a class="button" href="contact.html">Contact Me</a>
+    </footer>
 
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/index.css"/>
     <title>Document</title>
 </head>
 <body>

diff --git a/style/index.css b/style/index.css
@@ -1 +1,220 @@
-/* Add CSS styling here */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+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;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+/* Add CSS styling here */
+/* color palette: main/bg: #e1f2fc secondary: #faf6b9 dark/text: #77158f */
+*{
+    box-sizing:border-box;
+    max-width:100%;
+}
+html{
+    font-size: 62.5%;
+    font-family:'Neuton', serif;
+    font-weight: 700;
+}
+body{
+    background-color: #e1f2fc;
+    font-size: 1.6rem;
+    max-width: 100%;
+}
+header{
+    background-color: #77158f;
+    color: #e1f2fc;
+}
+h1{
+    font-size: 5em;
+    margin-left: 5%;
+    font-weight: 800;
+}
+nav{
+    display: flex;
+    justify-content: space-evenly;
+    margin: 3%;
+    padding: 0 3%;
+    width: 85%;
+}
+a{
+    background-color: darkslategrey;
+    color:#e1f2fc;
+    font-size: 2em;
+    text-decoration: none;
+    padding: 0 5%;
+    border: 2px solid #faf6b9;
+    border-radius: 15px;
+    transition: 1s;
+}
+h2{
+    font-size: 2.5em;
+}
+.info{
+    width:100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.infoText{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 43%;
+}
+.infoText > *{
+    margin: 2% 0;
+}
+.infoText p{
+    font-size:1.5em;
+    max-width: 80%;
+}
+.mainPhoto{
+    width: 45%;
+}
+.mainPhoto img{
+    width: 85%;
+    margin: 2%;
+}
+.button{
+    text-align:center;
+    width: 60%;
+    padding-bottom: 1.5%;
+    transition: .75s;
+}
+a:hover{
+    color:darkslategrey;
+    background-color:#e1f2fc;
+    border: 2px solid #faf6b9;
+}
+.projects{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+}
+.projects div{
+    width:24%;
+    margin: 2% auto;
+}
+.projects img{
+    width:100%;
+    margin: 2%;
+}
+.projects p{
+    text-align: center;
+    font-size: 2em;
+}
+footer{
+    display: flex;
+    flex-direction: column;
+    background-color: #77158f;
+}
+footer h2{
+    font-size: 3em;
+    color: #e1f2fc;
+    text-align: center;
+}
+footer a{
+    margin: 1% auto;
+    padding-top:1%;
+    max-width:33%;
+}
+
+/* media queries: 800px and 500px */
+@media(max-width:800px){
+    header{
+        max-width:100%;
+    }
+    nav{
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+        margin: 0 auto;
+    }
+    nav > *{
+        margin: 0.5% auto;
+        width: 30%;
+    }
+    h1{
+        font-size: 2.5em;
+        text-align: center;
+    }
+    h2{
+        font-size: 2em;
+    }
+    a{
+        font-size: 1.5em;
+    }
+    .info{
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin: 0 auto;
+    }
+    .info a{
+        padding-top:1%;
+    }
+    .infoText{
+        align-items: center;
+        width: 95%;
+    }
+    .button{
+        width:33.33%
+    }
+    .projects div{
+        width:45%;
+    }
+    .projects p{
+        font-size: 1.5em;
+    }
+}
+/* end 800px media */
+@media(max-width:500px){
+    .projects div{
+        width: 78%;
+    }
+}
+/* end 500px media */
diff --git a/style/pexels-tom-swinnen-1309766.jpg b/style/pexels-tom-swinnen-1309766.jpg
diff --git a/style/project1.jpg b/style/project1.jpg
diff --git a/style/project2.jpg b/style/project2.jpg
diff --git a/style/project3.jpg b/style/project3.jpg
diff --git a/style/project4.jpg b/style/project4.jpg
diff --git a/style/project5.jpg b/style/project5.jpg
diff --git a/style/project6.jpg b/style/project6.jpg
diff --git a/style/project7.jpg b/style/project7.jpg
diff --git a/style/project8.jpg b/style/project8.jpg
diff --git a/web-Sprint-Challenge-User-Interface-and-Git b/web-Sprint-Challenge-User-Interface-and-Git