Won
diff --git a/part-1/5-css-selectors/message-backgrounds.css b/part-1/5-css-selectors/message-backgrounds.css
index ffe48332..bc9ae10c 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;
+}
+.message--latest {
+ background-color: yellow;
+}
+
+.second--message {
+ background-color: cadetblue;
+}
diff --git a/part-1/6-css-properties/index.html b/part-1/6-css-properties/index.html
index 8e2de7ba..eb051205 100644
--- a/part-1/6-css-properties/index.html
+++ b/part-1/6-css-properties/index.html
@@ -19,7 +19,7 @@
Won
- Where should we meet tomorrrow?
+ Where should we meet tomorrrow ?
Yesterday, 7:25pm
diff --git a/part-1/6-css-properties/styles.css b/part-1/6-css-properties/styles.css
index ffe48332..4469ece3 100644
--- a/part-1/6-css-properties/styles.css
+++ b/part-1/6-css-properties/styles.css
@@ -1 +1,22 @@
/* Add your CSS code below */
+.messages {
+ text-decoration: none;
+ color: red;
+ font-weight: bold;
+ font-size: 0.9rem;
+}
+a,
+a:hover,
+a:focus,
+a:active {
+ text-decoration: none;
+ color: inherit;
+}
+div.message.message--unread {
+ border-left-style: solid;
+ border-left-color: coral;
+}
+time.message__time.message__time--old {
+ background-color: red;
+ opacity: 0.2;
+}
diff --git a/part-1/7-css-box/index.html b/part-1/7-css-box/index.html
index 1e9fd37f..814214ae 100644
--- a/part-1/7-css-box/index.html
+++ b/part-1/7-css-box/index.html
@@ -14,7 +14,7 @@
-
+
Afghanistan
Albania
Algeria
diff --git a/part-1/7-css-box/styles.css b/part-1/7-css-box/styles.css
index 013b94f1..6e5bca93 100644
--- a/part-1/7-css-box/styles.css
+++ b/part-1/7-css-box/styles.css
@@ -1,6 +1,16 @@
/* Try different box model properties below */
.pages__page {
- border: 1px solid #4491db;
- border-radius: 4px;
+ border: 3px solid #4491db;
+ border-radius: 8px;
background: #fff;
}
+.country {
+ margin: 2px 0;
+ padding: 0.6rem;
+ background: #fff;
+}
+.countries {
+ margin: 4;
+ padding: 1rem;
+ list-style: none;
+}
diff --git a/part-1/8-advanced-selectors/styles.css b/part-1/8-advanced-selectors/styles.css
index d35c3c37..a5e549d9 100644
--- a/part-1/8-advanced-selectors/styles.css
+++ b/part-1/8-advanced-selectors/styles.css
@@ -1 +1,10 @@
/* Try different box model properties below */
+.site-header p {
+ color: white;
+ margin-bottom: 0rem;
+}
+.site-footer p {
+ font-size: 12px;
+ text-align: center;
+ box-shadow: 4px 4px 0 #dba944;
+}
diff --git a/part-2/10-media-queries/columns.css b/part-2/10-media-queries/columns.css
index 43e80d23..622712b2 100644
--- a/part-2/10-media-queries/columns.css
+++ b/part-2/10-media-queries/columns.css
@@ -1 +1,14 @@
/* Add your own CSS code below */
+[class*="columns-"] {
+ width: 100%;
+}
+@media screen and (min-width: 768px) {
+ .countries {
+ columns: 2;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .countries {
+ columns: 3;
+ }
+}
diff --git a/part-2/11-flexbox/flexbox.css b/part-2/11-flexbox/flexbox.css
index 43e80d23..d8ef32ef 100644
--- a/part-2/11-flexbox/flexbox.css
+++ b/part-2/11-flexbox/flexbox.css
@@ -1 +1,9 @@
/* Add your own CSS code below */
+.countries--first {
+ flex-direction: row-reverse;
+ display: flex;
+}
+.countries--third {
+ flex-direction: column-reverse;
+ display: flex;
+}
diff --git a/part-2/12-justify-content/flexbox.css b/part-2/12-justify-content/flexbox.css
index 3c4c7ff1..59855348 100644
--- a/part-2/12-justify-content/flexbox.css
+++ b/part-2/12-justify-content/flexbox.css
@@ -7,3 +7,17 @@
}
/* Add your own CSS code below */
+.countries--first {
+ justify-content: right;
+}
+.countries--second {
+ justify-content: space-around;
+}
+.countries--tall.countries--third {
+ justify-content: inherit;
+ flex-direction: column-reverse;
+}
+.countries--tall.countries--fourth {
+ justify-content: space-around;
+ flex-direction: column-reverse;
+}
diff --git a/part-2/13-align-items/flexbox.css b/part-2/13-align-items/flexbox.css
index 3675a0df..d01a38c0 100644
--- a/part-2/13-align-items/flexbox.css
+++ b/part-2/13-align-items/flexbox.css
@@ -1,4 +1,26 @@
.countries {
display: flex;
}
+
+.countries--second .country {
+ padding: 0.5em;
+}
+
/* Add your own CSS code below */
+.countries--first {
+ align-items: center;
+}
+.countries--second {
+ align-items: flex-end;
+ justify-content: right;
+ flex-direction: row-reverse;
+ font-size: larger;
+}
+.countries--tall.countries--third {
+ flex-direction: column;
+ align-items: flex-end;
+}
+.countries--tall.countries--fourth {
+ flex-direction: column-reverse;
+ align-items: center;
+}
diff --git a/part-2/14-order/flexbox.css b/part-2/14-order/flexbox.css
index ed621b79..8183d2b9 100644
--- a/part-2/14-order/flexbox.css
+++ b/part-2/14-order/flexbox.css
@@ -2,4 +2,17 @@
display: flex;
}
-/* Add your own CSS code below */
+.countries--first .country--brazil {
+ order: 1;
+}
+
+.countries--second .country--brazil {
+ order: 1;
+}
+.countries--second .country--uganda {
+ order: 1;
+}
+.countries--third {
+ flex-direction: row-reverse;
+ justify-content: left;
+}
diff --git a/part-2/15-align-self/flexbox.css b/part-2/15-align-self/flexbox.css
index ed621b79..d2b4d9aa 100644
--- a/part-2/15-align-self/flexbox.css
+++ b/part-2/15-align-self/flexbox.css
@@ -2,4 +2,32 @@
display: flex;
}
-/* Add your own CSS code below */
+.countries--first .country--ethiopia {
+ align-self: flex-end;
+}
+.countries--second .country--ethiopia {
+ align-self: flex-end;
+}
+.countries--tall.countries--second {
+ align-items: center;
+}
+.countries--third .country--ethiopia {
+ align-self: flex-end;
+}
+.countries--third .country--laos {
+ align-self: flex-end;
+}
+.countries--third .country--croatia {
+ align-self: flex-end;
+}
+.countries--tall.countries--third {
+ align-items: flex-start;
+}
+.countries--tall.countries--fourth {
+ flex-direction: column;
+ justify-content: right;
+ align-items: flex-start;
+}
+.countries--fourth .country--uganda {
+ align-self: center;
+}
diff --git a/part-2/16-more-flexbox/flexbox.css b/part-2/16-more-flexbox/flexbox.css
index ed621b79..ead137be 100644
--- a/part-2/16-more-flexbox/flexbox.css
+++ b/part-2/16-more-flexbox/flexbox.css
@@ -3,3 +3,58 @@
}
/* Add your own CSS code below */
+.countries--tall.countries--first {
+ align-items: flex-end;
+ justify-content: right;
+}
+.countries--tall.countries--second {
+ align-items: flex-end;
+ flex-direction: row-reverse;
+ justify-content: center;
+}
+.countries--tall.countries--third {
+ align-items: flex-start;
+ justify-content: center;
+}
+.countries--third .country--brazil {
+ align-self: flex-end;
+}
+.countries--tall.countries--fourth {
+ flex-direction: column;
+ justify-content: center;
+}
+.countries--fourth .country--brazil {
+ align-self: flex-end;
+}
+.countries--fourth .country--croatia {
+ align-self: flex-end;
+}
+.countries--fourth .country--uganda {
+ align-self: flex-end;
+}
+.countries--fourth .country--ethiopia {
+ align-self: center;
+}
+.countries--fourth .country--laos {
+ align-self: center;
+}
+.countries--tall.countries--fifth {
+ flex-direction: column-reverse;
+ justify-content: space-between;
+}
+.countries--fifth .country--uganda {
+ align-self: center;
+}
+.countries--fifth .country--laos {
+ align-self: flex-end;
+ order: 1;
+}
+.countries--fifth .country--ethiopia {
+ align-self: flex-end;
+}
+.countries--fifth .country--croatia {
+ align-self: flex-end;
+}
+.countries--fifth .country--brazil {
+ align-self: flex-end;
+}
diff --git a/part-2/17-nav-menu/styles.css b/part-2/17-nav-menu/styles.css
index f04f4c7b..798003b7 100644
--- a/part-2/17-nav-menu/styles.css
+++ b/part-2/17-nav-menu/styles.css
@@ -1 +1,20 @@
/* Write your media queries and flexbox CSS below */
+@media screen and (min-width: 480px) {
+ .site-header__nav {
+ display: flex;
+ }
+}
+@media screen and (min-width: 700px) {
+ .site-header {
+ display: flex;
+ }
+}
+@media screen and (min-width: 992px) {
+ .site-header {
+ display: flex;
+ justify-content: space-between;
+ }
+ .site-header__nav {
+ justify-content: center;
+ }
+}
diff --git a/part-2/18-git-merge/readme.md b/part-2/18-git-merge/readme.md
index f9590420..d8c20520 100644
--- a/part-2/18-git-merge/readme.md
+++ b/part-2/18-git-merge/readme.md
@@ -1,4 +1,4 @@
-# Git Merging with Pull Requests
+a# Git Merging with Pull Requests
In [exercise 8](/week-1/8-git-branch) you created two branches. The links were red in one branch and green in the other, so that you could quickly show your boss both options. She has decided she doesn't like either colour. Instead, she wants the links in a dark orange.
diff --git a/part-2/18-git-merge/styles.css b/part-2/18-git-merge/styles.css
index 0051cdba..b0988b25 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: orange;
font-weight: 700;
text-decoration: none;
}
