From bec9c74a060e051d61c68858954c3ce7817576b3 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 13:24:19 -0400 Subject: [PATCH 01/21] Completed display 1 and display 2 --- my-styles.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/my-styles.css b/my-styles.css index f7d02e4..b3d4c42 100644 --- a/my-styles.css +++ b/my-styles.css @@ -2,3 +2,20 @@ /* All your edits should go here */ +#display-01 div { + +display: inline; +border: 1px solid; +border-color: blue; +padding: 0px; +margin: 20px; + +} + +#display-02 span{ + +display: block; +border: 1px solid; +border-color: red; + +} From e11205e366e3950466362f2b3e18a68c9e6274ca Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 13:32:57 -0400 Subject: [PATCH 02/21] Did display 3 --- my-styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/my-styles.css b/my-styles.css index b3d4c42..d18c822 100644 --- a/my-styles.css +++ b/my-styles.css @@ -19,3 +19,12 @@ border: 1px solid; border-color: red; } + +#display-03 div{ + +display: inline;; +border: 1px solid; +border-color: green; +padding: 20px; + +} From 3d9b5d6987daa47097362a210dc0bedb932be9a7 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 13:39:49 -0400 Subject: [PATCH 03/21] Completed display 4 --- my-styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/my-styles.css b/my-styles.css index d18c822..1641dbe 100644 --- a/my-styles.css +++ b/my-styles.css @@ -28,3 +28,9 @@ border-color: green; padding: 20px; } + +#display-04 div:nth-of-type(1){ + +visibility: hidden; + +} From dca2dca028d9d326ba123e2e68364490adb0fa1e Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:04:35 -0400 Subject: [PATCH 04/21] Fixed display 3 and completed display 5 --- my-styles.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/my-styles.css b/my-styles.css index 1641dbe..12c6cdf 100644 --- a/my-styles.css +++ b/my-styles.css @@ -22,10 +22,13 @@ border-color: red; #display-03 div{ -display: inline;; +display: inline-block; border: 1px solid; border-color: green; -padding: 20px; +width: 10%; +height: 0; +padding-bottom: 10%; + } @@ -34,3 +37,12 @@ padding: 20px; visibility: hidden; } + +#display-05 a { + +display: inline-block; +background-color: green; +padding: 30px 5px; +margin: 0% 25%; +width: 50%; +} From b84ff5b6d2466d70227764a39a0976d333f64dc3 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:09:46 -0400 Subject: [PATCH 05/21] Completed boxmodel 1 --- my-styles.css | 66 +++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/my-styles.css b/my-styles.css index 12c6cdf..cc3f1f6 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,48 +1,46 @@ /* Your Stylesheet */ - /* All your edits should go here */ - #display-01 div { - -display: inline; -border: 1px solid; -border-color: blue; -padding: 0px; -margin: 20px; - + display: inline; + border: 1px solid; + border-color: blue; + padding: 0px; + margin: 20px; } -#display-02 span{ - -display: block; -border: 1px solid; -border-color: red; - +#display-02 span { + display: block; + border: 1px solid; + border-color: red; } -#display-03 div{ - -display: inline-block; -border: 1px solid; -border-color: green; -width: 10%; -height: 0; -padding-bottom: 10%; - - +#display-03 div { + display: inline-block; + border: 1px solid; + border-color: green; + width: 10%; + height: 0; + padding-bottom: 10%; } -#display-04 div:nth-of-type(1){ - -visibility: hidden; - +#display-04 div:nth-of-type(1) { + visibility: hidden; } #display-05 a { + display: inline-block; + background-color: green; + padding: 30px 5px; + margin: 0% 25%; + width: 50%; +} + +#boxmodel-01 div { + + width: 50%; + margin: 0% 25%; + padding: 50px; + border: 15px solid; + border-color: green; -display: inline-block; -background-color: green; -padding: 30px 5px; -margin: 0% 25%; -width: 50%; } From 462db4a938574fa24a9e76185cfc6965f8ce788a Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:13:09 -0400 Subject: [PATCH 06/21] Completed boxmodel 2 --- my-styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/my-styles.css b/my-styles.css index cc3f1f6..cb846bf 100644 --- a/my-styles.css +++ b/my-styles.css @@ -44,3 +44,14 @@ border-color: green; } + +#boxmodel-02 div { + + box-sizing: border-box; + width: 50%; + margin: 0% 25%; + padding: 50px; + border: 15px solid; + border-color: green; + +} From f623b9b5de75acc3798f88093214c8eb6350adea Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:21:35 -0400 Subject: [PATCH 07/21] Completed float 1 --- my-styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/my-styles.css b/my-styles.css index cb846bf..8b6e239 100644 --- a/my-styles.css +++ b/my-styles.css @@ -55,3 +55,9 @@ border-color: green; } + +#float-01 img { +float: left; +margin: 25px 10px 10px 0px; + +} From 1d19f53d5daf2ac52ce4dd301e3f03f05b4c3156 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:29:28 -0400 Subject: [PATCH 08/21] Fixed float 1 and complete float 2 --- my-styles.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index 8b6e239..588a761 100644 --- a/my-styles.css +++ b/my-styles.css @@ -58,6 +58,13 @@ #float-01 img { float: left; -margin: 25px 10px 10px 0px; +margin: 35px 10px 10px 0px; + +} + +#float-02 img { + + float: right; + margin: 35px 0px 10px 10px; } From adb38a937ca1cc57dc1fe813d0e5ff42b734ebda Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:39:31 -0400 Subject: [PATCH 09/21] Completed float 3 --- my-styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/my-styles.css b/my-styles.css index 588a761..a1d16e2 100644 --- a/my-styles.css +++ b/my-styles.css @@ -68,3 +68,14 @@ margin: 35px 10px 10px 0px; margin: 35px 0px 10px 10px; } + +#float-03 img { + + float: left; + margin: 15px; + +} + +#float-03 p.clear { + clear: both; +} From 811fe0985c1dfae7a370ac8fd0bb4003c2f8de61 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:47:36 -0400 Subject: [PATCH 10/21] Completed float 4 --- my-styles.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/my-styles.css b/my-styles.css index a1d16e2..f0659fc 100644 --- a/my-styles.css +++ b/my-styles.css @@ -79,3 +79,17 @@ margin: 35px 10px 10px 0px; #float-03 p.clear { clear: both; } + +#float-04 img { + + float: left; + margin: 15px; + +} + +#float-04 div { + +background-color: #ADD8E6; +display: flow-root; + +} From 416fa048909ccb8cecc9b1e5f0b18ad2e7d78b78 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 14:54:21 -0400 Subject: [PATCH 11/21] Completed float 5 --- my-styles.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/my-styles.css b/my-styles.css index f0659fc..6a5c972 100644 --- a/my-styles.css +++ b/my-styles.css @@ -93,3 +93,20 @@ background-color: #ADD8E6; display: flow-root; } + +#float-05 p:nth-of-type(1){ + + float: left; + padding: 15px; + width: 45%; + border-right: 1px solid; + +} + +#float-05 p:nth-of-type(2){ + + float: right; + padding: 15px; + width: 45%; + +} From 34a962efcf27cca1930a06b8d8832b4863e1ae73 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 15:21:30 -0400 Subject: [PATCH 12/21] Fixed float 2 and completed float 6 --- my-styles.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/my-styles.css b/my-styles.css index 6a5c972..e11a23c 100644 --- a/my-styles.css +++ b/my-styles.css @@ -66,6 +66,8 @@ margin: 35px 10px 10px 0px; float: right; margin: 35px 0px 10px 10px; + text-align: justify; + text-justify: auto; } @@ -110,3 +112,24 @@ display: flow-root; width: 45%; } + +#float-06 div p:nth-of-type(1){ + + float: left; + padding: 15px; + width: 45%; + border-right: 1px solid; + +} + +#float-06 div p:nth-of-type(2){ + + float: right; + padding: 15px; + width: 45%; + +} + +#float-06 p { + clear: both; +} From c882d0063ce2fa11500877a01cd1d69d576c7fc0 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 15:26:54 -0400 Subject: [PATCH 13/21] Beautified, fixed float 2 and completed position 1 --- my-styles.css | 55 ++++++++++++++++++++++++--------------------------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/my-styles.css b/my-styles.css index e11a23c..9bc1ba3 100644 --- a/my-styles.css +++ b/my-styles.css @@ -36,46 +36,40 @@ } #boxmodel-01 div { - width: 50%; margin: 0% 25%; padding: 50px; border: 15px solid; border-color: green; - } #boxmodel-02 div { - box-sizing: border-box; width: 50%; margin: 0% 25%; padding: 50px; border: 15px solid; border-color: green; - } #float-01 img { -float: left; -margin: 35px 10px 10px 0px; - + float: left; + margin: 35px 10px 10px 0px; } #float-02 img { - float: right; margin: 35px 0px 10px 10px; +} + +#float-02 p { text-align: justify; text-justify: auto; - } #float-03 img { - float: left; margin: 15px; - } #float-03 p.clear { @@ -83,53 +77,56 @@ margin: 35px 10px 10px 0px; } #float-04 img { - float: left; margin: 15px; - } #float-04 div { - -background-color: #ADD8E6; -display: flow-root; - + background-color: #ADD8E6; + display: flow-root; } -#float-05 p:nth-of-type(1){ - +#float-05 p:nth-of-type(1) { float: left; padding: 15px; width: 45%; border-right: 1px solid; - } -#float-05 p:nth-of-type(2){ - +#float-05 p:nth-of-type(2) { float: right; padding: 15px; width: 45%; - } -#float-06 div p:nth-of-type(1){ - +#float-06 div p:nth-of-type(1) { float: left; padding: 15px; width: 45%; border-right: 1px solid; - } -#float-06 div p:nth-of-type(2){ - +#float-06 div p:nth-of-type(2) { float: right; padding: 15px; width: 45%; - } #float-06 p { clear: both; } + +#position-01 div { + background-color: red; + width: 10%; + height: 0; + padding-bottom: 10%; +} + +#position-01 div:nth-child(even) { + margin-left: 10%; + background-color: red; + width: 10%; + height: 0; + padding-bottom: 10%; +} From 1c9f55bf5e741afecacff269c9c11775d9710d22 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 15:40:49 -0400 Subject: [PATCH 14/21] Completed position 2 --- my-styles.css | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/my-styles.css b/my-styles.css index 9bc1ba3..9bdfcc1 100644 --- a/my-styles.css +++ b/my-styles.css @@ -130,3 +130,34 @@ height: 0; padding-bottom: 10%; } + +#position-02 div { + +border: 1px solid; +border-color: green; + +} + +#position-02 span:nth-of-type(1) { + position: absolute; +margin-left: -4%; +margin-top: -5%; +} + +#position-02 span:nth-of-type(2) { +position: absolute; +margin-left: 92%; +margin-top: -5%; +} + +#position-02 span:nth-of-type(3) { + position: absolute; +margin-left: 90%; +margin-top: 2%; +} + +#position-02 span:nth-of-type(4) { + position: absolute; +margin-left: -4%; +margin-top: 2%; +} From 69609306fdd8d51af85cffd6ecc0afd05112696b Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 15:44:34 -0400 Subject: [PATCH 15/21] Completed position 3 --- my-styles.css | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/my-styles.css b/my-styles.css index 9bdfcc1..501d72a 100644 --- a/my-styles.css +++ b/my-styles.css @@ -161,3 +161,35 @@ margin-top: 2%; margin-left: -4%; margin-top: 2%; } + +#position-03 div { + +border: 1px solid; +border-color: green; +height: 100px; + +} + +#position-03 span:nth-of-type(1) { + position: absolute; +margin-left: 0%; +margin-top: 0%; +} + +#position-03 span:nth-of-type(2) { +position: absolute; +margin-left: 87%; +margin-top: 0%; +} + +#position-03 span:nth-of-type(3) { + position: absolute; +margin-left: 86%; +margin-top: 7%; +} + +#position-03 span:nth-of-type(4) { + position: absolute; +margin-left: 0%; +margin-top: 7%; +} From d6f6a3982c1f9f1a93cef5f1444f1bd8bee12b4b Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 16:19:57 -0400 Subject: [PATCH 16/21] Fixed postion 2 and 3 completed position 4 --- my-styles.css | 56 ++++++++++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/my-styles.css b/my-styles.css index 501d72a..f76edbc 100644 --- a/my-styles.css +++ b/my-styles.css @@ -132,64 +132,66 @@ } #position-02 div { - -border: 1px solid; -border-color: green; - + border: 1px solid; + border-color: green; } #position-02 span:nth-of-type(1) { position: absolute; -margin-left: -4%; -margin-top: -5%; + left: 0; + top: 0; } #position-02 span:nth-of-type(2) { -position: absolute; -margin-left: 92%; -margin-top: -5%; + position: absolute; + right: 0; + top: 0; } #position-02 span:nth-of-type(3) { position: absolute; -margin-left: 90%; -margin-top: 2%; + right: 0; + bottom: 0; } #position-02 span:nth-of-type(4) { position: absolute; -margin-left: -4%; -margin-top: 2%; + left: 0; + bottom: 0; } #position-03 div { - -border: 1px solid; -border-color: green; -height: 100px; - + border: 1px solid; + border-color: green; + height: 100px; } #position-03 span:nth-of-type(1) { position: absolute; -margin-left: 0%; -margin-top: 0%; + left: 50px; + top: 40px; } #position-03 span:nth-of-type(2) { -position: absolute; -margin-left: 87%; -margin-top: 0%; + position: absolute; + right: 50px; + top: 40px; } #position-03 span:nth-of-type(3) { position: absolute; -margin-left: 86%; -margin-top: 7%; + right: 50px; + bottom: 45px; } #position-03 span:nth-of-type(4) { position: absolute; -margin-left: 0%; -margin-top: 7%; + left: 50px; + bottom: 45px; +} + +#position-04 div { + position: absolute; + top: -8700px; + left: 50%; } From 98b8d43643f26e5f2ba63ddfbfb694af1293e0d0 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 17:12:17 -0400 Subject: [PATCH 17/21] Completed position 5 --- my-styles.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/my-styles.css b/my-styles.css index f76edbc..c700664 100644 --- a/my-styles.css +++ b/my-styles.css @@ -195,3 +195,33 @@ top: -8700px; left: 50%; } + +#position-05 div.outer-box { + +width: 4rem; +height: 4rem; +background-color: #D3D3D3; + +} + +#position-05 div.outer-box:nth-of-type(1){ + position: relative; + left: 1300px; + top: 110px; + +} + +#position-05 div.inner-box { + + position: relative; +width: 1rem; +height: 1rem; +background-color: #A9A9A9; + +} + +#position-05 div.inner-box:nth-of-type(1){ + position: relative; + left: 45px; + top: 45px; +} From bace9ebfe4068c2b4f35cf80740b376c515ffdd7 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 17:28:53 -0400 Subject: [PATCH 18/21] Completed position 6 --- my-styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/my-styles.css b/my-styles.css index c700664..6ef7ca0 100644 --- a/my-styles.css +++ b/my-styles.css @@ -225,3 +225,12 @@ background-color: #A9A9A9; left: 45px; top: 45px; } + +#position-06 div { +position: absolute; +background-color: lavender; +top: 0px; +left: 0px; +right: 0px; +bottom: 0px; +} From 173849fbf04cb54babc86ba0c51d7987859e552b Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 18:04:03 -0400 Subject: [PATCH 19/21] Completed position 7 --- my-styles.css | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/my-styles.css b/my-styles.css index 6ef7ca0..31b4ca4 100644 --- a/my-styles.css +++ b/my-styles.css @@ -234,3 +234,20 @@ left: 0px; right: 0px; bottom: 0px; } + +#position-07 a { + +position: absolute; +left: 0px; +bottom: 0px; +padding: 5px; +background-color: green; +margin: 5px; + +} + +#position-07 a:hover { + +background-color: yellow; + +} From 19009d729b723996944b81e683f4886fd13d870e Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 19:33:19 -0400 Subject: [PATCH 20/21] Completed Layout --- my-styles.css | 88 +++++++++++++++++++++++++++++++++++---------------- 1 file changed, 61 insertions(+), 27 deletions(-) diff --git a/my-styles.css b/my-styles.css index 31b4ca4..95ab84b 100644 --- a/my-styles.css +++ b/my-styles.css @@ -197,57 +197,91 @@ } #position-05 div.outer-box { - -width: 4rem; -height: 4rem; -background-color: #D3D3D3; - + width: 4rem; + height: 4rem; + background-color: #D3D3D3; } -#position-05 div.outer-box:nth-of-type(1){ +#position-05 div.outer-box:nth-of-type(1) { position: relative; left: 1300px; top: 110px; - } #position-05 div.inner-box { - position: relative; -width: 1rem; -height: 1rem; -background-color: #A9A9A9; - + width: 1rem; + height: 1rem; + background-color: #A9A9A9; } -#position-05 div.inner-box:nth-of-type(1){ +#position-05 div.inner-box:nth-of-type(1) { position: relative; left: 45px; top: 45px; } #position-06 div { -position: absolute; -background-color: lavender; -top: 0px; -left: 0px; -right: 0px; -bottom: 0px; + position: absolute; + background-color: lavender; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; } #position-07 a { + position: absolute; + left: 0px; + bottom: 0px; + padding: 5px; + background-color: green; + margin: 5px; +} -position: absolute; -left: 0px; -bottom: 0px; -padding: 5px; -background-color: green; -margin: 5px; +#position-07 a:hover { + background-color: yellow; +} +#layout nav { + height: 60px; + background: #b7d84b; } -#position-07 a:hover { +#layout nav a { + display: block; + color: #fff; + text-decoration: none; + padding: 0 20px; + line-height: 60px; + border-right: 1px solid #91ab3b; + float: left; +} -background-color: yellow; +#layout aside { + position: absolute; + top: 200px; + bottom: 200px; + right: -80px; + width: 400px; + padding: 0 20px; + border-top: 5px solid #f95b34; + background: #fa8366; +} + +#layout aside p { + display: block; +} +#layout main p { + width: 70%; +} + +#layout footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + background: #f36283; } From 313a30c87a5118f104ffb4b2607f9f5308395be9 Mon Sep 17 00:00:00 2001 From: Charles Max Crandall Date: Thu, 19 Sep 2019 19:40:22 -0400 Subject: [PATCH 21/21] Fixed position 3 and 4 --- my-styles.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/my-styles.css b/my-styles.css index 95ab84b..546772d 100644 --- a/my-styles.css +++ b/my-styles.css @@ -168,31 +168,31 @@ #position-03 span:nth-of-type(1) { position: absolute; - left: 50px; - top: 40px; + left: 60px; + top: 50px; } #position-03 span:nth-of-type(2) { position: absolute; - right: 50px; - top: 40px; + right: 60px; + top: 50px; } #position-03 span:nth-of-type(3) { position: absolute; - right: 50px; - bottom: 45px; + right: 60px; + bottom: 55px; } #position-03 span:nth-of-type(4) { position: absolute; - left: 50px; - bottom: 45px; + left: 60px; + bottom: 55px; } #position-04 div { position: absolute; - top: -8700px; + top: -10900px; left: 50%; }