From bedcd1ac8de369d9423339a1f29df86991e8c912 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Fri, 15 May 2020 21:30:45 -0400 Subject: [PATCH 01/16] started header --- about.html | 0 index.html | 4 ++++ style/index.css | 2 ++ 3 files changed, 6 insertions(+) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..e69de29bb2 diff --git a/index.html b/index.html index d32d8ad25c..e0dac4e3ad 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Sprint Challenge - Home @@ -12,6 +13,9 @@ +
+ +
diff --git a/style/index.css b/style/index.css index ae29d6ceee..3532f0fa95 100644 --- a/style/index.css +++ b/style/index.css @@ -49,6 +49,8 @@ table { * { box-sizing: border-box; + border: 2px solid black; + } html, body { From e1f981096816769ffe011ece3110086e615271a0 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Fri, 15 May 2020 23:40:37 -0400 Subject: [PATCH 02/16] made changes to website layout created about me header --- index.html | 73 +++++++++++++++++---------------- style/index.css | 107 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 135 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index e0dac4e3ad..b03c344c61 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,20 @@
+
+ Home + About + Products + Blog + Contact + + -
- -
+
+

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.

@@ -27,29 +36,24 @@

The Future

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...

- +
+
+
+

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
+
-
-

That's

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

@@ -62,18 +66,17 @@

No

Moon

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 3532f0fa95..a60351049c 100644 --- a/style/index.css +++ b/style/index.css @@ -46,23 +46,53 @@ table { border-collapse: collapse; border-spacing: 0; } - +/* ********My Sprint Challenge Code Begins below******* */ * { box-sizing: border-box; - border: 2px solid black; + } + html, body { height: 100%; font-family: 'Roboto', sans-serif; + /* font-size: 62.5%; */ +} +header { + width: 100%; + height: 30vh; +} +header nav { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; } +nav { + width: 30%; + display: flex; + justify-content: space-between; + } + + .jumbo-img { + width:100%; + padding: 3%; + } + + + h1, h2, h3, h4, h5 { - font-size: 18px; + font-size:18px; margin-bottom: 15px; font-family: 'Rubik', sans-serif; } +a { + text-decoration: none; + color: black; + +} p { line-height: 1.4; @@ -86,24 +116,75 @@ p { padding: 0 1%; padding-bottom: 20px; } - -.middle-content { +/* ***** COLOR BOXES Begin here */ +.middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; } -.middle-content h2 { +.middle-content h2 { padding: 0 2%; margin-bottom: 0; } -.middle-content .boxes { + + +.boxes .box1 { + background-color: teal; + +} + +.boxes .box2 { + background-color: gold; + +} + +.boxes .box3 { + background-color: cadetblue; + +} + +.boxes .box4 { + background-color: coral; + + +} +.boxes .box5 { + background-color: crimson; + +} + +.boxes .box6 { + background-color: forestgreen; + +} +.boxes .box7 { + background-color: darkorchid; + +} +.boxes .box8 { + background-color: hotpink; + +} +.boxes .box9 { + background-color: indigo; + +} + +.boxes .box10 { + background-color: dodgerblue; + +} +.middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 { display: flex; flex-wrap: wrap; justify-content: space-evenly; } -.middle-content .boxes .box { + + +.middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 +{ width: 12.5%; height: 100px; background: black; @@ -111,9 +192,15 @@ p { color: white; display: flex; align-items: center; - justify-content: center; + justify-content: space-between; +} +section .boxes { + display: flex; + justify-content: space-evenly; } + +/* ****** COLOR BOXES END ABOVE**** */ .bottom-content { display: flex; margin: 0 2% 20px; @@ -127,7 +214,7 @@ p { .bottom-content .text-container:last-child { padding-right: 0; } - +/* ******BOTTOM CONTENT ENDS HERE */ footer { width: 100%; background: black; From b7370d16ebd1b67cb030fe41b696f432f7ef6940 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Fri, 15 May 2020 23:50:49 -0400 Subject: [PATCH 03/16] answered questions on the read me file --- about.html | 25 +++++++++++++++++++++++++ index.html | 2 ++ style/index.css | 4 ---- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/about.html b/about.html index e69de29bb2..609e54c6b0 100644 --- a/about.html +++ b/about.html @@ -0,0 +1,25 @@ + + + + + + About + + +
+ +
+ +
+
+ + diff --git a/index.html b/index.html index b03c344c61..445bff8a9e 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,9 @@ Blog Contact +
+
diff --git a/style/index.css b/style/index.css index a60351049c..80b682d0dc 100644 --- a/style/index.css +++ b/style/index.css @@ -75,10 +75,6 @@ nav { justify-content: space-between; } - .jumbo-img { - width:100%; - padding: 3%; - } From 2326c68ab2d8afc335868171d28a9d9e45e629a3 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Fri, 15 May 2020 23:55:27 -0400 Subject: [PATCH 04/16] made changes to header --- style/index.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 80b682d0dc..0f0d76f4e8 100644 --- a/style/index.css +++ b/style/index.css @@ -76,7 +76,10 @@ nav { } - + .jumbo-img { + width: 800px; + margin: 0 auto; +} h1, h2, h3, h4, h5 { @@ -172,6 +175,7 @@ p { } .middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 { + display: flex; flex-wrap: wrap; justify-content: space-evenly; From d4b4a84dd9ab364481690f23fa7f6aa2f370c3ae Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Fri, 15 May 2020 23:57:21 -0400 Subject: [PATCH 05/16] made changes to header adding more padding --- style/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/index.css b/style/index.css index 0f0d76f4e8..e68a81400a 100644 --- a/style/index.css +++ b/style/index.css @@ -65,8 +65,9 @@ header { } header nav { width: 100%; + padding: 1%; display: flex; - justify-content: space-between; + justify-content: space-evenly; align-items: center; } nav { @@ -175,7 +176,6 @@ p { } .middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 { - display: flex; flex-wrap: wrap; justify-content: space-evenly; From 353aec337eb72632945dee9e66ed1462e93325a9 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sat, 16 May 2020 13:30:04 -0400 Subject: [PATCH 06/16] made changes to box arrangement, fixed footer, fixed header --- README.md | 46 +++++------ style/index.css | 214 +++++++++++++++++++++++++++++++----------------- 2 files changed, 164 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index dc5314a3a1..6d784573ee 100644 --- a/README.md +++ b/README.md @@ -34,15 +34,15 @@ 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?/////// It's a set of tags that help accesibility readers understand the code and be able to reproduce in the desired manner from user. They're universal tags unlike divs. -2. What are the 4 areas of the box model? +2. What are the 4 areas of the box model?///// content, padding, border, margin. -3. While using flexbox, what axis does the following property work on: ```align-items: center```? +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. +4. Explain why git is valuable to a team of developers.////// It's like an online cloud for their code. If accidentally deleted or lost, it can be retrieved through github. It also allows others to fork and add more value to a specific project by making it better if the original developer is open to that idea. -5. Define mobile-first design in your own words. +5. Define mobile-first design in your own words. ///////Intended for phones/tablets. It gets to the point of the purpose of your page. Developers must make choices of what is of utmost importance due to the size and limitations of a mobile device. 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. @@ -50,12 +50,12 @@ 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 -- [ ] Push commits: git push origin `` +- [ 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 +- [ X ] Push commits: git push origin `` ### Task 2: Minimum Viable Product @@ -65,23 +65,23 @@ 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 ] 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 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/style/index.css b/style/index.css index e68a81400a..3967fe5878 100644 --- a/style/index.css +++ b/style/index.css @@ -62,24 +62,30 @@ html, body { header { width: 100%; height: 30vh; + padding:1%; +} + +.lambda-logo { + width: 20%; + padding: 2%; } header nav { - width: 100%; - padding: 1%; + width: 80%; display: flex; justify-content: space-evenly; align-items: center; } nav { - width: 30%; + width: 20%; display: flex; justify-content: space-between; - } +} - .jumbo-img { +.jumbo-img { width: 800px; margin: 0 auto; + padding:1%; } @@ -91,9 +97,9 @@ h1, h2, h3, h4, h5 { a { text-decoration: none; color: black; - + } - +/* ****HEADER ENDS ABOVE ***** */ p { line-height: 1.4; } @@ -117,94 +123,141 @@ p { padding-bottom: 20px; } /* ***** COLOR BOXES Begin here */ + .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; -} - -.middle-content h2 { - padding: 0 2%; - margin-bottom: 0; -} - - - -.boxes .box1 { - background-color: teal; - -} - -.boxes .box2 { - background-color: gold; - -} - -.boxes .box3 { - background-color: cadetblue; - -} - -.boxes .box4 { - background-color: coral; - - -} -.boxes .box5 { - background-color: crimson; - -} - -.boxes .box6 { - background-color: forestgreen; - -} -.boxes .box7 { - background-color: darkorchid; } -.boxes .box8 { - background-color: hotpink; - -} -.boxes .box9 { - background-color: indigo; - -} - -.boxes .box10 { - background-color: dodgerblue; - -} -.middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 { + .middle-content h2 { + padding: 0 2%; + margin-bottom: 0; + } +.middle-content .boxes { display: flex; flex-wrap: wrap; justify-content: space-evenly; + } - - -.middle-content .boxes .box1 .box2 .box4 .box5 .box6 .box7 .box8 .box9 .box10 -{ +.middle-content .boxes .box1 { width: 12.5%; height: 100px; - background: black; + padding:3%; + background: teal; margin: 20px 2.5%; color: white; display: flex; align-items: center; - justify-content: space-between; -} -section .boxes { - display: flex; - justify-content: space-evenly; -} + /* justify-content: space-between; */ + } +.middle-content .boxes .box2 { + width: 12.5%; + height: 100px; + padding:3%; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +.middle-content .boxes .box3 { + width: 12.5%; + height: 100px; + padding:3%; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +.middle-content .boxes .box4 { + width: 12.5%; + height: 100px; + padding:3%; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } +.middle-content .boxes .box5 { + width: 12.5%; + height: 100px; + padding:3%; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box6 { + width: 12.5%; + height: 100px; + padding:3%; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box7 { + width: 12.5%; + height: 100px; + padding:3%; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box8 { + width: 12.5%; + height: 100px; + padding:3%; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box9 { + width: 12.5%; + height: 100px; + padding:3%; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } + .middle-content .boxes .box10 { + width: 12.5%; + height: 100px; + padding:2%; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + } /* ****** COLOR BOXES END ABOVE**** */ .bottom-content { display: flex; margin: 0 2% 20px; justify-content: space-around; + padding: 1%; } .bottom-content .text-container { @@ -214,10 +267,14 @@ section .boxes { .bottom-content .text-container:last-child { padding-right: 0; } + + + /* ******BOTTOM CONTENT ENDS HERE */ footer { - width: 100%; + width: 50%; background: black; + margin: 0 auto; } footer nav { @@ -232,4 +289,15 @@ footer nav { footer nav a { color: white; text-decoration: none; +} + + section { + width: 800px; + margin: 0 auto; +} + + +.bottom-content { + width: 800px; + margin: 0 auto; } \ No newline at end of file From 6f20744f57edb37c8e8f5154f9d7fe40808394d9 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sat, 16 May 2020 13:33:35 -0400 Subject: [PATCH 07/16] made changes to the about hmtl to match change made to the index html, also linked home link to index.html --- about.html | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/about.html b/about.html index 609e54c6b0..1e7e6f1d3e 100644 --- a/about.html +++ b/about.html @@ -3,23 +3,24 @@ + About -
-
- Home - About - Products - Blog - Contact - -
- -
- +
+ +
+ +
+
From 3e0b93c9e99188ab1785e082eca0d3df3cf52c2c Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sat, 16 May 2020 13:45:33 -0400 Subject: [PATCH 08/16] tweaked the header and footer again, made them even --- about.html | 2 +- style/index.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/about.html b/about.html index 1e7e6f1d3e..2359e530b5 100644 --- a/about.html +++ b/about.html @@ -12,7 +12,7 @@ - Home + Home About Products Blog diff --git a/style/index.css b/style/index.css index 3967fe5878..f2b048568e 100644 --- a/style/index.css +++ b/style/index.css @@ -66,7 +66,7 @@ header { } .lambda-logo { - width: 20%; + width: 16%; padding: 2%; } header nav { @@ -272,13 +272,13 @@ p { /* ******BOTTOM CONTENT ENDS HERE */ footer { - width: 50%; + width: 55%; background: black; margin: 0 auto; } footer nav { - width: 60%; + width: 80%; display: flex; justify-content: space-between; align-items: center; From ca4d167b4a2915cca11ac54bde9c44b01f082ef9 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sat, 16 May 2020 13:58:26 -0400 Subject: [PATCH 09/16] made the header more responsive to browsers --- style/index.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/style/index.css b/style/index.css index f2b048568e..b8528f8ede 100644 --- a/style/index.css +++ b/style/index.css @@ -62,11 +62,11 @@ html, body { header { width: 100%; height: 30vh; - padding:1%; + padding:2%; } .lambda-logo { - width: 16%; + width: 14%; padding: 2%; } header nav { @@ -74,6 +74,7 @@ header nav { display: flex; justify-content: space-evenly; align-items: center; + padding:2% } nav { width: 20%; @@ -83,9 +84,10 @@ nav { .jumbo-img { - width: 800px; + width:100%; margin: 0 auto; - padding:1%; + padding:0 22%; + margin-bottom: 0 auto; } From 8cb5e1643671437eaa981bdc26fe496c930e3df6 Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sat, 16 May 2020 22:47:26 -0400 Subject: [PATCH 10/16] made some adjustments to the header photo --- style/index.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/style/index.css b/style/index.css index b8528f8ede..19d04f5452 100644 --- a/style/index.css +++ b/style/index.css @@ -66,7 +66,7 @@ header { } .lambda-logo { - width: 14%; + width: 15%; padding: 2%; } header nav { @@ -84,13 +84,17 @@ nav { .jumbo-img { - width:100%; + width: 50%; + height: 50%; margin: 0 auto; padding:0 22%; margin-bottom: 0 auto; + display: inline-block; } + + h1, h2, h3, h4, h5 { font-size:18px; margin-bottom: 15px; @@ -109,6 +113,7 @@ p { .container { width: 800px; margin: 0 auto; + padding: 2% } .top-content { From 3dab188a4f45c68e264a135698ea551c4623556e Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sun, 17 May 2020 00:13:32 -0400 Subject: [PATCH 11/16] added media queries to accomodate mobile viewport to header, footer, top container middle container --- style/index.css | 37 +++++++++++++++++++++++++++++-------- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/style/index.css b/style/index.css index 19d04f5452..503d7f8381 100644 --- a/style/index.css +++ b/style/index.css @@ -84,19 +84,18 @@ nav { .jumbo-img { - width: 50%; - height: 50%; - margin: 0 auto; - padding:0 22%; - margin-bottom: 0 auto; - display: inline-block; + width: 100%; + height: auto; + margin: 0 auto; + padding-left: 22%; + display: inline-block; } h1, h2, h3, h4, h5 { - font-size:18px; + font-size:1.125rem; margin-bottom: 15px; font-family: 'Rubik', sans-serif; } @@ -307,4 +306,26 @@ footer nav a { .bottom-content { width: 800px; margin: 0 auto; -} \ No newline at end of file +} +/* ****DESKTOP ENDS ABOVE ********/ + +@media (max-width: 500px){ + header nav { + flex-direction: column; + } + + .container .top-content { + flex-direction: column; + } + .middle-content .boxes { + flex-direction: column; + } + footer nav { + flex-direction: column; + margin: 4%; + + } + + + +} From 986f721eef16cd52d15c2787462f2a1cb567ce5f Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Sun, 17 May 2020 00:48:37 -0400 Subject: [PATCH 12/16] worked on getting the header image to be responsive when switching from desktop to mobile viewport.' --- index.html | 2 +- style/index.css | 28 ++++++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 445bff8a9e..422dee315b 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@ Contact
- +
diff --git a/style/index.css b/style/index.css index 503d7f8381..318fceb50e 100644 --- a/style/index.css +++ b/style/index.css @@ -83,14 +83,22 @@ nav { } -.jumbo-img { +/* .jumbo-img { width: 100%; height: auto; margin: 0 auto; padding-left: 22%; display: inline-block; -} +} */ +.header-image { + width: 100%; + height: auto; + margin: 0 auto; + display: inline-block; + padding-left: 21%; + padding-right: 21%; +} @@ -312,10 +320,26 @@ footer nav a { @media (max-width: 500px){ header nav { flex-direction: column; + padding: 2%; + } + .lambda-logo{ + padding:2%; + } + + + } + a{ + padding: 1.5%; + } + .header-image { + width:100%; + padding: 1%; + } .container .top-content { flex-direction: column; + padding: 8%; } .middle-content .boxes { flex-direction: column; From 616355f22758beb8c7abfc165f4e1df436bcae8a Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Mon, 18 May 2020 19:14:53 -0400 Subject: [PATCH 13/16] fixed syntax errors that I accidentally changed that prevente me from going back to desktop version while on mobile viewport size --- style/index.css | 188 ++++++++++++++++++++++++------------------------ 1 file changed, 92 insertions(+), 96 deletions(-) diff --git a/style/index.css b/style/index.css index 318fceb50e..a12537d44a 100644 --- a/style/index.css +++ b/style/index.css @@ -143,15 +143,14 @@ p { border-bottom: 1px dashed black; } - .middle-content h2 { - padding: 0 2%; - margin-bottom: 0; - } +.middle-content h2 { + padding: 0 2%; + margin-bottom: 0; +} .middle-content .boxes { display: flex; flex-wrap: wrap; - justify-content: space-evenly; - + justify-content: space-evenly; } .middle-content .boxes .box1 { @@ -167,104 +166,104 @@ p { } .middle-content .boxes .box2 { - width: 12.5%; - height: 100px; - padding:3%; - background: gold; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box3 { - width: 12.5%; - height: 100px; - padding:3%; - background: cadetblue; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box4 { - width: 12.5%; - height: 100px; - padding:3%; - background: coral; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box5 { - width: 12.5%; - height: 100px; - padding:3%; - background: crimson; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box6 { - width: 12.5%; - height: 100px; - padding:3%; - background: forestgreen; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box7 { - width: 12.5%; - height: 100px; - padding:3%; - background: darkorchid; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box8 { - width: 12.5%; - height: 100px; - padding:3%; - background: hotpink; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box9 { - width: 12.5%; - height: 100px; - padding:3%; - background: indigo; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:3%; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } .middle-content .boxes .box10 { - width: 12.5%; - height: 100px; - padding:2%; - background: dodgerblue; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: space-between; + width: 12.5%; + height: 100px; + padding:2%; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: space-between; } /* ****** COLOR BOXES END ABOVE**** */ .bottom-content { @@ -305,7 +304,7 @@ footer nav a { text-decoration: none; } - section { +section { width: 800px; margin: 0 auto; } @@ -317,24 +316,24 @@ footer nav a { } /* ****DESKTOP ENDS ABOVE ********/ -@media (max-width: 500px){ +@media(max-width: 500px){ header nav { flex-direction: column; padding: 2%; + } .lambda-logo{ padding:2%; } - } + a{ padding: 1.5%; } .header-image { width:100%; padding: 1%; - } .container .top-content { @@ -347,9 +346,6 @@ footer nav a { footer nav { flex-direction: column; margin: 4%; - - } + } - - -} +} \ No newline at end of file From 8feb5e81aa8be29607e84c5bebfd207c9365836d Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Mon, 18 May 2020 19:49:22 -0400 Subject: [PATCH 14/16] was able to center my boxes on the mobile version of the site --- style/index.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/style/index.css b/style/index.css index a12537d44a..0f0421d629 100644 --- a/style/index.css +++ b/style/index.css @@ -342,7 +342,14 @@ section { } .middle-content .boxes { flex-direction: column; + padding-left: 20%; } + + h2 { + width:100%; + margin-left: 13%; + } + footer nav { flex-direction: column; margin: 4%; From 8eab7946a00c4dca1febc87981769562e290aeab Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Mon, 18 May 2020 20:41:30 -0400 Subject: [PATCH 15/16] continued working on mobile version of the website, was able to get bottom content in a column. --- index.html | 18 +++++++++--------- style/index.css | 17 +++++++++++++++-- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 422dee315b..936582603f 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,22 @@ - - + + - Sprint Challenge - Home +Sprint Challenge - Home - - + +
-
+ Home About Products @@ -28,7 +28,7 @@ -
+

The Future

diff --git a/style/index.css b/style/index.css index 0f0421d629..4f6e3813dd 100644 --- a/style/index.css +++ b/style/index.css @@ -339,7 +339,12 @@ section { .container .top-content { flex-direction: column; padding: 8%; + padding-right:40%; } + } + + + .middle-content .boxes { flex-direction: column; padding-left: 20%; @@ -349,10 +354,18 @@ section { width:100%; margin-left: 13%; } - + .bottom-content { + display: flex; + flex-direction: column; + } + .text-container { + width: 40%; + margin-left: 15%; + + } + footer nav { flex-direction: column; margin: 4%; } -} \ No newline at end of file From 844aadf5ed34354297c48e716aea552d7fe8046b Mon Sep 17 00:00:00 2001 From: Nelly Montanez Date: Mon, 18 May 2020 20:45:03 -0400 Subject: [PATCH 16/16] fixed a syntax error on css page --- style/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 4f6e3813dd..532432f48d 100644 --- a/style/index.css +++ b/style/index.css @@ -341,7 +341,7 @@ section { padding: 8%; padding-right:40%; } - } + @@ -368,4 +368,5 @@ section { flex-direction: column; margin: 4%; } +}