From 6b71a2913a29fa5b053f684938fb3f20e048209e Mon Sep 17 00:00:00 2001 From: Reyam Date: Thu, 14 Feb 2019 20:17:01 +0000 Subject: [PATCH 01/15] complete exercises 5 --- .../5-css-selectors/message-backgrounds.css | 12 +++++++ week-1/9-git-branch/styles.css | 2 +- week-2/10-media-queries/columns.css | 11 ++++++ week-2/10-media-queries/index.html | 2 +- week-2/11-flexbox/flexbox.css | 11 ++++++ week-2/12-justify-content/flexbox.css | 20 +++++++++++ week-2/14-order/flexbox.css | 18 ++++++++++ week-2/15-align-self/flexbox.css | 36 +++++++++++++++++++ week-2/18-git-merge/styles.css | 2 +- 9 files changed, 111 insertions(+), 3 deletions(-) diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css index ffe483325..a3249e163 100644 --- a/week-1/5-css-selectors/message-backgrounds.css +++ b/week-1/5-css-selectors/message-backgrounds.css @@ -1 +1,13 @@ /* Add your CSS code below */ + +#first-message { + background-color: red; +} + +.messages article { + background-color: cadetblue; +} + +.message--latest { + background-color: yellow; +} diff --git a/week-1/9-git-branch/styles.css b/week-1/9-git-branch/styles.css index 0051cdbaf..bc4104b39 100644 --- a/week-1/9-git-branch/styles.css +++ b/week-1/9-git-branch/styles.css @@ -1,6 +1,6 @@ /* Add your own CSS code below */ .link { - color: #4491db; + color: green; font-weight: 700; text-decoration: none; } diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css index 43e80d23c..4f94515b3 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: 3; + } +} diff --git a/week-2/10-media-queries/index.html b/week-2/10-media-queries/index.html index a7061e200..162f9e014 100644 --- a/week-2/10-media-queries/index.html +++ b/week-2/10-media-queries/index.html @@ -6,7 +6,7 @@ 10. Media Queries - HTML, CSS and Git Exercises - + diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css index 43e80d23c..ed28213ad 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -1 +1,12 @@ /* Add your own CSS code below */ +.countries--first { + display: flex; + flex-direction: row-reverse; +} +.countries--third { + display: flex; + flex-direction: column-reverse; +} +.countries--third li { + color: red; +} diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 3c4c7ff18..5528234cd 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -7,3 +7,23 @@ } /* Add your own CSS code below */ + +.countries--first { + display: flex; + justify-content: flex-end; +} +.countries--second { + display: flex; + justify-content: space-around; +} +.countries--third { + display: flex; + flex-direction: column; + justify-content: flex-end; +} +.countries--fourth { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + justify-content: space-around; +} diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css index ed621b793..4a5bfbacd 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -3,3 +3,21 @@ } /* Add your own CSS code below */ +.country--brazil { + order: 1; +} +.country--brazil { + order: 2; +} +.countries--second .country--uganda { + order: 3; +} +.countries--third .country--brazil { + order: 4; +} +.countries--third .country--uganda { + order: -1; +} +.countries--third .country-croatia { + order: 1; +} diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index ed621b793..8a4951344 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -3,3 +3,39 @@ } /* Add your own CSS code below */ +.country--ethiopia { + align-items: center; + align-self: flex-end; +} + +.countries--second { + align-items: center; + flex-direction: row; +} + +.countries--third { + align-items: center; +} + +.country--croatia { + align-self: flex-end; +} +.country--laos { + align-self: flex-end; +} +.countries--fourth { + flex-direction: column; + align-items: flex-start; +} +.countries--fourth .country--croatia { + align-self: flex-start; +} +.countries--fourth .country--ethiopia { + align-self: flex-start; +} +.countries--fourth .country--laos { + align-self: flex-start; +} +.countries--fourth .country--uganda { + align-self: center; +} diff --git a/week-2/18-git-merge/styles.css b/week-2/18-git-merge/styles.css index 0051cdbaf..b0988b252 100644 --- a/week-2/18-git-merge/styles.css +++ b/week-2/18-git-merge/styles.css @@ -1,6 +1,6 @@ /* Add your own CSS code below */ .link { - color: #4491db; + color: orange; font-weight: 700; text-decoration: none; } From 87c264b76645894712b52655aa6c5d3a3c326ccd Mon Sep 17 00:00:00 2001 From: Reyam Date: Sat, 16 Feb 2019 11:38:59 +0000 Subject: [PATCH 02/15] exersis 19 --- week-1/6-css-properties/styles.css | 11 ++++++++ week-1/7-css-box/styles.css | 7 +++++ week-1/8-advanced-selectors/styles.css | 14 ++++++++++ week-2/13-align-items/flexbox.css | 19 +++++++++++++ week-2/15-align-self/flexbox.css | 35 ++++++++++++++++++++++++ week-2/16-more-flexbox/flexbox.css | 38 ++++++++++++++++++++++++++ week-2/17-nav-menu/index.html | 12 ++------ week-3/19-search/index.html | 4 ++- 8 files changed, 129 insertions(+), 11 deletions(-) diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index ffe483325..b2affe696 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -1 +1,12 @@ /* Add your CSS code below */ +.messages a { + color: red; + text-decoration: none; +} +.message__time { + font-size: 0.9rem; +} + +.message--unread { + border-left: blue solid 4px; +} diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 695182f63..878377ec1 100644 --- a/week-1/7-css-box/styles.css +++ b/week-1/7-css-box/styles.css @@ -7,3 +7,10 @@ margin: 0.5em; background: #fff; } +.countries .country { + color: white; + background-color: grey; + padding: 5px; + margin: 10px; + border: 1px solid red; +} diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css index d35c3c371..f2535f44a 100644 --- a/week-1/8-advanced-selectors/styles.css +++ b/week-1/8-advanced-selectors/styles.css @@ -1 +1,15 @@ /* Try different box model properties below */ + +.site-header p { + color: white; +} +.site-header { + margin-bottom: -5px; +} +.site-footer p { + font-size: 12px; + text-align: center; +} +.messages .message:last-child { + box-shadow: 4px 4px 0 #dba944; +} diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index 3675a0df3..e52181344 100644 --- a/week-2/13-align-items/flexbox.css +++ b/week-2/13-align-items/flexbox.css @@ -2,3 +2,22 @@ display: flex; } /* Add your own CSS code below */ +.countries--first { + flex-direction: row; + align-items: center; +} + +.countries--second { + flex-direction: row-reverse; + align-items: flex-end; +} + +.countries--third { + flex-direction: column; + align-items: flex-end; +} + +.countries--fourth { + flex-direction: column-reverse; + align-items: center; +} diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index 8a4951344..61dbcb269 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -8,14 +8,38 @@ align-self: flex-end; } +.countries--first .country--croatia { + align-items: center; + align-self: flex-start; +} +.countries--first .country--laos { + align-self: flex-start; + align-items: center; +} + .countries--second { align-items: center; flex-direction: row; } +.countries--second .country--croatia { + align-self: center; + align-items: flex-start; +} + +.countries--second .country--laos { + align-self: center; + align-items: flex-start; +} .countries--third { align-items: center; } +.countries--third .country--brazil { + align-self: flex-start; +} +.countries--third .country--uganda { + align-self: flex-start; +} .country--croatia { align-self: flex-end; @@ -39,3 +63,14 @@ .countries--fourth .country--uganda { align-self: center; } +@media screen and (min-width: 768px) { + .countries { + columns: 2; + } +} + +@media screen and (min-width: 1200px) { + .countries { + columns: 2; + } +} diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css index ed621b793..0faa0ed2f 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -3,3 +3,41 @@ } /* Add your own CSS code below */ + +.countries--first { + flex-direction: row; + align-items: flex-end; + justify-content: flex-end; +} +.countries--second { + flex-direction: row-reverse; + align-items: flex-end; +} +.countries--third { + align-items: flex-start; +} +.countries--third .country--brazil { + align-self: flex-end; +} + +.countries--fourth { + flex-direction: column; + align-items: flex-end; + justify-content: center; +} + +.countries--fourth .country--ethiopia { + align-self: center; +} +.countries--fourth .country--laos { + align-self: center; +} +.countries--fifth { + flex-direction: column-reverse; + align-items: flex-end; + justify-content: center; +} + +.countries--fifth .country--laos { + align-items: flex-start; +} diff --git a/week-2/17-nav-menu/index.html b/week-2/17-nav-menu/index.html index 3fb9dd2f0..a2777139b 100644 --- a/week-2/17-nav-menu/index.html +++ b/week-2/17-nav-menu/index.html @@ -13,19 +13,11 @@
diff --git a/week-3/19-search/index.html b/week-3/19-search/index.html index d94ec98dd..e7544dbd3 100644 --- a/week-3/19-search/index.html +++ b/week-3/19-search/index.html @@ -11,7 +11,9 @@
-

