diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html index 458a4cb2..232f07f4 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.

+ 6:48pm diff --git a/week-1/2-html-attributes/index.html b/week-1/2-html-attributes/index.html index dc861fa4..d957d9d0 100644 --- a/week-1/2-html-attributes/index.html +++ b/week-1/2-html-attributes/index.html @@ -23,18 +23,18 @@
Luke

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

7:35pm
Won

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

- 7:38pm + Ok! +

span>
- + + diff --git a/week-1/2-html-attributes/readme.md b/week-1/2-html-attributes/readme.md index 73c51ccc..2a04ab64 100644 --- a/week-1/2-html-attributes/readme.md +++ b/week-1/2-html-attributes/readme.md @@ -4,9 +4,9 @@ Luke has sent a map to iCafe. Using HTML attributes, we can turn this into a lin Complete the following steps in the `index.html` file: -1. In Luke's message, use the `` tag with the `href` attribute to turn the word "iCafe" into a link that can be clicked. -2. In Won's message, use the `` tag with the `src` attribute to show the funny gif in the message. -3. When you are finished, use git to add, commit and push your changes. +2. In Won's message, use the `` tag with the `src` attribute to show the funny gif in the message.href` attribute to turn the word "iCafe" into a link that can be clicked. +hed, use git to add, commit and push your changes. +3. When you are finis1. In Luke's message, use the `` tag with the ` ```shell git add . diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html index 3640deaf..9476a3d6 100644 --- a/week-1/3-semantic-html/index.html +++ b/week-1/3-semantic-html/index.html @@ -11,29 +11,32 @@ +
+
Messages
+
Won
-

Where should we meet later?

- Mar 25, 2018 7:25pm +

should we meet later?

+
Luke

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

'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 +

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

- Mar 25, 2018 7:38pm +
diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html index 303c7fbd..965e9d52 100644 --- a/week-1/4-links-scripts/index.html +++ b/week-1/4-links-scripts/index.html @@ -3,7 +3,8 @@ 4. Adding Links and Scripts - HTML, CSS and Git Exercises - + + @@ -33,5 +34,6 @@
+ diff --git a/week-1/5-css-selectors/index.html b/week-1/5-css-selectors/index.html index cce9c16d..e593a669 100644 --- a/week-1/5-css-selectors/index.html +++ b/week-1/5-css-selectors/index.html @@ -17,18 +17,25 @@
Messages
-
+
Won

Where should we meet later?

-
+
+ +
Luke

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

+
+
+
+
+
Won

@@ -36,6 +43,8 @@

+
+
diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css index ffe48332..cd92103f 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; +} + +.seconde-message{ + background-color: cadetblue; +} +.thrid-message { + background-color: yellow; +} \ No newline at end of file diff --git a/week-1/6-css-properties/readme.md b/week-1/6-css-properties/readme.md index 1db205ee..8da6d180 100644 --- a/week-1/6-css-properties/readme.md +++ b/week-1/6-css-properties/readme.md @@ -8,4 +8,4 @@ There are many CSS properties you can use to change how your website looks. Add 4. Make yesterday's message partially transparent to show it is old. 5. Increase the space between each line in a message. -_Hint: You can use Google to learn new CSS properties. Try searching for color, font-weight, text-decoration, font-size, border, opacity, and line-height._ +_Hint: You can use Google to learn new CSS properties. Try searching for color, font-weight, text-decoration, font-size, border, opacity, and line-height. diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css index ffe48332..b44e37ac 100644 --- a/week-1/6-css-properties/styles.css +++ b/week-1/6-css-properties/styles.css @@ -1 +1,17 @@ /* Add your CSS code below */ +.message__content a { + color:red ; + font-weight: bold; + text-decoration: none; +} +.message__content{ + font-size: 0.9rem; +} +.message--unread{ + border: solid blue; + +} +.message{ + opacity:0.2; + line-height: 300%; +} diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css index 013b94f1..ebd860f7 100644 --- a/week-1/7-css-box/styles.css +++ b/week-1/7-css-box/styles.css @@ -3,4 +3,10 @@ border: 1px solid #4491db; border-radius: 4px; background: #fff; + width:100px; + height:30px ; + margin: 30px 20px 20px 50px; + padding: 5px 5px 5px 5px; + border: solid blue; + } diff --git a/week-1/8-advanced-selectors/index.html b/week-1/8-advanced-selectors/index.html index 24f5ca00..4aaa8c3d 100644 --- a/week-1/8-advanced-selectors/index.html +++ b/week-1/8-advanced-selectors/index.html @@ -38,7 +38,7 @@
Won

