From 61838e5353a5914cada23c4d6dc6a8dec72a1ddb Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 28 Mar 2020 14:03:24 +0000 Subject: [PATCH 01/23] Completed 1-parent-child exercise --- week-1/1-parent-child/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html index 458a4cb21..3c8abf1bc 100644 --- a/week-1/1-parent-child/index.html +++ b/week-1/1-parent-child/index.html @@ -27,6 +27,7 @@

I can meet on Tuesday and Wednesday after 4.

+ 7:15pm From 9fd1696e02b4e7f98d1cc97ad3ab0043dba8a49f Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 28 Mar 2020 14:35:20 +0000 Subject: [PATCH 02/23] Completed 1-parent-child exercise --- week-1/2-html-attributes/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/week-1/2-html-attributes/index.html b/week-1/2-html-attributes/index.html index dc861fa4f..fe58a0f11 100644 --- a/week-1/2-html-attributes/index.html +++ b/week-1/2-html-attributes/index.html @@ -23,14 +23,14 @@
Luke

- Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn + Let's meet at the iCafe in Merchant City.

7:35pm
Won

- Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif + Ok!

7:38pm
From 2fddabe62c76abc50005e1a0d2dc67e90ddc2ba0 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 14:24:38 +0100 Subject: [PATCH 03/23] Completed 3-html-attributes exercise --- week-1/3-semantic-html/index.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html index 3640deaff..91e6ee972 100644 --- a/week-1/3-semantic-html/index.html +++ b/week-1/3-semantic-html/index.html @@ -12,30 +12,30 @@
-
+
Messages
-
-
-
+ +
+
Won

Where should we meet later?

- Mar 25, 2018 7:25pm -
-
+ + +
Luke

Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn

- Mar 25, 2018 7:35pm -
-
+ + +
Won

Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif

- Mar 25, 2018 7:38pm -
-
+ + +
From 82df6d62b8288b9c33aaaa7f34c6fecec04f44c1 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 15:15:11 +0100 Subject: [PATCH 04/23] Completed 4-html-attributes exercise --- week-1/4-links-scripts/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html index 303c7fbd2..ecc9da1f3 100644 --- a/week-1/4-links-scripts/index.html +++ b/week-1/4-links-scripts/index.html @@ -3,6 +3,7 @@ 4. Adding Links and Scripts - HTML, CSS and Git Exercises + @@ -30,6 +31,7 @@ No, I prefer the one on Sauchiehall Street. https://goo.gl/maps/wKDoARcHDp42

+ From 34660aac5fa912879ae293b649da47668e8b6fdc Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 15:46:46 +0100 Subject: [PATCH 05/23] Completed 4-html-attributes exercise --- week-1/4-links-scripts/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html index ecc9da1f3..6b35bf75b 100644 --- a/week-1/4-links-scripts/index.html +++ b/week-1/4-links-scripts/index.html @@ -3,8 +3,8 @@ 4. Adding Links and Scripts - HTML, CSS and Git Exercises - + @@ -31,7 +31,7 @@ No, I prefer the one on Sauchiehall Street. https://goo.gl/maps/wKDoARcHDp42

- + From e8649aaccea371ca26707f6560b092f8336d9b49 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 16:06:51 +0100 Subject: [PATCH 06/23] completed 5-html-attributes exercise --- week-1/5-css-selectors/message-backgrounds.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css index ffe483325..a8f3a711c 100644 --- a/week-1/5-css-selectors/message-backgrounds.css +++ b/week-1/5-css-selectors/message-backgrounds.css @@ -1 +1,10 @@ /* Add your CSS code below */ +#first-message { + background-color: red; +} +article { + background-color: cadetblue; +} +.message--latest { + background-color: yellow; +} From 03f1fd9bf048cc22ce41c44799cc4bb170364355 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 18:02:11 +0100 Subject: [PATCH 07/23] completed 6-html-attributes exercise --- week-1/6-css-properties/styles.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index ffe483325..d4fd47713 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -1 +1,21 @@ /* Add your CSS code below */ +a { + text-decoration: none; + color: red; + font-weight: bold; +} +.message__time { + font-size: 0.9rem; +} + +.message { + line-height: 200%; +} + +div .message--old { + opacity: 0.3; +} + +.message--unread { + border-left: 5px solid blue; +} From 7e750df5539e0b4ba217983b6dc0acedd757adcb Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 21:10:03 +0100 Subject: [PATCH 08/23] completed -7html-css-git-exercises --- week-1/7-css-box/styles.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 013b94f1e..58065b1ef 100644 --- a/week-1/7-css-box/styles.css +++ b/week-1/7-css-box/styles.css @@ -4,3 +4,10 @@ border-radius: 4px; background: #fff; } +.country { + margin: 1%; + padding: 1%; +} +* { + border: 1px solid red; +} From 637077726de222a304130009b3c430369fa58b48 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 29 Mar 2020 22:11:56 +0100 Subject: [PATCH 09/23] completed -8html-css-exercises --- week-1/8-advanced-selectors/styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css index d35c3c371..c5ed3f657 100644 --- a/week-1/8-advanced-selectors/styles.css +++ b/week-1/8-advanced-selectors/styles.css @@ -1 +1,12 @@ /* Try different box model properties below */ +div .site-header p { + color: white; + margin-bottom: 0%; +} +.site-footer { + font-size: 12px; + text-align: center; +} +div .message--unread { + box-shadow: 4px 4px 0 #dba944; +} From 3774d6a284b4eebae58520f6c1a460008f6eb2d3 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Tue, 31 Mar 2020 19:47:06 +0100 Subject: [PATCH 10/23] copleted 8-html-attributes-exersies --- week-1/8-advanced-selectors/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css index c5ed3f657..ebb4fe22d 100644 --- a/week-1/8-advanced-selectors/styles.css +++ b/week-1/8-advanced-selectors/styles.css @@ -1,5 +1,5 @@ /* Try different box model properties below */ -div .site-header p { +.site-header p { color: white; margin-bottom: 0%; } @@ -7,6 +7,6 @@ div .site-header p { font-size: 12px; text-align: center; } -div .message--unread { +.message--unread { box-shadow: 4px 4px 0 #dba944; } From ff119277a3fe7ecfa6220a93a4c2ebdcdf48c4a1 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 12:14:00 +0100 Subject: [PATCH 11/23] completed ex 3 --- week-1/3-semantic-html/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html index 91e6ee972..35b2feb00 100644 --- a/week-1/3-semantic-html/index.html +++ b/week-1/3-semantic-html/index.html @@ -12,7 +12,7 @@
-
+
Messages
From 1aa8c507e091e029f60b2992850ebd4d2b189256 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 12:19:52 +0100 Subject: [PATCH 12/23] fixed the css --- week-1/6-css-properties/styles.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index d4fd47713..b52261420 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -11,8 +11,7 @@ a { .message { line-height: 200%; } - -div .message--old { +.message--old { opacity: 0.3; } From cee003b3a20d1487178542645be56cd2f7476711 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 12:24:47 +0100 Subject: [PATCH 13/23] border fixed --- week-1/7-css-box/styles.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 58065b1ef..011d4606f 100644 --- a/week-1/7-css-box/styles.css +++ b/week-1/7-css-box/styles.css @@ -8,6 +8,3 @@ margin: 1%; padding: 1%; } -* { - border: 1px solid red; -} From 6c50a24457bb24c4bd08e823e5ec568757130622 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 14:15:07 +0100 Subject: [PATCH 14/23] add 1200px --- week-2/10-media-queries/columns.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css index 43e80d23c..1d8e6abae 100644 --- a/week-2/10-media-queries/columns.css +++ b/week-2/10-media-queries/columns.css @@ -1 +1,12 @@ /* Add your own CSS code below */ +@media screen and (min-width: 768px) { + .countries { + columns: 2; + } +} + +@media screen and (min-width: 1200px) { +} +.countries { + columns: 2; +} From f9f04580ad2a219996a0564f25233ab03a277d65 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 14:20:07 +0100 Subject: [PATCH 15/23] fixed to three column --- week-2/10-media-queries/columns.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css index 1d8e6abae..ab45821df 100644 --- a/week-2/10-media-queries/columns.css +++ b/week-2/10-media-queries/columns.css @@ -6,7 +6,7 @@ } @media screen and (min-width: 1200px) { -} -.countries { - columns: 2; + .countries { + columns: 3; + } } From cff000710bff2d5d7f3763491f8f7ff332aaa254 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 14:43:57 +0100 Subject: [PATCH 16/23] completed ex 11 --- week-2/11-flexbox/flexbox.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css index 43e80d23c..af6d6cb2d 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -1 +1,5 @@ /* Add your own CSS code below */ +.countries--first { + display: flex; + flex-direction: row; +} From 813555dc8e1fd7b34369259100cae38da7d3ee22 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 15:41:41 +0100 Subject: [PATCH 17/23] all boxes fixed --- week-2/12-justify-content/flexbox.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 3c4c7ff18..827a240b1 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -7,3 +7,22 @@ } /* Add your own CSS code below */ +.countries--first { + font-size: 14px; + justify-content: flex-end; +} + +.countries--second { + justify-content: space-between; + flex-direction: row; +} +.countries--third { + display: flex; + flex-direction: column; + justify-content: flex-end; +} +.countries--fourth { + display: flex; + flex-direction: column-reverse; + justify-content: space-between; +} From f38129a5e9faf831bb8e1b4120a8a281f8671dc5 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 15:51:08 +0100 Subject: [PATCH 18/23] completed ex 13 --- week-2/13-align-items/flexbox.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index 3675a0df3..2f6851f4b 100644 --- a/week-2/13-align-items/flexbox.css +++ b/week-2/13-align-items/flexbox.css @@ -2,3 +2,23 @@ display: flex; } /* Add your own CSS code below */ +.countries--first { + flex-direction: row; + align-items: center; + font-size: 14px; +} +.countries--second { + flex-direction: row-reverse; + align-items: flex-end; + font-size: 14px; +} +.countries--third { + flex-direction: column; + align-items: flex-end; + font-size: 14px; +} +.countries--fourth { + flex-direction: column-reverse; + align-items: center; + font-size: 14px; +} From 179d148dbb40906342fc15722ea75c9024c2d97b Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sat, 4 Apr 2020 21:23:23 +0100 Subject: [PATCH 19/23] completed ex 14 --- week-2/14-order/flexbox.css | 62 +++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css index ed621b793..4f3820ec2 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -3,3 +3,65 @@ } /* Add your own CSS code below */ +.countries { + align-items: flex-end; + font-size: 14px; +} + +.countries--first :nth-child(1) { + align-items: flex-end; + font-size: 14px; + order: 2; +} + +.countries--second :nth-child(1) { + align-items: flex-end; + font-size: 14px; + order: 4; +} +.countries--second :nth-child(2) { + align-items: flex-end; + font-size: 14px; + order: 1; +} +.countries--second :nth-child(3) { + align-items: flex-end; + font-size: 14px; + order: 2; +} +.countries--second :nth-child(4) { + align-items: flex-end; + font-size: 14px; + order: 3; +} +.countries--second :nth-child(5) { + align-items: flex-end; + font-size: 14px; + order: 5; +} + +.countries--third :nth-child(1) { + align-items: flex-end; + font-size: 14px; + order: 5; +} +.countries--third :nth-child(2) { + align-items: flex-end; + font-size: 14px; + order: 4; +} +.countries--third :nth-child(3) { + align-items: flex-end; + font-size: 14px; + order: 3; +} +.countries--third :nth-child(4) { + align-items: flex-end; + font-size: 14px; + order: 2; +} +.countries--third :nth-child(5) { + align-items: flex-end; + font-size: 14px; + order: 1; +} From 47e394d1822169f1b9db4ef0651e83cb74d1e6eb Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Sun, 5 Apr 2020 23:51:24 +0100 Subject: [PATCH 20/23] completed ex 15 --- week-2/15-align-self/flexbox.css | 44 ++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index ed621b793..48388a4fe 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -3,3 +3,47 @@ } /* Add your own CSS code below */ +.countries--first .country--ethiopia { + align-self: flex-end; + font-size: 14px; +} +.countries--second { + align-items: center; + font-size: 14px; +} +.countries--second .country--ethiopia { + align-self: flex-end; + font-size: 14px; +} + +.countries--third .country--ethiopia { + align-self: flex-end; + font-size: 14px; +} +.countries--third .country--uganda { + align-self: flex-start; + font-size: 14px; +} +.countries--third .country--brazil { + align-self: flex-start; + font-size: 14px; +} +.countries--third .country--croatia { + align-self: flex-end; + font-size: 14px; +} +.countries--third .country--laos { + align-self: flex-end; + font-size: 14px; +} + +.countries--fourth { + flex-direction: column; + align-items: flex-start; + font-size: 14px; +} + +.countries--fourth .country--uganda { + align-self: center; + font-size: 14px; +} From f9c0400ba0f87b246d7bced6f0a01765aebf139f Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Mon, 6 Apr 2020 10:13:32 +0100 Subject: [PATCH 21/23] completed ex 16 --- week-2/16-more-flexbox/flexbox.css | 62 ++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css index ed621b793..ad41fd54f 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -3,3 +3,65 @@ } /* Add your own CSS code below */ +.countries--first { + align-items: flex-end; + font-size: 14px; + justify-content: flex-end; +} +/* +======================================= +*/ +.countries--second { + align-items: flex-end; + justify-content: center; + flex-direction: row-reverse; +} +/* +======================================= +*/ +.countries--third { + justify-content: flex-end; +} +.countries--third .country--brazil { + align-self: flex-end; +} + +.countries--third .country--croatia, +.countries--third .country--laos, +.countries--third .country--ethiopia, +.countries--third .country--uganda { + align-self: baseline; +} + +/* +======================================= +*/ +.countries--fourth { + flex-direction: column; + align-items: flex-end; + justify-content: center; +} + +.countries--fourth .country--ethiopia, +.countries--fourth .country--laos { + align-self: center; +} + +/* +======================================= +*/ +.countries--fifth { + flex-direction: column-reverse; + align-items: flex-end; + justify-content: space-between; +} +.countries--fifth .country--ethiopia, +.countries--fifth .country--laos { + align-items: flex-end; +} +.countries--fifth .country--uganda { + align-self: center; +} +.countries--fifth li:nth-child(4) { + order: 5; +} From 4fd33f27c9c24d2fa0ebe3dc36d6c8ca48a96a54 Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Mon, 6 Apr 2020 18:08:54 +0100 Subject: [PATCH 22/23] completed ex 17 --- week-2/17-nav-menu/styles.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css index f04f4c7ba..8069f908c 100644 --- a/week-2/17-nav-menu/styles.css +++ b/week-2/17-nav-menu/styles.css @@ -1 +1,34 @@ /* Write your media queries and flexbox CSS below */ + +.site-header, +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +@media screen and (min-width: 480px) { + .site-header, + nav { + flex-direction: column; + align-items: flex-start; + } +} + +@media screen and (min-width: 700px) { + .site-header, + nav { + flex-direction: row; + display: flex; + justify-content: space-between; + align-items: center; + } +} +@media screen and (min-width: 992) { + .site-header, + nav { + display: flex; + justify-content: space-between; + align-items: center; + } +} From b6e03e7e0aea7dad7e701d755fd08a0f349cbfec Mon Sep 17 00:00:00 2001 From: Aras Sulaiman Date: Tue, 7 Apr 2020 20:05:26 +0100 Subject: [PATCH 23/23] test1 --- week-2/10-media-queries/columns.css | 1 + 1 file changed, 1 insertion(+) diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css index ab45821df..537994103 100644 --- a/week-2/10-media-queries/columns.css +++ b/week-2/10-media-queries/columns.css @@ -8,5 +8,6 @@ @media screen and (min-width: 1200px) { .countries { columns: 3; + background-color: red; } }