From a3a296dff863112590fa5a4613576c2cc7067864 Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 13:47:51 -0600 Subject: [PATCH 1/7] 80% progress made / need to finish box class changes to complete --- css/index.css | 184 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 24 +++++-- 2 files changed, 199 insertions(+), 9 deletions(-) diff --git a/css/index.css b/css/index.css index ae29d6c..758fec0 100644 --- a/css/index.css +++ b/css/index.css @@ -24,6 +24,9 @@ time, mark, audio, video { vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ +html { + font-size: 62.5%; +} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; @@ -57,7 +60,7 @@ html, body { } h1, h2, h3, h4, h5 { - font-size: 18px; + font-size: 1.8rem; margin-bottom: 15px; font-family: 'Rubik', sans-serif; } @@ -67,9 +70,50 @@ p { } .container { - width: 800px; + max-width: 80%; margin: 0 auto; } +header { + display: flex; + align-items: baseline; + margin-top: 10px; + flex-flow: wrap; +} + +header .logo { + display: flex; + width: 20%; + height: 20%; +} +header ul{ + width: 20%; + display: flex; + align-items: baseline; +} + +header p { + font-size: 2.9rem; + font-weight: bold; +} + +header nav{ + width: 80%; + display: flex; + justify-content: space-around; +} + +header nav a { + text-decoration: none; + color: black; + font-size: 1.4rem; + justify-content: space-between; +} + +header .top-img { + width: 100%; + margin-top: 20px; + margin-bottom: 10px; +} .top-content { display: flex; @@ -77,14 +121,20 @@ p { justify-content: space-evenly; margin-bottom: 20px; border-bottom: 1px dashed black; + padding-top: 10px; } + .top-content .text-container { width: 48%; padding: 0 1%; padding-bottom: 20px; } +.top-content .text-container p { + font-size: 1.4rem; +} + .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; @@ -114,12 +164,13 @@ p { .bottom-content { display: flex; - margin: 0 2% 20px; + margin: 0 2% 20px; justify-content: space-around; } .bottom-content .text-container { padding-right: 4%; + font-size: 1.4rem; } .bottom-content .text-container:last-child { @@ -137,10 +188,133 @@ footer nav { justify-content: space-between; align-items: center; padding: 20px 2%; - font-size: 14px; + font-size: 1.4rem; } footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +@media (max-width: 768px) { + + .container { + max-width: 100%; + } + + header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + header ul { + display: flex; + width: 40%; + justify-content: center; + margin-bottom: 20px; + } + + header nav { + width: 100%; + display: flex; + justify-content: space-around; + } + + header nav a { + font-size: 1.6rem; + } + + .bottom-content .text-container { + height: 100px; + } +} + +@media (max-width: 400px) { + header { + display: flex; + flex-wrap: wrap; + } + + header ul { + width: 80%; + padding-top: 20px; + padding-bottom: 20px; + margin-bottom: 0px; + } + + header ul p { + font-size: 3.5rem; + } + + header nav { + width: 100%; + display: flex; + flex-direction: column; + border-top: 1px solid gray; + margin-bottom: 0px; + padding-bottom: 0px; + } + + header nav a { + width: 100%; + display: block; + text-align: center; + padding: 15px 0; + font-size: 1.4rem; + border-bottom: 1px solid grey; + } + + header .top-img { + height: 75px; + padding-top: 0px; + margin-top: 0px; + } + + .top-content { + display: flex; + flex-direction: column; + } + + .top-content .text-container { + width: 90%; + margin: 10px; + } + + .top-content .text-container p { + font-size: 1.7rem; + } + + .middle-content .boxes { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .bottom-content { + display: flex; + flex-direction: column; + } + + .bottom-content .text-container { + width: 90%; + margin: 10px; + } + + .bottom-content .text-container p { + font-size: 1.6rem; + } + + footer { + border: 1px solid green; + } + + footer nav { + display: flex; + justify-content: space-around; + width: 100%; + } +} + diff --git a/index.html b/index.html index 3b36308..b0b0acb 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + Sprint Challenge - UI / RWD @@ -13,7 +14,22 @@
+
+ + + +
+

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.

@@ -29,10 +45,10 @@

The Past

Why Did It Have To Be Boxes...

-
Box 1
-
Box 2
-
Box 3
-
Box 4
+
Box 1
+
Box 2
+
Box 3
+
Box 4
Box 5
Box 6
Box 7
From 8b18df474bbb4b1cc7b6ab1a7371da009bdbf83d Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 14:45:22 -0600 Subject: [PATCH 2/7] 100% complete finished box edits --- css/index.css | 330 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 20 +-- 2 files changed, 337 insertions(+), 13 deletions(-) diff --git a/css/index.css b/css/index.css index 758fec0..a8513f8 100644 --- a/css/index.css +++ b/css/index.css @@ -151,7 +151,7 @@ header .top-img { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box-box1{ width: 12.5%; height: 100px; background: black; @@ -162,6 +162,105 @@ header .top-img { justify-content: center; } +.middle-content .boxes .box-box2{ + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box3{ + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box4{ + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box5{ + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box6{ + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box7{ + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box8{ + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box9{ + width: 12.5%; + height: 100px; + background: black; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box-box10{ + width: 12.5%; + height: 100px; + background: lawngreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + .bottom-content { display: flex; margin: 0 2% 20px; @@ -226,6 +325,120 @@ footer nav a { font-size: 1.6rem; } + .middle-content .boxes { + font-size: 1.4rem; + } + + .middle-content .boxes .box-box1{ + width: 12.5%; + height: 90px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box2{ + width: 12.5%; + height: 90px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box3{ + width: 12.5%; + height: 90px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box4{ + width: 12.5%; + height: 90px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box5{ + width: 12.5%; + height: 90px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box6{ + width: 12.5%; + height: 90px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box7{ + width: 12.5%; + height: 90px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box8{ + width: 12.5%; + height: 90px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box9{ + width: 12.5%; + height: 90px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box10{ + width: 12.5%; + height: 90px; + background: lawngreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + .bottom-content .text-container { height: 100px; } @@ -289,8 +502,119 @@ footer nav a { .middle-content .boxes { width: 100%; display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row-reverse wrap; + justify-content: space-evenly; + font-size: 1.6rem; + } + + .middle-content .boxes .box-box1{ + width: 28%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box2{ + width: 28%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box3{ + width: 28%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box4{ + width: 28%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box5{ + width: 28%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box6{ + width: 28%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box7{ + width: 28%; + height: 100px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box8{ + width: 28%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box9{ + width: 28%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .middle-content .boxes .box-box10{ + width: 0%; + height: 0px; + background: lawngreen; + margin: 0px 0%; + color: white; + display: flex; + align-items: center; + justify-content: center; } .bottom-content { diff --git a/index.html b/index.html index b0b0acb..5eb4eac 100644 --- a/index.html +++ b/index.html @@ -45,16 +45,16 @@

The Past

Why Did It Have To Be Boxes...

-
Box 1
-
Box 2
-
Box 3
-
Box 4
-
Box 5
-
Box 6
-
Box 7
-
Box 8
-
Box 9
-
Box 10
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
From 35df7d059ceeb8b620b6c71c46cb43efe6fb4d67 Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 14:49:15 -0600 Subject: [PATCH 3/7] Minor changes (sizing, line-break errors) --- css/index.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/index.css b/css/index.css index a8513f8..a82ab5b 100644 --- a/css/index.css +++ b/css/index.css @@ -73,6 +73,7 @@ p { max-width: 80%; margin: 0 auto; } + header { display: flex; align-items: baseline; @@ -82,9 +83,9 @@ header { header .logo { display: flex; - width: 20%; - height: 20%; + width: 30%; } + header ul{ width: 20%; display: flex; @@ -124,7 +125,6 @@ header .top-img { padding-top: 10px; } - .top-content .text-container { width: 48%; padding: 0 1%; From 8fdd725875dd4a00ca299b9930681e8abfca7ebb Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 14:53:14 -0600 Subject: [PATCH 4/7] logo sizing adjustments --- css/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/index.css b/css/index.css index a82ab5b..d1890c7 100644 --- a/css/index.css +++ b/css/index.css @@ -308,6 +308,10 @@ footer nav a { align-items: center; } + header .logo { + width: 15%; + } + header ul { display: flex; width: 40%; From 31efdb47f7fd5c0d8adbbad7e3c908ea3d681ccb Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 15:07:05 -0600 Subject: [PATCH 5/7] answered questions in MD file --- Answers.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Answers.md b/Answers.md index e69de29..9d6f49b 100644 --- a/Answers.md +++ b/Answers.md @@ -0,0 +1,5 @@ +1. Box +2. display block lays out items within a block, line displays them in a line horizontally. +3. Cross axis +4. Fixed the width remains the same regardless of size. Fluid changes based on pervent values. Adaptive changes based on screen size. Responsive changes on breakpoints and adjusts layouts depending on size. +5. So the site never takes up more space than the width set no matter how far the user stretches/shrinks the window. \ No newline at end of file From 8074495c53dc2c6232b05c8c680ed7d20d53aa19 Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Fri, 9 Mar 2018 15:12:24 -0600 Subject: [PATCH 6/7] max res adjustment --- css/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/index.css b/css/index.css index d1890c7..1f3e944 100644 --- a/css/index.css +++ b/css/index.css @@ -70,7 +70,7 @@ p { } .container { - max-width: 80%; + max-width: 880px; margin: 0 auto; } From cc81fc95eb1d661be5b81f7a1875cc102a3c401e Mon Sep 17 00:00:00 2001 From: markstez05 <36493764+markstez05@users.noreply.github.com> Date: Wed, 8 Aug 2018 19:57:06 -0500 Subject: [PATCH 7/7] submit --- css/index.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 1f3e944..caa3c42 100644 --- a/css/index.css +++ b/css/index.css @@ -129,10 +129,11 @@ header .top-img { width: 48%; padding: 0 1%; padding-bottom: 20px; + font-weight: bold; } .top-content .text-container p { - font-size: 1.4rem; + font-size: 1.6rem; } .middle-content { @@ -149,6 +150,8 @@ header .top-img { display: flex; flex-wrap: wrap; justify-content: space-evenly; + min-width: 50%; + font-size: 1.6rem; } .middle-content .boxes .box-box1{ @@ -160,6 +163,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box2{ @@ -171,6 +175,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box3{ @@ -182,6 +187,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box4{ @@ -193,6 +199,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box5{ @@ -204,6 +211,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box6{ @@ -215,6 +223,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box7{ @@ -226,6 +235,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box8{ @@ -237,6 +247,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box9{ @@ -248,6 +259,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .middle-content .boxes .box-box10{ @@ -259,6 +271,7 @@ header .top-img { display: flex; align-items: center; justify-content: center; + min-width: 100px; } .bottom-content { @@ -269,7 +282,7 @@ header .top-img { .bottom-content .text-container { padding-right: 4%; - font-size: 1.4rem; + font-size: 1.6rem; } .bottom-content .text-container:last-child { @@ -635,10 +648,6 @@ footer nav a { font-size: 1.6rem; } - footer { - border: 1px solid green; - } - footer nav { display: flex; justify-content: space-around;