Delete this line and add your form.

+
+ +
From da90b7406a9c1bc06c030d82d1284001950078a9 Mon Sep 17 00:00:00 2001 From: Reyam Date: Sat, 16 Feb 2019 12:31:08 +0000 Subject: [PATCH 03/15] exe 23/22 --- week-3/22-checkout/index.html | 108 ++++++++++++++++++---------------- week-3/23-comments/index.html | 28 ++++----- 2 files changed, 72 insertions(+), 64 deletions(-) diff --git a/week-3/22-checkout/index.html b/week-3/22-checkout/index.html index b652002a3..f0a1ac9f6 100644 --- a/week-3/22-checkout/index.html +++ b/week-3/22-checkout/index.html @@ -1,53 +1,61 @@ - - - - - 22 - Checkout Form - HTML, CSS and Git Exercises - - - - - -
-
- -
-

Your Shopping Basket

- - - - - - - - - - - - - -
ProductSizeUnitsPrice
-
- CodeYourFuture t-shirts in black -

CodeYourFuture t-shirt, black

-
- 		Medium1£10.00
-
- -
-

Checkout

-
- - - - -
-
- -
-
- - + + + + 22 - Checkout Form - HTML, CSS and Git Exercises + + + + + +
+
+
+

Your Shopping Basket

+ + + + + + + + + + + + + +
ProductSizeUnitsPrice
+
+ CodeYourFuture t-shirts in black +

CodeYourFuture t-shirt, black

+
+ 		Medium1£10.00
+
+ +
+

Checkout

+
+
+ + +
+ +
+ + +
+
+ + + +
+ + +
+
+
+
+ diff --git a/week-3/23-comments/index.html b/week-3/23-comments/index.html index eea184d12..40d3e12a2 100644 --- a/week-3/23-comments/index.html +++ b/week-3/23-comments/index.html @@ -14,27 +14,27 @@

Our t-shirts are amazing!

- Lorem ipsum dolor sit amet, aliquam laoreet quaestio in eum, ea - tation dignissim vix. Ei nec audire vocibus corrumpit. Ut quo - facilisis adipiscing, malis sensibus abhorreant vel ei. Hinc - appareat dissentias pri at, impedit propriae ea eos. Modus feugait - te duo, sit noluisse salutatus maiestatis ea. Iisque volumus duo ex, - deleniti aliquando quo ne. + Lorem ipsum dolor sit amet, aliquam laoreet quaestio in eum, ea tation dignissim vix. Ei + nec audire vocibus corrumpit. Ut quo facilisis adipiscing, malis sensibus abhorreant vel + ei. Hinc appareat dissentias pri at, impedit propriae ea eos. Modus feugait te duo, sit + noluisse salutatus maiestatis ea. Iisque volumus duo ex, deleniti aliquando quo ne.

- Eos nibh maiorum voluptatibus ea, an labitur phaedrum sed, vis justo - option intellegat ad. Vel ut ferri dolores. Ad hinc moderatius - scriptorem vim, utamur electram ad est, sed no dicit homero - dissentias. Usu qualisque concludaturque id, prodesset - concludaturque eu usu, ea est regione platonem. Et rebum - theophrastus per, dicta aliquam adipisci pri cu, ne quem justo mea. + Eos nibh maiorum voluptatibus ea, an labitur phaedrum sed, vis justo option intellegat + ad. Vel ut ferri dolores. Ad hinc moderatius scriptorem vim, utamur electram ad est, sed + no dicit homero dissentias. Usu qualisque concludaturque id, prodesset concludaturque eu + usu, ea est regione platonem. Et rebum theophrastus per, dicta aliquam adipisci pri cu, + ne quem justo mea.

Add your comments and let us know what you think!

- - +
+ + + +
From a51fc14a4993607fc88cc4ad7a417a6fa33fc2b6 Mon Sep 17 00:00:00 2001 From: Reyam Date: Sat, 16 Feb 2019 12:41:19 +0000 Subject: [PATCH 04/15] commit 24 --- week-3/23-comments/index.html | 5 ----- week-3/24-dietary/index.html | 32 +++++++++++++++++++++++++++++--- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/week-3/23-comments/index.html b/week-3/23-comments/index.html index 40d3e12a2..d1ed44fda 100644 --- a/week-3/23-comments/index.html +++ b/week-3/23-comments/index.html @@ -35,11 +35,6 @@

Our t-shirts are amazing!

-
- - - -
diff --git a/week-3/24-dietary/index.html b/week-3/24-dietary/index.html index e05cf8ade..0a2dde6d4 100644 --- a/week-3/24-dietary/index.html +++ b/week-3/24-dietary/index.html @@ -14,12 +14,38 @@

CodeYourFuture Summit

- Let us know if you have any dietary requirements so that we can - provide you with the best, yummy food. + Let us know if you have any dietary requirements so that we can provide you with the best, + yummy food.

