diff --git a/foundations/block-and-inline/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-margin-and-padding-1/style.css index f4d0a7084532..865ca9466389 100644 --- a/foundations/block-and-inline/01-margin-and-padding-1/style.css +++ b/foundations/block-and-inline/01-margin-and-padding-1/style.css @@ -7,15 +7,15 @@ body { background: pink; border: 3px solid blue; /* CHANGE ME */ - padding: 0px; - margin: 0px; + padding: 32px; /*right*/ + margin: 12px; /*right*/ } .two { background: lightblue; border: 3px solid purple; /* CHANGE ME */ - margin-bottom: 0px; + margin-bottom: 48px; /*right*/ } .three { @@ -23,6 +23,6 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; + padding: 32px; /*right*/ + margin-left: auto; /*wrong*/ } \ No newline at end of file diff --git a/foundations/block-and-inline/02-margin-and-padding-2/index.html b/foundations/block-and-inline/02-margin-and-padding-2/index.html index c3a26c4e2edd..5441895ad110 100644 --- a/foundations/block-and-inline/02-margin-and-padding-2/index.html +++ b/foundations/block-and-inline/02-margin-and-padding-2/index.html @@ -11,7 +11,7 @@

I'm a card

I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.
-
and a
+
and a
diff --git a/foundations/block-and-inline/02-margin-and-padding-2/style.css b/foundations/block-and-inline/02-margin-and-padding-2/style.css index 00d1de59bf90..e7f0e369de5a 100644 --- a/foundations/block-and-inline/02-margin-and-padding-2/style.css +++ b/foundations/block-and-inline/02-margin-and-padding-2/style.css @@ -7,21 +7,36 @@ body { width: 400px; background: #fff; margin: 16px auto; + padding: 8px; /*right*/ + } .title { background: #e3f4ff; + margin-bottom: 8px; /*right*/ + font-size: 16px; /*right*/ + padding: 8px; /*right*/ } .content { background: #e3f4ff; + margin-top: 16px;/ + margin-bottom: 16px; /*wrong*/ + margin-left: 8px;/ + margin-right: 8px;/ } .button-container { background: #e3f4ff; + text-align: center; /*right*/ + padding: 8px; /*right*/ } button { background: white; border: 1px solid #eee; + margin-top: 8px;/ + margin-bottom: 8px; /*half right*/ + margin-left: 24px;/ + margin-right: 24px;/ } \ No newline at end of file diff --git a/foundations/cascade/01-cascade-fix/README.md b/foundations/cascade/01-cascade-fix/README.md index 4de0d215f7c3..61af2f100c00 100644 --- a/foundations/cascade/01-cascade-fix/README.md +++ b/foundations/cascade/01-cascade-fix/README.md @@ -1,3 +1,5 @@ +## All done right + # CSS Methods This next exercise for CSS Foundations is going to give you a closer look at the cascade, in particular specificity and rule order. Both the HTML and CSS files are filled out for you, so instead of adding rules yourself, you will simply be editing what is provided. diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..1522b275d46f 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -1,3 +1,5 @@ +/* All done right */ + body { font-family: Arial, Helvetica, sans-serif; } @@ -8,16 +10,16 @@ body { font-weight: 800; } -.small-para { - font-size: 14px; - font-weight: 800; -} .para { font-size: 22px; } +.small-para { + font-size: 14px; + font-weight: 800; +} -.confirm { +.button.confirm { background: green; color: white; font-weight: bold; @@ -29,7 +31,7 @@ body { font-size: 20px; } -.child { +.text.child { color: rgb(0, 0, 0); font-weight: 800; font-size: 14px; diff --git a/foundations/flex/01-flex-center/index.html b/foundations/flex/01-flex-center/index.html index 440bf5c5c320..e7c2a6c6bfec 100644 --- a/foundations/flex/01-flex-center/index.html +++ b/foundations/flex/01-flex-center/index.html @@ -1,6 +1,6 @@ - + diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index e35feacd28d0..8c0ebb07793f 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -1,8 +1,13 @@ +/*wronge*/ + .container { background: dodgerblue; border: 4px solid midnightblue; width: 400px; height: 300px; + display: flexbox; + align-content: center; + justify-items: center; } .box { diff --git a/foundations/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css index cb598c935480..e4788a949ee2 100644 --- a/foundations/flex/02-flex-header/style.css +++ b/foundations/flex/02-flex-header/style.css @@ -1,6 +1,15 @@ +/* 7/10 */ + +*{ + background-color: bisque; +} + .header { font-family: monospace; background: papayawhip; + display: flex; + align-items: center; + justify-content: space-between; } .logo { @@ -9,11 +18,16 @@ color: tomato; background: white; padding: 4px 32px; + } ul { /* this removes the dots on the list items*/ list-style-type: none; + display: flex; + margin: 0; + padding: 0; + gap: 8px; } a { diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css index bf4c8af10d4c..735ad44ae592 100644 --- a/foundations/flex/03-flex-header-2/style.css +++ b/foundations/flex/03-flex-header-2/style.css @@ -12,6 +12,8 @@ body { background: white; border-bottom: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,.1); + display: flex; + justify-content: space-between; } .profile-image { @@ -20,6 +22,8 @@ body { border-radius: 50%; width: 48px; height: 48px; + margin-right: 10px; + } .logo { @@ -27,6 +31,7 @@ body { font-size: 32px; font-weight: 900; font-style: italic; + margin-left: 10px; } button { @@ -41,8 +46,12 @@ a { /* this removes the line under our links */ text-decoration: none; color: rebeccapurple; + } ul { list-style-type: none; + display: flex; + align-items: end; + justify-content: space-between; }