Greg jordan

README.md

@@ -34,14 +34,24 @@ Edit this document to include your answers after each question. Make sure to lea
 
 1. What is the difference between an adaptive website and a fully responsive website?
 
+Responsive websites respond to the size of the browser at any given size/point. Whereas, adaptive websites adapt to the size of the browser at specific breakpoints.
+
 2. Describe what it means to be mobile first vs desktop first.
 
+This means that the website is design with the intentions of the user viewing it on a mobile device first as opposed to it being viewed on a desktop browser first.
+
 3. What does `font-size: 62.5%` in the `html` tag do for us when using `rem` units?
 
+It gives the user accessibility options for viewing websites, like zooming in and out of the webpage.  This allows the site to react to those options.
+
 4. How would you describe preprocessing to someone new to CSS?
 
+Preprocessing is when CSS can be written with a special syntax that makes it easier to reuse, read and maintain. Then that syntax is translated through a translator (compiler) into regular CSS
+
 5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble?
 
+My favorite concept is the ease of it's readability and reusability.  The concept that has been giving me the most trouble is creating mixins and parametric mixins and using them correctly.  Correct
+
 You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge.
 
 ## Project Set Up

css/index.css

@@ -0,0 +1,324 @@
+/* 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;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  font-size: 62.5%;
+}
+html,
+body {
+  font-family: 'Ubuntu', sans-serif;
+  color: #5E6164;
+}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: 'Russo One', sans-serif;
+  color: #23293B;
+}
+h2 {
+  font-size: 3.2rem;
+}
+h3 {
+  font-size: 2.8rem;
+}
+p {
+  font-size: 1.6rem;
+  line-height: 1.4;
+}
+.container {
+  max-width: 800px;
+  width: 100%;
+  margin: 0 auto;
+}
+.nav-header {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+@media (max-width: 500px) {
+  .nav-header {
+    width: 100%;
+  }
+}
+.nav-header h1 {
+  font-size: 4rem;
+  margin-bottom: 3rem;
+}
+@media (max-width: 500px) {
+  .nav-header h1 {
+    width: 80%;
+  }
+}
+.nav-header nav {
+  display: flex;
+  justify-content: space-around;
+  width: 45%;
+}
+@media (max-width: 500px) {
+  .nav-header nav {
+    width: 100%;
+    justify-content: space-around;
+    align-content: center;
+  }
+}
+.nav-header nav a {
+  font-size: 1.5rem;
+  text-decoration: none;
+}
+.nav-header nav a:hover {
+  text-decoration: underline;
+  text-decoration-color: black;
+}
+@media (max-width: 500px) {
+  .nav-header {
+    display: flex;
+    width: 90%;
+  }
+}
+footer {
+  color: #22283B;
+  background: #f4f4f4;
+  padding: 20px 0;
+  border: 1px double #e0e0e0;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 500px) {
+  .home {
+    max-width: 80%;
+    margin: auto;
+  }
+}
+.home .intro .banner {
+  max-width: 100%;
+}
+.home .intro h2 {
+  padding: 15px;
+}
+.home .intro p {
+  padding: 0 15px;
+}
+.home .space-images {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  border-radius: 30%;
+}
+@media (max-width: 500px) {
+  .home .space-images .sky {
+    display: none;
+  }
+  .home .space-images .launch {
+    display: none;
+  }
+}
+.home .space-images img {
+  width: 28%;
+  margin: 20px 2.5%;
+  border-radius: 20px;
+  height: 100%;
+}
+@media (max-width: 500px) {
+  .home .space-images img {
+    width: 100%;
+    border-radius: 20px;
+    height: 100%;
+  }
+}
+.home .visit-planets {
+  padding: 15px;
+}
+.home .visit-planets h3 {
+  margin-top: 11px;
+}
+@media (max-width: 500px) {
+  .home .visit-planets h3 {
+    width: 100%;
+    margin: 0 auto;
+  }
+}
+.home .visit-planets p {
+  margin-top: 13px;
+}
+.home .walk {
+  margin-top: 60px;
+  border-top: 1px solid #dee2e6;
+  padding: 50px 60px;
+  display: flex;
+  justify-content: center;
+}
+@media (max-width: 500px) {
+  .home .walk {
+    flex-direction: column-reverse;
+    width: 100%;
+    padding: 2%;
+  }
+}
+.home .walk .walk-text {
+  width: 100%;
+  margin-top: 20px;
+}
+.home .walk .walk-text h3 {
+  margin-bottom: 10px;
+}
+.home .walk .walk-text p {
+  margin-bottom: 26px;
+}
+.home .walk .walk-text .btn {
+  background-color: #22283A;
+  border-radius: 5px;
+  text-align: center;
+  font-size: 1.5rem;
+  color: white;
+  padding: 2%;
+  width: 100px;
+  border: 1px solid black;
+}
+@media (max-width: 500px) {
+  .home .walk .walk-text .btn {
+    width: 100%;
+    padding: 5%;
+  }
+}
+.home .walk .walk-text .btn:hover {
+  background: white;
+  color: #22283A;
+}
+.home .walk .walk-img {
+  margin-top: 20px;
+  border-radius: 40px;
+}