Kyle Baker Sprint Challenge

ANSWERS.md

@@ -1,7 +1,15 @@
 <!-- Answers to the Self Study Questions go here -->
 
 1. If you saw this HTML: `<div class="box box1 box2 box3"></div>` which class has the most specificity weight?
+	box3
 2. Describe the difference between `display: block;` and `display: inline;`.
+	Block will display an element on a new line whereas display will display it in line.
 3. While using flexbox, what axis are you using when you use the property: `align-items: center`?
+	Off-axis (not main)
 4. What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+	Fixed layout is where sizes of elements are all predetermined.
+	Adaptive layout responds to the width of a browser at specific points.
+	Responsive layout responds to the width of a browser at any point.
+	Fluid layout uses relative layouts rather than fixed units, such as percentages instead of pixels. 
 5. Why do we need to use the CSS property max-width on the outer most container in a responsive website?
+	In the case that there is a very large screen there would be a lot of empty space if the layout did not have a max 	    width. 

css/index.css

@@ -3,6 +3,10 @@
    License: none (public domain)
 */
 
+html {
+    font-size: 62.5%;
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -12,39 +16,45 @@ 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, 
+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;
+    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, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+    display: block;
 }
+
 body {
-	line-height: 1;
+    line-height: 1;
 }
+
 ol, ul {
-	list-style: none;
+    list-style: none;
 }
+
 blockquote, q {
-	quotes: none;
+    quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
-	content: '';
-	content: none;
+    content: '';
+    content: none;
 }
+
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 * {
@@ -57,7 +67,7 @@ html, body {
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 18px;
+    font-size: 1rem;
     margin-bottom: 15px;
     font-family: 'Rubik', sans-serif;
 }
@@ -67,10 +77,27 @@ p {
 }
 
 .container {
-    width: 800px;
+    width: 80%;
     margin: 0 auto;
 }
 
+.logo {
+    width: 160px;
+    margin-top: 20px;
+
+}
+
+.banner {
+    background-image: url(../img/jumbo.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    height: 154px;
+    margin: 36px 0 23px 0;
+
+}
+
 .top-content {
     display: flex;
     flex-wrap: wrap;
@@ -82,7 +109,7 @@ p {
 .top-content .text-container {
     width: 48%;
     padding: 0 1%;
-    padding-bottom: 20px;  
+    padding-bottom: 20px;
 }
 
 .middle-content {
@@ -137,10 +164,62 @@ footer nav {
     justify-content: space-between;
     align-items: center;
     padding: 20px 2%;
-    font-size: 14px;
+    font-size: 1rem;
 }
 
 footer nav a {
     color: white;
     text-decoration: none;
+}
+
+.box:nth-child(2) {
+    background: forestgreen!important;
+}
+
+.box:nth-child(4) {
+    background: darkorchid!important;
+}
+
+.box:nth-child(6) {
+    background: hotpink!important;
+}
+
+.box:nth-child(8) {
+    background: indigo!important;
+}
+
+.box:nth-child(10) {
+    background: lawngreen!important;
+}
+
+@media (max-width: 768px) {
+    .box:first-child {
+        background: teal!important;
+    }
+
+    .box:nth-child(3) {
+        background: gold!important;
+    }
+
+    .box:nth-child(5) {
+        background: cadetblue!important;
+    }
+
+    .box:nth-child(7) {
+        background: coral!important;
+    }
+
+    .box:nth-child(9) {
+        background: crimson!important;
+    }
+}
+
+@media (max-width: 500px) {
+    .box:nth-child(10) {
+        display: none!important;
+    }
+
+    .boxes {
+        flex-direction: row-reverse!important;
+    }
 }