diff --git a/about.html b/about.html
new file mode 100644
index 0000000000..e18f483919
--- /dev/null
+++ b/about.html
@@ -0,0 +1,12 @@
+
+
+
+ Document
+
+
+ This Is the About Page!
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Id sequi et, quis tenetur dignissimos possimus quam provident temporibus culpa magni perspiciatis qui voluptate ipsam laborum nostrum. Vero corporis esse repellat!
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index d32d8ad25c..c96ad368f7 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,25 @@
+
+
+
+
+
+
+
+
+
+
@@ -30,7 +49,7 @@ The Past
Why Did It Have To Be Boxes...
-
Box 1
+
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
@@ -64,7 +93,7 @@
Moon
Home
- About
+ About
Products
Blog
Contact
diff --git a/self-study-questions.txt b/self-study-questions.txt
new file mode 100644
index 0000000000..1dca85a66d
--- /dev/null
+++ b/self-study-questions.txt
@@ -0,0 +1,14 @@
+If you were to describe semantic HTML to the next cohort of students, what would you say?
+It's an organized markup with defined, meaning elements to set up the webpage.
+
+What are the 4 areas of the box model?
+The content, padding, margin, and the border.
+
+While using flexbox, what axis does the following property work on: align-items: center?
+The vertical cross axis.
+
+Explain why git is valuable to a team of developers.
+It would be easy for different developers to involve in the same project. For example, what codes were modified by which developer.
+
+Define mobile-first design in your own words.
+Set up a certain screen size, and when the screen size is stretched and matched that set screen size, the layout of the webpage will change.
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index ae29d6ceee..af7921bb96 100644
--- a/style/index.css
+++ b/style/index.css
@@ -49,6 +49,10 @@ table {
* {
box-sizing: border-box;
+
+}
+html {
+ margin: 0 15%;
}
html, body {
@@ -56,19 +60,46 @@ html, body {
font-family: 'Roboto', sans-serif;
}
+
h1, h2, h3, h4, h5 {
font-size: 18px;
margin-bottom: 15px;
font-family: 'Rubik', sans-serif;
+ font-size: 1.3rem;
+ margin: 20px 0;
}
p {
line-height: 1.4;
}
-.container {
- width: 800px;
- margin: 0 auto;
+header .navigation {
+ display: flex;
+ height: 120px;
+ align-items: center;
+}
+
+header .navigation .bar {
+ flex-grow: 1;
+ display: flex;
+ justify-content: space-around;
+ margin-top: 20px;
+ margin-left: 10px;
+}
+
+header .navigation .bar a {
+ text-decoration: none;
+ color: black;
+}
+
+header .navigation .bar li {
+ display: flex;
+ align-items: center;
+}
+
+header .image2 img {
+ width: 100%;
+ height: auto;
}
.top-content {
@@ -82,7 +113,8 @@ p {
.top-content .text-container {
width: 48%;
padding: 0 1%;
- padding-bottom: 20px;
+ padding-bottom: 20px;
+ text-align: left;
}
.middle-content {
@@ -112,6 +144,38 @@ p {
justify-content: center;
}
+.middle-content #box1{
+ background-color: #358080;
+}
+.middle-content #box2{
+ background-color: #FCD84A;
+}
+.middle-content #box3{
+ background-color: #5F9EA0;
+}
+.middle-content #box4{
+ background-color: #F17D4D;
+}
+.middle-content #box5{
+ background-color: #DD353D;
+}
+.middle-content #box6{
+ background-color: #3F8B24;
+}
+.middle-content #box7{
+ background-color: #9A41CC;
+}
+.middle-content #box8{
+ background-color: #EE66B3;
+}
+.middle-content #box9{
+ background-color: #4D2582;
+}
+.middle-content #box10{
+ background-color: #2A8FF7;
+}
+
+
.bottom-content {
display: flex;
margin: 0 2% 20px;
@@ -143,4 +207,150 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
+}
+
+
+@media(max-width: 900px) {
+ header .navigation {
+ height: 90px;
+ }
+
+ header .navigation .bar {
+ font-size: 19px;
+ }
+
+ .top-content {
+ flex-direction: column;
+ }
+
+ .top-content .text-container {
+ width: 100%;
+ padding: 20px 10px;
+ }
+
+ .top-content .text-container h2 {
+ margin-bottom: 5px;
+ font-size: 25px;
+ }
+
+ .middle-content .boxes .box {
+ display: flex;
+ justify-content: center;
+ height: 200px;
+ width: 35%;
+ }
+
+ .bottom-content {
+ display: flex;
+ justify-content: space-around;
+ flex-flow: row wrap;
+ }
+
+ .bottom-content .text-container h2 {
+ margin-bottom: 3px;
+ font-size: 25px;
+ }
+
+ .bottom-content .text-container {
+ max-width: 45%;
+ font-size: 19px;
+ }
+
+ footer {
+ display: flex;
+ flex-direction: center;
+ justify-content: center;
+
+ }
+
+ footer nav {
+ margin-top: 25px;
+ margin-bottom: 25px;
+ display: flex;
+ flex-direction: center;
+ justify-content: space-around;
+ font-size: 25px;
+ }
+
+ footer nav a {
+ margin: 11px;
+ }
+
+
+
+}
+
+@media(max-width: 500px) {
+ header .navigation {
+ margin: 40px 0;
+ flex-direction: column;
+ height: auto;
+ }
+
+ header .navigation .bar {
+ flex-direction: column;
+ font-size: 2.0rem;
+ margin-top: 5px;
+ margin-left: 20px;
+ align-items: center;
+ margin: 10px 0;
+ margin-top: 30px;
+ }
+
+ header .navigation .bar li {
+ margin: 5px;
+ }
+
+ header .image2 {
+ height: auto;
+ width: 100%;
+ }
+
+ .top-content {
+ flex-direction: column;
+ flex-flow:row wrap;
+ max-width: 80%;
+
+ }
+
+ .middle-content .boxes {
+ margin-left: 120px;
+ margin-right: 120px;
+ }
+
+ .middle-content .boxes .box {
+ width: 100%;
+ height: 100px;
+ margin: 10px 5%;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .bottom-content{
+ margin-left: 20px;
+ flex-direction: column;
+ align-items: center;
+ max-width: auto;
+ }
+
+ .bottom-content .text-container {
+ max-width: 100%;
+ }
+
+ footer {
+ display: flex;
+ flex-direction: center;
+ }
+
+ footer nav{
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+ line-height: 1.5;
+ padding-bottom: 20px;
+ font-size: 30px;
+ padding-left: 40px;
+ }
}
\ No newline at end of file
+ 
+