diff --git a/package-lock.json b/package-lock.json index c51d81cb..c234c842 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1998,12 +1998,6 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, - "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", - "dev": true - }, "pretty-quick": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-1.11.1.tgz", diff --git a/package.json b/package.json index c9808dbe..f5b52eb1 100644 --- a/package.json +++ b/package.json @@ -5,42 +5,41 @@ "author": "Codi", "license": "ISC", "scripts": { - "1": "live-server --open=week-1/1-parent-child", - "2": "live-server --open=week-1/2-html-attributes", - "3": "live-server --open=week-1/3-semantic-html", - "4": "live-server --open=week-1/4-links-scripts", - "5": "live-server --open=week-1/5-css-selectors", - "6": "live-server --open=week-1/6-css-properties", - "7": "live-server --open=week-1/7-css-box", - "8": "live-server --open=week-1/8-advanced-selectors", - "9": "live-server --open=week-1/9-git-branch", - "10": "live-server --open=week-2/10-media-queries", - "11": "live-server --open=week-2/11-flexbox", - "12": "live-server --open=week-2/12-justify-content", - "13": "live-server --open=week-2/13-align-items", - "14": "live-server --open=week-2/14-order", - "15": "live-server --open=week-2/15-align-self", - "16": "live-server --open=week-2/16-more-flexbox", - "17": "live-server --open=week-2/17-nav-menu", - "18": "live-server --open=week-2/18-git-merge", - "19": "live-server --open=week-3/19-search", - "20": "live-server --open=week-3/20-labels", - "21": "live-server --open=week-3/21-buttons", - "22": "live-server --open=week-3/22-checkout", - "23": "live-server --open=week-3/23-comments", - "24": "live-server --open=week-3/24-dietary", - "25": "live-server --open=week-3/25-shirt-size", - "26": "live-server --open=week-3/26-checkout-groups", - "27": "live-server --open=week-3/27-attributes", - "28": "live-server --open=week-3/28-git-conflict", - "29": "live-server --open=week-3/29-combined-skills", + "1": "live-server --open=part-1/1-parent-child", + "2": "live-server --open=part-1/2-html-attributes", + "3": "live-server --open=part-1/3-semantic-html", + "4": "live-server --open=part-1/4-links-scripts", + "5": "live-server --open=part-1/5-css-selectors", + "6": "live-server --open=part-1/6-css-properties", + "7": "live-server --open=part-1/7-css-box", + "8": "live-server --open=part-1/8-advanced-selectors", + "9": "live-server --open=part-1/9-git-branch", + "10": "live-server --open=part-2/10-media-queries", + "11": "live-server --open=part-2/11-flexbox", + "12": "live-server --open=part-2/12-justify-content", + "13": "live-server --open=part-2/13-align-items", + "14": "live-server --open=part-2/14-order", + "15": "live-server --open=part-2/15-align-self", + "16": "live-server --open=part-2/16-more-flexbox", + "17": "live-server --open=part-2/17-nav-menu", + "18": "live-server --open=part-2/18-git-merge", + "19": "live-server --open=part-3/19-search", + "20": "live-server --open=part-3/20-labels", + "21": "live-server --open=part-3/21-buttons", + "22": "live-server --open=part-3/22-checkout", + "23": "live-server --open=part-3/23-comments", + "24": "live-server --open=part-3/24-dietary", + "25": "live-server --open=part-3/25-shirt-size", + "26": "live-server --open=part-3/26-checkout-groups", + "27": "live-server --open=part-3/27-attributes", + "28": "live-server --open=part-3/28-git-conflict", + "29": "live-server --open=part-3/29-combined-skills", "precommit": "pretty-quick --staged --verbose", "serve": "live-server" }, "devDependencies": { - "live-server": "^1.2.1", "husky": "^0.14.3", - "prettier": "^1.14.2", + "live-server": "^1.2.1", "pretty-quick": "^1.6.0" } } diff --git a/part-1/1-parent-child/index.html b/part-1/1-parent-child/index.html index 458a4cb2..3c8abf1b 100644 --- a/part-1/1-parent-child/index.html +++ b/part-1/1-parent-child/index.html @@ -27,6 +27,7 @@

I can meet on Tuesday and Wednesday after 4.

+ 7:15pm diff --git a/part-1/2-html-attributes/index.html b/part-1/2-html-attributes/index.html index dc861fa4..9d782d4f 100644 --- a/part-1/2-html-attributes/index.html +++ b/part-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! SeeYouSoon Gif

