From 4cd02d30b5b540a826c39ee2af4bfa8bb1bafa9f Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:15:31 -0600 Subject: [PATCH 1/9] added some files --- css/index.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/index.css diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..e69de29 From c0fd6ba519b21a222d2e8fa35840e8927d2965e2 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:22:31 -0600 Subject: [PATCH 2/9] added index.html --- index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 From 530592b59a9667ffb89c7daa49ab976fed89fc3b Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:25:21 -0600 Subject: [PATCH 3/9] added nav and some html --- css/index.css | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 20 ++++++++ 2 files changed, 152 insertions(+) diff --git a/css/index.css b/css/index.css index e69de29..e534a13 100644 --- a/css/index.css +++ b/css/index.css @@ -0,0 +1,132 @@ +/* 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; +} + +/* My Code Starts Here */ + diff --git a/index.html b/index.html index e69de29..ff2c740 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,20 @@ + + + + Melissa Overview + + +
+ +
+
+

Inline Block

+

My first paragraph.

+
+ + From c0de0ca85829967ea43ee26afb7a8bb1cdb1feeb Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:35:44 -0600 Subject: [PATCH 4/9] linked index to css and added style --- css/index.css | 18 ++++++++++++++++++ index.html | 17 +++++++++-------- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/css/index.css b/css/index.css index e534a13..0851783 100644 --- a/css/index.css +++ b/css/index.css @@ -130,3 +130,21 @@ table { /* My Code Starts Here */ +*{ + margin: 30px 0; +} + +header nav{ + display: flex; + justify-content: space-around; +} + +header nav a{ + color:teal; + text-decoration: none; +} + +.inline-block{ + text-align: center +} + diff --git a/index.html b/index.html index ff2c740..e9d0c46 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,18 @@ + Melissa Overview -
- -
+
+ +

Inline Block

My first paragraph.

From dda79378d3423a754e72b358e62d3ba1dd8f0670 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 16:47:25 -0600 Subject: [PATCH 5/9] inline-block section completed --- css/index.css | 174 +++++++++++++++----------------------------------- index.html | 37 ++++++----- 2 files changed, 74 insertions(+), 137 deletions(-) diff --git a/css/index.css b/css/index.css index 0851783..e71a0f8 100644 --- a/css/index.css +++ b/css/index.css @@ -3,148 +3,78 @@ 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; } -/* My Code Starts Here */ - +/* Code Starts here */ *{ - margin: 30px 0; + margin:30px 0; + box-sizing: border-box; } header nav{ display: flex; - justify-content: space-around; + justify-content:space-around; } header nav a{ - color:teal; - text-decoration: none; + color:gray; + text-decoration:none; } -.inline-block{ - text-align: center +section.inline-block{ + text-align:center; + padding:30px; + +} + +section.inline-block .block{ + padding:30px; + width: 30%; + margin: 10px; + border: 2px solid black; + display: inline-block; + } diff --git a/index.html b/index.html index e9d0c46..4da6816 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,28 @@ + + Romans Overview + + - - - Melissa Overview - - +
- +
+
-

Inline Block

-

My first paragraph.

+

Inline Block

+
Block 1
+
block 2
+
block 3
- - + +
+

Flex-box

+
+ + + \ No newline at end of file From c76ac3fffc2a919592019d56ced5ec9fcd0110b7 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 17:07:39 -0600 Subject: [PATCH 6/9] Styles added --- css/index.css | 32 +++++++++++++++++++++++++++----- index.html | 15 +++++++++++++++ 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/css/index.css b/css/index.css index e71a0f8..6c3e27f 100644 --- a/css/index.css +++ b/css/index.css @@ -66,15 +66,37 @@ header nav a{ section.inline-block{ text-align:center; padding:30px; - } section.inline-block .block{ padding:30px; - width: 30%; - margin: 10px; - border: 2px solid black; - display: inline-block; + width:30%; + margin:10px; + border:2px solid #ddd; + display:inline-block; +} + +section.flex-box{ + text-align:center; + padding:30px; +} +section.flex-box .flex-child{ + display:flex; + flex-wrap: wrap; + width: 700px; + margin: auto; } +section.flex-box .block{ + + margin:30px; + width:100px; + height:100px; + border:2px solid #ddd; +} + +section.flex-box .one{ + + background-color: teal; +} \ No newline at end of file diff --git a/index.html b/index.html index 4da6816..1be1b75 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,21 @@

Inline Block

Flex-box

+
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
+
From 24a069e1b1ec0d67b225aaa668d6ff2fc880f9a7 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 17:11:02 -0600 Subject: [PATCH 7/9] updated readme --- readme.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/readme.md b/readme.md index 8b13789..8f1fad8 100644 --- a/readme.md +++ b/readme.md @@ -1 +1,6 @@ +## To Do +*[] add color to all boxes +*[] Add a Margin to the header of 30 px 0 + +*[] Change the background of the body From 28b308a23bb78b1194ac3a42a1f93b28ff63212a Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 18:09:39 -0600 Subject: [PATCH 8/9] colored boxes --- css/index.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/css/index.css b/css/index.css index 6c3e27f..9edc5dc 100644 --- a/css/index.css +++ b/css/index.css @@ -99,4 +99,59 @@ section.flex-box .block{ section.flex-box .one{ background-color: teal; +} + +section.flex-box .two{ + + background-color: aquamarine; +} + +section.flex-box .three{ + + background-color: bisque; +} + +section.flex-box .four{ + + background-color: burlywood; +} + +section.flex-box .five{ + + background-color: cornflowerblue; +} + +section.flex-box .six{ + + background-color: darkkhaki; +} + +section.flex-box .seven{ + + background-color: pink; +} + +section.flex-box .eight{ + + background-color: firebrick; +} + +section.flex-box .nine{ + + background-color: darkorchid; +} + +section.flex-box .ten{ + + background-color: gainsboro; +} + +section.flex-box .eleven{ + + background-color: lavenderblush; +} + +section.flex-box .twelve{ + + background-color: lightsalmon; } \ No newline at end of file From 9753d3441050bbad54be71c6e97382d786859bb1 Mon Sep 17 00:00:00 2001 From: Melissa Kemp Date: Sat, 13 Jul 2019 18:17:27 -0600 Subject: [PATCH 9/9] final edit --- css/index.css | 281 ++++++++++++++++++++++++++++++++------------------ index.html | 60 ++++++----- 2 files changed, 212 insertions(+), 129 deletions(-) diff --git a/css/index.css b/css/index.css index 9edc5dc..62765cf 100644 --- a/css/index.css +++ b/css/index.css @@ -3,155 +3,240 @@ 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; } /* Code Starts here */ -*{ - margin:30px 0; - box-sizing: border-box; +* { + margin: 30px 0; + box-sizing: border-box; } -header nav{ - display: flex; - justify-content:space-around; +body { + background-color: lightsteelblue; } -header nav a{ - color:gray; - text-decoration:none; +header nav { + display: flex; + justify-content: space-around; + margin: 30px 0; } -section.inline-block{ - text-align:center; - padding:30px; +header nav a { + color: linen; + text-decoration: none; } -section.inline-block .block{ - padding:30px; - width:30%; - margin:10px; - border:2px solid #ddd; - display:inline-block; +section.inline-block { + text-align: center; + padding: 30px; } -section.flex-box{ - text-align:center; - padding:30px; +section.inline-block .block { + padding: 30px; + width: 30%; + margin: 10px; + border: 2px solid #ddd; + display: inline-block; } -section.flex-box .flex-child{ - display:flex; - flex-wrap: wrap; - width: 700px; - margin: auto; +section.inline-block .ibox1 { + background-color: maroon; } -section.flex-box .block{ - - margin:30px; - width:100px; - height:100px; - border:2px solid #ddd; +section.inline-block .ibox2 { + background-color: mediumpurple; } -section.flex-box .one{ - - background-color: teal; +section.inline-block .ibox3 { + background-color: mediumseagreen; } -section.flex-box .two{ - - background-color: aquamarine; +section.flex-box { + text-align: center; + padding: 30px; } -section.flex-box .three{ - - background-color: bisque; +section.flex-box .flex-child { + display: flex; + flex-wrap: wrap; + width: 700px; + margin: auto; } -section.flex-box .four{ - - background-color: burlywood; +section.flex-box .block { + margin: 30px; + width: 100px; + height: 100px; + border: 2px solid #ddd; } -section.flex-box .five{ - - background-color: cornflowerblue; +section.flex-box .one { + background-color: teal; } -section.flex-box .six{ - - background-color: darkkhaki; +section.flex-box .two { + background-color: aquamarine; } -section.flex-box .seven{ - - background-color: pink; +section.flex-box .three { + background-color: bisque; } -section.flex-box .eight{ - - background-color: firebrick; +section.flex-box .four { + background-color: burlywood; } -section.flex-box .nine{ +section.flex-box .five { + background-color: cornflowerblue; +} - background-color: darkorchid; +section.flex-box .six { + background-color: darkkhaki; } -section.flex-box .ten{ +section.flex-box .seven { + background-color: pink; +} - background-color: gainsboro; +section.flex-box .eight { + background-color: firebrick; } -section.flex-box .eleven{ +section.flex-box .nine { + background-color: darkorchid; +} - background-color: lavenderblush; +section.flex-box .ten { + background-color: gainsboro; } -section.flex-box .twelve{ +section.flex-box .eleven { + background-color: lavenderblush; +} - background-color: lightsalmon; -} \ No newline at end of file +section.flex-box .twelve { + background-color: lightsalmon; +} diff --git a/index.html b/index.html index 1be1b75..ca461e6 100644 --- a/index.html +++ b/index.html @@ -1,43 +1,41 @@ - Romans Overview - + Romans Overview + - +
- +
-

Inline Block

-
Block 1
-
block 2
-
block 3
+

Inline Block

+
Block 1
+
block 2
+
block 3
-

Flex-box

-
-
Block 1
-
block 2
-
block 3
-
Block 1
-
block 2
-
block 3
-
Block 1
-
block 2
-
block 3
-
Block 1
-
block 2
-
block 3
-
- +

Flex-box

+
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
Block 1
+
block 2
+
block 3
+
- - - \ No newline at end of file + +