From 5e6ac0410cac3336dbd6fee9b7bf2a4771880ee5 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 8 May 2020 11:41:57 -0400 Subject: [PATCH 1/7] header navs added --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index d32d8ad25c..ac556f29d5 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,18 @@ + +
+
+ Home + About + Products + Blog + Contacts +
+
From 900eb27e3f797e980c9f5b908641c50c82f9063f Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 8 May 2020 11:53:43 -0400 Subject: [PATCH 2/7] nav_button & images in header --- index.html | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index ac556f29d5..148088e3b3 100644 --- a/index.html +++ b/index.html @@ -12,13 +12,18 @@
-
- Home - About - Products - Blog - Contacts +
+ +
+ Home + About + Products + Blog + Contacts +
+ +
From caea12d532fbd496cb9b5bb1cac5b62eeaa1325b Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 8 May 2020 12:37:47 -0400 Subject: [PATCH 3/7] box colors added --- About.html | 14 ++++++++++++++ index.html | 23 ++++++++++++----------- style/index.css | 41 +++++++++++++++++++++++++++++++++++++++-- 3 files changed, 65 insertions(+), 13 deletions(-) create mode 100644 About.html diff --git a/About.html b/About.html new file mode 100644 index 0000000000..81ca5a7533 --- /dev/null +++ b/About.html @@ -0,0 +1,14 @@ + + + + +About + + + + +

About

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi perferendis laudantium sequi odio! Deserunt aspernatur fuga natus saepe eveniet unde illo, nemo molestias voluptate eum maxime similique? Iure, quo in!.

