diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html index 458a4cb..dd4f809 100644 --- a/week-1/1-parent-child/index.html +++ b/week-1/1-parent-child/index.html @@ -20,7 +20,7 @@

Who is available to meet this week to work on our group project?

- 6:48pm + 7:15pm
Habiba
diff --git a/week-1/2-html-attributes/index.html b/week-1/2-html-attributes/index.html index dc861fa..98ca33e 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
diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html index 3640dea..1dc420a 100644 --- a/week-1/3-semantic-html/index.html +++ b/week-1/3-semantic-html/index.html @@ -12,32 +12,32 @@
-
+
-
-
-
Won
+ +
+
+
Won

Where should we meet later?

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

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

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

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

- Mar 25, 2018 7:38pm +
class="message__time">Mar 25, 2018 7:38pm
-
+
- + - + \ No newline at end of file diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html index 303c7fb..c643604 100644 --- a/week-1/4-links-scripts/index.html +++ b/week-1/4-links-scripts/index.html @@ -4,6 +4,7 @@ 4. Adding Links and Scripts - HTML, CSS and Git Exercises + @@ -33,5 +34,6 @@
+ diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css index ffe4833..481f839 100644 --- a/week-1/5-css-selectors/message-backgrounds.css +++ b/week-1/5-css-selectors/message-backgrounds.css @@ -1 +1,11 @@ /* Add your CSS code below */ +#first-message{ + background-color: red; +} + +article{ + background-color: cadetblue; +} +.message--latest{ + background-color: yellow; +} \ No newline at end of file diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index ffe4833..aea85a0 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -1 +1,22 @@ -/* Add your CSS code below */ +/* add your CSS code below */ +.link{ + color: red; + font-weight: bold; + text-decoration: none; +} + +.message__time{ + font-size: 0.9rem; +} + +.message--unread{ + border-left: 3px solid blue; +} + +.message:first-child { + opacity: 50%; +} + +.message__content { + line-height: 2; +} diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 013b94f..94e9b78 100644 --- a/week-1/7-css-box/styles.css +++ b/week-1/7-css-box/styles.css @@ -3,4 +3,11 @@ border: 1px solid #4491db; border-radius: 4px; background: #fff; + padding: 6px; } + +.country { + padding: 20px; + width: 300px; + height: 30px; +} \ No newline at end of file diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css index d35c3c3..96a2aa6 100644 --- a/week-1/8-advanced-selectors/styles.css +++ b/week-1/8-advanced-selectors/styles.css @@ -1 +1,14 @@ /* Try different box model properties below */ +.site-header p:nth-child(2) { + color: white; + margin-bottom: 0; +} + + .site-footer { + font-size: 12px; + text-align: center; +} + + .message:last-child { + box-shadow: 4px 4px 0 #dba944; +} \ No newline at end of file diff --git a/week-1/9-git-branch/styles.css b/week-1/9-git-branch/styles.css index 0051cdb..bc4104b 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 43e80d2..eeb5e5b 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 (min-width:768px){ + .countires{ + columns: 2; + } +} + +@media (min-width:1200px){ + .countires{ + columns: 3; + } +} \ No newline at end of file diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css index 43e80d2..2c844c0 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -1 +1,14 @@ /* Add your own CSS code below */ +.countries--first{ +display: flex; +flex-direction: row-reverse; +} + +.countries--second{ + flex-direction: column; +} + +.countries--third{ + display: flex; + flex-direction:column-reverse; +} \ No newline at end of file diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 3c4c7ff..fc82a18 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -7,3 +7,33 @@ } /* Add your own CSS code below */ + +.countries--first{ + justify-content: end; + +} + +.countries--second{ + justify-content: space-around; + + +} + +.countries--second .country{ + padding: 0.5em; + font-size: 1em; + +} +.countries--third{ + display: flex; + flex-direction: column; + justify-content: flex-end; + +} + +.countries--fourth{ + display: flex; + flex-direction: column-reverse; + justify-content: space-between; + +} \ No newline at end of file diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index 3675a0d..a9e6115 100644 --- a/week-2/13-align-items/flexbox.css +++ b/week-2/13-align-items/flexbox.css @@ -2,3 +2,21 @@ display: flex; } /* Add your own CSS code below */ +.countries--first{ + align-items: center; +} +.countries--second{ + align-items: flex-end; + flex-direction: row-reverse; +} + +.countries--third { + flex-direction: column-reverse; + justify-content: flex-end; + 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 ed621b7..8bac97d 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -3,3 +3,22 @@ } /* Add your own CSS code below */ +.countries--first { + align-items: center; +} + +.countries--second { + align-items: flex-end; + flex-direction: row-reverse; +} + +.countries--third { + flex-direction: column-reverse; + justify-content: flex-end; + align-items: flex-end; +} + +.countries--fourth { + flex-direction: column-reverse; + align-items: center; +} \ No newline at end of file diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index ed621b7..886e21b 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -3,3 +3,32 @@ } /* Add your own CSS code below */ +.countries--first .country--ethiopia { + align-self: flex-end; +} + +.countries--second { + align-items: center; +} + +.countries--second li:nth-child(3) { + align-self: end; +} + +.countries--third { + align-items: flex-end; +} + +.countries--third li:first-child, +li:last-child { + align-self: baseline; +} + +.countries--fourth { + flex-direction: column; + align-items: baseline; +} + +.countries--fourth li:last-child { + align-self: center; +} \ No newline at end of file diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css index ed621b7..f358a78 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -3,3 +3,53 @@ } /* Add your own CSS code below */ +.countries--first { + align-items: end; + justify-content: end; +} + +.countries--second { + align-items: flex-end; + justify-content: center; + flex-direction: row-reverse; + align-self: center; +} + +.countries--third { + align-items: baseline; + justify-content: center; +} + +.countries--third li:first-child { + align-self: flex-end; +} + +.countries--fourth { + flex-direction: column; + align-items: end; + justify-content: center; +} + +.countries--fourth .country--ethiopia { + align-self: center; +} + +.countries--fourth .country--laos { + align-self: center; +} + +.countries--fifth { + align-items: end; + justify-content: space-around; + flex-direction: column-reverse; +} + +.countries--fifth .country--uganda { + order: 4; + align-self: center; +} + +.countries--fifth .country--laos { + order: 5; + align-self: flex-end; +} \ No newline at end of file diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css index f04f4c7..227be74 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 screen and (min-width: 480px) { + .site-header__nav { + display: flex; + flex-direction: row; + } + } + + @media screen and (min-width: 700px) { + .site-header { + display: flex; + align-items: center; + } + .site-header__nav { + display: flex; + flex-direction: row; + } + } + + @media screen and (min-width: 992px) { + .site-header { + justify-content: space-around; + } + } \ No newline at end of file diff --git a/week-3/19-search/index.html b/week-3/19-search/index.html index d94ec98..d8ad4d6 100644 --- a/week-3/19-search/index.html +++ b/week-3/19-search/index.html @@ -11,8 +11,10 @@
-

