SquishieDragon · SquishieDragon · Oct 9, 2020 · Oct 9, 2020 · Oct 9, 2020 · Oct 14, 2020
diff --git a/ReadMe.md b/ReadMe.md
@@ -23,31 +23,31 @@ 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
-- [ ]  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 that links to the projects page
-- [ ]  A `Contact Me` button that links to the contact page
+- [x]  A navigation bar with `About`, `Projects`, and `Contact` that link to the corresponding 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 that links to the projects page
+- [x]  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
 
 ### Task 3: Stretch Goals
 
 The following goals are designed to stretch your knowledge and may require additional research beyond what was learned in class today.
 
 - [ ] Make your webpage work at different browser widths, including mobile
-- [ ] Add CSS animations
+- [x] Add CSS animations
 - [ ] Design and execute your own wireframe for `About`, `Projects`, and `Contact` pages
-- [ ] Host your website on Netlify.com
+- [x] Host your website on Netlify.com
 
 ## FAQs
 

diff --git a/about.html b/about.html
@@ -7,5 +7,8 @@
 </head>
 <body>
     <h1> ABOUT </h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+
 </body>
 </html>
diff --git a/contact.html b/contact.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
     <title>Document</title>
+
 </head>
 <body>
     <h1> CONTACT </h1>

diff --git a/index.html b/index.html
@@ -3,9 +3,64 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>AJE</title>
+    <link rel="stylesheet" href="style/index.css">
 </head>
 <body>
 
+<!-- //////// Background Image and Nav ////////// -->
+
+<div class="background">
+
+<div class="header1">
+
+        <div class="nav">
+            <button class="about"> <a href="about.html"> About </a></button>
+            <button class="contact"> <a href="contact.html"> Contact Me </a></button>
+            <button class="projects"> <a href="projects.html"> Projects </a></button>
+        </div>
+</div>
+
+<!-- //////// Background Image and Nav ////////// -->
+
+<div class="container"> 
+    <div class="row">
+        <div class="pro1">
+            <img src="https://images.unsplash.com/photo-1544484647-725cbadff6cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="keyboard" width="300px"/>
+        </div>
+
+        <div class="pro1">
+            <img src="https://images.unsplash.com/photo-1482715091246-822e47d61e1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Peonie flowers" width="300px"/>
+        </div>
+
+        <div class="pro1">
+            <img src="https://images.unsplash.com/photo-1477233534935-f5e6fe7c1159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="music supplies" width="300px"/>
+        </div>
+
+    </div>
+</div>
+
+    <div class="container"> 
+        <div class="row">
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1500353391678-d7b57979d6d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Coffee and succulents" width="300px"/>
+            </div>
+
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1581397867105-8c988bd747e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Green jacket" width="300px"/>
+            </div>
+
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1454191297004-cefa4b1042d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="artist" width="300px"/>
+            </div>
+
+        </div>
+
+
+<div class="footer">
+
+
+</div>
+
 </body>
 </html>
diff --git a/projects.html b/projects.html
@@ -3,9 +3,46 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>AJE Projects</title>
+    <link rel="stylesheet" href="style/index.css">
 </head>
 <body>
     <h1> PROJECTS </h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
+
+    <div class="container"> 
+        <div class="row">
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1544484647-725cbadff6cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+            </div>
+
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1482715091246-822e47d61e1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+            </div>
+
+            <div class="pro1">
+                <img src="https://images.unsplash.com/photo-1477233534935-f5e6fe7c1159?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+            </div>
+
+        </div>
+    </div>
+
+        <div class="container"> 
+            <div class="row">
+                <div class="pro1">
+                    <img src="https://images.unsplash.com/photo-1500353391678-d7b57979d6d2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+                </div>
+
+                <div class="pro1">
+                    <img src="https://images.unsplash.com/photo-1581397867105-8c988bd747e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+                </div>
+
+                <div class="pro1">
+                    <img src="https://images.unsplash.com/photo-1454191297004-cefa4b1042d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="300px"/>
+                </div>
+
+            </div>
+
 </body>
 </html>
diff --git a/style/index.css b/style/index.css
@@ -1 +1,131 @@
-/* Add CSS styling here */
+/* 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;
+}
+
+
+body{
+    width: 100%;
+}
+
+.background{ 
+    background-image: url("https://images.unsplash.com/photo-1559534838-69363706332f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
+    min-height: 380;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+}
+
+.header1{
+    position: absolute;
+    margin: 20px;
+    width: auto;
+}
+
+.container {
+    position: relative;
+    text-align: center;
+    color: white;
+    border: solid lime;
+    margin-bottom: 2%;
+}
+
+.nav{
+    overflow: hidden;
+    background-color: #333;
+    border: solid orangered;
+}
+
+button{
+    float: left;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+a{
+    text-decoration: none;
+    color: rgb(140, 39, 168);
+    font-family: Chalkduster, fantasy;
+    text-shadow: gray;
+}
+
+button:hover{
+    background-color:  #ddd;
+    color: bl;
+    transition: 0.5s;
+}
+
+.paint{
+    width: 100%;
+}
+
+
+.row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.footer{
+    background-color: rgb(107, 219, 107);
+    width: 100%;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+}
+
+@media screen and (max-width: 800px) {
+    body {
+        background-color: ;
+        color: red;
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,5 +7,8 @@ @@
     </head>
     <body>
         <h1> ABOUT </h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
     </body>
     </html>