From f0b038e4687a5bdb823a3c30f92a85bd3a7cb25b Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Fri, 8 May 2020 08:45:06 -0700 Subject: [PATCH 01/14] Added my answers to the self-study questions inside the document as requested --- hailey-hansard-sprint-1.txt | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 hailey-hansard-sprint-1.txt diff --git a/hailey-hansard-sprint-1.txt b/hailey-hansard-sprint-1.txt new file mode 100644 index 0000000000..e69de29bb2 From a78d1ab74e01e8e178f4863df6b53ad93904a2c6 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Fri, 8 May 2020 10:40:51 -0700 Subject: [PATCH 02/14] Added my html and css after I worked on it in codepen. Transferred the code into Visual Code Studio project --- README.md | 11 +++ hailey-hansard-sprint-1.txt | 5 ++ index.html | 130 ++++++++++++++++++++---------------- style/index.css | 35 ++++++++++ 4 files changed, 123 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 8033625685..9865185e17 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,25 @@ 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 is the process of providing meaning to your content. Using Semantic HTML makes your website readable and easily interpreted by machines. It also helps other developers be able to read your code, and keept it organized. There are certain semantic elements that hold meaning such as header, footer, and h1. + 2. What are the 4 areas of the box model? +The 4 areas of box model are the content, the padding, the border, and the margin. Content is the space within the model in which our text and images are rendered. The padding is around the content, its the space between the content and the border. The border is next, we can add this to style around the content and padding. Then, we have the margin which is the space between the border and everything else on the page (the "edge" of the webpage for example"). + + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +Align-items will work on the cross axis, what I would call the vertical axis. The command center will center the items. + 4. Explain why git is valuable to a team of developers. +Git is valuable to a team of developers because it allows a group of people to each work on their own code separately without affecting the master copy of the project, and then the team members can share, monitor, and control any changes made during development before they merge it onto the final project. Git allows you to track changes in an organized way, so you'll have a history of the coding in the file. + 5. Define mobile-first design in your own words. +In mobile first design, you would design the smallest size screen first, and then work your way up to bigger screens by using the media query tools in coding. For example, you could set a rule that AFTER 800 px, certain elements change in style to give the viewer a better experience. Perhaps you will change the layout of the divs so that they are in rows instead of columns as the screens get bigger. + 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 diff --git a/hailey-hansard-sprint-1.txt b/hailey-hansard-sprint-1.txt index e69de29bb2..ab8e0ab4a7 100644 --- a/hailey-hansard-sprint-1.txt +++ b/hailey-hansard-sprint-1.txt @@ -0,0 +1,5 @@ +Notes to keep myself organized: +I added the answers to the questions inside the ReadMe.md as requested. +Worked on my code in CodePen, then transferred my current code over to Visual Code. +Still trying to make the header look correct. +Added hero-image. diff --git a/index.html b/index.html index d32d8ad25c..a612663376 100644 --- a/index.html +++ b/index.html @@ -12,64 +12,78 @@ +
+ + +
+
+ +
+
- -
-
-

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.

-
-
- -
- -

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

That's

-

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.

-
-
-

Moon

-

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.

+
+
+ +
+ +

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

That's

+

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.

+
+
+

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 ae29d6ceee..3e91dd000e 100644 --- a/style/index.css +++ b/style/index.css @@ -28,6 +28,41 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } + +/* General Styling */ +header{ + display: flex; + margin: 2% 2%; + justify-content: space-between; + } + +header img{ + +} + + + header nav{ + width: 70%; + display: flex; + justify-content: space-evenly; + align-items: center; + padding: 20px 2%; + font-size: 14px; + } + +header nav a{ + color:black; + background-color: yellow; + text-decoration: none; + display: flex; + justify-content: flex-start; +} + +.hero-image img{ + margin-right: 5%; + margin-left: 5%; +} + body { line-height: 1; } From d58ca6167caba58e6540b8553b602086052215f9 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Fri, 8 May 2020 14:24:18 -0700 Subject: [PATCH 03/14] Submitting my adjustments made to the header. It has logo and nav, and now looks like the example. Also added the hero-image and made it appear correctly. --- index.html | 21 +++++++++++---------- style/index.css | 24 +++++++++++------------- 2 files changed, 22 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index a612663376..1a441293f2 100644 --- a/index.html +++ b/index.html @@ -11,21 +11,22 @@ - +
- - + +
+
- +
diff --git a/style/index.css b/style/index.css index 3e91dd000e..05e96da663 100644 --- a/style/index.css +++ b/style/index.css @@ -32,35 +32,33 @@ footer, header, hgroup, menu, nav, section { /* General Styling */ header{ display: flex; - margin: 2% 2%; + flex-direction: row; justify-content: space-between; + width: 800px; + margin: 2% auto; } -header img{ - -} - header nav{ width: 70%; display: flex; - justify-content: space-evenly; - align-items: center; + justify-content: space-between; + /* align-items: center; */ padding: 20px 2%; font-size: 14px; } -header nav a{ +.links a{ color:black; - background-color: yellow; text-decoration: none; display: flex; - justify-content: flex-start; + justify-content: space-evenly; } -.hero-image img{ - margin-right: 5%; - margin-left: 5%; +.hero-image { + display: block; + width: 800px; + margin: 0 auto; } body { From 1629ccbe9d5fd2727fd1f33ddae752b867163201 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Fri, 8 May 2020 16:53:26 -0700 Subject: [PATCH 04/14] Added responsive design via media queries for 800px and 500px. Still needs work but is getting closer --- about.html | 11 ++++++++ hailey-hansard-sprint-1.txt | 5 ++++ index.html | 2 +- style/index.css | 50 ++++++++++++++++++++++++++++++++----- 4 files changed, 61 insertions(+), 7 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..093b749705 --- /dev/null +++ b/about.html @@ -0,0 +1,11 @@ + + + + + + Document + + + About Lambda! + + \ No newline at end of file diff --git a/hailey-hansard-sprint-1.txt b/hailey-hansard-sprint-1.txt index ab8e0ab4a7..ce2aada935 100644 --- a/hailey-hansard-sprint-1.txt +++ b/hailey-hansard-sprint-1.txt @@ -3,3 +3,8 @@ I added the answers to the questions inside the ReadMe.md as requested. Worked on my code in CodePen, then transferred my current code over to Visual Code. Still trying to make the header look correct. Added hero-image. + +Re-worked header and am happy with the header > logo > nav > nav links a. +Re-worked hero-image and am happy with the placement of it. +Added about.html page +Connected the about.html page to my index.html and it opens in a new tab diff --git a/index.html b/index.html index 1a441293f2..b0670f2e61 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
diff --git a/style/index.css b/style/index.css index 1fa94dc7b4..1a320a6002 100644 --- a/style/index.css +++ b/style/index.css @@ -19,7 +19,7 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -37,19 +37,20 @@ header{ flex-direction: row; justify-content: space-between; width: 800px; - margin: 2% auto; + margin: 2% auto 3.5%; } header nav{ width: 70%; display: flex; - justify-content: space-between; + justify-content: space-around; align-items: center; - font-size: 14px; + margin-top: 1.1rem; } .links a{ color:black; + font-size: .85rem; text-decoration: none; display: flex; justify-content: space-evenly; @@ -148,6 +149,111 @@ p { background-color: teal; } */ +.middle-content .boxes .box1 { + width: 12.5%; + height: 100px; + background:teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.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 { display: flex; margin: 0 2% 20px; @@ -181,6 +287,8 @@ footer nav a { text-decoration: none; } +/* Media Queries */ + @media(max-width: 800px){ .container{ background:yellow; @@ -188,17 +296,25 @@ footer nav a { .top-content{ display:flex; flex-direction: column; + width: 90%; + margin: 2%; } .middle-content{ display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; + /* width: 95%; */ } - .boxes{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; + + .middle-content > div{ + /* flex-basis: 32.5%; */ + /* width: 100%; + display: flex; + flex-direction: column; */ + /* flex-wrap: wrap; */ + /* align-items: center; + justify-content: center; */ } .bottom-content{ From fcec572669c005dddf7c3ad32566b16f5f1e1dc5 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Sun, 10 May 2020 18:44:03 -0700 Subject: [PATCH 06/14] Added responsive design for tablet size --- style/index.css | 83 ++++++++++++++++++++++++++++++------------------- 1 file changed, 51 insertions(+), 32 deletions(-) diff --git a/style/index.css b/style/index.css index 1a320a6002..9dfc42d96e 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) */ @@ -134,21 +134,6 @@ p { justify-content: space-evenly; } -.middle-content .boxes .box { - width: 12.5%; - height: 100px; - background: black; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; -} - -/* .box1{ - background-color: teal; -} */ - .middle-content .boxes .box1 { width: 12.5%; height: 100px; @@ -293,6 +278,17 @@ footer nav a { .container{ background:yellow; } + +header{ + margin: 3%; + display:flex; + justify-content: space-evenly; + justify-content: flex-start; + /* width: 99%; */ +} +/* header nav{ + margin: 5%; +} */ .top-content{ display:flex; flex-direction: column; @@ -300,28 +296,51 @@ footer nav a { margin: 2%; } + .top-content > .text-container{ + flex-basis: 90%; + width: 90%; + } + .middle-content{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - /* width: 95%; */ + } - .middle-content > div{ - /* flex-basis: 32.5%; */ - /* width: 100%; - display: flex; - flex-direction: column; */ - /* flex-wrap: wrap; */ - /* align-items: center; - justify-content: center; */ +.middle-content > .boxes{ + display:flex; + flex-direction: row; + flex-wrap: wrap; + flex-basis: 12%; + justify-content: space-around; + justify-content: center; + align-content: center; + width: 35%; + +} + + .middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 35%; + justify-content: center; + } - .bottom-content{ - display: flex; - flex-wrap: wrap; + +.bottom-content{ + display:flex; + flex-wrap: wrap; + justify-content: space-evenly; } + +.bottom-content > .text-container{ + flex-basis: 30%; + margin: 1% 5%; } + + +footer{ + display:flex; + justify-content: space-evenly; +} +} @media(max-width: 500px){ .container{ @@ -330,4 +349,4 @@ footer nav a { flex-direction: column; } -} +} */ From a0ca9ee71c9b7702c0dd31f9fa8d31eebf7cf9d5 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Sun, 10 May 2020 21:56:55 -0700 Subject: [PATCH 07/14] Added css to the media query at 500px, still needs work to make the boxes look correct --- index.html | 15 +++--- style/index.css | 135 ++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 133 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 770acd6c00..1e3e27e82c 100644 --- a/index.html +++ b/index.html @@ -13,18 +13,19 @@
- Lambda logo +
- + Space Highway
diff --git a/style/index.css b/style/index.css index 9dfc42d96e..b33794d0b6 100644 --- a/style/index.css +++ b/style/index.css @@ -198,6 +198,7 @@ p { align-items: center; justify-content: center; } + .middle-content .boxes .box7 { width: 12.5%; height: 100px; @@ -208,6 +209,7 @@ p { align-items: center; justify-content: center; } + .middle-content .boxes .box8 { width: 12.5%; height: 100px; @@ -218,6 +220,7 @@ p { align-items: center; justify-content: center; } + .middle-content .boxes .box9 { width: 12.5%; height: 100px; @@ -228,6 +231,7 @@ p { align-items: center; justify-content: center; } + .middle-content .boxes .box10 { width: 12.5%; height: 100px; @@ -274,6 +278,8 @@ footer nav a { /* Media Queries */ +/* Tablet Design 800 px */ + @media(max-width: 800px){ .container{ background:yellow; @@ -284,11 +290,26 @@ header{ display:flex; justify-content: space-evenly; justify-content: flex-start; - /* width: 99%; */ + width:100%; +} + +header > nav{ + width:100%; +} + +.hero-image{ + width:100%; + display:flex; + justify-content: center; +} + +header div{ + display:flex; + justify-content: center; + width: 100%; + flex-basis: 15%; + width: 40%; } -/* header nav{ - margin: 5%; -} */ .top-content{ display:flex; flex-direction: column; @@ -314,13 +335,12 @@ header{ justify-content: center; align-content: center; width: 35%; - + margin-left: 35%; } - .middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 35%; - justify-content: center; - +.middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 35%; + justify-content: center; } @@ -342,11 +362,106 @@ footer{ } } +/* Mobile Design 500px */ + @media(max-width: 500px){ - .container{ + body{ background: orange; display:flex; flex-direction: column; + width: 100%; + } +.container{ + width:100%; +} + +header{ + display:flex; + flex-direction: column; + align-items: center; + width:100%; + /* justify-content: center; */ + /* margin: 2%; */ + } +header > div{ + width: 20%; +} + header > img .lambda-logo{ + width: 30%; + } + +header > nav{ + display:flex; + flex-direction: column; + width: 100%; + margin: 2%; +} + +header / nav > a { + width: 100%; + margin: 3%; + padding-bottom: 50%; + display:flex; + justify-content: center; +} + +body > div > .hero-image{ + width:50%; + width: 50vw; + display:flex; + justify-content:center; +} + +.top-content{ + display:flex; + flex-wrap:wrap; + /* justify-content: space-evenly; */ + width: 90%; + margin: 1%; +} + +.top-content > .text-container{ + flex-basis: 80%; + margin: 1%; +} +/* .middle-content > .boxes{ + display:flex; + flex-direction: column; + width: 100% +} */ + +.middle-content{ + width:100%; + margin: 0; +} + +.middle-content > .boxes{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; + margin: 0; +} + +.middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 20%; + justify-content: center; + margin: 0; + width: 100%; + } + +.bottom-content{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-evenly; + width:100%; + } + +.bottom-content > .text-container{ + flex-basis: 5%; + margin: 5% 2%; + width:70%; } } */ From 0c96b7cdfbc38291767b17048945ab8aef96a142 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Wed, 13 May 2020 01:18:52 -0700 Subject: [PATCH 08/14] Added responsive design to tablet and mobile breakpoints. Almost finished. --- index.html | 35 +++---- style/index.css | 254 ++++++++++++++++++++++++++++++------------------ 2 files changed, 173 insertions(+), 116 deletions(-) diff --git a/index.html b/index.html index 1e3e27e82c..1772ddec4e 100644 --- a/index.html +++ b/index.html @@ -12,16 +12,18 @@ +
- - + +
@@ -42,9 +44,7 @@

The Past

-

Why Did It Have To Be Boxes...

-
Box 1
Box 2
@@ -57,26 +57,23 @@

Why Did It Have To Be Boxes...

Box 9
Box 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. 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. 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. 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 b33794d0b6..7b9b688431 100644 --- a/style/index.css +++ b/style/index.css @@ -31,6 +31,9 @@ footer, header, hgroup, menu, nav, section { /* General Styling */ +.big-container{ + width:100% +} header{ display: flex; @@ -245,7 +248,8 @@ p { .bottom-content { display: flex; - margin: 0 2% 20px; + margin-top: 0; + margin-bottom: 20px; justify-content: space-around; } @@ -266,6 +270,7 @@ footer nav { width: 60%; display: flex; justify-content: space-between; + justify-items: center; align-items: center; padding: 20px 2%; font-size: 14px; @@ -281,15 +286,24 @@ footer nav a { /* Tablet Design 800 px */ @media(max-width: 800px){ - .container{ + .big-container{ background:yellow; -} + margin:0; + padding:0; + width:100%; + } + +.container{ + width:100%; +} header{ - margin: 3%; + margin: 0; + padding: 2%; display:flex; justify-content: space-evenly; justify-content: flex-start; + align-items: center; width:100%; } @@ -313,8 +327,8 @@ header div{ .top-content{ display:flex; flex-direction: column; - width: 90%; - margin: 2%; + width: 100%; + padding-left:2%; } .top-content > .text-container{ @@ -322,25 +336,27 @@ header div{ width: 90%; } - .middle-content{ - + .middle-content h2{ + text-align:left; + } + + .middle-content .boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + flex-basis: 12%; + min-width:12.5%; + min-height:100px; } -.middle-content > .boxes{ - display:flex; - flex-direction: row; - flex-wrap: wrap; - flex-basis: 12%; - justify-content: space-around; - justify-content: center; - align-content: center; - width: 35%; - margin-left: 35%; -} .middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 35%; + /* flex-basis: 35%; */ justify-content: center; + width:100px; + height:100px; + width: 12.5%; + height: 100px; } @@ -351,8 +367,9 @@ header div{ } .bottom-content > .text-container{ - flex-basis: 30%; - margin: 1% 5%; + flex-basis: 35%; + padding: 1% 0; + width:100%; } @@ -361,107 +378,150 @@ footer{ justify-content: space-evenly; } } - + /* Mobile Design 500px */ @media(max-width: 500px){ - body{ + .big-container{ background: orange; display:flex; flex-direction: column; width: 100%; } -.container{ - width:100%; -} -header{ + header{ display:flex; flex-direction: column; align-items: center; width:100%; - /* justify-content: center; */ - /* margin: 2%; */ + padding-top:3%; + justify-content: space-between; } -header > div{ - width: 20%; -} - header > img .lambda-logo{ - width: 30%; + + nav.links{ + display:flex; + flex-direction:column; + justify-content: space-evenly; + height: 18vh; } -header > nav{ - display:flex; - flex-direction: column; - width: 100%; - margin: 2%; -} -header / nav > a { - width: 100%; - margin: 3%; - padding-bottom: 50%; - display:flex; - justify-content: center; -} + .big-container > div > .hero-image{ + width:50%; + width: 50vw; + display:flex; + justify-content:center; + } -body > div > .hero-image{ - width:50%; - width: 50vw; - display:flex; - justify-content:center; -} + .container{ + width:100%; + } -.top-content{ - display:flex; - flex-wrap:wrap; - /* justify-content: space-evenly; */ - width: 90%; - margin: 1%; -} + .top-content{ + display:flex; + flex-wrap:wrap; + justify-content: space-evenly; + width: 100%; + padding: 2%; + } -.top-content > .text-container{ - flex-basis: 80%; - margin: 1%; -} -/* .middle-content > .boxes{ - display:flex; - flex-direction: column; - width: 100% -} */ + .top-content > .text-container{ + flex-basis: 80%; + } + + .middle-content h2{ + display:flex; + justify-content:center; + width:100%; + } -.middle-content{ - width:100%; - margin: 0; -} + .middle-content .boxes{ + width:100%; + margin: 0; + display:flex; + flex-direction:column; + justify-content: space-evenly; + align-items:center; + } -.middle-content > .boxes{ - display:flex; - flex-direction: column; - flex-wrap: wrap; - width: 100%; - margin: 0; -} + .middle-content > .boxes > .box1{ + justify-content:center; + width:100px; + height:100px; + } -.middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - flex-basis: 20%; - justify-content: center; - margin: 0; - width: 100%; + .middle-content > .boxes > .box2{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box3{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box4{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box5{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box6{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box7{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box8{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box9{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box10{ + justify-content: center; + width:100px; + height:100px; } -.bottom-content{ - display:flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: space-evenly; - width:100%; + .bottom-content{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-evenly; + width:100%; + padding:2%; } -.bottom-content > .text-container{ - flex-basis: 5%; - margin: 5% 2%; - width:70%; + .bottom-content > .text-container{ + padding: 4%; + width:100%; + } + + footer{ + display:flex; + flex-direction:column; + height:30vh; } -} */ + footer > nav > a{ + display:flex; + flex-direction:column; + justify-content: space-between; + /* justify-items: space-between; */ + /*I cannot get the links inside the nav to flex-direction:column, for some reason they will not appear in a column. + I tried adding height to the footer, but the links still won't appear in column.*/ + } +} From 209741c7ba45e144adac526187e7e14f7d747ac5 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Wed, 13 May 2020 02:02:13 -0700 Subject: [PATCH 09/14] Finished the css for the sprint challenge --- style/index.css | 53 ++++++++++++++++++++++--------------------------- 1 file changed, 24 insertions(+), 29 deletions(-) diff --git a/style/index.css b/style/index.css index 7b9b688431..90123c89fe 100644 --- a/style/index.css +++ b/style/index.css @@ -262,8 +262,9 @@ p { } footer { - width: 100%; background: black; + display:flex; + justify-content: center; } footer nav { @@ -286,12 +287,11 @@ footer nav a { /* Tablet Design 800 px */ @media(max-width: 800px){ - .big-container{ - background:yellow; +.big-container{ margin:0; padding:0; width:100%; - } +} .container{ width:100%; @@ -324,29 +324,29 @@ header div{ flex-basis: 15%; width: 40%; } - .top-content{ - display:flex; - flex-direction: column; - width: 100%; - padding-left:2%; +.top-content{ + display:flex; + flex-direction: column; + width: 100%; + padding-left:2%; } - .top-content > .text-container{ - flex-basis: 90%; - width: 90%; +.top-content > .text-container{ + flex-basis: 90%; + width: 90%; } - .middle-content h2{ - text-align:left; +.middle-content h2{ + text-align:left; } - .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - flex-basis: 12%; - min-width:12.5%; - min-height:100px; +.middle-content .boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + flex-basis: 12%; + min-width:12.5%; + min-height:100px; } @@ -383,7 +383,6 @@ footer{ @media(max-width: 500px){ .big-container{ - background: orange; display:flex; flex-direction: column; width: 100%; @@ -511,17 +510,13 @@ footer{ } footer{ - display:flex; - flex-direction:column; - height:30vh; + height:20vh; } - footer > nav > a{ + footer > nav{ display:flex; flex-direction:column; justify-content: space-between; - /* justify-items: space-between; */ - /*I cannot get the links inside the nav to flex-direction:column, for some reason they will not appear in a column. - I tried adding height to the footer, but the links still won't appear in column.*/ } } + From 375945cf81f5cf8a8355c987eed97d285c187309 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Wed, 13 May 2020 13:30:03 -0700 Subject: [PATCH 10/14] Added css to make tablet view boxes look correct. Updated footer on desktop view. Boxes on mobile are now broken. --- index.html | 4 +++- style/index.css | 23 ++++++++++++----------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 1772ddec4e..7c3e290fa7 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,8 @@

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 90123c89fe..00ac4edc95 100644 --- a/style/index.css +++ b/style/index.css @@ -262,9 +262,10 @@ p { } footer { + width:100%; background: black; display:flex; - justify-content: center; + justify-content: flex-start; } footer nav { @@ -340,23 +341,23 @@ header div{ text-align:left; } + .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + display:flex; + flex-direction:row; + flex-wrap:wrap; flex-basis: 12%; - min-width:12.5%; - min-height:100px; + justify-content: space-around; + justify-content: center; + align-content: center; + width: 35%; + margin-left:35%; } .middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ - /* flex-basis: 35%; */ + flex-basis: 35%; justify-content: center; - width:100px; - height:100px; - width: 12.5%; - height: 100px; } From b62d5ea22ed3d998713ad26e5a69c27e233a96cb Mon Sep 17 00:00:00 2001 From: haileyhansard <64794287+haileyhansard@users.noreply.github.com> Date: Wed, 13 May 2020 14:02:14 -0700 Subject: [PATCH 11/14] Added flex-basis: none to the mobile view --- style/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 00ac4edc95..feee0b993f 100644 --- a/style/index.css +++ b/style/index.css @@ -443,7 +443,10 @@ footer{ justify-content: space-evenly; align-items:center; } - + .middle-content > .boxes > div{ + flex-basis:none; + } + .middle-content > .boxes > .box1{ justify-content:center; width:100px; From 0c88ec7d51f2045d9e824f51863fef5312b2398d Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Wed, 13 May 2020 14:31:03 -0700 Subject: [PATCH 12/14] Fixed the mobile view of the boxes so that they appear in one column at 100px x 100px. --- style/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index 00ac4edc95..fc52636e46 100644 --- a/style/index.css +++ b/style/index.css @@ -443,7 +443,10 @@ footer{ justify-content: space-evenly; align-items:center; } - +.middle-content > .boxes > div{ + flex-basis: 100%; + min-height: 100px; +} .middle-content > .boxes > .box1{ justify-content:center; width:100px; From 0a6d965ae57795d81d154a1910e0b4f8f0aa4990 Mon Sep 17 00:00:00 2001 From: haileyhansard <64794287+haileyhansard@users.noreply.github.com> Date: Wed, 13 May 2020 14:40:22 -0700 Subject: [PATCH 13/14] Line 447- Removed flex-basis:none, Added flex-basis:100%, and Added min-height 100px; applied to .middle-content > .boxes > div --- style/index.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index feee0b993f..48af3cf9fe 100644 --- a/style/index.css +++ b/style/index.css @@ -443,8 +443,10 @@ footer{ justify-content: space-evenly; align-items:center; } + .middle-content > .boxes > div{ - flex-basis:none; + flex-basis: 100%; + min-height: 100px; } .middle-content > .boxes > .box1{ From ed16cff4423f58b9830d8eb0b1bc1ff80581a127 Mon Sep 17 00:00:00 2001 From: haileyhansard Date: Wed, 13 May 2020 15:02:40 -0700 Subject: [PATCH 14/14] final submission for sprint challenge I --- style/index.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/style/index.css b/style/index.css index e9c4597a1c..fc52636e46 100644 --- a/style/index.css +++ b/style/index.css @@ -443,19 +443,10 @@ footer{ justify-content: space-evenly; align-items:center; } -<<<<<<< HEAD .middle-content > .boxes > div{ flex-basis: 100%; min-height: 100px; } -======= - - .middle-content > .boxes > div{ - flex-basis: 100%; - min-height: 100px; - } - ->>>>>>> 0a6d965ae57795d81d154a1910e0b4f8f0aa4990 .middle-content > .boxes > .box1{ justify-content:center; width:100px;