- Ok! + OK! - -

+ +
diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css index 3c4c7ff1..b947ba9d 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -7,3 +7,21 @@ } /* Add your own CSS code below */ + .countries--first{ + flex-direction: row; + justify-content: right; + } + + .countries--second { + flex-direction: row; + justify-content: space-around; + } + + .countries--third { + flex-direction: column; + justify-content: flex-end; + } + .countries--fourth{ + flex-direction: column; + justify-content: space-around; + } \ 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 3675a0df..00bd57be 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; + flex-direction: row; +} +.countries--second { + align-items:flex-end; + flex-direction: row-reverse; + +} +.countries--third{ + flex-direction: column; + align-items:flex-end; +} +.countries--fourth { + align-items:center; + + flex-direction:column-reverse; +} \ No newline at end of file diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css index ed621b79..1e6780db 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -2,4 +2,37 @@ display: flex; } -/* Add your own CSS code below */ +.countries--first > .country--brazil { + order: 5; +} +.countries--second > .country--brazil { + order: 4; +} +.countries--second > .country--uganda { + order: 5; +} + +.countries--first > .country--brazil { + order: 5; +} +.countries--second > .country--brazil { + order: 4; +} +.countries--second > .country--uganda { + order: 5; +} +.countries--third > .country--uganda { + order: 1; +} +.countries--third > .country--laos { + order: 2; +} +.countries--third > .country--ethiopia { + order: 3; +} +.countries--third > .country--croatia { + order: 4; +} +.countries--thrid .country--brazil{ + order: 5; +} \ 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 ed621b79..c6221865 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -3,3 +3,34 @@ } /* Add your own CSS code below */ +.countries--first .country--ethiopia{ + align-self:flex-end +} + +.countries--second { + align-items: center; + align-self:flex-end; +} +.countries--second .country--ethiopia{ + align-self: flex-end; +} + +.countries--third { + align-items:flex-start; +} +.countries--third .country--ethiopia{ + align-self:flex-end; +} +.countries--third .country--croatia{ + align-self:flex-end; +} +.countries--third .country--laos{ + align-self: flex-end; +} +.countries--fourth{ + flex-direction: column; + align-items: flex-start +} +.countries--fourth .country--uganda { + 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 ed621b79..ad63910e 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -3,3 +3,44 @@ } /* Add your own CSS code below */ +.countries--first{ + align-items: flex-end; + justify-content: right; +} +.countries--second{ + align-items: flex-end; + justify-content:center; +} +.countries--third{ + align-items: flex-start; + justify-content: right; +} +.countries--third .country--brazil{ + align-self: flex-end; +} +.countries--fourth{ + flex-direction: column; + justify-content: center; + align-items: flex-end; + +} +.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-between; +} +.countries--fifth .country--laos { + order:2; +} +.countries--fifth .country--uganda{ + align-self: center; +} \ 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 f04f4c7b..573a62ec 100644 --- a/week-2/17-nav-menu/styles.css +++ b/week-2/17-nav-menu/styles.css @@ -1 +1,18 @@ /* Write your media queries and flexbox CSS below */ +@media only screen and (min-width: 480px) { + .site-header__nav { + display: flex; + } +} + +@media only screen and (min-width: 700px) { + .site-header { + display: flex; + } +} + +@media only screen and (min-width: 992px) { + .site-header { + 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 0051cdba..08dc3e99 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; }