From ad39d92350530b85a43cc0050b421d2ca50d482e Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Fri, 15 May 2020 22:07:48 -0400 Subject: [PATCH 1/9] I modified the index.css , index.html , README.md , and added the about.html file. --- README.md | 5 ++ about.html | 0 index.html | 41 +++++++----- style/index.css | 168 +++++++++++++++++++++++++++++++++++++----------- 4 files changed, 162 insertions(+), 52 deletions(-) create mode 100644 about.html diff --git a/README.md b/README.md index dc5314a3a1..5e3298349f 100644 --- a/README.md +++ b/README.md @@ -35,14 +35,19 @@ 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? + Semantic HTML adds meaning to your code. 2. What are the 4 areas of the box model? + Margin, Border, Padding, and Content. 3. While using flexbox, what axis does the following property work on: ```align-items: center```? + It aligns on the vertical axis. 4. Explain why git is valuable to a team of developers. + Git allows teams of developers to be able to see each version of your code and reference previous versions of the code. 5. Define mobile-first design in your own words. + When you make a prototype of a website you start with a wireframe of the smallest screen. 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. 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..e65b2d8d7a 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,43 @@ - - - Sprint Challenge - Home + + - - + Sprint Challenge - Home + + +
- +

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.

+

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.

+

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
@@ -41,7 +50,7 @@

Why Did It Have To Be Boxes...

Box 9
Box 10
- +
@@ -60,7 +69,7 @@

Moon

- + - + + - + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index ae29d6ceee..c76c86f82a 100644 --- a/style/index.css +++ b/style/index.css @@ -3,60 +3,154 @@ 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; +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; + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } + body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; + +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; + +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; } + table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } * { box-sizing: border-box; } -html, body { +html, +body { height: 100%; font-family: 'Roboto', sans-serif; } -h1, h2, h3, h4, h5 { +h1, +h2, +h3, +h4, +h5 { font-size: 18px; margin-bottom: 15px; font-family: 'Rubik', sans-serif; @@ -82,7 +176,7 @@ p { .top-content .text-container { width: 48%; padding: 0 1%; - padding-bottom: 20px; + padding-bottom: 20px; } .middle-content { @@ -104,7 +198,7 @@ p { .middle-content .boxes .box { width: 12.5%; height: 100px; - background: black; + background: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; margin: 20px 2.5%; color: white; display: flex; From dfb393c046158095392d6dcb861be0a7acdcef61 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Fri, 15 May 2020 22:49:18 -0400 Subject: [PATCH 2/9] I modified about and index.html. --- about.html | 27 +++++++++++++++++++++++++++ index.html | 54 ++++++++++++++++++++++++++++-------------------------- 2 files changed, 55 insertions(+), 26 deletions(-) diff --git a/about.html b/about.html index e69de29bb2..b6ad17e729 100644 --- a/about.html +++ b/about.html @@ -0,0 +1,27 @@ + + + + + + + + Sprint Challenge - Home + + + +
+ About +
+ + +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis + aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, + consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit + in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ \ No newline at end of file diff --git a/index.html b/index.html index e65b2d8d7a..eab60ccdcc 100644 --- a/index.html +++ b/index.html @@ -9,61 +9,63 @@ + + -
+
-
-
+
+

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

@@ -72,11 +74,11 @@

Moon

From 5995c543211503b13a30044b4073ed21b08b8a40 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Fri, 15 May 2020 23:30:56 -0400 Subject: [PATCH 3/9] I modified index.html and index.css --- index.html | 14 +- style/index.css | 887 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 657 insertions(+), 244 deletions(-) diff --git a/index.html b/index.html index eab60ccdcc..7bf1450d2a 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,6 @@ - @@ -24,6 +17,13 @@
+

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 diff --git a/style/index.css b/style/index.css index c76c86f82a..e05bbfd1be 100644 --- a/style/index.css +++ b/style/index.css @@ -1,240 +1,653 @@ -/* http://meyerweb.com/eric/tools/css/reset/ + /* 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 .box { - width: 12.5%; - height: 100px; - background: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; - 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; -} - -.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 + + 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 nav { + width: 60%; + text-decoration: none; + } + + .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; + } + + .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-evenly; + } + + footer nav a { + color: white; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + text-decoration: none; + } + /* my code */ + + 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 nav { + width: 60%; + text-decoration: none; + } + + .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: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; + 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; + } + + .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-evenly; + } + + footer nav a { + color: white; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + text-decoration: none; + } + + @media ( max-width: 800px) { + 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 nav { + width: 60%; + text-decoration: none; + } + .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: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex-column wrap; + align-items: center; + justify-content: center; + } + .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; + justif + } + footer nav a { + color: black; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + text-decoration: none; + } + } + + @media ( max-width: 500 px) { + 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 nav { + width: 60%; + text-decoration: none; + } + .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: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; + } + .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: center; + } + footer nav a { + color: white; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + text-decoration: none; + } + } \ No newline at end of file From f905076aed07d6ecd76f95ac7ec63c7aadff24c5 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Fri, 15 May 2020 23:33:04 -0400 Subject: [PATCH 4/9] I modified index.css --- style/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/index.css b/style/index.css index e05bbfd1be..74c8d2f989 100644 --- a/style/index.css +++ b/style/index.css @@ -511,7 +511,7 @@ footer nav { width: 60%; display: flex; - justif + justify-content: center column; } footer nav a { color: black; From 0164b63720d9f028d0f8320e6df5ce9456306059 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Fri, 15 May 2020 23:45:42 -0400 Subject: [PATCH 5/9] I modified index.css --- style/index.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/style/index.css b/style/index.css index 74c8d2f989..8b5fc059c2 100644 --- a/style/index.css +++ b/style/index.css @@ -322,9 +322,14 @@ border-bottom: 1px dashed black; } + img { + display: flex column; + } + .top-content nav { width: 60%; text-decoration: none; + color: black; } .top-content .text-container { @@ -461,9 +466,13 @@ margin-bottom: 20px; border-bottom: 1px dashed black; } + img { + display: flex column; + } .top-content nav { width: 60%; text-decoration: none; + color: black; } .top-content .text-container { width: 48%; @@ -590,9 +599,13 @@ margin-bottom: 20px; border-bottom: 1px dashed black; } + img { + display: flex column; + } .top-content nav { width: 60%; text-decoration: none; + color: black; } .top-content .text-container { width: 48%; From 9327de0955418cb661a2468ab02f7f31a16cc5b9 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Sat, 16 May 2020 00:02:18 -0400 Subject: [PATCH 6/9] I modified index.html and index.css . --- index.html | 20 +-- style/index.css | 380 +++++++++++++++++++++--------------------------- 2 files changed, 175 insertions(+), 225 deletions(-) diff --git a/index.html b/index.html index 7bf1450d2a..ce560c9856 100644 --- a/index.html +++ b/index.html @@ -41,16 +41,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 8b5fc059c2..ce361e6aae 100644 --- a/style/index.css +++ b/style/index.css @@ -400,267 +400,217 @@ } @media ( max-width: 800px) { - 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 { + .middle-content .boxes { display: flex; flex-wrap: wrap; justify-content: space-evenly; - margin-bottom: 20px; - border-bottom: 1px dashed black; - } - img { - display: flex column; - } - .top-content nav { - width: 60%; - text-decoration: none; - color: 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 .boxes .box1 { + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content h2 { - padding: 0 2%; - margin-bottom: 0; + .middle-content .boxes .box2 { + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + .middle-content .boxes .box3 { + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content .boxes .box { + .middle-content .boxes .box4 { width: 12.5%; height: 100px; - background: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; + background: coral; margin: 20px 2.5%; color: white; - display: flex-column wrap; + display: flex-column; align-items: center; justify-content: center; } - .bottom-content { - display: flex; - margin: 0 2% 20px; - justify-content: space-around; + .middle-content .boxes .box5 { + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .bottom-content .text-container { - padding-right: 4%; + .middle-content .boxes .box6 { + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .bottom-content .text-container:last-child { - padding-right: 0; + .middle-content .boxes .box7 { + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - footer { - width: 100%; - background: black; + .middle-content .boxes .box8 { + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - footer nav { - width: 60%; - display: flex; - justify-content: center column; + .middle-content .boxes .box9 { + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - footer nav a { - color: black; - justify-content: space-between; + .middle-content .boxes .box10 { + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex-column; align-items: center; - padding: 20px 2%; - font-size: 14px; - text-decoration: none; + justify-content: center; } } @media ( max-width: 500 px) { - 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 { + .middle-content .boxes { display: flex; flex-wrap: wrap; justify-content: space-evenly; - margin-bottom: 20px; - border-bottom: 1px dashed black; - } - img { - display: flex column; - } - .top-content nav { - width: 60%; - text-decoration: none; - color: 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 .boxes .box1 { + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content h2 { - padding: 0 2%; - margin-bottom: 0; + .middle-content .boxes .box2 { + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; + .middle-content .boxes .box3 { + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .middle-content .boxes .box { + .middle-content .boxes .box4 { width: 12.5%; height: 100px; - background: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; + background: coral; margin: 20px 2.5%; color: white; display: flex-column; align-items: center; justify-content: center; } - .bottom-content { - display: flex; - margin: 0 2% 20px; - justify-content: space-around; + .middle-content .boxes .box5 { + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .bottom-content .text-container { - padding-right: 4%; + .middle-content .boxes .box6 { + width: 12.5%; + height: 100px; + background: forestgreen; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - .bottom-content .text-container:last-child { - padding-right: 0; + .middle-content .boxes .box7 { + width: 12.5%; + height: 100px; + background: darkorchid; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - footer { - width: 100%; - background: black; + .middle-content .boxes .box8 { + width: 12.5%; + height: 100px; + background: hotpink; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; + justify-content: center; } - footer nav { - width: 60%; - display: flex; + .middle-content .boxes .box9 { + width: 12.5%; + height: 100px; + background: indigo; + margin: 20px 2.5%; + color: white; + display: flex-column; + align-items: center; justify-content: center; } - footer nav a { + .middle-content .boxes .box10 { + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; color: white; - justify-content: space-between; + display: flex-column; align-items: center; - padding: 20px 2%; - font-size: 14px; - text-decoration: none; + justify-content: center; } } \ No newline at end of file From 90f3faba2a6ae320aa977200d28fe6aea0f5c055 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Tue, 19 May 2020 21:01:52 -0400 Subject: [PATCH 7/9] I modified index.html and index.css --- index.html | 35 +- style/index.css | 1001 ++++++++++++++++++----------------------------- 2 files changed, 406 insertions(+), 630 deletions(-) diff --git a/index.html b/index.html index ce560c9856..002384380b 100644 --- a/index.html +++ b/index.html @@ -9,21 +9,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 @@ -41,16 +42,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 ce361e6aae..6bc71e4cb9 100644 --- a/style/index.css +++ b/style/index.css @@ -1,616 +1,391 @@ - /* http://meyerweb.com/eric/tools/css/reset/ +/* 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 nav { - width: 60%; - text-decoration: none; - } - - .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; - } - - .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-evenly; - } - - footer nav a { - color: white; - justify-content: space-between; - align-items: center; - padding: 20px 2%; - font-size: 14px; - text-decoration: none; - } - /* my code */ - - 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; - } - - img { - display: flex column; - } - - .top-content nav { - width: 60%; - text-decoration: none; - color: 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 .box { - width: 12.5%; - height: 100px; - background: teal, gold, cadetblue, coral, crimson, forestgreen, darkorchid, hotpink, indigo, dodgerblue; - 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; - } - - .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-evenly; - } - - footer nav a { - color: white; - justify-content: space-between; - align-items: center; - padding: 20px 2%; - font-size: 14px; - text-decoration: none; - } - - @media ( max-width: 800px) { - .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - } - .middle-content .boxes .box1 { - width: 12.5%; - height: 100px; - background: teal; - margin: 20px 2.5%; - color: white; - display: flex-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - align-items: center; - justify-content: center; - } - } - - @media ( max-width: 500 px) { - .middle-content .boxes { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - } - .middle-content .boxes .box1 { - width: 12.5%; - height: 100px; - background: teal; - margin: 20px 2.5%; - color: white; - display: flex-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - 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-column; - align-items: center; - justify-content: center; - } - } \ No newline at end of file + +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 nav { + width: 60%; + text-decoration: none; +} + +.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; +} + +.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-evenly; +} + +footer nav a { + color: white; + justify-content: space-between; + align-items: center; + padding: 20px 2%; + font-size: 14px; + text-decoration: none; +} + + +/* my code */ + +html { + font-size: 62.5%; +} + +.Image1 { + height: auto; +} + +.top-content { + color: black; + direction: flex row; +} + +.Image2 { + height: auto; +} + +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +.middle-content .boxes .box { + width: 12.5%; + height: 100px; + background: crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +.middle-content .boxes .box { + 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 { + 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 { + 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 { + 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 { + width: 12.5%; + height: 100px; + background: dodgerblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center +} + +footer { + background-color: black; + color: white; +} + +@media(max-width:500px) { + .top-content { + color: black; + direction: flex row; + } + .middle-content { + direction: flex column; + } +} \ No newline at end of file From 798dc9e013815454103bb4d1721bbcd16e446603 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Sun, 24 May 2020 20:15:11 -0400 Subject: [PATCH 8/9] I modified index.html and index.css. --- index.html | 25 +++++++++++++------------ style/index.css | 47 ++++++++++++++++++++++++++++++++++------------- 2 files changed, 47 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 002384380b..f762f776c6 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,13 @@ - +
-
diff --git a/style/index.css b/style/index.css index 6bc71e4cb9..237138da6c 100644 --- a/style/index.css +++ b/style/index.css @@ -168,14 +168,22 @@ p { .top-content { display: flex; flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-between; + margin: 0; margin-bottom: 20px; border-bottom: 1px dashed black; + padding: 0; + width: 800px; } .top-content nav { - width: 60%; text-decoration: none; + width: 800px; + margin: 0; + padding: 0; + display: flex; + justify-content: space-between; + text-align: center; } .top-content .text-container { @@ -258,14 +266,25 @@ html { .top-content { color: black; - direction: flex row; + display: flex; +} + +.Nav-Top a { + color: gray; + text-decoration: none; +} + +.Nav-Top { + display: flex; + justify-content: space-evenly; + font-size: medium; } .Image2 { height: auto; } -.middle-content .boxes .box { +.middle-content .boxes .box1 { width: 12.5%; height: 100px; background: teal; @@ -276,7 +295,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box2 { width: 12.5%; height: 100px; background: gold; @@ -287,7 +306,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box3 { width: 12.5%; height: 100px; background: cadetblue; @@ -298,7 +317,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box4 { width: 12.5%; height: 100px; background: coral; @@ -309,7 +328,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box5 { width: 12.5%; height: 100px; background: crimson; @@ -320,7 +339,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box6 { width: 12.5%; height: 100px; background: forestgreen; @@ -331,7 +350,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box7 { width: 12.5%; height: 100px; background: darkorchid; @@ -342,7 +361,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box8 { width: 12.5%; height: 100px; background: hotpink; @@ -353,7 +372,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box9 { width: 12.5%; height: 100px; background: indigo; @@ -364,7 +383,7 @@ html { justify-content: center } -.middle-content .boxes .box { +.middle-content .boxes .box10 { width: 12.5%; height: 100px; background: dodgerblue; @@ -383,9 +402,11 @@ footer { @media(max-width:500px) { .top-content { color: black; + display: flex; direction: flex row; } .middle-content { + display: flex; direction: flex column; } } \ No newline at end of file From 9b177dc59a72a51eae35ac18524ccdb428b3cec2 Mon Sep 17 00:00:00 2001 From: Ashley Parvin Date: Sun, 24 May 2020 21:20:19 -0400 Subject: [PATCH 9/9] I modified index.html and index.css. --- index.html | 11 +++++----- style/index.css | 56 ++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 57 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index f762f776c6..47190e8df0 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Sprint Challenge - Home @@ -31,7 +32,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.

-
+

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.

@@ -59,15 +60,15 @@

Why Did It Have To Be Boxes...

-
+

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.

@@ -75,7 +76,7 @@

Moon