From 0a585b9c0da816ef9c5848470f32710d27239ef5 Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 20:20:30 -0500 Subject: [PATCH 01/11] Answered Self-Study Questions on README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index dc5314a3a1..f249cddb63 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 gives the HTML meaning rather than just design. + 2. What are the 4 areas of the box model? + Content, Border, Padding, Margin + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? + Both X and Y axis + 4. Explain why git is valuable to a team of developers. + Allows for collaboration between developers + 5. Define mobile-first design in your own words. + It is a website designed for the screen size of mobile devices first and then is coded to adjust to larger device screen sizes. + 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 From 9600ccf743a7a36763a3eb831f53f25b4eb6a89a Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 21:11:03 -0500 Subject: [PATCH 02/11] added nav and headers and worked on styling to match design --- index.html | 35 +++++++---- style/index.css | 151 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 176 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index d32d8ad25c..044630bf1f 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,21 @@
+ + +
+ +
+ +
@@ -30,16 +45,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..265ea0c1c5 100644 --- a/style/index.css +++ b/style/index.css @@ -66,9 +66,37 @@ p { line-height: 1.4; } +.lambda-logo { + +} + +.road { + flex-direction: row; + align-items: center; + width: 100%; + +} + .container { width: 800px; margin: 0 auto; + color: black; + font-family: arial; + flex-direction: row; + align-content: flex-start; + align-items: flex-start; + display: inline-block; + justify-content: space-between; +} + +nav a { + color: black; + font-family: arial; + font-size: 1.4rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; } .top-content { @@ -112,10 +140,132 @@ p { justify-content: center; } +.box1 { + + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box2 { + + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box3{ + + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box4{ + + width: 12.5%; + height: 100px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box5{ + + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box6{ + + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box7{ + + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box8{ + + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box9{ + + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box10{ + + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + + .bottom-content { display: flex; margin: 0 2% 20px; justify-content: space-around; + } .bottom-content .text-container { @@ -143,4 +293,5 @@ footer nav { footer nav a { color: white; text-decoration: none; + align-items: center; } \ No newline at end of file From c176749c73b2e9dcc68097dff1d27e1ae79fb677 Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 21:36:16 -0500 Subject: [PATCH 03/11] added about page and made more adjustments to header and nav --- about.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 9 ++++----- style/index.css | 22 ++++++++++++++++++---- 3 files changed, 70 insertions(+), 9 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..04da39ac8d --- /dev/null +++ b/about.html @@ -0,0 +1,48 @@ + + + + + + + Sprint Challenge - Home + + + + + + + +
+ + +
+ +
+ +
+ +
+

About Lambda School

+ +

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

+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 044630bf1f..343fe65f1e 100644 --- a/index.html +++ b/index.html @@ -17,13 +17,12 @@ -
@@ -78,8 +77,8 @@

Moon

- +
diff --git a/style/index.css b/style/index.css index ee3de4583c..efcf4796e9 100644 --- a/style/index.css +++ b/style/index.css @@ -67,16 +67,16 @@ p { } .lambda-logo img { - /*flex-direction: row;*/ - /*justify-content: center;*/ - display: inline-block; - flex-wrap: wrap; + align-items: flex-start; + display: inline-block; + align-content: flex-start; } .road img { flex-direction: row; justify-content: center; width: 100%; + margin-bottom: 5%; align-content: flex-start; align-items: flex-start; display: inline-block; @@ -88,20 +88,26 @@ p { margin: 0 auto; color: black; font-family: arial; - flex-direction: row; - align-content: flex-start; align-items: flex-start; - display: inline-block; + align-content: flex-start; justify-content: space-between; } +.header { + display: flex; + flex-direction: row; +} + nav a { color: black; font-family: arial; font-size: 1.4rem; - display: flex; + margin-bottom: 5%; + margin-left: 5%; + padding: 2%; + align-items: flex-start; flex-direction: row; - flex-wrap: wrap; + display: inline-block; justify-content: space-between; } @@ -307,5 +313,75 @@ footer nav a { } @media(max-width: 500px) { - + .container { + flex-direction: row; + flex-wrap: wrap; + align-content: center; + align-items: center; + + } + + .lambda-logo { + flex-direction: column; + display: flex; + align-items: center; + } + + nav a { + flex-direction: column; + display: flex; + align-items: center; + } + + .road img { + width: 30%; + height: 50%; + margin-left: 30%; + flex-direction: column; + align-content: center; + display: flex; + } + + .top-content { + flex-direction: column; + justify-content: space-evenly; + align-items: center; + text-align: left; + flex-wrap: wrap; + } + + .top-content h2 { + flex-direction: column; + justify-content: space-evenly; + align-items: center; + text-align: left; + flex-wrap: wrap; + } + + .middle-content .boxes { + flex-direction: column; + justify-content: space-evenly; + align-items: center; + } + + .middle-content h2 { + flex-direction: column; + display: flex; + align-items: center; + + } + + .bottom-content { + flex-direction: column; + justify-content: space-evenly; + align-items: center; + text-align: center; + flex-wrap: wrap; + } + + footer nav { + flex-direction: column; + display: flex; + align-items: center; + } } \ No newline at end of file From 79aeb085b30c0118a56235d1ee04daf2f4ea3fcf Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 22:48:28 -0500 Subject: [PATCH 05/11] added css animation --- style/index.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/style/index.css b/style/index.css index efcf4796e9..e056fe75ed 100644 --- a/style/index.css +++ b/style/index.css @@ -102,13 +102,15 @@ nav a { color: black; font-family: arial; font-size: 1.4rem; + text-decoration: none; margin-bottom: 5%; margin-left: 5%; - padding: 2%; - align-items: flex-start; - flex-direction: row; - display: inline-block; + padding: 2%; + flex-direction: row; + flex-wrap: wrap; justify-content: space-between; + align-items: row; + align-content: space-between; } .top-content { @@ -141,6 +143,14 @@ nav a { justify-content: space-evenly; } +.box1 { + transition: transform 1s; +} + +.box1 :hover{ + transform: rotate(360deg); +} + .middle-content .boxes .box { width: 12.5%; height: 100px; From 6d418cbfcf8b28c2489d13cc98e8028ec03bccfe Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 22:57:47 -0500 Subject: [PATCH 06/11] fixed sizing issues --- style/index.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/style/index.css b/style/index.css index e056fe75ed..b6fbbf2f33 100644 --- a/style/index.css +++ b/style/index.css @@ -106,9 +106,10 @@ nav a { margin-bottom: 5%; margin-left: 5%; padding: 2%; + display: row; flex-direction: row; flex-wrap: wrap; - justify-content: space-between; + justify-content: space-evenly; align-items: row; align-content: space-between; } @@ -147,7 +148,7 @@ nav a { transition: transform 1s; } -.box1 :hover{ +.middle-content .boxes .box1 :hover{ transform: rotate(360deg); } @@ -323,8 +324,8 @@ footer nav a { } @media(max-width: 500px) { - .container { - flex-direction: row; + .container img { + flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; @@ -341,6 +342,7 @@ footer nav a { flex-direction: column; display: flex; align-items: center; + flex-wrap: wrap; } .road img { From 61530b309c9e219597ac78c6ec38a4f85679100a Mon Sep 17 00:00:00 2001 From: Cody C Date: Fri, 15 May 2020 22:58:33 -0500 Subject: [PATCH 07/11] fixed sizing issues --- style/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index b6fbbf2f33..be0fc66b23 100644 --- a/style/index.css +++ b/style/index.css @@ -324,7 +324,7 @@ footer nav a { } @media(max-width: 500px) { - .container img { + .container { flex-direction: column; flex-wrap: wrap; align-content: center; From 6e2e5923105885fc251bafb217b1bcf277febb0e Mon Sep 17 00:00:00 2001 From: Cody C Date: Sat, 16 May 2020 15:26:11 -0500 Subject: [PATCH 08/11] made adjustments to line top logo and nav up right --- index.html | 1 + style/index.css | 87 +++++++++++++++++++++++++------------------------ 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/index.html b/index.html index 537ee7fb0f..7c16bc4017 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + diff --git a/style/index.css b/style/index.css index be0fc66b23..18cf3b129f 100644 --- a/style/index.css +++ b/style/index.css @@ -66,55 +66,56 @@ p { line-height: 1.4; } -.lambda-logo img { - align-items: flex-start; - display: inline-block; - align-content: flex-start; -} - -.road img { - flex-direction: row; - justify-content: center; - width: 100%; - margin-bottom: 5%; - align-content: flex-start; - align-items: flex-start; - display: inline-block; - -} - .container { - width: 800px; + width: 960px; + max-width: 100%; + padding: 20px; margin: 0 auto; color: black; - font-family: arial; - align-items: flex-start; - align-content: flex-start; + } + + .lambda-logo img { + max-width: 100%; + height: 100%; + margin: 0% auto; + margin-bottom: 5% auto; + + } + + .header { + display: flex; + flex-direction: row; + } + + .container .header-nav a { + color: black; + width: 60%; + display: flex; justify-content: space-between; -} - -.header { + align-items: center; + padding: 20px 2%; + font-size: 14px; + } + + /*.header-nav a { display: flex; flex-direction: row; -} - -nav a { - color: black; - font-family: arial; - font-size: 1.4rem; - text-decoration: none; - margin-bottom: 5%; - margin-left: 5%; - padding: 2%; - display: row; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: row; - align-content: space-between; -} - -.top-content { + justify-content: space-between; + align-items: flex-end; + + }*/ + + .road img { + width: 100%; + margin: 5% auto; + align-content: flex-start; + align-items: flex-start; + display: block; + flex-direction: row; + justify-content: center; + } + + .top-content { display: flex; flex-wrap: wrap; justify-content: space-evenly; From e88eac667e932d93d1d54fc7fbbdbfdfd4551df1 Mon Sep 17 00:00:00 2001 From: Cody C Date: Sat, 16 May 2020 16:15:42 -0500 Subject: [PATCH 09/11] added about.css and still working on getting the flex boxes to work right to match desktop and mobile design --- about.html | 14 +++- style/about.css | 188 ++++++++++++++++++++++++++++++++++++++++++++++++ style/index.css | 35 +++------ 3 files changed, 211 insertions(+), 26 deletions(-) create mode 100644 style/about.css diff --git a/about.html b/about.html index 04da39ac8d..b22eb8bb32 100644 --- a/about.html +++ b/about.html @@ -7,8 +7,9 @@ Sprint Challenge - Home - + + @@ -35,6 +36,17 @@

About Lambda School

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

+
+
+

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.

+
+
+