Delete this line and add your form.

-
+
+ +
+
diff --git a/week-3/20-labels/index.html b/week-3/20-labels/index.html index ccdc817..1105b25 100644 --- a/week-3/20-labels/index.html +++ b/week-3/20-labels/index.html @@ -13,7 +13,8 @@
- + +
diff --git a/week-3/21-buttons/index.html b/week-3/21-buttons/index.html index ff87846..f1760e0 100644 --- a/week-3/21-buttons/index.html +++ b/week-3/21-buttons/index.html @@ -14,9 +14,9 @@
- +
- + \ No newline at end of file diff --git a/week-3/22-checkout/index.html b/week-3/22-checkout/index.html index 4c42ebb..68dd891 100644 --- a/week-3/22-checkout/index.html +++ b/week-3/22-checkout/index.html @@ -38,7 +38,16 @@

Your Shopping Basket

Checkout

- + + +

+ + +

+

+ + +

diff --git a/week-3/22-checkout/readme.md b/week-3/22-checkout/readme.md index a430436..14baa8d 100644 --- a/week-3/22-checkout/readme.md +++ b/week-3/22-checkout/readme.md @@ -7,7 +7,7 @@ In this exercise you will add forms to collect checkout information. Follow the 1. Open `index.html` and find the line that says ``. 2. Add an `` field for the customer's name below this line. It should be a `text` field with a `name` attribute set to `customer-name`. 3. Add an `` field for the customer's email address. It should be an `email` field with a `name` attribute set to `customer-email`. -4. Add an `` field for the customer's phone number. It should be a `tel` field with a `name` attribute set to `customer-phone`. +4. Add an `` field for the customer's phone number. It should be a `tel` field with a `name` attribute set to `customer-email`. 5. Did you remember to add a `