7:38pm
diff --git a/part-1/3-semantic-html/index.html b/part-1/3-semantic-html/index.html index 3640deaf..fc2be570 100644 --- a/part-1/3-semantic-html/index.html +++ b/part-1/3-semantic-html/index.html @@ -1,6 +1,6 @@ - + 3. Semantic HTML - HTML, CSS and Git Exercises @@ -11,10 +11,13 @@ +
-
+ +
Messages
-
+ +
Won
@@ -37,7 +40,9 @@
+
+ diff --git a/part-1/4-links-scripts/index.html b/part-1/4-links-scripts/index.html index 303c7fbd..721f7a32 100644 --- a/part-1/4-links-scripts/index.html +++ b/part-1/4-links-scripts/index.html @@ -1,6 +1,7 @@ + 4. Adding Links and Scripts - HTML, CSS and Git Exercises @@ -33,5 +34,6 @@ + diff --git a/part-1/5-css-selectors/message-backgrounds.css b/part-1/5-css-selectors/message-backgrounds.css index ffe48332..9481178a 100644 --- a/part-1/5-css-selectors/message-backgrounds.css +++ b/part-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; +} \ No newline at end of file diff --git a/part-1/6-css-properties/styles.css b/part-1/6-css-properties/styles.css index ffe48332..b100419b 100644 --- a/part-1/6-css-properties/styles.css +++ b/part-1/6-css-properties/styles.css @@ -1 +1,23 @@ /* Add your CSS code below */ +a { +color: red; +text-decoration: none; +font-weight: bold; +} +.message__time { + font-size: 0.9rem; +} +.message__time.message__time--old { + font-size: 0.9rem; +} + +.message:first-child { + opacity: 40%; +} +.message.message--unread { +border-left: 2px solid blue; +} + +.message__content { + line-height: 2.5rem; +} \ No newline at end of file diff --git a/part-1/7-css-box/styles.css b/part-1/7-css-box/styles.css index 013b94f1..f95b6740 100644 --- a/part-1/7-css-box/styles.css +++ b/part-1/7-css-box/styles.css @@ -3,4 +3,11 @@ border: 1px solid #4491db; border-radius: 4px; background: #fff; + } + + + .country { + padding: 20px; + + } diff --git a/part-1/8-advanced-selectors/readme.md b/part-1/8-advanced-selectors/readme.md index 9ec9beca..93d3a754 100644 --- a/part-1/8-advanced-selectors/readme.md +++ b/part-1/8-advanced-selectors/readme.md @@ -14,3 +14,4 @@ When you complete this exercise it should look like the image below. ![Screenshot of the solution](/images/8/solution.png). _Hint: All of the selectors you need are described [in this guide](https://learn.shayhowe.com/advanced-html-css/complex-selectors/)._ + diff --git a/part-1/8-advanced-selectors/styles.css b/part-1/8-advanced-selectors/styles.css index d35c3c37..47c48a2b 100644 --- a/part-1/8-advanced-selectors/styles.css +++ b/part-1/8-advanced-selectors/styles.css @@ -1 +1,18 @@ -/* Try different box model properties below */ + + +.site-header p { + color: white; +} + +.site-header{ + margin-bottom: -15px; +} + +.site-footer:last-child { + font-size: 12px; + text-align: center; +} + +.message.message--unread:last-child { + box-shadow: 4px 4px 0 #dba944; +} \ No newline at end of file diff --git a/part-2/10-media-queries/columns.css b/part-2/10-media-queries/columns.css index 43e80d23..9f3498b0 100644 --- a/part-2/10-media-queries/columns.css +++ b/part-2/10-media-queries/columns.css @@ -1 +1,12 @@ /* Add your own CSS code below */ + +@media (min-width: 768px) { + .countries { + columns: 2; + } + } + @media (min-width: 1200px) { + .countries { + columns: 3; + } + } diff --git a/part-2/11-flexbox/flexbox.css b/part-2/11-flexbox/flexbox.css index 43e80d23..e8facc5a 100644 --- a/part-2/11-flexbox/flexbox.css +++ b/part-2/11-flexbox/flexbox.css @@ -1 +1,17 @@ /* Add your own CSS code below */ +.countries { + display: flex; +} +.countries.countries--first{ + flex-direction: row-reverse; +} + +.countries.countries--second{ + flex-direction: column; +} + + +.countries.countries--third{ + flex-direction: column-reverse; +} + diff --git a/part-2/12-justify-content/flexbox.css b/part-2/12-justify-content/flexbox.css index 3c4c7ff1..90f450a5 100644 --- a/part-2/12-justify-content/flexbox.css +++ b/part-2/12-justify-content/flexbox.css @@ -7,3 +7,18 @@ } /* Add your own CSS code below */ +.countries.countries--first{ + justify-content: flex-end; + +} +.countries.countries--second{ + justify-content: space-around; +} +.countries.countries--tall.countries--third{ + flex-direction: column; +justify-content:flex-end; +} +.countries.countries--tall.countries--fourth { + flex-direction: column-reverse; + justify-content:space-between; +} \ No newline at end of file diff --git a/part-2/13-align-items/flexbox.css b/part-2/13-align-items/flexbox.css index 3675a0df..8faad298 100644 --- a/part-2/13-align-items/flexbox.css +++ b/part-2/13-align-items/flexbox.css @@ -2,3 +2,22 @@ display: flex; } /* Add your own CSS code below */ + + +.countries.countries--tall.countries--first{ + flex-direction:row ; + align-items:center ; +} + +.countries.countries--tall.countries--second{ + flex-direction: row-reverse; + align-items: flex-end; +} +.countries.countries--tall.countries--third{ + flex-direction: column; + align-items:flex-end; +} +.countries.countries--tall.countries--fourth{ + flex-direction: column-reverse; + align-items: center; +} \ No newline at end of file diff --git a/part-2/14-order/flexbox.css b/part-2/14-order/flexbox.css index ed621b79..de6c7964 100644 --- a/part-2/14-order/flexbox.css +++ b/part-2/14-order/flexbox.css @@ -3,3 +3,25 @@ } /* Add your own CSS code below */ +.countries.countries--first .country:nth-of-type(1){ + order: 4; +} +.countries.countries--second .country:nth-of-type(1){ + order: 3; +} +.countries.countries--second .country:nth-of-type(5){ + order: 4; +} +.countries.countries--third .country:nth-of-type(1){ + order: 5; +} +.countries.countries--third .country:nth-of-type(4){ +order: 1; +} + +.countries.countries--third .country:nth-of-type(3){ +order: 2; +} +.countries.countries--third .country:nth-of-type(2){ + order: 3; + } \ No newline at end of file diff --git a/part-2/15-align-self/flexbox.css b/part-2/15-align-self/flexbox.css index ed621b79..a417430a 100644 --- a/part-2/15-align-self/flexbox.css +++ b/part-2/15-align-self/flexbox.css @@ -3,3 +3,35 @@ } /* Add your own CSS code below */ + +.countries.countries--tall.countries--first .country.country--ethiopia{ + align-self: flex-end; +} +.countries.countries--tall.countries--second{ + align-items: center; +} +.countries.countries--tall.countries--second .country.country--ethiopia{ + align-self: flex-end; +} + +.countries.countries--tall.countries--third { + align-items:flex-end; +} +.countries.countries--tall.countries--third .country.country--brazil{ + align-self: flex-start; +} +.countries.countries--tall.countries--third .country.country--uganda{ + align-self: flex-start; +} + +.countries.countries--tall.countries--fourth { + flex-direction: column; + align-items: flex-start; +} +.countries.countries--tall.countries--fourth .country.country--uganda { + align-self: center; +} + +.countries.countries--tall.countries--fourth .country.country--ethiopia { + align-self:flex-start; +} \ No newline at end of file diff --git a/part-2/16-more-flexbox/flexbox.css b/part-2/16-more-flexbox/flexbox.css index ed621b79..668925fa 100644 --- a/part-2/16-more-flexbox/flexbox.css +++ b/part-2/16-more-flexbox/flexbox.css @@ -3,3 +3,83 @@ } /* Add your own CSS code below */ + +.countries.countries--tall.countries--first{ + align-items: flex-end; + justify-content: flex-end; +} +.countries.countries--tall.countries--second{ + align-items: flex-end; + justify-content: center; +} +.countries.countries--tall.countries--second .country.country--brazil{ + order: 4; + +} +.countries.countries--tall.countries--second .country.country--croatia{ + order:3; + +} +.countries.countries--tall.countries--second .country.country--ethiopia{ + order: 2; + +} +.countries.countries--tall.countries--second .country.country--laos{ + order: 1; + +} + +.countries.countries--tall.countries--third{ + align-items: flex-start; + justify-content:center; +} +.countries.countries--tall.countries--third .country.country--brazil{ + align-self:flex-end; +} + + + + +.countries.countries--tall.countries--fourth { + flex-direction: column; + align-items: flex-end; + justify-content: center; +} +.countries.countries--tall.countries--fourth .country.country--ethiopia{ + align-self: center; + +} +.countries.countries--tall.countries--fourth .country.country--laos{ + align-self: center; + +} + + + +.countries.countries--tall.countries--fifth { + flex-direction: column; + align-items: flex-end; + justify-content: space-evenly; +} + + + +.countries.countries--tall.countries--fifth .country.country--uganda{ +align-self: center; +} + +.countries.countries--fifth .country:nth-of-type(1) { + order: 1; +} +.countries.countries--fifth .country:nth-of-type(2) { + order: 2; +} +.countries.countries--fifth .country:nth-of-type(3) { + order: 3; +} +.countries.countries--tall.countries--fifth .country.country--brazil{ + order: 5; +} +.countries.countries--tall.countries--fifth .country.country--ethiopia{ + order: 1; +} \ No newline at end of file diff --git a/part-2/17-nav-menu/styles.css b/part-2/17-nav-menu/styles.css index f04f4c7b..d9af156b 100644 --- a/part-2/17-nav-menu/styles.css +++ b/part-2/17-nav-menu/styles.css @@ -1 +1,22 @@ /* Write your media queries and flexbox CSS below */ + + +@media (min-width: 480px){ + nav { + display: flex; + } +} +@media (min-width: 700px) { + .site-header{ + display:flex; + + } +} +@media (min-width: 992px) { + header { + display: flex; + justify-content: space-between; + } + + +} \ No newline at end of file diff --git a/part-2/18-git-merge/styles.css b/part-2/18-git-merge/styles.css index 0051cdba..af46a4f7 100644 --- a/part-2/18-git-merge/styles.css +++ b/part-2/18-git-merge/styles.css @@ -1,6 +1,6 @@ /* Add your own CSS code below */ .link { - color: #4491db; + color: orangered; font-weight: 700; text-decoration: none; }