diff --git a/.DS_Store b/.DS_Store
index ee7b0e1..164fce5 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/Answers.md b/Answers.md
index e69de29..9e28e77 100644
--- a/Answers.md
+++ b/Answers.md
@@ -0,0 +1,19 @@
+If you saw this HTML: 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.
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index ae29d6c..9b5d5b8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -51,19 +51,24 @@ 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 {
@@ -71,6 +76,32 @@ p {
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;
+ }
+
+
}
\ No newline at end of file
diff --git a/design-files/.DS_Store b/design-files/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/design-files/.DS_Store differ
diff --git a/design-files/desktop-design.png b/design-files/desktop-design.png
deleted file mode 100644
index dd2d0d7..0000000
Binary files a/design-files/desktop-design.png and /dev/null differ
diff --git a/index.html b/index.html
index 3b36308..8b53128 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
+
-
+
Sprint Challenge - UI / RWD
@@ -13,6 +14,17 @@
