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/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index ffe483325..e381c84a1 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -1 +1,16 @@ /* Add your CSS code below */ +.messages a { + color: red; + text-decoration: none; + font-weight: bold; +} +.message__time { + font-size: 0.9rem; +} + +.message--unread { + border-left: blue solid 4px; +} +.message { + line-height: 300%; +} diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 013b94f1e..dbe4269ad 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; } +.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-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..bd6339320 100644 --- a/week-2/10-media-queries/columns.css +++ b/week-2/10-media-queries/columns.css @@ -1 +1,13 @@ /* 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 bcdd5e39a..53d9df26a 100644 --- a/week-2/10-media-queries/index.html +++ b/week-2/10-media-queries/index.html @@ -6,7 +6,11 @@ 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..9d0acd174 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -1 +1,9 @@ /* Add your own CSS code below */ +.countries--first { + display: flex; + flex-direction: row-reverse; +} +.countries--third { + display: flex; + flex-direction: column-reverse; +} diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 3c4c7ff18..9d4b74432 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -7,3 +7,24 @@ } /* 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/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index 3675a0df3..f7e1ef66c 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; +} + +.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/14-order/flexbox.css b/week-2/14-order/flexbox.css index ed621b793..3c1b7a7b9 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -3,3 +3,19 @@ } /* Add your own CSS code below */ +.country--brazil { + order: 1; +} + +.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..80f0a0213 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -3,3 +3,75 @@ } /* Add your own CSS code below */ +.country--ethiopia { + align-items: center; + 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; +} +.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; +} + +@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..a2339596d 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -3,3 +3,45 @@ } /* 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: space-around; +} + +.countries--fifth .country--laos { + align-items: flex-start; + order: 1; +} +.countries--fifth .country--uganda { + align-self: center; +} diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css index f04f4c7ba..453ce4125 100644 --- a/week-2/17-nav-menu/styles.css +++ b/week-2/17-nav-menu/styles.css @@ -1 +1,24 @@ /* Write your media queries and flexbox CSS below */ + +@media (min-width: 480px) { + .site-header__nav { + display: flex; + align-items: center; + } +} + +@media (min-width: 700px) { + .site-header { + display: flex; + align-items: center; + align-items: center; + } +} + +@media (min-width: 992px) { + .site-header { + display: flex; + align-items: center; + justify-content: space-between; + } +} \ No newline at end of file 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; } 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.

+
+ +
diff --git a/week-3/22-checkout/index.html b/week-3/22-checkout/index.html index 8d81ffb13..32dd23082 100644 --- a/week-3/22-checkout/index.html +++ b/week-3/22-checkout/index.html @@ -37,8 +37,25 @@

Your Shopping Basket

Checkout

+ +
+ + +
+ +
+ + +
+
+ + + +
+ +
diff --git a/week-3/23-comments/index.html b/week-3/23-comments/index.html index 110a5027b..99d38ca47 100644 --- a/week-3/23-comments/index.html +++ b/week-3/23-comments/index.html @@ -31,7 +31,14 @@

Our t-shirts are amazing!

Add your comments and let us know what you think!

+
+ + + +
+ +
diff --git a/week-3/24-dietary/index.html b/week-3/24-dietary/index.html index 6bc254f7c..0a2dde6d4 100644 --- a/week-3/24-dietary/index.html +++ b/week-3/24-dietary/index.html @@ -19,7 +19,33 @@

CodeYourFuture Summit

- +
+ please select all of your dietary + + + + + + +