- +
+ please select all of your dietary + + + + + + +
From e8e4ff452d1646674d9bbf65e2609f3c37c84a5a Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 14:31:39 +0000 Subject: [PATCH 05/15] commit 6 --- week-1/6-css-properties/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index b2affe696..e381c84a1 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -2,6 +2,7 @@ .messages a { color: red; text-decoration: none; + font-weight: bold; } .message__time { font-size: 0.9rem; @@ -10,3 +11,6 @@ .message--unread { border-left: blue solid 4px; } +.message { + line-height: 300%; +} From 60625be340cfb654fe0f8e886f63f6cf6662c524 Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 14:32:55 +0000 Subject: [PATCH 06/15] advanced selectors --- week-1/8-advanced-selectors/index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/week-1/8-advanced-selectors/index.html b/week-1/8-advanced-selectors/index.html index 802c7d70e..24f5ca00b 100644 --- a/week-1/8-advanced-selectors/index.html +++ b/week-1/8-advanced-selectors/index.html @@ -23,9 +23,7 @@

Where should we meet tomorrrow?

- +
Luke
From 7f7d8c83319fe07ff0c11e8c6a86ca081139a663 Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 19:36:02 +0000 Subject: [PATCH 07/15] commit 10 media queries --- 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 4f94515b3..bd6339320 100644 --- a/week-2/10-media-queries/columns.css +++ b/week-2/10-media-queries/columns.css @@ -5,6 +5,7 @@ columns: 2; } } + @media screen and (min-width: 1200px) { .countries { columns: 3; From 9b12093576685a4ba3bc4973ba89e31cb9cd164e Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 19:42:18 +0000 Subject: [PATCH 08/15] commit flex box 11 --- week-2/11-flexbox/flexbox.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css index ed28213ad..9d0acd174 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -7,6 +7,3 @@ display: flex; flex-direction: column-reverse; } -.countries--third li { - color: red; -} From ab989c125a077a4fa81dc525d595112fe956a839 Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 19:48:53 +0000 Subject: [PATCH 09/15] commit 12 justify content --- week-2/12-justify-content/flexbox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 5528234cd..9d4b74432 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -16,6 +16,7 @@ display: flex; justify-content: space-around; } + .countries--third { display: flex; flex-direction: column; From a905f0f2c560246cc7968830b9cd7e4dd910056b Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 19:51:58 +0000 Subject: [PATCH 10/15] commit align items 13 --- week-2/13-align-items/flexbox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index e52181344..f7e1ef66c 100644 --- a/week-2/13-align-items/flexbox.css +++ b/week-2/13-align-items/flexbox.css @@ -2,6 +2,7 @@ display: flex; } /* Add your own CSS code below */ + .countries--first { flex-direction: row; align-items: center; From 4168052abae9ade7ca936931ef668f8070d66609 Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 19:59:46 +0000 Subject: [PATCH 11/15] commit order 14 --- week-2/14-order/flexbox.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css index 4a5bfbacd..3c1b7a7b9 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -6,9 +6,7 @@ .country--brazil { order: 1; } -.country--brazil { - order: 2; -} + .countries--second .country--uganda { order: 3; } From 302d08a93312374a4c19380128433aca3b389adf Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 20:02:34 +0000 Subject: [PATCH 12/15] commit align self 15 --- week-2/15-align-self/flexbox.css | 1 + 1 file changed, 1 insertion(+) diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index 61dbcb269..80f0a0213 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -63,6 +63,7 @@ .countries--fourth .country--uganda { align-self: center; } + @media screen and (min-width: 768px) { .countries { columns: 2; From 6b494a9078824a992217cf17919a6fc8a9d1d66b Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 20:09:04 +0000 Subject: [PATCH 13/15] commit more flexbox 16 --- week-2/16-more-flexbox/flexbox.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css index 0faa0ed2f..a2339596d 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -35,9 +35,13 @@ .countries--fifth { flex-direction: column-reverse; align-items: flex-end; - justify-content: center; + justify-content: space-around; } .countries--fifth .country--laos { align-items: flex-start; + order: 1; +} +.countries--fifth .country--uganda { + align-self: center; } From 06dd06af1b9891ce5a7fb25dde71179c0b0ff5ce Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 20:15:20 +0000 Subject: [PATCH 14/15] commit nav menu 17 --- week-2/17-nav-menu/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css index 7f12598d1..1d333c7ec 100644 --- a/week-2/17-nav-menu/styles.css +++ b/week-2/17-nav-menu/styles.css @@ -10,6 +10,7 @@ .site-header { display: flex; align-items: center; + align-items: center; } } From 88601a489c8bed832da097839e7e5a43cccd87d3 Mon Sep 17 00:00:00 2001 From: Reyam Date: Tue, 19 Feb 2019 20:20:33 +0000 Subject: [PATCH 15/15] commit orange links --- week-2/18-git-merge/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/week-2/18-git-merge/styles.css b/week-2/18-git-merge/styles.css index 0051cdbaf..736fda2c3 100644 --- a/week-2/18-git-merge/styles.css +++ b/week-2/18-git-merge/styles.css @@ -1,6 +1,6 @@ /* Add your own CSS code below */ .link { - color: #4491db; + color: darkorange; font-weight: 700; text-decoration: none; }