diff --git a/README.md b/README.md index dc5314a3a1..97e632a5c2 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? +That semantic Html gives meaning to the web page. It creates a hierarchy to the page making it easier to read. + 2. What are the 4 areas of the box model? +The 4 areas of a box model are the margin, border, padding, and finally content. + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +The axis that the algin-items: center effects is the cross-axis. + 4. Explain why git is valuable to a team of developers. +Git is valuable to teams of developers because, new code changes can be easily commited, version branches can be effortlessly compared and merged. and make it so a team can all work on the same code at the same time. + 5. Define mobile-first design in your own words. +Mobile-first means that the web-page was designed to work amazaing on mobile devices first instead of a computer web page. + 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..9c1f10bb0f --- /dev/null +++ b/about.html @@ -0,0 +1,77 @@ + + + + + Sprint Challenge - Home + + + + + + + + +
+
+ + +
+ +
+
+
+
+

The Future

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
+

The Past

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
+
+ +
+

That's

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+
+

No

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+
+

Moon

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+ +
+ +
+ + diff --git a/index.html b/index.html index d32d8ad25c..ccb692af4a 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,44 @@ + Sprint Challenge - Home + - + +
+
+ + +
+ +
+
@@ -30,16 +58,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
@@ -63,11 +91,11 @@

Moon

diff --git a/style/index.css b/style/index.css index ae29d6ceee..3d39c55a27 100644 --- a/style/index.css +++ b/style/index.css @@ -29,7 +29,7 @@ footer, header, hgroup, menu, nav, section { display: block; } body { - line-height: 1; + line-height: 6; } ol, ul { list-style: none; @@ -69,6 +69,10 @@ p { .container { width: 800px; margin: 0 auto; + flex-direction: column; + justify-content: space-evenly; + align-items: baseline; + align-content: stretch; } .top-content { @@ -87,7 +91,7 @@ p { .middle-content { margin-bottom: 20px; - border-bottom: 1px dashed black; + border-bottom: 1px dashed rgb(50, 10, 95); } .middle-content h2 { @@ -128,7 +132,7 @@ p { footer { width: 100%; - background: black; + background: rgb(34, 34, 34); } footer nav { @@ -141,6 +145,156 @@ footer nav { } footer nav a { - color: white; + color: rgb(0, 0, 0); text-decoration: none; +} +.navLnk { + justify-content: space-evenly; + display: inline-block; + flex-direction: row; +} +.navLnk li { + justify-content: space-evenly; + display: inline-block; + flex-direction: row; + padding: 30px; +} +.jumbo { + width: 100px; + height: 150px; + object-fit: none; + object-position: 5px 10%; +} +.top-content { + justify-content: space-evenly; + display: inline-flex; +} +.text-container { + width: 200px; + height: 300px; + object-fit: none; + object-position: 5px 10%; +} +.box-one { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + color: white; + background-color: rgba(12, 151, 121, 0.89); + display: flex; + align-items: center; + justify-content: center; +} +.box-two { + width: 12.5%; + height: 100px; + background: rgb(255, 241, 45); + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-three { + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-four { + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-five { + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-six { + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-seven { + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-eight { + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-nine { + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.box-ten { + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +footer { + width: 100%; + background: black; +} +footer nav { + width: 50%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + background: black; +} +footer nav a { + color: white; + justify-content: space-evenly; + background: black; +} +@media(max-width: 600px) { + body { + display: block; + } } \ No newline at end of file