From 39a3b8bac525297275b8d7776f5b78c9ed754a79 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:09:59 -0700 Subject: [PATCH 01/17] Updating bullet points within Task 1 section. --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index dc5314a3a1..f9b226900c 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,10 @@ You are not allowed to collaborate during the Sprint Challenge. However, you are In this challenge, you build a missing header (navigation and image) on the home page, update some CSS styling on the home page, and make your page responsive for mobile. You will be working with a pre-existing web page, allowing you to get a taste of what it is like to inherit code from someone else, as will regularly happen on the job. -In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version. +In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version. [Click here for home page example](https://tk-assets.lambdaschool.com/39a49225-8ac9-43da-aa90-514fd60ae99a_sprint-challenge-ui-home-example.png) - + [Click here for tablet example](design/Tablet.png) @@ -50,11 +50,11 @@ You are expected to be able to answer all these questions. Your responses contri ### Task 1: Project Set Up -- [ ] Create a forked copy of this project -- [ ] Add your team lead as collaborator on Github -- [ ] Clone your OWN version of the repository (Not Lambda's by mistake!) -- [ ] Create a new branch: git checkout -b ``. -- [ ] Implement the project on your newly created `` branch, committing changes regularly +- [X] Create a forked copy of this project +- [X] Add your team lead as collaborator on Github +- [X] Clone your OWN version of the repository (Not Lambda's by mistake!) +- [X] Create a new branch: git checkout -b ``. +- [X] Implement the project on your newly created `` branch, committing changes regularly - [ ] Push commits: git push origin `` ### Task 2: Minimum Viable Product From 0608335832028b34e4960373a72ea7b4167ffeb0 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:15:03 -0700 Subject: [PATCH 02/17] Inserted logo for navigation --- index.html | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d32d8ad25c..cf0e5253dc 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,16 @@ +
+ +
+ black logo for Lambda +
+ +
+
- +

The Future

@@ -24,11 +32,11 @@

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.

- +
- +

Why Did It Have To Be Boxes...

- +
Box 1
Box 2
@@ -41,7 +49,7 @@

Why Did It Have To Be Boxes...

Box 9
Box 10
- +
@@ -60,7 +68,7 @@

Moon

- + - + From 6693197134959bfd4d3a79ea027e4bd248b00343 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:18:08 -0700 Subject: [PATCH 03/17] Created navigation, updated completion status in README, created page. --- README.md | 4 ++-- about.html | 0 index.html | 7 +++++++ 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 about.html diff --git a/README.md b/README.md index f9b226900c..7b528ddb99 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,7 @@ You are expected to be able to answer all these questions. Your responses contri - [X] Clone your OWN version of the repository (Not Lambda's by mistake!) - [X] Create a new branch: git checkout -b ``. - [X] Implement the project on your newly created `` branch, committing changes regularly -- [ ] Push commits: git push origin `` +- [X] Push commits: git push origin `` ### Task 2: Minimum Viable Product @@ -66,7 +66,7 @@ Your finished project must include all of the following requirements: [Review the provided design files](/design). Notice the navigation and header images are missing in the starter code. * [ ] Build the HTML and CSS to create the missing navigation and header -* [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) +* [X] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) * [ ] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. * [ ] Add responsive breakpoints to your code by using media queries diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/index.html b/index.html index cf0e5253dc..77cf53b47a 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,13 @@
black logo for Lambda +
From 3a3f5aa94f2e7a9cc0a716bc5894fd43c9bba2fc Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:25:47 -0700 Subject: [PATCH 04/17] Configured nav and logo on the same line --- index.html | 21 +++++++++------------ style/index.css | 19 +++++++++++++------ 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 77cf53b47a..515825850d 100644 --- a/index.html +++ b/index.html @@ -12,23 +12,20 @@ -
-
- black logo for Lambda +
+ +
+ black logo for Lambda
-
- -
-

The Future

diff --git a/style/index.css b/style/index.css index ae29d6ceee..b5b134a9cb 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -12,8 +12,8 @@ b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; @@ -24,7 +24,7 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } @@ -71,6 +71,13 @@ p { margin: 0 auto; } +.header { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; +} + .top-content { display: flex; flex-wrap: wrap; @@ -82,7 +89,7 @@ p { .top-content .text-container { width: 48%; padding: 0 1%; - padding-bottom: 20px; + padding-bottom: 20px; } .middle-content { @@ -143,4 +150,4 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} From 86ba045e668c09a94fc0139c97587655327cb35f Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:31:23 -0700 Subject: [PATCH 05/17] Completed configuration of logo and navigation to comparision image. --- style/index.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/style/index.css b/style/index.css index b5b134a9cb..e9a1d0d45a 100644 --- a/style/index.css +++ b/style/index.css @@ -75,9 +75,21 @@ p { display: flex; flex-wrap: wrap; justify-content: space-evenly; + margin-top: 10px; margin-bottom: 20px; } +img.header { + width: 160px; + height: 45px; +} + +a.header { + padding: 20px 40px 20px 40px; + color: black; + text-decoration: none; +} + .top-content { display: flex; flex-wrap: wrap; From f3333d7742a3e6f2ec323936dae4d50fad44125b Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:35:42 -0700 Subject: [PATCH 06/17] Added header image on the home page --- index.html | 4 ++++ style/index.css | 12 ++++++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 515825850d..af17c16e6c 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,10 @@
+
+ time lapse of traffic on a highway +
+

The Future

diff --git a/style/index.css b/style/index.css index e9a1d0d45a..4d354bdd23 100644 --- a/style/index.css +++ b/style/index.css @@ -76,20 +76,24 @@ p { flex-wrap: wrap; justify-content: space-evenly; margin-top: 10px; - margin-bottom: 20px; + margin-bottom: 15px; } img.header { - width: 160px; - height: 45px; + width: 160px; + height: 45px; } a.header { - padding: 20px 40px 20px 40px; + padding: 20px 40px 0px 40px; color: black; text-decoration: none; } +img.header-image { + margin-bottom: 20px; +} + .top-content { display: flex; flex-wrap: wrap; From d1fa68e120a72eb143ce45b32c3f59dbbb2c8257 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 18:54:27 -0700 Subject: [PATCH 07/17] Configuring responsive and box colors --- README.md | 6 ++--- style/index.css | 64 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 66 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7b528ddb99..e19311b214 100644 --- a/README.md +++ b/README.md @@ -65,10 +65,10 @@ Your finished project must include all of the following requirements: [Review the provided design files](/design). Notice the navigation and header images are missing in the starter code. -* [ ] Build the HTML and CSS to create the missing navigation and header +* [X] Build the HTML and CSS to create the missing navigation and header * [X] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) -* [ ] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. -* [ ] Add responsive breakpoints to your code by using media queries +* [X] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. +* [X] Add responsive breakpoints to your code by using media queries You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box: diff --git a/style/index.css b/style/index.css index 4d354bdd23..625ee6e3bf 100644 --- a/style/index.css +++ b/style/index.css @@ -127,7 +127,7 @@ img.header-image { .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; + background: black; margin: 20px 2.5%; color: white; display: flex; @@ -135,6 +135,10 @@ img.header-image { justify-content: center; } +.middle-content .box1 { + background: teal; +} + .bottom-content { display: flex; margin: 0 2% 20px; @@ -167,3 +171,61 @@ footer nav a { color: white; text-decoration: none; } + +@media(min-width:500px) { + + .header { + display: flex; + flex-direction: column; + justify-content: center; + } + + .top-content{ + display: flex; + flex-direction: column; + justify-content: center; + } + + .middle-content { + display: flex; + flex-direction: column; + justify-content: center; + } + + .bottom-content { + display: flex; + flex-direction: column; + justify-content: center; + } + } + +} + +@media(min-width:800px) { + + .header { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .top-content{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .middle-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .bottom-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + } + +} From abaa3c29657fca6d705145c82c4485f6db0d8899 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 19:02:16 -0700 Subject: [PATCH 08/17] Configured box colors. --- README.md | 20 +++++----- index.html | 20 +++++----- style/index.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 119 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index e19311b214..487bdd1c46 100644 --- a/README.md +++ b/README.md @@ -72,16 +72,16 @@ Your finished project must include all of the following requirements: You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box: -* [ ] box1: `teal` -* [ ] box2: `gold` -* [ ] box3: `cadetblue` -* [ ] box4: `coral` -* [ ] box5: `crimson` -* [ ] box6: `forestgreen` -* [ ] box7: `darkorchid` -* [ ] box8: `hotpink` -* [ ] box9: `indigo` -* [ ] box10: `dodgerblue` +* [X] box1: `teal` +* [X] box2: `gold` +* [X] box3: `cadetblue` +* [X] box4: `coral` +* [X] box5: `crimson` +* [X] box6: `forestgreen` +* [X] box7: `darkorchid` +* [X] box8: `hotpink` +* [X] box9: `indigo` +* [X] box10: `dodgerblue` In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not. diff --git a/index.html b/index.html index af17c16e6c..7864d1fd99 100644 --- a/index.html +++ b/index.html @@ -46,16 +46,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 625ee6e3bf..fa30c1c1f9 100644 --- a/style/index.css +++ b/style/index.css @@ -124,10 +124,10 @@ img.header-image { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box1{ width: 12.5%; height: 100px; - background: black; + background: teal; margin: 20px 2.5%; color: white; display: flex; @@ -135,8 +135,103 @@ img.header-image { justify-content: center; } -.middle-content .box1 { - background: teal; +.middle-content .boxes .box2{ + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box3{ + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box4{ + width: 12.5%; + height: 100px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box5{ + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box6{ + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box7{ + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box8{ + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box9{ + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box10{ + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; } .bottom-content { From 18979b144ec6f67c8eb30639d42ea7bd8120c4a9 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 19:06:15 -0700 Subject: [PATCH 09/17] Updating layout --- README.md | 4 ++-- style/index.css | 11 +++++++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 487bdd1c46..8de34e4ad8 100644 --- a/README.md +++ b/README.md @@ -67,8 +67,8 @@ Your finished project must include all of the following requirements: * [X] Build the HTML and CSS to create the missing navigation and header * [X] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) -* [X] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. -* [X] Add responsive breakpoints to your code by using media queries +* [ ] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. +* [ ] Add responsive breakpoints to your code by using media queries You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box: diff --git a/style/index.css b/style/index.css index fa30c1c1f9..a8465703c5 100644 --- a/style/index.css +++ b/style/index.css @@ -287,6 +287,17 @@ footer nav a { justify-content: center; } + .middle-content .boxes .box7{ + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + flex-direction: column; + justify-content: center; + } + .bottom-content { display: flex; flex-direction: column; From ea68d7fd16239e39a99adbf448da78e5cd1b09c7 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 19:23:21 -0700 Subject: [PATCH 10/17] Adjusted responsive settings --- index.html | 14 +++++------ style/index.css | 64 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 58 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7864d1fd99..e2d76016e6 100644 --- a/index.html +++ b/index.html @@ -77,13 +77,13 @@

Moon

-
diff --git a/style/index.css b/style/index.css index a8465703c5..bbc88e6021 100644 --- a/style/index.css +++ b/style/index.css @@ -269,47 +269,85 @@ footer nav a { @media(min-width:500px) { + .container { + width: 100%; + margin-left: 0px; + margin-right: 0px; + padding-left: 0px; + padding-right: 0px; + } + .header { display: flex; flex-direction: column; - justify-content: center; + align-items: center; + margin: 10px 0px 10px 0px; + } + + a.header { + margin: 0px; + padding: 0px; + } + + img.header-image { + width: 100%; } .top-content{ display: flex; flex-direction: column; - justify-content: center; + align-items: center; + } + + .top-content .text-container { + width: 100%; + padding-top: 20px; + margin-bottom: 20px; } .middle-content { display: flex; flex-direction: column; - justify-content: center; + align-items: center; } - .middle-content .boxes .box7{ - width: 12.5%; - height: 100px; - background: darkorchid; - margin: 20px 2.5%; - color: white; + .middle-content .boxes{ + width: 100%; display: flex; + flex-wrap: wrap; flex-direction: column; - justify-content: center; + align-items: center; } .bottom-content { display: flex; flex-direction: column; - justify-content: center; + align-items: center; + } + + .bottom-content .text-container { + width: 100%; + padding-top: 20px; + margin-bottom: 20px; + } + + .footer { + display: flex; + flex-direction: column; + align-items: center; + padding: 5px 0px 5px 0px; + } + + nav.footer { + margin-top: 20px; + margin-bottom: 20px; } - } } @media(min-width:800px) { - .header { + .header a.header { display: flex; flex-wrap: wrap; justify-content: space-evenly; From b4f0c4231778e13f2c28bbab6941c81263275bd0 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 19:31:13 -0700 Subject: [PATCH 11/17] More repsonsive settings for desktop --- style/index.css | 86 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 73 insertions(+), 13 deletions(-) diff --git a/style/index.css b/style/index.css index bbc88e6021..728233bda3 100644 --- a/style/index.css +++ b/style/index.css @@ -287,6 +287,7 @@ footer nav a { a.header { margin: 0px; padding: 0px; + font-size: 2rem; } img.header-image { @@ -313,6 +314,8 @@ footer nav a { .middle-content .boxes{ width: 100%; + padding: 0px; + margin: 0px; display: flex; flex-wrap: wrap; flex-direction: column; @@ -339,37 +342,94 @@ footer nav a { } nav.footer { - margin-top: 20px; - margin-bottom: 20px; + margin-top: 20px; + margin-bottom: 20px; } -} + a.footer { + font-size: 2rem; + } @media(min-width:800px) { - .header a.header { + .container { + width: 80%; + margin-left: 10%; + margin-right: 10%; + padding-left: 0px; + padding-right: 0px; + } + + .header { display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + flex-direction: row; + align-items: center; + margin: 10px 0px 10px 0px; + } + + a.header { + font-size: 1rem; + padding: 10px 20px 0px 20px; + } + + img.header-image { + width: 100%; } .top-content{ display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + flex-direction: row; + align-items: center; + } + + .top-content .text-container { + width: 100%; + padding-top: 20px; + margin-bottom: 20px; } .middle-content { display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + flex-direction: row; + align-items: center; + } + + .middle-content .boxes{ + width: 100%; + padding: 0px; + margin: 0px; + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: center; } .bottom-content { display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + flex-direction: row; + align-items: center; + } + + .bottom-content .text-container { + width: 100%; + padding-top: 20px; + margin-bottom: 20px; + } + + .footer { + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 0px 5px 0px; + } + + nav.footer { + margin-top: 20px; + margin-bottom: 20px; + } + + a.footer { + font-size: 1rem; } - } } From 1b23e56dc2a6456807f816954cbeafca20318438 Mon Sep 17 00:00:00 2001 From: Joshua Cheney Date: Fri, 15 May 2020 19:54:29 -0700 Subject: [PATCH 12/17] Configuring responsive layouts --- index.html | 20 +++---- style/index.css | 143 ++++++++++++++++++------------------------------ 2 files changed, 63 insertions(+), 100 deletions(-) diff --git a/index.html b/index.html index e2d76016e6..96f0ad9112 100644 --- a/index.html +++ b/index.html @@ -15,19 +15,19 @@
-
- black logo for Lambda -