+ + + \ No newline at end of file diff --git a/index.html b/index.html index 148088e3b3..ec97a6774c 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -16,7 +17,7 @@
Home - About + About Products Blog Contacts @@ -45,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 ae29d6ceee..921a86e79a 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; } @@ -112,6 +112,43 @@ p { justify-content: center; } +.box1{ + background-color: teal; +} + +.box2{ + background-color: gold; +} +.box3{ + background-color: cadetblue; +} + +.box4{ + background: coral; +} + +.box5{ + background-color: crimson; +} +.box6{ + background-color: forestgreen; +} +.box7{ + background-color: darkorchid; +} + +.box8{ + background-color: hotpink; +} + +.box9{ + background-color: indigo; +} + +.box10{ + background-color: dodgerblue; +} + .bottom-content { display: flex; margin: 0 2% 20px; @@ -143,4 +180,4 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} From 4d636833c9510f58136102a34d76c3548cdb5d78 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 8 May 2020 12:45:17 -0400 Subject: [PATCH 4/7] media start --- README.md | 3 ++- style/index.css | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 853c24450e..b7446cf866 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ Your finished project must include all of the following requirements: * [ ] 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 tablet(800 px) 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` @@ -82,6 +82,7 @@ You will also notice there are 10 boxes on the home page that need background co * [ ] box8: `hotpink` * [ ] box9: `indigo` * [ ] 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 921a86e79a..cc9affe04e 100644 --- a/style/index.css +++ b/style/index.css @@ -181,3 +181,13 @@ footer nav a { color: white; text-decoration: none; } + +@media(max-width: 800px){ + +} + +@media(max-width:500px){ + +} + + From 1d3812118738b09a784d6f8e1549ea2ed7dde305 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 8 May 2020 13:48:41 -0400 Subject: [PATCH 5/7] final --- style/index.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/style/index.css b/style/index.css index cc9affe04e..53b4526d1f 100644 --- a/style/index.css +++ b/style/index.css @@ -21,13 +21,18 @@ time, mark, audio, video { border: 0; font-size: 62.5%; font: inherit; - vertical-align: baseline; + vertical-align: baseline; + box-sizing: border-box; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } + +*{ + font-weight: bold; +} body { line-height: 1; } @@ -71,6 +76,16 @@ p { margin: 0 auto; } +.logo_buttons{ + display: flex; + flex: center; + align-items: center; +} + +.navs{ + text-decoration: none; +} + .top-content { display: flex; flex-wrap: wrap; @@ -101,7 +116,7 @@ p { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes { width: 12.5%; height: 100px; background: black; @@ -110,43 +125,66 @@ p { display: flex; align-items: center; justify-content: center; + } .box1{ background-color: teal; + content: 1rem; + padding: 2rem; + + } .box2{ background-color: gold; + content: 1rem; + padding: 2rem; } .box3{ background-color: cadetblue; + content: 1rem; + padding: 2rem; } .box4{ background: coral; + content: 1rem; + padding: 2rem; } .box5{ background-color: crimson; + content: 1rem; + padding: 2rem; } .box6{ background-color: forestgreen; + content: 1rem; + padding: 2rem; } .box7{ background-color: darkorchid; + content: 1rem; + padding: 2rem; } .box8{ background-color: hotpink; + content: 1rem; + padding: 2rem; } .box9{ background-color: indigo; + content: 1rem; + padding: 2rem; } .box10{ background-color: dodgerblue; + content: 1rem; + padding: 2rem; } .bottom-content { @@ -163,6 +201,17 @@ p { padding-right: 0; } +.boxes .box1 .box2 .box3 .box4 .box5 .box6 .box7 .box8 .box9 .box10{ + + height: 5rem; + width: 5rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + +} + footer { width: 100%; background: black; From 4786a5683ad5adc75c85f11c0dfa360f5d4f239d Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 9 May 2020 23:44:19 -0400 Subject: [PATCH 6/7] Desktop_Complete --- about.html | 21 ++++++++ index.html | 37 ++++++++++---- style/index.css | 131 +++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 178 insertions(+), 11 deletions(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000000..9ab9dc1bda --- /dev/null +++ b/about.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + +

welcome to the about page

+ + + +
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..22902f67d5 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,28 @@ + +
+
+ + Home + About + Products + Blog + Contact +
+ +
+ +
+ + +
@@ -30,16 +47,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 ae29d6ceee..7fc33e78ca 100644 --- a/style/index.css +++ b/style/index.css @@ -85,6 +85,25 @@ p { padding-bottom: 20px; } +.logo_links{ + max-width: 95%; + margin-top: 20px; + display: flex; + justify-content: center; + justify-content: space-between; + align-items: flex-end; +} + +.nav_links{ + text-decoration: none; + color: black; + font-family: 'Rubik', sans-serif; +} + +.large_image{ + margin: 40px 0px 20px 0px; +} + .middle-content { margin-bottom: 20px; border-bottom: 1px dashed black; @@ -101,7 +120,7 @@ p { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box{ width: 12.5%; height: 100px; background: black; @@ -112,6 +131,116 @@ p { justify-content: center; } +.box1{ + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box2{ + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box3{ + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box4{ + width: 12.5%; + height: 100px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box5{ + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box6{ + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box7{ + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box8{ + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box9{ + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.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; From 96001a097b586c231f890385d471d912003b2ff1 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 10 May 2020 19:29:20 -0400 Subject: [PATCH 7/7] Desktop --- index.html | 21 +----- style/index.bak.css | 160 +++++++++++++++++++++++++++++++++++++++ style/index.css | 179 ++++++-------------------------------------- 3 files changed, 185 insertions(+), 175 deletions(-) create mode 100644 style/index.bak.css diff --git a/index.html b/index.html index 7062c85f2f..b2c8e12941 100644 --- a/index.html +++ b/index.html @@ -12,21 +12,6 @@ -
-
- -
- Home - About - Products - Blog - Contacts -
-
- - -
-
@@ -41,11 +26,7 @@
- - - - -
+

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.

diff --git a/style/index.bak.css b/style/index.bak.css new file mode 100644 index 0000000000..edb7f865f0 --- /dev/null +++ b/style/index.bak.css @@ -0,0 +1,160 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Roboto', sans-serif; +} + +h1, h2, h3, h4, h5 { + font-size: 18px; + margin-bottom: 15px; + font-family: 'Rubik', sans-serif; +} + +p { + line-height: 1.4; +} + +.container { + width: 800px; + margin: 0 auto; +} + +.top-content { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-bottom: 20px; + border-bottom: 1px dashed black; +} + +.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 .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { + width: 12.5%; + height: 100px; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.box1 +{ + background: red; +} + +.box2 +{ + background: green; +} + +.box3 +{ + background: yellow; +} + +.bottom-content { + display: flex; + margin: 0 2% 20px; + justify-content: space-around; +} + +.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 diff --git a/style/index.css b/style/index.css index 2501c2be26..4f0d34b413 100644 --- a/style/index.css +++ b/style/index.css @@ -135,188 +135,66 @@ p { justify-content: space-evenly; } - -.middle-content .boxes { +.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 { 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; - content: 1rem; - padding: 2rem; - - -} - -.box2{ - background-color: gold; - content: 1rem; - padding: 2rem; -} -.box3{ - background-color: cadetblue; - content: 1rem; - padding: 2rem; } -.box4{ - background: coral; - content: 1rem; - padding: 2rem; -} - -.box5{ - background-color: crimson; - content: 1rem; - padding: 2rem; -} -.box6{ - background-color: forestgreen; - content: 1rem; - padding: 2rem; -} -.box7{ - background-color: darkorchid; - content: 1rem; - padding: 2rem; -} - -.box8{ - background-color: hotpink; - content: 1rem; - padding: 2rem; -} - -.box9{ - background-color: indigo; - content: 1rem; - padding: 2rem; -} - -.box10{ - background-color: dodgerblue; - content: 1rem; - padding: 2rem; -} - -.box1{ - width: 12.5%; - height: 100px; +.box1 +{ background: teal; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box2{ - width: 12.5%; - height: 100px; +.box2 +{ background: gold; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box3{ - width: 12.5%; - height: 100px; +.box3 +{ background: cadetblue; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box4{ - width: 12.5%; - height: 100px; +.box4 +{ background: coral; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box5{ - width: 12.5%; - height: 100px; +.box5 +{ background: crimson; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } - -.box6{ - width: 12.5%; - height: 100px; +.box6 +{ background: forestgreen; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } - -.box7{ - width: 12.5%; - height: 100px; +.box7 +{ background: darkorchid; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box8{ - width: 12.5%; - height: 100px; - background: hotpink; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; +.box8 +{ + background: hotpink } -.box9{ - width: 12.5%; - height: 100px; +.box9 +{ background: indigo; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } -.box10{ - width: 12.5%; - height: 100px; +.box10 +{ background: dodgerblue; - margin: 20px 2.5%; - color: white; - display: flex; - align-items: center; - justify-content: center; } + + .bottom-content { display: flex; margin: 0 2% 20px; @@ -331,16 +209,7 @@ p { padding-right: 0; } -.boxes .box1 .box2 .box3 .box4 .box5 .box6 .box7 .box8 .box9 .box10{ - - height: 5rem; - width: 5rem; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; -} footer { width: 100%;