MissChiefGrey · MissChiefGrey · Apr 8, 2020 · Apr 14, 2020 · Apr 14, 2020 · Apr 14, 2020
diff --git a/Pictures/Collage.jpg b/Pictures/Collage.jpg
diff --git a/Pictures/ICache.PNG b/Pictures/ICache.PNG
diff --git a/Pictures/ICheart.jpg b/Pictures/ICheart.jpg
diff --git a/Pictures/ICsoul.PNG b/Pictures/ICsoul.PNG
diff --git a/Pictures/ICspirit.PNG b/Pictures/ICspirit.PNG
diff --git a/Pictures/WPaid.jpg b/Pictures/WPaid.jpg
diff --git a/Pictures/WPelate.jpg b/Pictures/WPelate.jpg
diff --git a/Pictures/WPemc.jpg b/Pictures/WPemc.jpg
diff --git a/Pictures/WPstop.jpg b/Pictures/WPstop.jpg
diff --git a/Pictures/flowerjacket.JPG b/Pictures/flowerjacket.JPG
diff --git a/Pictures/sparkel.jpg b/Pictures/sparkel.jpg
diff --git a/Wireframe Options/ReadMe.md b/Wireframe Options/ReadMe.md
@@ -1,12 +1,12 @@
 # Wireframes
 
 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.
+option 3
+- [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.
 - [ ]  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]  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
@@ -1,11 +1,22 @@
 <!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">
+  <meta name="viewport" attributes: content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="style/index.css">
+  <title>Document</title>
 </head>
-<body>
-    <h1> ABOUT </h1>
-</body>
-</html>
+
+<!--  about  -->
+<header class="container">
+  <div>
+    <h1> About Elizabeth Knoll </h1>
+  </div>
+  <nav>
+    <a href="about.html"> All About </a>
+    <a href="projects.html"> My Projects </a>
+    <a href="contact.html"> Contact Me </a>
+  </nav>
+</header>
diff --git a/contact.html b/contact.html
@@ -1,11 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=    <h1> ABOUT </h1>, initial-scale=1.0">
-    <title>Document</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" attributes: content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="style/index.css">
+  <title>Document</title>
 </head>
-<body>
-    <h1> CONTACT </h1>
-</body>
-</html>
+
+<!--  about  -->
+<header class="container">
+  <div>
+    <h1> Contact Elizabeth Knoll </h1>
+  </div>
+  <nav>
+    <a href="about.html"> All About </a>
+    <a href="projects.html"> My Projects </a>
+    <a href="contact.html"> Contact Me </a>
+  </nav>
+</header>
diff --git a/elizabeth.knoll.txt b/elizabeth.knoll.txt
@@ -0,0 +1,22 @@
+
+
+Q&A
+// identify and explain all properties in the box model
+1. content/center = text
+2. padding = space around the text
+3. border  = defines the space outter edge of padding
+4. Margin = space between the border and other content/ boxes on the page
+
+// describe and understand that flexbox is a module
+    once Display: flex; is placed it opens up a treasure chest of styling opt. Makes life so much easier
+
+Tasks stretch
+// demonstrate understanding of flex container properties in flex box /
+// Make your webpage work at different browser widths, including mobile
+// Add CSS animations
+// Design and execute your own wireframe for About, Projects, and Contact pages
+// Host your website on Netlify.com
+
+RESPONSIVE webpage
+
+
diff --git a/index.html b/index.html
@@ -1,11 +1,116 @@
 <!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">
+ <meta name="viewport" attributes: content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="style/index.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <title>Document</title>
 </head>
-<body>
+
+<div class= "maindiv">
+
+  <header class="container">
+
+    <div>
+      <h1> Elizabeth Knoll</h1> 
+    </div>
+
+    <nav>
+      <a href="about.html"> All About </a>
+      <a href="projects.html"> My Projects </a>
+      <a href="contact.html"> Contact Me </a>
+    </nav>
+
+  </header>
+  <!-- Header end -->
+
+
+
 
-</body>
+  <!--  Intro begin  -->
+  <body>
+
+    <section class= "sec1">
+
+        <div class = "introimg">
+          <img src="Pictures/sparkel.jpg" alt="">
+        </div>
+
+
+        <div class= "sec1div">
+
+          <h3>Elizabeth Knoll</h3>
+
+          <a href="projects.html"><button type="button" onclick= a href= "contact.html">My Projects</button></a>
+
+          <p> I suddenly  began to design these one day just for fun, really. It grew and more words joined the word play more personal statements needed to be made visual and so thus the collage you see now came into being. </p>
+          <span> Simply let ART stART the heART. </span>
+        </div>
+
+
+    </section>
+    <!--  intro end  -->
+
+
+
+    <!--  Gallery begin  -->
+
+
+    <div>
+      <h2> Word Breakdown</h2>
+    </div>
+
+    <section class ="secimggal1">  
+          <img src="Pictures/WPstop.jpg" alt="Stop Sign wordbreakdown stay optimistic written out written on a real stopsign">
+          <img src="Pictures/WPemc.jpg" alt="e equals m c squared wordbreakdown emotions equals momentum times conciousness mind and body squared pic background chalkboard">
+          <img src="Pictures/WPelate.jpg" alt=" elation wordbreakdown elevated language of vibration picture background has fireworks">
+          <img src="Pictures/WPaid.jpg" alt="Don't be afraid wordbreakdown for afraid, ask for aid background heart shaped bandaid vintage">
+    </section>
+
+    <div>
+      <h2> Image Creation </h2>
+    </div>
+
+    <section class= "secimggal2">
+        <img src= "Pictures/ICspirit.PNG"  alt="">
+        <img src= "Pictures/ICsoul.PNG" alt="">
+        <img src= "Pictures/ICheart.jpg" alt="">
+        <img src= "Pictures/ICache.PNG" alt=""> 
+    </section>
+
+  </body>
+  <!-- Gallery end -->
+
+
+
+  <!-- Footer Begin -->
+
+  <div class="footer">
+    <a href="contact.html"><button type="button" onclick= a href= "contact.html">Contact Me</button>
+    </a>
+  </div>
+
+  <footer class="container">
+
+    <nav>
+      <a href="about.html"> About </a>
+      <a href="projects.html"> Projects </a>
+      <a href="contact.html"> Contacts </a>
+    </nav>
+
+    <div class="footerdiv">
+      <a href="https://www.facebook.com" class="fa fa-facebook"></a>
+      <a href="#" class="fa fa-instagram"></a>
+    </div>
+
+  </footer>
+
+</div>
+
+<!-- Footer End -->
+
+
 </html>
diff --git a/projects.html b/projects.html
@@ -1,11 +1,22 @@
 <!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">
+  <meta name="viewport" attributes: content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="style/index.css">
+  <title>Document</title>
 </head>
-<body>
-    <h1> PROJECTS </h1>
-</body>
-</html>
+
+<!--  about  -->
+<header class="container">
+  <div>
+    <h1> Projects of Elizabeth Knoll </h1>
+  </div>
+  <nav>
+    <a href="about.html"> All About </a>
+    <a href="projects.html"> My Projects </a>
+    <a href="contact.html"> Contact Me </a>
+  </nav>
+</header>