diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html index 458a4cb21..dd4f809f5 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/9-git-branch/styles.css b/week-1/9-git-branch/styles.css index 0051cdbaf..7a3354927 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: red; 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..9e049f4bc 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 screen and (min-width: 768px) { + .countries { + columns: 2; + } +} +@media screen and (max-width: 1200px) { + .countries { + columns: 3; + } +} diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css index 43e80d23c..c4054c298 100644 --- a/week-2/11-flexbox/flexbox.css +++ b/week-2/11-flexbox/flexbox.css @@ -1 +1,10 @@ /* 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..8cbb663c4 100644 --- a/week-2/12-justify-content/flexbox.css +++ b/week-2/12-justify-content/flexbox.css @@ -1,9 +1,25 @@ -.countries { +.countries--first { display: flex; + justify-content: flex-end; + flex-direction: row; } -.countries--second .country { - padding: 0.5em; +.countries--second { + display: flex; + justify-content: space-around; + padding: 0.2em; } /* Add your own CSS code below */ + +.countries--third { + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.countries--fourth { + display: flex; + flex-direction: column-reverse; + justify-content: space-between; +} diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css index 3675a0df3..bfb011b30 100644 --- a/week-2/13-align-items/flexbox.css +++ b/week-2/13-align-items/flexbox.css @@ -1,4 +1,24 @@ -.countries { +.countries--first { display: flex; + align-items: center; + justify-content: left; } /* Add your own CSS code below */ + +.countries--second { + display: flex; + flex-direction: row-reverse; + align-items: flex-end; +} + +.countries--third { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.countries--fourth { + display: flex; + 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..3ede0f493 100644 --- a/week-2/14-order/flexbox.css +++ b/week-2/14-order/flexbox.css @@ -1,5 +1,37 @@ .countries { display: flex; + flex-direction: row; + justify-content: flex-start; } - /* Add your own CSS code below */ + +.countries--first .country--brazil { + order: 4; +} + +.countries--second .country--croatia { + order: 0; +} + +.countries--second .country--brazil { + order: 1; +} +.countries--second .country--uganda { + order: 2; +} + +.countries--third .country--brazil { + order: 4; +} + +.countries--third .country--croatia { + order: 3; +} + +.countries--third .country--ethiopia { + order: 2; +} + +.countries--third .country--laos { + order: 1; +} diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css index ed621b793..1bd2e8be1 100644 --- a/week-2/15-align-self/flexbox.css +++ b/week-2/15-align-self/flexbox.css @@ -1,5 +1,54 @@ -.countries { +/* Add your own CSS code below */ +.countries--first { display: flex; } -/* Add your own CSS code below */ +.countries--first .country--ethiopia { + display: flex; + align-self: flex-end; +} + +.countries--second { + display: flex; + align-items: center; +} + +.countries--second .country--ethiopia { + display: flex; + align-self: flex-end; +} + +.countries--third { + display: flex; + align-items: center; +} + +.countries--third .country--brazil { + align-self: flex-start; +} + +.countries--third .country--uganda { + align-self: flex-start; +} + +.countries--third .country--croatia { + align-self: flex-end; +} + +.countries--third .country--ethiopia { + align-self: flex-end; +} + +.countries--third .country--laos { + align-self: flex-end; +} + +.countries--fourth { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.countries--fourth .country--uganda { + align-self: center; +} diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css index ed621b793..332ebe2f5 100644 --- a/week-2/16-more-flexbox/flexbox.css +++ b/week-2/16-more-flexbox/flexbox.css @@ -1,5 +1,60 @@ -.countries { +/* Add your own CSS code below */ + +.countries--first { display: flex; + align-items: flex-end; + justify-content: flex-end; } -/* Add your own CSS code below */ +.countries--second { + display: flex; + flex-direction: row-reverse; + align-items: flex-end; + justify-content: center; +} + +.countries--third { + display: flex; + align-items: flex-start; +} + +.countries--third .country--brazil { + align-self: flex-end; +} + +.countries--fourth { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.countries--fourth .country--ethiopia { + align-self: center; +} + +.countries--fourth .country--laos { + align-self: center; +} + +.countries--fifth { + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; +} + +.countries--fifth .country--brazil { + order: 4; +} + +.countries--fifth .country--croatia { + order: 3; +} + +.countries--fifth .country--ethiopia { + order: 2; +} + +.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..b95f3374d 100644 --- a/week-2/17-nav-menu/styles.css +++ b/week-2/17-nav-menu/styles.css @@ -1 +1,27 @@ /* Write your media queries and flexbox CSS below */ +@media screen and (min-width: 480px) { + .site-header__nav { + columns: 1; + display: flex; + flex-direction: row; + justify-content: center; + } +} + +@media screen and (min-width: 700px) { + .site-header { + columns: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + } +} + +@media screen and (min-width: 992px) { + .site-header { + columns: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + } +}