frankylopez1388 · frankylopez1388 · May 27, 2020 · May 27, 2020 · May 27, 2020 · May 29, 2020
diff --git a/README.md b/README.md
@@ -1,20 +1,19 @@
-# Intro CSS Module Challenge
-
-The module challenge is the afternoon project or assignment that students work through independently. This expands on the guided project completed earlier with the instructor.
+# Intro CSS Module Project
 
 ## User Interface and Git
 
 ## Objectives
 
-- implement a CSS reset and understand why it’s important for cross-browser development
+- learn about the box model and be able to explain its properties
 - demonstrate CSS specificity and inheritance to create and update styles
-- identify and explain all properties in the box model
+- implement a CSS reset and understand why it’s important for cross-browser development
+- describe and use responsive units (px, em, rem, %, and vw.vh) to create a fully responsive website
 
 ## Introduction
 
-In this challenge you will be styling a single page with more advanced CSS. This page is a take on the government's [national parks website](https://www.nps.gov/yose/index.htm) and includes some basic information about Yosemite National Park in California.
+In this project you will be styling a single page with more advanced CSS. This page is a take on the government's [national parks website](https://www.nps.gov/yose/index.htm) and includes some basic information about Yosemite National Park in California.
 
-The styles in your [design file](/design/desktop.png) include bright colors and fun icons to get people excited about exploring the outdoors. With a little work, this could even be refactored into a 3rd-party national parks guide site or blog.
+The styles in your [design file](/design/desktop.jpg) include bright colors and fun icons to get people excited about exploring the outdoors. With a little work, this could even be refactored into a 3rd-party national parks guide site or blog.
 
 ## Instructions
 
@@ -33,7 +32,7 @@ Follow these steps to set up and work on your project:
 
 Once your repository is set up, practice what you learned today to style the site according to the given design. Your complete project should look similar to the desktop image. You should take the following actions, at a minimum:
 
-- [ ] Link your CSS stylesheet in the `index.html`
+- [ ] Link your CSS stylesheet in the `index.html` and impliment a CSS reset 
 - [ ] Markup html semantically, such that it can be styled according to the given desktop image
 - [ ] Color the background of items in the navigation bar and footer with the following colors:
   - [ ] Plan your Visit: `#FF764E`
@@ -54,13 +53,20 @@ Once your repository is set up, practice what you learned today to style the sit
 
 **Throughout your design you should avoid static units (pixels), and should instead use responsive units wherever possible.**
 
+### Task 2b: Exit Ticket
+
+Once you begin, you will have 15 minutes to answer the questions [here](https://app.codesignal.com/public-test/DyGu5BAvk3m7jHqoz/AiMA3XzNTYpeQH).
+
+The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.
+
+
 ### 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.
 
 - [ ] Add CSS animations (hover, mouseover, etc.)
 - [ ] Design and execute your own pages for `Plan your Visit`, `Learn About the Park`, or `Get Involved`
-- [ ] Use [favicon.io](favicon.io) to convert the campfire and RV images to real favicons and use them in your project
+- [ ] Use [favicon.io](https://favicon.io/favicon-converter/) to convert the campfire and RV images to real favicons and use them in your project
 - [ ] Host your website on Netlify.com
 
 ## Resources

diff --git a/assets/footer_img.jpg b/assets/footer_img.jpg
diff --git a/assets/header_img.jpg b/assets/header_img.jpg
diff --git a/design/desktop.jpg b/design/desktop.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,113 @@
+html {
+    font-family: 'Roboto Mono', monospace;
+    font-size: 62.5%;
+    font-size: 1rem;
+}
+
+nav {
+    display: inline-block;
+    width: 100%;
+    margin: 2%;
+    text-align: center;
+}
+
+nav button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border: 0;
+    border-radius: 10px;
+    margin: 0 8%;
+}
+
+.button1 {
+    background-color: #FF764E;
+}
+
+.button2 {
+    background-color: #5ED3EB;
+}
+
+.button3 {
+    background-color: #FFCD69;
+}
+
+header {
+    width: 100%;
+}
+header img {
+    margin-left: 5%;
+    margin-top: 3%;
+    width: 15%;
+    height: auto;
+    border-radius: 50%;
+}
+
+header div {
+    display: inline-block;
+    width: 35%;
+    margin: 0 auto;
+    text-align: center;
+    border: 2px solid black;
+
+
+}
+
+header h1 {
+    font-family: 'Chelsea Market', cursive;
+    font-size: 4rem;
+}
+
+.top-section {
+    width: 80%;
+    margin: 0 auto 50px;
+    padding: 2%;
+    background-color: #DDB9A3;
+    color: white;
+}
+#fire-p {
+    width: 15%;
+    margin: 0 auto 50px;
+    padding: 2%;
+    text-align: center;
+}
+#fire {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 10%;
+    height: auto;
+}
+
+#camper {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 10%;
+    height: auto;
+}
+
+#reservations {
+    width: 15%;
+    margin: 0 auto 50px;
+    padding: 2%;
+    text-align: center;
+}
+
+footer img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    object-position: top;
+}
+
+footer div {
+
+    background-color: #F9E7DC;
+    width: 100%;
+
+    }
diff --git a/index.html b/index.html
@@ -4,36 +4,59 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-
-
+  <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Roboto+Mono&display=swap" rel="stylesheet">
+  <link rel = "stylesheet" type = "text/css" href = "reset.css">
+  <link rel="stylesheet" type="text/css" href="index.css">
+
 </head>
 <body>
