From 1bd83a142426e16e63130bf719aaf2623f149ed5 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 13:23:40 -0400 Subject: [PATCH 01/25] finish display-01 --- my-styles.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/my-styles.css b/my-styles.css index f7d02e4..ec6cc61 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,8 @@ /* Your Stylesheet */ - +#display-01 div{ + display: inline; + margin-left: 20px; + margin-right: 20px; + border: thin solid blue; +} /* All your edits should go here */ - From 1896d0b28f1687a7bce58d8f5d77c9e88a0af7eb Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 13:27:37 -0400 Subject: [PATCH 02/25] finish display-02 --- my-styles.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/my-styles.css b/my-styles.css index ec6cc61..73a03b6 100644 --- a/my-styles.css +++ b/my-styles.css @@ -5,4 +5,9 @@ margin-right: 20px; border: thin solid blue; } +#display-02 span{ + display: block; + border: thin solid red; + width: 100%; +} /* All your edits should go here */ From 5fed69d04eed4bde9bfbcc72c4b5bccf2074b241 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 13:42:17 -0400 Subject: [PATCH 03/25] finish display-03 --- my-styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/my-styles.css b/my-styles.css index 73a03b6..fa84867 100644 --- a/my-styles.css +++ b/my-styles.css @@ -10,4 +10,10 @@ border: thin solid red; width: 100%; } +#display-03 div{ + float:left; + border: thin solid green; + width: 100px; + height: 100px; +} /* All your edits should go here */ From 4b0f8db764775709f47aef8bd02faf621e1d4815 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 13:45:49 -0400 Subject: [PATCH 04/25] finish display-04 --- my-styles.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/my-styles.css b/my-styles.css index fa84867..67fe1d1 100644 --- a/my-styles.css +++ b/my-styles.css @@ -16,4 +16,7 @@ width: 100px; height: 100px; } +#display-04 div:nth-of-type(1){ + display:none; +} /* All your edits should go here */ From f36ad1a64069182fea60a18c8cd060df33c0923a Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:00:33 -0400 Subject: [PATCH 05/25] finished display-05 --- my-styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/my-styles.css b/my-styles.css index 67fe1d1..239b953 100644 --- a/my-styles.css +++ b/my-styles.css @@ -19,4 +19,12 @@ #display-04 div:nth-of-type(1){ display:none; } +#display-05 a{ + display: block; + width: 50%; + background-color: yellow; + padding: 20px 20px 20px 20px; + margin-left: auto; + margin-right: auto; +} /* All your edits should go here */ From 8637f9cb1477f59c6bcab226cb3f1c94470f84b3 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:11:51 -0400 Subject: [PATCH 06/25] finish boxmodel-01 --- my-styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/my-styles.css b/my-styles.css index 239b953..d56dc93 100644 --- a/my-styles.css +++ b/my-styles.css @@ -27,4 +27,11 @@ margin-left: auto; margin-right: auto; } +#boxmodel-01 div{ + width: 50%; + margin-left: auto; + margin-right: auto; + padding: 20px 20px 20px 20px; + border: thick solid red; +} /* All your edits should go here */ From 55c46d20814d1c4f03fd4a9ef87658cdf29ed0e0 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:15:41 -0400 Subject: [PATCH 07/25] finish boxmodel-02 --- my-styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/my-styles.css b/my-styles.css index d56dc93..656637a 100644 --- a/my-styles.css +++ b/my-styles.css @@ -34,4 +34,12 @@ padding: 20px 20px 20px 20px; border: thick solid red; } +#boxmodel-02 div{ + box-sizing: border-box; + width: 50%; + margin-left: auto; + margin-right: auto; + padding: 20px 20px 20px 20px; + border: thick solid red; +} /* All your edits should go here */ From 8587a660b321260b48b88dc64eca476dfb454819 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:16:35 -0400 Subject: [PATCH 08/25] fix display-03 --- my-styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index 656637a..0db99c7 100644 --- a/my-styles.css +++ b/my-styles.css @@ -11,7 +11,7 @@ width: 100%; } #display-03 div{ - float:left; + display: inline-block; border: thin solid green; width: 100px; height: 100px; From 9a7537824f022a08d9434c0ecdbf6fd2300f0d2b Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:23:11 -0400 Subject: [PATCH 09/25] finish float-01 --- my-styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/my-styles.css b/my-styles.css index 0db99c7..d0d46b2 100644 --- a/my-styles.css +++ b/my-styles.css @@ -42,4 +42,8 @@ padding: 20px 20px 20px 20px; border: thick solid red; } +#float-01 img{ + float: left; + margin: 20px 20px 20px 0px; +} /* All your edits should go here */ From 119b89d1cd957f7834da5eb42fb060f933cefe30 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:28:33 -0400 Subject: [PATCH 10/25] finish float-02 --- my-styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/my-styles.css b/my-styles.css index d0d46b2..390a9da 100644 --- a/my-styles.css +++ b/my-styles.css @@ -46,4 +46,11 @@ float: left; margin: 20px 20px 20px 0px; } +#float-02 img{ + float: right; + margin: 20px 0px 20px 20px +} +#float-02 p{ + text-align: justify; +} /* All your edits should go here */ From aa7e3b3f3d1531b106502d5c47de494df1c4de7f Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:36:04 -0400 Subject: [PATCH 11/25] finish float-03 --- my-styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/my-styles.css b/my-styles.css index 390a9da..fe91b52 100644 --- a/my-styles.css +++ b/my-styles.css @@ -53,4 +53,11 @@ #float-02 p{ text-align: justify; } +#float-03 img{ + float: left; + margin: 20px 20px 20px 20px; +} +#float-03 .clear{ + clear:left; +} /* All your edits should go here */ From eb33333e9c6f8a744e13e1833494b517e4ff179c Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 14:45:04 -0400 Subject: [PATCH 12/25] finish float-04 --- my-styles.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/my-styles.css b/my-styles.css index fe91b52..56d01dc 100644 --- a/my-styles.css +++ b/my-styles.css @@ -60,4 +60,16 @@ #float-03 .clear{ clear:left; } +#float-04 img{ + float: left; + margin: 20px 20px 20px 20px; +} +#float-04 div{ + background-color: lightblue; +} +#float-04 div:after{ + content: ""; + display: table; + clear: both; +} /* All your edits should go here */ From bd69e77a0a311d2ef3d28030fbbc54765577d38c Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 15:07:00 -0400 Subject: [PATCH 13/25] finish float-05 --- my-styles.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/my-styles.css b/my-styles.css index 56d01dc..2a5842e 100644 --- a/my-styles.css +++ b/my-styles.css @@ -72,4 +72,18 @@ display: table; clear: both; } +#float-05 p:first-child{ + box-sizing: border-box; + float:left; + width: 50%; + padding: 5px 5px 5px 5px; + border-right: thin solid red; +} +#float-05 p:last-child{ + box-sizing: border-box; + width: 50%; + float:right; + padding: 5px 5px 5px 5px; +} + /* All your edits should go here */ From ef30be863497943f2fd84b1e6ccf41bd21bb2e18 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 15:13:58 -0400 Subject: [PATCH 14/25] finished float-06 --- my-styles.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/my-styles.css b/my-styles.css index 2a5842e..cc4f249 100644 --- a/my-styles.css +++ b/my-styles.css @@ -85,5 +85,24 @@ float:right; padding: 5px 5px 5px 5px; } +#float-06 div p:first-child{ + box-sizing: border-box; + float:left; + width: 50%; + padding: 5px 5px 5px 5px; + border-right: thin solid red; +} +#float-06 div p:last-child{ + box-sizing: border-box; + width: 50%; + float:right; + padding: 5px 5px 5px 5px; +} +#float-06 div + p{ + content: ""; + display: table; + clear: both; +} + /* All your edits should go here */ From 30b10234f7e133da38cf8f5c0997f36a5e4bc000 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 15:23:30 -0400 Subject: [PATCH 15/25] finish position-01 --- my-styles.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index cc4f249..d5f9d64 100644 --- a/my-styles.css +++ b/my-styles.css @@ -103,6 +103,14 @@ display: table; clear: both; } - +#position-01 div{ + width: 50px; + height: 50px; + background-color: red; +} +#position-01 div:nth-child(even){ + position: relative; + left:50px; +} /* All your edits should go here */ From dba061c3a53db9219c2dba37ebf24c4b3e090580 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 15:49:18 -0400 Subject: [PATCH 16/25] finish position-02 --- my-styles.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/my-styles.css b/my-styles.css index d5f9d64..b114250 100644 --- a/my-styles.css +++ b/my-styles.css @@ -112,5 +112,28 @@ position: relative; left:50px; } +#position-02 div{ + border: thin solid red; +} +#position-02 div :first-child{ + position: absolute; + left: 0px; + top: 0px; +} +#position-02 div :nth-child(2){ + position: absolute; + top: 0px; + right: 0px; +} +#position-02 div :nth-child(3){ + position: absolute; + bottom:0px; + right: 0px; +} +#position-02 div :last-child{ + position: absolute; + bottom: 0px; + left: 0px; +} /* All your edits should go here */ From 4d9fd42b64258903d573c62b6b3d23034084f762 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 15:55:58 -0400 Subject: [PATCH 17/25] finish position-03 --- my-styles.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/my-styles.css b/my-styles.css index b114250..fe69495 100644 --- a/my-styles.css +++ b/my-styles.css @@ -135,5 +135,29 @@ bottom: 0px; left: 0px; } +#position-03 div{ + border: thin solid red; + height: 100px; +} +#position-03 div :first-child{ + position: absolute; + left: 29.025px; + top: 29.025px; +} +#position-03 div :nth-child(2){ + position: absolute; + top: 29.025px; + right: 29.025px; +} +#position-03 div :nth-child(3){ + position: absolute; + bottom: 29.025px; + right: 29.025px; +} +#position-03 div :last-child{ + position: absolute; + bottom: 29.025px; + left: 29.025px; +} /* All your edits should go here */ From eb23375171039006ede37dd2f9309e1480b37a02 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 16:23:01 -0400 Subject: [PATCH 18/25] fixed position-03 --- my-styles.css | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/my-styles.css b/my-styles.css index fe69495..9e6f7da 100644 --- a/my-styles.css +++ b/my-styles.css @@ -138,26 +138,31 @@ #position-03 div{ border: thin solid red; height: 100px; + position: relative; } #position-03 div :first-child{ position: absolute; - left: 29.025px; - top: 29.025px; + left: 0px; + top: 0px; } #position-03 div :nth-child(2){ position: absolute; - top: 29.025px; - right: 29.025px; + top: 0px; + right: 0px; } #position-03 div :nth-child(3){ position: absolute; - bottom: 29.025px; - right: 29.025px; + bottom: 0px; + right: 0px; } #position-03 div :last-child{ position: absolute; - bottom: 29.025px; - left: 29.025px; + bottom: 0px; + left: 0px; +} +#position-04 div{ + position: absolute; + top: 0px; } /* All your edits should go here */ From 99cea613044681fa554e748184baa57905806a53 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 20:01:23 -0400 Subject: [PATCH 19/25] finish position-04 --- my-styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/my-styles.css b/my-styles.css index 9e6f7da..3a10b2a 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,7 @@ /* Your Stylesheet */ +#top{ + position: absolute; +} #display-01 div{ display: inline; margin-left: 20px; @@ -160,6 +163,10 @@ bottom: 0px; left: 0px; } +#position-04{ + position: absolute; + top: 0px; +} #position-04 div{ position: absolute; top: 0px; From d0ca38d89ff0e9530157247e58743e7b0c3f8fea Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 20:42:30 -0400 Subject: [PATCH 20/25] stuck on position-05 so skip to and finish position-06 --- my-styles.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/my-styles.css b/my-styles.css index 3a10b2a..9988106 100644 --- a/my-styles.css +++ b/my-styles.css @@ -171,5 +171,33 @@ position: absolute; top: 0px; } +.outer-box:first-child{ + box-sizing: border-box; + float: left; + width: 4rem; + height: 4rem; + background-color: lightgray; +} +.outer-box:last-child{ + box-sizing: border-box; + float: right; + width: 4rem; + height: 4rem; + background-color: lightgray; +} +.inner-box{ + box-sizing: border-box; + width: 1rem; + height: 1rem; + background-color: darkgray; +} +#position-06 div{ + background-color: lavender; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} /* All your edits should go here */ From 5145cf9c8c4cebcde99db1f63a7012b3392de6b1 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 22:09:30 -0400 Subject: [PATCH 21/25] fix position-04 --- my-styles.css | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/my-styles.css b/my-styles.css index 9988106..a4fa943 100644 --- a/my-styles.css +++ b/my-styles.css @@ -164,8 +164,8 @@ left: 0px; } #position-04{ - position: absolute; - top: 0px; + position: static; + } #position-04 div{ position: absolute; @@ -173,22 +173,37 @@ } .outer-box:first-child{ box-sizing: border-box; - float: left; + position: absolute; width: 4rem; height: 4rem; background-color: lightgray; + top: 0px; + left: 0px; } .outer-box:last-child{ box-sizing: border-box; - float: right; + position: absolute; width: 4rem; height: 4rem; background-color: lightgray; + top: 0px; + right: 0px; +} +.outer-box:first-child .inner-box{ + box-sizing: border-box; + position: absolute; + width: 1rem; + height: 1rem; + top: 37.15px; + left: 37.15px; + background-color: darkgray; } -.inner-box{ +.outer-box:last-child .inner-box{ box-sizing: border-box; width: 1rem; height: 1rem; + top: 2rem; + bottom: 2rem; background-color: darkgray; } #position-06 div{ From 98c1b7928ea4decb1974e38b7d50dca0dced62b7 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 22:14:16 -0400 Subject: [PATCH 22/25] fix position-05 --- my-styles.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/my-styles.css b/my-styles.css index a4fa943..b042421 100644 --- a/my-styles.css +++ b/my-styles.css @@ -194,16 +194,17 @@ position: absolute; width: 1rem; height: 1rem; - top: 37.15px; - left: 37.15px; + top: 1.5rem; + left: 1.5rem; background-color: darkgray; } .outer-box:last-child .inner-box{ box-sizing: border-box; + position: absolute; width: 1rem; height: 1rem; - top: 2rem; - bottom: 2rem; + top: 1.5rem; + left: 1.5rem; background-color: darkgray; } #position-06 div{ From 51a7c5f7bd9e64c0268b3d63df151f523ab66d64 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 22:28:54 -0400 Subject: [PATCH 23/25] finish position-07 --- my-styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/my-styles.css b/my-styles.css index b042421..86f6a87 100644 --- a/my-styles.css +++ b/my-styles.css @@ -215,5 +215,15 @@ bottom: 0px; left: 0px; } +#position-07 a{ + position: fixed; + background-color: red; + right: 20px; + bottom: 20px; + padding: 10px 10px 10px 10px; +} +#position-07 a:hover{ + background-color: darkred; +} /* All your edits should go here */ From 16a8360ac24153708768d7846ab70f663451f953 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 23:30:31 -0400 Subject: [PATCH 24/25] worked on layout --- my-styles.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/my-styles.css b/my-styles.css index 86f6a87..1bc4d14 100644 --- a/my-styles.css +++ b/my-styles.css @@ -225,5 +225,53 @@ #position-07 a:hover{ background-color: darkred; } +#layout nav{ + background-color: yellowgreen; + height:50px; + font-size: 12px +} +#layout nav a{ + float:left; + padding: 10px 10px 10px 10px; +} +#layout nav a:hover{ + background-color: olivedrab; +} +#layout aside{ + position: absolute; + top: 200px; + right: 250px; + background-color: maroon; + width: 20%; + border-top: thick solid red; +} +#layout aside p{ + font-size: 12px; + color: white; + padding-left: 10px; + padding right: 10px; +} +#wrapper{ + background-color: darkcyan; +} +#layout main{ + background-color: black; + width: 50%; + margin: 0px 0px 0px 60px; + padding-right: 300px; +} +#layout main p{ + color: white; + font-size:12px; + margin: 0px 0px 0px 0px; + padding-top: 12px; + padding-left: 8px; + padding-bottom: 12px; + padding-right: 8px; +} +#wrapper footer{ + position: fixed; + background-color: darkred; +} /* All your edits should go here */ From 69ce92e6dc2745084fafc5591bd38edf4e205e93 Mon Sep 17 00:00:00 2001 From: Joey Zimmerman Date: Thu, 19 Sep 2019 23:37:32 -0400 Subject: [PATCH 25/25] update layout --- my-styles.css | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/my-styles.css b/my-styles.css index 1bc4d14..11393bd 100644 --- a/my-styles.css +++ b/my-styles.css @@ -241,9 +241,10 @@ position: absolute; top: 200px; right: 250px; - background-color: maroon; + background-color: salmon; width: 20%; - border-top: thick solid red; + border-top: thick solid orangered; + padding-bottom: 90px; } #layout aside p{ font-size: 12px; @@ -252,16 +253,16 @@ padding right: 10px; } #wrapper{ - background-color: darkcyan; + background-color: steelblue; } #layout main{ - background-color: black; + background-color: white; width: 50%; margin: 0px 0px 0px 60px; padding-right: 300px; } #layout main p{ - color: white; + color: black; font-size:12px; margin: 0px 0px 0px 0px; padding-top: 12px; @@ -270,8 +271,8 @@ padding-right: 8px; } #wrapper footer{ - position: fixed; - background-color: darkred; + background-color: palevioletred; + font-size: 12px; } /* All your edits should go here */