From 3fc10cbfe870bb70cf66cfc6a771c59b49c70a5e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 8 May 2020 12:40:00 -0400 Subject: [PATCH 01/11] Added logo and menu to index.html. Added styles for logo and menu to style/index.css. Using temporary border around all elements for guidance. --- index.html | 13 +++++++++++++ style/index.css | 16 ++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/index.html b/index.html index d32d8ad25c..047ad66bf4 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,19 @@
+
+ + + + +
+

The Future

diff --git a/style/index.css b/style/index.css index ae29d6ceee..9fcdd903df 100644 --- a/style/index.css +++ b/style/index.css @@ -22,6 +22,7 @@ time, mark, audio, video { font-size: 100%; font: inherit; vertical-align: baseline; + border:1px solid black; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, @@ -71,6 +72,21 @@ p { margin: 0 auto; } +header { + display:flex; +} + +nav { + display:flex; + align-items:center; + justify-content:space-evenly; + width:100%; +} + +.nav-items { + align-items:center; +} + .top-content { display: flex; flex-wrap: wrap; From b947a4e964006ee81792e3de90a2775fcc14e7ea Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 8 May 2020 12:54:51 -0400 Subject: [PATCH 02/11] Created about.html page. Added links and styled links in nav menu --- about.html | 41 +++++++++++++++++++++++++++++++++++++++++ index.html | 4 ++-- style/index.css | 16 ++++++++++++++-- 3 files changed, 57 insertions(+), 4 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..c2baadd77f --- /dev/null +++ b/about.html @@ -0,0 +1,41 @@ + + + + + + + Sprint Challenge - Home + + + + + + + +
+ +
+ + + + +
+ + +
+ + diff --git a/index.html b/index.html index 047ad66bf4..c686adf9ac 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@ + + + Awesome image
diff --git a/style/index.css b/style/index.css index e3ebb67d7b..c673d28bef 100644 --- a/style/index.css +++ b/style/index.css @@ -31,6 +31,7 @@ footer, header, hgroup, menu, nav, section { } body { line-height: 1; + margin-top:24px; } ol, ul { list-style: none; @@ -99,6 +100,10 @@ nav { padding:12px; } +.header-image { + margin:36px auto; +} + .top-content { display: flex; flex-wrap: wrap; From 91441bad34c2443a2ec0940d4ba638f872c48591 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 8 May 2020 14:04:59 -0400 Subject: [PATCH 04/11] Added some media queries for navigation and top content --- style/index.css | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/style/index.css b/style/index.css index c673d28bef..a0438cafd5 100644 --- a/style/index.css +++ b/style/index.css @@ -93,23 +93,33 @@ nav { color:white; background-color:black; } - +@media(min-width:801px and max-width:1600px) { .nav-item { align-items:center; - width:calc((100% - 157px) / 5); + /* width:calc((100% - 157px) / 5); */ padding:12px; } +} +@media(min-width:501px and max-width:800px) { + .nav-item { + align-items:center; + padding:12px; + font-size:2rem; + } +} .header-image { margin:36px auto; } +@media(min-width:801px and max-width:1600px) { .top-content { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-bottom: 20px; border-bottom: 1px dashed black; + font-weight:600; } .top-content .text-container { @@ -117,6 +127,24 @@ nav { padding: 0 1%; padding-bottom: 20px; } +} + +@media(min-width:501px and max-width:800px) { + .top-content { + display:flex; + flex-wrap:wrap; + justify-content:space-evenly; + flex-direction:column; + width:100%; + flex-grow:1; + margin-bottom:20px; + border-bottom:1px dashed black; + } + .text-container { + width:100%; + font-size:1.3rem; + } +} .middle-content { margin-bottom: 20px; @@ -149,6 +177,7 @@ nav { display: flex; margin: 0 2% 20px; justify-content: space-around; + font-weight:600; } .bottom-content .text-container { From 3688ea1c661207c2b56d3845df5ead845b0497e4 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 8 May 2020 17:53:07 -0400 Subject: [PATCH 05/11] Finalized style/index.css to include max-width of 800px --- index.html | 28 ++-- style/index.css | 352 +++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 329 insertions(+), 51 deletions(-) diff --git a/index.html b/index.html index 74c7dac22e..f4955c62c5 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + @@ -21,9 +21,9 @@ @@ -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 a0438cafd5..fa76b423fc 100644 --- a/style/index.css +++ b/style/index.css @@ -3,6 +3,7 @@ License: none (public domain) */ +/* Page Styles */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -19,10 +20,11 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; - /* border:1px solid black; */ + /* border:1px solid black; */ + max-width:100%; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, @@ -30,7 +32,7 @@ footer, header, hgroup, menu, nav, section { display: block; } body { - line-height: 1; + line-height: 1.5; margin-top:24px; } ol, ul { @@ -68,6 +70,47 @@ p { line-height: 1.4; } +/* Box Colors */ +.box1 { + background:#008080; +} + +.box2 { + background:#ffd700; +} + +.box3 { + background:#5f9ea0; +} + +.box4 { + background:#ff7f50; +} + +.box5 { + background:#dc143c; +} + +.box6 { + background:#228b22; +} + +.box7 { + background:#9932cc; +} + +.box8 { + background:#ff69b4; +} + +.box9 { + background:#4b0082; +} + +.box10 { + background:#1e90ff; +} + .container { width: 800px; margin: 0 auto; @@ -81,38 +124,39 @@ nav { display:flex; align-items:center; justify-content:space-evenly; - width:100%; + width:100%; + margin:0 24px; } .nav-item a { color:black; - text-decoration:none; + text-decoration:none; + display:inline-block; + height:100%; + width:100%; + padding:12px; } .nav-item a:hover { - color:white; - background-color:black; + color:white; } -@media(min-width:801px and max-width:1600px) { + .nav-item { align-items:center; - /* width:calc((100% - 157px) / 5); */ - padding:12px; -} + width:100%; + text-align:center; } -@media(min-width:501px and max-width:800px) { - .nav-item { - align-items:center; - padding:12px; - font-size:2rem; - } + +.nav-item:hover { + background-color:black; + color:white; } .header-image { margin:36px auto; } -@media(min-width:801px and max-width:1600px) { + .top-content { display: flex; flex-wrap: wrap; @@ -127,24 +171,6 @@ nav { padding: 0 1%; padding-bottom: 20px; } -} - -@media(min-width:501px and max-width:800px) { - .top-content { - display:flex; - flex-wrap:wrap; - justify-content:space-evenly; - flex-direction:column; - width:100%; - flex-grow:1; - margin-bottom:20px; - border-bottom:1px dashed black; - } - .text-container { - width:100%; - font-size:1.3rem; - } -} .middle-content { margin-bottom: 20px; @@ -165,7 +191,6 @@ nav { .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; margin: 20px 2.5%; color: white; display: flex; @@ -205,4 +230,257 @@ footer nav { footer nav a { color: white; text-decoration: none; +} + +@media(max-width:800px) { + .container { + width: 90%; + margin: 0 auto; + } + + header { + display:flex; + width:100%; + } + + nav { + display:flex; + align-items:center; + width:calc(100% - 157px); + height:40px; + margin-right:5vh; + } + + .nav-item a { + color:black; + text-decoration:none; + font-size:1.1rem; + } + + .nav-item a:hover { + color:white; + background-color:black; + } + + .nav-item { + align-items:center; + padding:12px; + width:20%; + } + + .logo { + width:157px; + height:40px; + } + .header-image { + margin:36px auto; + } + + .top-content { + display: flex; + flex-wrap: wrap; + flex-direction:column; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; + font-weight:600; + } + + .top-content .text-container { + width: 96%; + padding: 0 1%; + padding-bottom: 20px; + text-align:justify; + font-size:1.15rem; + } + + .text-container h2 { + font-size:2rem; + } + + .middle-content { + margin-bottom: 20px; + border-bottom: 1px dashed black; + } + + .middle-content h2 { + padding: 0 2%; + margin-bottom: 0; + } + + .middle-content .boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + + .middle-content .boxes .box { + width: 220px; + height: 220px; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + + .bottom-content { + width:100%; + display: flex; + flex-wrap:wrap; + margin: 0 2% 20px; + justify-content: space-around; + font-weight:600; + } + + .bottom-content .text-container { + padding-right: 4%; + width:50%; + } + + .bottom-content .text-container:last-child { + padding-right: 0; + width:50%; + margin:24px 25% 72px 25%; + } + + footer { + width: 100%; + height:160px; + background: black; + } + + footer nav { + width: 96%; + height:100%; + margin:2%; + display: flex; + flex-direction:row; + align-items:center; + justify-content: space-between; + align-items: center; + padding: 20px 0; + font-size: 1.75rem; + } + + footer nav a { + color: white; + text-decoration: none; + } + } +} + +@media(max-width:500px) { + .container { + width: 800px; + margin: 0 auto; + } + + header { + display:flex; + } + + nav { + display:flex; + align-items:center; + justify-content:space-evenly; + width:100%; + } + + .nav-item a { + color:black; + text-decoration:none; + } + + .nav-item a:hover { + color:white; + background-color:black; + } + + .nav-item { + align-items:center; + /* width:calc((100% - 157px) / 5); */ + padding:12px; + } + + .header-image { + margin:36px auto; + } + + + .top-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; + font-weight:600; + } + + .top-content .text-container { + width: 48%; + padding: 0 1%; + padding-bottom: 20px; + } + + .middle-content { + margin-bottom: 20px; + border-bottom: 1px dashed black; + } + + .middle-content h2 { + padding: 0 2%; + margin-bottom: 0; + } + + .middle-content .boxes { + display: flex; + flex-wrap: wrap; + 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; + } + + .bottom-content { + display: flex; + margin: 0 2% 20px; + justify-content: space-around; + font-weight:600; + } + + .bottom-content .text-container { + padding-right: 4%; + } + + .bottom-content .text-container:last-child { + padding-right: 0; + } + + footer { + width: 100%; + background: black; + } + + footer nav { + width: 60%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + } + + footer nav a { + color: white; + text-decoration: none; + } } \ No newline at end of file From 6e42083a2257b05d2e20e210726e1bd8f8dcd56c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 8 May 2020 19:37:42 -0400 Subject: [PATCH 06/11] Finalized assignment --- index.html | 4 +- style/index.css | 122 +++++++++++++++++++++++++++--------------------- 2 files changed, 71 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index f4955c62c5..cccf280fef 100644 --- a/index.html +++ b/index.html @@ -79,8 +79,8 @@

Moon