-        Plan your Visit
-        Learn about the Park
-        Get Involved
-
-
-      "https://static01.nyt.com/images/2018/11/11/travel/11yosemite2/merlin_145320882_abb47a0c-1a15-402a-8d30-9dcb7073e46b-superJumbo.jpg"
-      Yosemite Park Guide
-      Come explore California’s beautiful wilderness.
-      Always open. Reservations are not available or required to enter the park.
-
-      Not just a great valley, but a shrine to human foresight, the strength of granite, the power of glaciers, the persistence of life, and the tranquility of the High Sierra.
-
-      First protected in 1864, Yosemite National Park is best known for its waterfalls, but within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient giant sequoias, a vast wilderness area, and much more.
-
-      "https://image.flaticon.com/icons/svg/2979/2979348.svg"
-      Fire is a natural and essential part of Yosemite. We manage fire carefully and study how it interacts with the park’s ecosystems. This blog provides updates about fires in Yosemite. Check for current fire restrictions.
-
-      "https://image.flaticon.com/icons/svg/820/820374.svg"
-      We strongly recommend that you make reservations for lodging, camping, and backpacking. You can pay the park entrance fee upon arrival (there's no need to pay it in advance).
-
-      "https://www.yourtownmonthly.com/wp-content/uploads/2019/08/Daycation-Yosemite.png"
-
-
-        Plan your Visit
-        Learn about the Park
-        Get Involved
-
+  <nav>
+        <button class = "button1">Plan your Visit</button>
+        <button class = "button2">Learn about the Park</button>
+        <button class = "button3">Get Involved</button>
+  </nav> 
+
+
+
+  <header>
+    <img src = "assets/header_img.jpg">
+          <div>
+        <H1>Yosemite Park Guide</H1>
+        <p>&nbsp</p>
+        <p>Come explore California’s beautiful wilderness.</p>
+        <p>&nbsp</p>
+        <p>Always open. Reservations are not available or required to enter the park.</p>
+      </div>
+   </header>   
+   <section class ="top-section">
+     <div>    
+      <p>Not just a great valley, but a shrine to human foresight, the strength of granite, the power of glaciers, the persistence of life, and the tranquility of the High Sierra.</p>
+      <p>&nbsp</p>
+      <p>First protected in 1864, Yosemite National Park is best known for its waterfalls, but within its nearly 1,200 square miles, you can find deep valleys, grand meadows, ancient giant sequoias, a vast wilderness area, and much more.</p>
+    </div>
+    </section>
+    <section class = "middle-section">
+      <img id = "fire" src = "https://image.flaticon.com/icons/svg/2979/2979348.svg">
+      <div id = "fire-p">
+        <p>Fire is a natural and essential part of Yosemite. We manage fire carefully and study how it interacts with the park’s ecosystems. This blog provides updates about fires in Yosemite. Check for <strong>current fire restrictions.</strong></p>
+    </div>
+
+      <img id = "camper" src = "https://image.flaticon.com/icons/svg/820/820374.svg">
+      <div id = "reservations">
+        <p>We strongly recommend that you make reservations for lodging, camping, and backpacking. You can pay the <strong>park entrance fee</strong> upon arrival (there's no need to pay it in advance).</p>
+    </div>
+    </section>
+    <footer>
+      <div>
+      <img src = "assets/footer_img.jpg">
+    </div>
+      <div>
+      <nav>
+        <button class = "button1">Plan your Visit</button>
+        <button class = "button2">Learn about the Park</button>
+        <button class = "button3">Get Involved</button>
+      </nav>
+    </div>
+    </footer>
 </body>
 </html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,48 @@
+/* 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;
+}