diff --git a/README.md b/README.md index 8033625685..cdacfa694e 100644 --- a/README.md +++ b/README.md @@ -35,14 +35,23 @@ 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? - + 2. What are the 4 areas of the box model? + + + + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? + 4. Explain why git is valuable to a team of developers. + 5. Define mobile-first design in your own words. + 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. diff --git a/index.html b/index.html index d32d8ad25c..09e8f5bcbd 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,105 @@ - - - Sprint Challenge - Home + + - - + Sprint Challenge - Home + + +
- + +
+ +
+
+ Busy highway at night +
+ +

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.

+

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.

+

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.

- +
- -

Why Did It Have To Be Boxes...

- + +

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
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
- +

That's

-

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

+

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.

+

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.

+

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

- + -
+ + diff --git a/style/index.css b/style/index.css index ae29d6ceee..280b3e45c4 100644 --- a/style/index.css +++ b/style/index.css @@ -53,21 +53,23 @@ table { html, body { height: 100%; - font-family: 'Roboto', sans-serif; + font-family: 'Gotham', sans-serif; } h1, h2, h3, h4, h5 { - font-size: 18px; + font-size: 16px; margin-bottom: 15px; - font-family: 'Rubik', sans-serif; + font-family: 'Gotham', sans-serif; + font-weight: bold; } p { line-height: 1.4; + font-size: 14px; } .container { - width: 800px; + width: 90%; margin: 0 auto; } @@ -102,9 +104,9 @@ p { } .middle-content .boxes .box { - width: 12.5%; + width: 100px; height: 100px; - background: black; + /* background: black; */ margin: 20px 2.5%; color: white; display: flex; @@ -143,4 +145,350 @@ footer nav { footer nav a { color: white; text-decoration: none; +} + + +/* My CSS ------------------------------------------------------------------------------------------*/ + +/* Flex Container */ +.top-nav ul{ + margin-top: 40px; + margin-bottom: 60px; + list-style: none; + display: flex; + align-items: baseline; + justify-content: space-around; +} + +/* Flex Items */ +.top-nav li{ + width: 100%; + display: flex; + justify-content: space-around; +} + +a { + text-decoration: none; + color: black; + font-weight: 700; + font-size: 14px; +} + +a:hover { + color: lightgray; +} + +.top-nav .logo { + flex: 2; + width: 120px; +} + +/* Hero Content */ +.hero { + margin-top: 20px ; + margin-bottom: 20px; + display: flex; +} + +.hero img { + margin: 0 auto; + width: 80%; +} + +/* Top Content */ + +.top-content { + display: flex; + margin-top: 40px; + margin-bottom: 50px; +} + + + +/* Middle Content */ + + +.middle-content { + margin-top: 40px; + margin-bottom: 50px; +} + +.box1 { + background-color: teal; +} + +.box2 { + background-color:gold; +} + +.box3 { + background-color:cadetblue; +} + +.box4 { + background-color:coral; +} + +.box5 { + background-color:crimson; +} + +.box6 { + background-color:forestgreen; +} + +.box7 { + background-color:darkorchid; +} + +.box8 { + background-color:hotpink; +} + +.box9 { + background-color:indigo; +} + +.box10 { + background-color:dodgerblue; +} + + +/* Bottom Content */ + +.bottom-content { + margin-top: 40px; + margin-bottom: 50px; +} + + +/* Footer Nav */ + +/* Footer Container */ +.bottom-nav { + width:100%; + /* border: 2px solid firebrick; */ + display: flex; + justify-content: space-around; + margin: 0 auto; + margin-top: 80px;; +} + +.bottom-nav a { + /* border: 1.5px solid firebrick; */ + flex: 1; + display: flex; + justify-content: space-around; + font-weight: 700; + font-size: 14px; +} + +/* Tablet Version ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ */ + +@media (max-width: 900px){ +/* NAV CONTENT------ ------ ------ ------ ------ ------ */ +.nav-box{ + display: flex; + margin: 0 auto; + width: 100%; + justify-content: center; +} + +.top-nav{ + width: 80%; +} +/* HERO ------ ------ ------ ------ ------ ------ */ +.hero { + display: flex; + flex-direction: column; + align-items: center; +} + +.hero img{ + width: 80%; +} + + +/* TOP CONTENT------ ------ ------ ------ ------ ------ */ +.top-content{ + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; + width: 100%; +} + +.top-content .text-container{ + width: 80%; +} + +.text-container{ + margin-top: 20px; + margin-bottom: 20px; +} + + +/* BOXES ------ ------ ------ ------ ------ ------ */ +.yBox{ + width: 100%; + margin: 0 auto; +} + + +.middle-content { + width: 80%; + display: flex; + flex-direction: column; + margin: 0 auto; + margin-bottom: 80px; + /* justify-content: center; + justify-items: center; + align-items: center; */ +} + +.middle-content .boxes{ + justify-content: space-between; +} + + +.middle-content .boxes .box { + width: 240px; + height: 240px; +} + +/* BOTTOM CONTENT------ ------ ------ ------ ------ ------ */ + + +.bottom-content{ + + width: 80%; + flex-wrap: wrap; + margin: 0 auto; +} + +/* BOTTOM NAV------ ------ ------ ------ ------ ------ */ +.bottom-nav{ + width: 90%; + justify-content: space-between; +} + + + +/* Mobile Version ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ */ + +@media (max-width: 800px){ + /* NAV CONTENT------ ------ ------ ------ ------ ------ */ + .nav-box{ + display: flex; + margin: 0 auto; + width: 100%; + justify-content: center; + } + + .top-nav{ + width:90%; + margin: 0 auto; + } + + + + .top-nav ul{ + width: 60%; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + justify-content: space-evenly; + } + + ul li{ + margin-top: 10px; + margin-bottom: 10px; + } + /* HERO ------ ------ ------ ------ ------ ------ */ + .hero { + display: flex; + flex-direction: column; + align-items: center; + } + + .hero img{ + height: 80%; + } + + + + /* TOP CONTENT------ ------ ------ ------ ------ ------ */ + .top-content{ + display: flex; + flex-direction: column; + /* justify-content: center; */ + align-items: center; + width: 100%; + } + + .top-content .text-container{ + width: 80%; + } + + .text-container{ + margin-top: 20px; + margin-bottom: 20px; + } + + + /* BOXES ------ ------ ------ ------ ------ ------ */ + .yBox{ + width: 100%; + margin: 0 auto; + text-align: center; + } + + + .middle-content { + width: 80%; + display: flex; + flex-direction: column; + margin: 0 auto; + margin-bottom: 80px; + /* justify-content: center; + justify-items: center; + align-items: center; */ + } + + .middle-content .boxes{ + justify-content: space-around; + } + + + .middle-content .boxes .box { + width: 240px; + height: 240px; + } + + /* BOTTOM CONTENT------ ------ ------ ------ ------ ------ */ + + + .bottom-content{ + + width: 80%; + flex-wrap: wrap; + margin: 0 auto; + } + + /* BOTTOM NAV------ ------ ------ ------ ------ ------ */ + .bottom-nav{ + width: 90%; + justify-content: space-between; + flex-direction: column; + } + + .bottom-nav a{ + margin-top: 10px; + margin-bottom: 10px; + } + + + } \ No newline at end of file