Bee Choeung

Answers.md

@@ -0,0 +1,19 @@
+If you saw this HTML: <div class="box box1 box2 box3"></div> which class has the most specificity weight?
+Class of box3 would be the most specificity weight because it's located the furthest to the right.  It's being targeted.
+
+Describe the difference between display: block; and display: inline;.
+Display block is an element that is blocking out an entire line.  No othr elements can exist in that same line.  It takes up the entire line.
+Display inline will let multiple elements fit next to each other on the same line and if the text is too long it will just wrap to the next line.  
+Inline likes to share the line while block doesn't want to share.
+
+While using flexbox, what axis are you using when you use the property: align-items: center?
+Align refers to the cross axis.
+
+What is the difference between fixed layout, adaptive layout, fluid layout, and responsive layout?
+Fixed is a layout that is basically stuck, no change when the screen size changes so you get scroll bars.
+Adaptive layout uses only media queries which indicate break-points to change the layout of the website.  When a user hits a certain media restraint like max-width the layout should change in accordance to the CSS you've written.
+Fluid layout uses only % based to change the layout of the website in accordance so no break points which can cause the page to look weird if the view is at different sizes.
+Responsive uses both peroperties of media qeuries and % 
+
+Why do we need to use the CSS property max-width on the outter most container in a responsive website?
+We use the CSS propety max-width on the outter most container in a responsive website because at that point the layout of your webpage is suppose to change in accordance to the screen size.  It constrains everything inside so nothing grows pass the constraint.

css/index.css

@@ -51,26 +51,57 @@ table {
     box-sizing: border-box;
 }
 
+html {
+    font-size: 62.5%;
+}
+
 html, body {
     height: 100%;
     font-family: 'Roboto', sans-serif;
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 18px;
+    font-size: 1.8rem;
     margin-bottom: 15px;
     font-family: 'Rubik', sans-serif;
 }
 
 p {
-    line-height: 1.4;
+    line-height: 14px;
+    font-size: 1.4rem;
 }
 
 .container {
     width: 800px;
     margin: 0 auto;
 }
 
+/* Header Styles */
+
+header {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    margin: 10px;
+}
+
+header nav {
+    justify-content: space-around;
+    align-items: flex-end;
+    display: flex;
+    /* width: calc(100% - 157px); */
+    width: 100%;
+}
+
+header nav a {
+    font-size: 1.4rem;
+    text-decoration: none;
+    color: #b0b0b0;
+}
+
+.jumbotron {
+    margin: 15px 0 15px;
+}
 .top-content {
     display: flex;
     flex-wrap: wrap;
@@ -102,14 +133,37 @@ p {
 }
 
 .middle-content .boxes .box {
-    width: 12.5%;
+    min-width: 100px;
+    width: 12.5%; 
     height: 100px;
     background: black;
     margin: 20px 2.5%;
     color: white;
     display: flex;
+    font-size: 1.6rem;
     align-items: center;
-    justify-content: center;
+    justify-content: center; 
+}
+
+
+.middle-content .boxes .box2 {
+    background: forestgreen;
+}
+
+.middle-content .boxes .box4 {
+    background: darkorchid;
+}
+
+.middle-content .boxes .box6 {
+    background: hotpink;
+}
+
+.middle-content .boxes .box8 {
+    background: indigo;
+}
+
+.middle-content .boxes .box10 {
+    background: lawngreen;
 }
 
 .bottom-content {
@@ -137,10 +191,85 @@ footer nav {
     justify-content: space-between;
     align-items: center;
     padding: 20px 2%;
-    font-size: 14px;
+    font-size: 1.4rem;
 }
 
 footer nav a {
     color: white;
     text-decoration: none;
+}
+
+/* TABLET media query */
+
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+    }
+    .jumbotron {
+        width: 100%;
+    }
+    .middle-content .boxes .box1 {
+        background:  teal;
+    }
+    .middle-content .boxes .box3 {
+        background: gold;
+    }
+    .middle-content .boxes .box5 {
+        background: cadetblue;
+    }
+    .middle-content .boxes .box7 {
+        background: coral;
+    }
+    .middle-content .boxes .box9 {
+        background: crimson;
+    }
+}
+
+/* Phone media query */
+
+@media (max-width: 400px) {
+    .container {
+        width: 100%;
+    }
+    nav {
+        flex-flow: row wrap;
+    }
+    .jumbotron {
+        width: 100%;
+    }
+    .middle-content .boxes .box10 {
+        display: none;
+    }
+    div {
+        display: felx;
+    }
+    .middle-content .boxes .box1 {
+        order: 9;
+    }
+    .middle-content .boxes .box2 {
+        order: 8;
+    }
+    .middle-content .boxes .box3 {
+        order: 7;
+    }
+    .middle-content .boxes .box4 {
+        order: 6;
+    }
+    .middle-content .boxes .box5 {
+        order: 5;
+    }
+    .middle-content .boxes .box6 {
+        order: 4;
+    }
+    .middle-content .boxes .box7 {
+        order: 3;
+    }
+    .middle-content .boxes .box8 {
+        order: 2;
+    }
+    .middle-content .boxes .box9 {
+        order: 1;
+    }
+
+
 }

index.html

@@ -1,9 +1,10 @@
 <!doctype html>
 
+
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Sprint Challenge - UI / RWD</title>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto|Rubik" rel="stylesheet">
@@ -13,6 +14,17 @@
 
 <body>
     <div class="container">
+        <header>
+            <nav>
+                <img class="logo" src="img/lambda-black.png">
+                <a href="#">Home</a>
+                <a href="#">About</a>
+                <a href="#">Products</a>
+                <a href="#">Blog</a>
+                <a href="#">Contact</a>
+            </nav>
+        </header>
+        <img class="jumbotron" src="img/jumbo.jpg">
         <section class="top-content">
             <div class="text-container">
                 <h2>The Future</h2>
@@ -29,16 +41,16 @@ <h2>The Past</h2>
             <h2>Why Did It Have To Be Boxes...</h2>
 
             <div class="boxes">
-                <div class="box">Box 1</div>
-                <div class="box">Box 2</div>
-                <div class="box">Box 3</div>
-                <div class="box">Box 4</div>
-                <div class="box">Box 5</div>
-                <div class="box">Box 6</div>
-                <div class="box">Box 7</div>
-                <div class="box">Box 8</div>
-                <div class="box">Box 9</div>
-                <div class="box">Box 10</div>
+                <div class="box box1">Box 1</div>
+                <div class="box box2">Box 2</div>
+                <div class="box box3">Box 3</div>
+                <div class="box box4">Box 4</div>
+                <div class="box box5">Box 5</div>
+                <div class="box box6">Box 6</div>
+                <div class="box box7">Box 7</div>
+                <div class="box box8">Box 8</div>
+                <div class="box box9">Box 9</div>
+                <div class="box box10">Box 10</div>
             </div>
 
         </section>