diff --git a/README.md b/README.md index dc5314a3a1..90d866590b 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,24 @@ Edit this document to include your answers after each question. Make sure to lea 1. If you were to describe semantic HTML to the next cohort of students, what would you say? +** Semantic HTML is HTML that introduces meaning to the web page + 2. What are the 4 areas of the box model? +** Content edge, Padding edge, Border edge, Margin edge + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +** It works on the Cross Axis + 4. Explain why git is valuable to a team of developers. +** Git is used for tracking changes in files. Usually used to coordinate work among the developers + 5. Define mobile-first design in your own words. +** Mobile-first design means that we start the product design from the mobile end ,which has smaller screen, and working your way up to larger screen + 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. ## Instructions diff --git a/about.html b/about.html new file mode 100644 index 0000000000..1af8f6a5be --- /dev/null +++ b/about.html @@ -0,0 +1,14 @@ + + + + + + + Document + + +

+ THIS IS JUST TO REDIRECT THE ABOUT LINK +

+ + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..f6cc963afd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ - + + + Sprint Challenge - Home @@ -12,8 +14,23 @@ + +
- +
+ + + Home + About + Products + Blog + Contact + + +
+
+ +

The Future

@@ -30,16 +47,16 @@

The Past

Why Did It Have To Be Boxes...

-
Box 1
-
Box 2
-
Box 3
-
Box 4
-
Box 5
-
Box 6
-
Box 7
-
Box 8
-
Box 9
-
Box 10
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
@@ -67,9 +84,9 @@

Moon

About Products Blog - Contact + Contact
- + \ No newline at end of file diff --git a/style/index.css b/style/index.css index ae29d6ceee..b3c140f429 100644 --- a/style/index.css +++ b/style/index.css @@ -61,13 +61,36 @@ h1, h2, h3, h4, h5 { margin-bottom: 15px; font-family: 'Rubik', sans-serif; } +img { + max-width: 100%; + height: auto; +} +header { + margin-bottom: 30px; + margin-top: 20px; +} + +header a { + padding-left: 40px; + padding-right: 30px; + text-decoration: none; + color: rgba(0, 0, 0, 0.911); +} + +header a:hover { + text-decoration: underline; + color: purple; +} +main img { + padding-bottom: 20px; +} p { line-height: 1.4; } .container { - width: 800px; + max-width: 800px; margin: 0 auto; } @@ -104,14 +127,23 @@ p { .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; + margin: 20px 2.5%; color: white; display: flex; align-items: center; justify-content: center; } - +.box1{background: teal;} +.box2{background: gold;} +.box3{background: cadetblue;} +.box4{background: coral;} +.box5{background: crimson;} +.box6{background: forestgreen;} +.box7{background: darkorchid;} +.box8{background: hotpink;} +.box9{background: indigo;} +.box10{background: dodgerblue;} .bottom-content { display: flex; margin: 0 2% 20px; @@ -143,4 +175,65 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} +@media(max-width: 760px){ + header img { + margin-left: auto; + margin-right: auto; + display: block; + padding-bottom: 20px; + } + header a { + display: block; + text-align: center; + font-size: 20px; + padding-top: 5px; + padding-bottom: 5px; + } + .top-content { + display: flex; + flex-direction: column; + padding-left: 20px; + width: 100%; + + } + .middle-content .boxes .box { + width: 30%; + height: 120px; + } + .middle-content .boxes { + display: flex; + align-items: center; + flex-direction: column; + + } + .bottom-content { + display: flex; + flex-direction: column; + padding-left: 20px; + + } + + .bottom-content p { + padding-bottom: 20px; + + } + footer nav{ + display: flex; + flex-direction: column; + margin-left: auto; + margin-right: auto; + + } + nav a{ + display: block; + text-align: center; + font-size: 20px; + padding-top: 5px; + padding-bottom: 5px; + } + + +} + +