From 38a3abd0ae80c1a9ecdb0f42d338005485158e1b Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 12:01:03 -0400 Subject: [PATCH 01/15] added header, main img and color to boxes --- index.html | 34 +++++++++++++++++++++--------- style/index.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 78 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index d32d8ad25c..5265dc142b 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,20 @@
+
+ Black Lambda Logo + +
+ +
+ Lights +
@@ -30,16 +44,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..61d02c68ce 100644 --- a/style/index.css +++ b/style/index.css @@ -54,6 +54,7 @@ table { html, body { height: 100%; font-family: 'Roboto', sans-serif; + font-size:62.5%; } h1, h2, h3, h4, h5 { @@ -66,6 +67,24 @@ p { line-height: 1.4; } +header{ + display: flex; + justify-content: space-between; +} + +header nav { + font-size: 14px; + justify-content: center; + align-content: center; +} + +header nav a { + color: black; + text-decoration: none; + +} + + .container { width: 800px; margin: 0 auto; @@ -101,7 +120,7 @@ p { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { width: 12.5%; height: 100px; background: black; @@ -112,6 +131,40 @@ p { 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; From 02a0d7f27c20e275c173504507d75a69028460c7 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 13:01:52 -0400 Subject: [PATCH 02/15] major css changes --- about.html | 11 ++++++++++ index.html | 6 ++--- style/index.css | 58 +++++++++++++++++++++++++++++++++++-------------- 3 files changed, 56 insertions(+), 19 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..d01f779ffe --- /dev/null +++ b/about.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 5265dc142b..084bbd398d 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Sprint Challenge - Home @@ -17,14 +17,14 @@ Black Lambda Logo -
+
Lights
diff --git a/style/index.css b/style/index.css index 61d02c68ce..81fb97e97f 100644 --- a/style/index.css +++ b/style/index.css @@ -58,35 +58,44 @@ html, body { } h1, h2, h3, h4, h5 { - font-size: 18px; - margin-bottom: 15px; + font-size: 1.8rem; + margin-bottom: 1.5rem; font-family: 'Rubik', sans-serif; } p { line-height: 1.4; + font-size: 1.8rem; } header{ display: flex; + flex-wrap: wrap; justify-content: space-between; } header nav { - font-size: 14px; - justify-content: center; - align-content: center; + font-size: 1.4rem; + align-items:center; + margin-top: .5%; + line-height: 3; } header nav a { color: black; text-decoration: none; + margin: 4rem 4rem 0 4rem ; + } +.jumbo{ + margin: 3% 0 0; +} + .container { - width: 800px; + width: 80rem; margin: 0 auto; } @@ -94,19 +103,19 @@ header nav a { display: flex; flex-wrap: wrap; justify-content: space-evenly; - margin-bottom: 20px; - border-bottom: 1px dashed black; + margin-bottom: 2rem; + border-bottom: .1rem dashed black; } .top-content .text-container { width: 48%; padding: 0 1%; - padding-bottom: 20px; + padding-bottom: 2rem; } .middle-content { - margin-bottom: 20px; - border-bottom: 1px dashed black; + margin-bottom: 2rem; + border-bottom: .1rem dashed black; } .middle-content h2 { @@ -122,13 +131,14 @@ header nav a { .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { width: 12.5%; - height: 100px; + height: 10rem; background: black; - margin: 20px 2.5%; + margin: 2rem 2.5%; color: white; display: flex; align-items: center; justify-content: center; + font-size: 1.8rem; } .box1{ @@ -189,11 +199,27 @@ footer nav { display: flex; justify-content: space-between; align-items: center; - padding: 20px 2%; - font-size: 14px; + padding: 2rem 2%; + font-size: 1.4rem; } footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +/*Tablet view */ +@media(max-width: 800px){ + h2{ + font-size: 3rem; + } + .middle-content .boxes{ + flex-direction: column; + } + +} + +/*phone view */ +@media(max-width: 500px){ + +} From dcf30c367722ea0d3d6dbf649426d341dcc77ab2 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 13:44:56 -0400 Subject: [PATCH 03/15] final changes --- style/index.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/style/index.css b/style/index.css index 81fb97e97f..58a70b03c0 100644 --- a/style/index.css +++ b/style/index.css @@ -72,6 +72,11 @@ header{ display: flex; flex-wrap: wrap; justify-content: space-between; + align-items: baseline; +} + +header img{ + margin-top: 4%; } header nav { @@ -85,8 +90,6 @@ header nav a { color: black; text-decoration: none; margin: 4rem 4rem 0 4rem ; - - } .jumbo{ @@ -213,8 +216,9 @@ footer nav a { h2{ font-size: 3rem; } - .middle-content .boxes{ - flex-direction: column; + .bottom-content{ + flex-wrap: wrap; + } } From 1f1f55b1c015f9c6c386973a867df39287fab6cf Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 14:32:42 -0400 Subject: [PATCH 04/15] added the answers to the questions --- README.md | 8 +++++++- style/index.css | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 853c24450e..1241af8af7 100644 --- a/README.md +++ b/README.md @@ -34,15 +34,21 @@ 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? +1. If you were to describe semantic HTML to the next cohort of students, what would you say? +Semantic html gives context to the content. This makes the site more asscible to those that need screen readers and it makes it easier for other people to understand the code that’s been written. 2. What are the 4 areas of the box model? +Content, Padding, Border, Padding 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +cross axis 4. Explain why git is valuable to a team of developers. +Git is valuable to developers because it allows them to manage different versions of a project while also allowing different team members to work on a project at the same time with overwriting each other’s code. 5. Define mobile-first design in your own words. +Mobile first design means designing a site with mobile in mind as the base user and then resizing various parts of the website at various breakpoints so they look better on larger screen devices. + 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/style/index.css b/style/index.css index 58a70b03c0..893088be65 100644 --- a/style/index.css +++ b/style/index.css @@ -218,7 +218,7 @@ footer nav a { } .bottom-content{ flex-wrap: wrap; - + width:40% } } From f48d8dd696d3561984cd4f069e281f7c11b0a848 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 15:28:46 -0400 Subject: [PATCH 05/15] got boxes into 2 columns for tablet view --- style/index.css | 43 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 7 deletions(-) diff --git a/style/index.css b/style/index.css index 893088be65..187a0b64cc 100644 --- a/style/index.css +++ b/style/index.css @@ -132,7 +132,7 @@ header nav a { justify-content: space-evenly; } -.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { +.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { width: 12.5%; height: 10rem; background: black; @@ -215,15 +215,44 @@ footer nav a { @media(max-width: 800px){ h2{ font-size: 3rem; - } - .bottom-content{ - flex-wrap: wrap; - width:40% - } + } + .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-wrap: wrap; + } + + .top-content{ + flex-direction: column; + } + + .top-content .text-container{ + justify-content: flex-start; + width: 90%; + } + + .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 40%; + flex-shrink: 0; + flex-grow: 0 + } +} + +.bottom-content p{ + flex-direction: column; + flex-basis: 30%; + +} + } /*phone view */ @media(max-width: 500px){ - + + header nav { + width: 20%; + } + .bottom-content{ + flex-direction: column; + width:30% + } } From 54c03666eee78079a21e6f7db4b3622ab0b74e26 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 15:42:40 -0400 Subject: [PATCH 06/15] fixed footer nav for tablet view --- style/index.css | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/style/index.css b/style/index.css index 187a0b64cc..eef2ad8e32 100644 --- a/style/index.css +++ b/style/index.css @@ -232,27 +232,22 @@ footer nav a { .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ flex-basis: 40%; flex-shrink: 0; - flex-grow: 0 + flex-grow: 0; } -} - -.bottom-content p{ - flex-direction: column; - flex-basis: 30%; -} + footer{ + display: flex; + justify-content: center; + font-size: 3rem; + } + footer nav a { + font-size: 2rem; + } } /*phone view */ @media(max-width: 500px){ - - header nav { - width: 20%; - } - .bottom-content{ - flex-direction: column; - width:30% - } + } From 1f5c690f0173e556e9427b9dd46a5ff64078e320 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 16:11:39 -0400 Subject: [PATCH 07/15] fixed header nav for tablet view --- style/index.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/style/index.css b/style/index.css index eef2ad8e32..906c0dab54 100644 --- a/style/index.css +++ b/style/index.css @@ -213,6 +213,14 @@ footer nav a { /*Tablet view */ @media(max-width: 800px){ + header nav{ + flex-basis: 70%; + } + header nav a{ + font-size: 2.5rem; + margin: 0 1.5rem; + } + h2{ font-size: 3rem; } @@ -233,6 +241,13 @@ footer nav a { flex-basis: 40%; flex-shrink: 0; flex-grow: 0; + width: 0; + + } + + .bottom-content .text-container{ + justify-content: center; + } footer{ From c940514818159232f97a7d32887ba6e2cb5bc630 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 16:30:04 -0400 Subject: [PATCH 08/15] fixed colored boxes in tablet view --- style/index.css | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/style/index.css b/style/index.css index 906c0dab54..b85da68687 100644 --- a/style/index.css +++ b/style/index.css @@ -238,17 +238,11 @@ footer nav a { } .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 40%; - flex-shrink: 0; - flex-grow: 0; - width: 0; - + flex-basis: 30%; + height: 24rem; } - .bottom-content .text-container{ - justify-content: center; - } footer{ display: flex; From 682f4f075579b7b9ddcd7890a562a605410f2091 Mon Sep 17 00:00:00 2001 From: Khalil Date: Fri, 8 May 2020 19:43:26 -0400 Subject: [PATCH 09/15] fixed the footer nav to work on mobile --- index.html | 2 +- style/index.css | 31 +++++++++++++++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 084bbd398d..f0cd32bcc6 100644 --- a/index.html +++ b/index.html @@ -86,4 +86,4 @@

Moon

- + \ No newline at end of file diff --git a/style/index.css b/style/index.css index b85da68687..07b6bc69b3 100644 --- a/style/index.css +++ b/style/index.css @@ -258,5 +258,36 @@ footer nav a { /*phone view */ @media(max-width: 500px){ + .container{ + width: 90%; + height: auto; + } + + header nav a{ + font-size: 4rem; + } + + .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 50%; + height: 24rem; + } + + .bottom-content{ + flex-basis: 50%; + height: 24rem; + } + + footer nav{ + flex-direction: column; + flex-basis: 10%; + } + + footer nav a{ + flex-direction: column; + flex-basis: 10%; + font-size: 4rem; + } + + } From be43dd315704323ba59edd6093d5ace1d076b512 Mon Sep 17 00:00:00 2001 From: Khalil Date: Sun, 10 May 2020 12:27:28 -0400 Subject: [PATCH 10/15] remade all of the HTML and CSS --- index.html | 50 +++++------ style/index.css | 235 +++++++++++++++++++++++++++++------------------- 2 files changed, 168 insertions(+), 117 deletions(-) diff --git a/index.html b/index.html index f0cd32bcc6..dccd1b9dfe 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,8 @@ - + Sprint Challenge - Home - @@ -14,21 +13,22 @@
- Black Lambda Logo - + +
+ +
- -
- Lights -
+
+ lights +

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.

@@ -44,16 +44,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
@@ -86,4 +86,4 @@

Moon

- \ No newline at end of file + diff --git a/style/index.css b/style/index.css index 07b6bc69b3..7346f51723 100644 --- a/style/index.css +++ b/style/index.css @@ -51,10 +51,13 @@ table { box-sizing: border-box; } +html{ + font-size: 62.5%; +} + html, body { height: 100%; font-family: 'Roboto', sans-serif; - font-size:62.5%; } h1, h2, h3, h4, h5 { @@ -64,42 +67,32 @@ h1, h2, h3, h4, h5 { } p { + font-size: 2rem; line-height: 1.4; - font-size: 1.8rem; +} + +.container { + max-width: 80rem; + margin: 0 auto; + width: 100%; } header{ display: flex; - flex-wrap: wrap; - justify-content: space-between; align-items: baseline; + justify-content: space-between; + margin: 2rem 0 0 0; } -header img{ - margin-top: 4%; -} - -header nav { - font-size: 1.4rem; - align-items:center; - margin-top: .5%; - line-height: 3; +header div{ + width:90%; } header nav a { + text-decoration: none ; color: black; - text-decoration: none; - margin: 4rem 4rem 0 4rem ; -} - -.jumbo{ - margin: 3% 0 0; -} - - -.container { - width: 80rem; - margin: 0 auto; + margin:4%; + font-size:1.8rem; } .top-content { @@ -110,6 +103,10 @@ header nav a { border-bottom: .1rem dashed black; } +.top-content .jumbo { + margin: 2rem 0; +} + .top-content .text-container { width: 48%; padding: 0 1%; @@ -132,7 +129,7 @@ header nav a { justify-content: space-evenly; } -.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { +.middle-content .boxes .box { width: 12.5%; height: 10rem; background: black; @@ -141,46 +138,44 @@ header nav a { display: flex; align-items: center; justify-content: center; - font-size: 1.8rem; + font-size: 1.6rem; } -.box1{ - background: teal; +#box1{ + background-color: teal; } -.box2{ - background: gold; +#box2{ + background-color: gold; } -.box3{ - background: cadetblue; +#box3{ + background-color: cadetblue; } -.box4{ - background: coral; +#box4{ + background-color: coral; } -.box5{ - background: crimson; +#box5{ + background-color: crimson; } -.box6{ - background: forestgreen; +#box6{ + background-color: forestgreen; } -.box7{ - background: darkorchid; +#box7{ + background-color: darkorchid; } -.box8{ - background: hotpink; +#box8{ + background-color: hotpink; } - -.box9{ - background: indigo; +#box9{ + background-color: indigo; } - -.box10{ - background: dodgerblue; +#box10{ + background-color: dodgerblue; } .bottom-content { display: flex; - margin: 0 2% 20px; + margin: 0 2% 2rem; justify-content: space-around; } @@ -211,83 +206,139 @@ footer nav a { text-decoration: none; } -/*Tablet view */ +/*tablet view */ @media(max-width: 800px){ - header nav{ - flex-basis: 70%; - } - header nav a{ - font-size: 2.5rem; - margin: 0 1.5rem; - } + header{ + margin: 2% 0; + } - h2{ - font-size: 3rem; + header .logo{ + margin: 0 7rem 0 3rem; +} + + .jumbo{ + margin: 2% 0; +} + .top-content{ + flex-direction: column; } - .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-wrap: wrap; + .top-content .text-container{ + width: 90%; + margin: 0 0 0 5%; } - .top-content{ - flex-direction: column; + .middle-content{ + display: flex; + flex-direction: column; + flex-basis: 2rem; } - .top-content .text-container{ - justify-content: flex-start; - width: 90%; + .bottom-content{ + flex-wrap: wrap; } - .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 30%; - height: 24rem; + .bottom-content .text-container{ + width: 40%; + font-size: 40rem; + margin: 0 0 2% 0; } - - - footer{ - display: flex; - justify-content: center; + h2{ font-size: 3rem; } - footer nav a { + p{ font-size: 2rem; } + footer nav{ + margin-left: 20%; + + } + } /*phone view */ @media(max-width: 500px){ - .container{ - width: 90%; + header{ + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + max-width:50rem; + } + header .logo{ + width: 30rem; height: auto; + margin: 0 0 4% 0 + } + header nav{ + align-items: center; + width:2%; + text-align: center; } - header nav a{ - font-size: 4rem; - } + header div nav{ + padding: 0 0 0 15rem; + font-size: 5rem; + } - .middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 50%; - height: 24rem; + header div nav a{ + font-size: 5rem; } - .bottom-content{ - flex-basis: 50%; - height: 24rem; + .top-content{ + max-width:50rem; + } + .top-content .jumbo img{ + width: 100%; + height: 25rem; + } - footer nav{ + .top-content .text-container{ + margin: 3% 0 3% 5%; + } + + .middle-content{ + display: flex; flex-direction: column; - flex-basis: 10%; + align-content: center; + align-items: center; + max-width: 50rem; } - footer nav a{ + .middle-content .boxes .box{ + flex-basis: 50rem; + height: 45rem; + font-size: 4rem; + + } + + .bottom-content{ flex-direction: column; - flex-basis: 10%; - font-size: 4rem; + align-items: center; + max-width: 50rem; } + .bottom-content .text-container{ + + width: 70rem ; + margin: 3% 0; + max-width:50rem; + } + h2{ + font-size: 5rem; + } + p{ + font-size: 4rem; + } + + footer nav{ + flex-direction: column; + font-size: 5rem; + } + } From 74328e81040cb4433e19d785ba948767363255ac Mon Sep 17 00:00:00 2001 From: Khalil Date: Sun, 10 May 2020 14:14:09 -0400 Subject: [PATCH 11/15] Finshed the html and css --- about.html | 4 ++-- index.html | 2 +- style/index.css | 39 +++++++++++++++++++++++++-------------- 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/about.html b/about.html index d01f779ffe..b435f7c1ea 100644 --- a/about.html +++ b/about.html @@ -3,9 +3,9 @@ - Document + About - +

About Page

\ No newline at end of file diff --git a/index.html b/index.html index dccd1b9dfe..658613935a 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@