diff --git a/README.md b/README.md index 2102cbb1fd..134f15ad74 100644 --- a/README.md +++ b/README.md @@ -32,15 +32,15 @@ Demonstrate your understanding of this week's concepts by answering the followin Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager 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 rather than just presentation. For example, a

tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are, and browsers know how to display them. In other words if you think of a house. The html is the brick and mortar of the house while CSS is the decoration of the house . 2. What are the 4 areas of the box model? - +You have the content area, padding area, border area, and the margin area. 3. While using flexbox, what axis does the following property work on: ```align-items: center```? - +The property above will always operate on the cross axis 4. Explain why git is valuable to a team of developers. - +Git offers the type of performance, functionality, security and flexibility that most developers and teams need to develop their projects. When compared to other VCS Git is most widely accepted system owing to its universally accepted usability and performance standards 5. Define mobile-first design in your own words. - +Its when a developer begins development on the mobile side and works up to desktop. 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/index.html b/index.html index c6405aef71..a984b51f6c 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,4 @@ - @@ -7,13 +6,32 @@ Sprint Challenge - Home - + - +

- + +
+ + + + +
+ +

The Future

@@ -30,16 +48,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
diff --git a/style/index.css b/style/index.css index ae29d6ceee..2d63d16814 100644 --- a/style/index.css +++ b/style/index.css @@ -71,6 +71,23 @@ p { margin: 0 auto; } + +.navigationflex{ + display:flex; + justify-content: space-between; + align-items: center; + /* border: 2px solid black; */ + padding: 10px; + margin: 20px 0; + +} + +.navigationflex a{ + padding:35px; +} +.navigation img{ + margin-bottom: 15px; +} .top-content { display: flex; flex-wrap: wrap; @@ -88,6 +105,7 @@ p { .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; + background-color; } .middle-content h2 { @@ -104,14 +122,112 @@ p { .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; + margin: 20px 2.5%; + color: black; + display: flex; + align-items: center; + justify-content: center; +} +.box1 { + background-color:teal; + width: 12.5%; + height: 100px; margin: 20px 2.5%; color: white; display: flex; align-items: center; justify-content: center; } - +.box2 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: gold; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box3 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: cadetblue; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box4 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: coral; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box5 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: crimson; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box6 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: forestgreen; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box7 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: darkorchid; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box8 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: hotpink; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box9 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: indigo; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box10 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + background-color: dodgerblue; + color: white; + display: flex; + align-items: center; + justify-content: center; +} .bottom-content { display: flex; margin: 0 2% 20px; @@ -143,4 +259,7 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file + +} + +