diff --git a/.gitignore b/.gitignore index 89d5c4329004..cf4960f246d3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ # Ignore MacOS autogenerated .DS_Store +.vscode/ \ No newline at end of file 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..17028329fa8d 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; + margin: 12px; } .two { background: lightblue; border: 3px solid purple; /* CHANGE ME */ - margin-bottom: 0px; + margin-bottom: 48px; } .three { @@ -23,6 +23,6 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; + padding: 32px; + margin-left: 300px; } \ No newline at end of file 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..667da7ac0c5a 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,32 @@ body { width: 400px; background: #fff; margin: 16px auto; + padding: 8px; } .title { background: #e3f4ff; + font-size: 16px; + margin-bottom: 8px; + padding: 8px; } .content { background: #e3f4ff; + padding: 16px 8px; + margin-bottom: 8px ; } .button-container { background: #e3f4ff; + text-align: center; + padding: 8px; } button { background: white; border: 1px solid #eee; + display: block; + margin: 0 auto; + padding: 8px 24px; } \ No newline at end of file diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..e8b7a6b977e2 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -2,10 +2,8 @@ body { font-family: Arial, Helvetica, sans-serif; } -.para, -.small-para { - color: hsl(0, 0%, 0%); - font-weight: 800; +.para { + font-size: 22px; } .small-para { @@ -13,11 +11,17 @@ body { font-weight: 800; } -.para { - font-size: 22px; +.para, +.small-para { + color: hsl(0, 0%, 0%); + font-weight: 800; } -.confirm { +/* + I used an ID selector to target the Confirm button as .confirm wasn't working + */ + +#confirm-button { background: green; color: white; font-weight: bold; @@ -29,14 +33,18 @@ body { font-size: 20px; } -.child { - color: rgb(0, 0, 0); - font-weight: 800; - font-size: 14px; -} - div.text { color: rgb(0, 0, 0); font-size: 22px; font-weight: 100; } + +/* +I combined the type and class to target the div with a class child +*/ + +div.child { + color: rgb(0, 0, 0); + font-weight: 800; + font-size: 14px; +} \ No newline at end of file diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index e35feacd28d0..1d073bc0bcc7 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -3,6 +3,9 @@ border: 4px solid midnightblue; width: 400px; height: 300px; + display: flex; + align-items: center; + justify-content: center; } .box { diff --git a/foundations/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css index cb598c935480..ad061a17a24d 100644 --- a/foundations/flex/02-flex-header/style.css +++ b/foundations/flex/02-flex-header/style.css @@ -1,6 +1,10 @@ .header { font-family: monospace; background: papayawhip; + padding: 9px; + display: flex; + align-items: center; + justify-content: space-between; } .logo { @@ -14,6 +18,10 @@ ul { /* this removes the dots on the list items*/ list-style-type: none; + display: flex; + gap: 9px; + margin: 0; + padding: 0; } a { diff --git a/foundations/flex/03-flex-header-2/index.html b/foundations/flex/03-flex-header-2/index.html index 21d56170b0b8..1bd2b9467ec3 100644 --- a/foundations/flex/03-flex-header-2/index.html +++ b/foundations/flex/03-flex-header-2/index.html @@ -9,18 +9,26 @@
-
\ No newline at end of file diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css index bf4c8af10d4c..6053addcdcca 100644 --- a/foundations/flex/03-flex-header-2/style.css +++ b/foundations/flex/03-flex-header-2/style.css @@ -12,6 +12,22 @@ body { background: white; border-bottom: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,.1); + display: flex; + align-items: center; + justify-content: space-between; + /* This inserts a space between the items and the header */ + padding: 8px; +} + +/* + This centers the logo and links on the right and the button and profile-image on the left +*/ + +.right-items, +.left-items { + display: flex; + align-items: center; + gap: 16px; } .profile-image { @@ -45,4 +61,8 @@ a { ul { list-style-type: none; + display: flex; + margin: 0; + padding: 0; + gap: 10px; } diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html index 3cc3efd262ae..3be5a7fc0268 100644 --- a/foundations/flex/04-flex-information/index.html +++ b/foundations/flex/04-flex-information/index.html @@ -9,19 +9,24 @@
Information!
- - barberry -
This is a type of plant. We love this one.
- - chili -
This is another type of plant. Isn't it nice?
- - pepper -
We have so many plants. Yay plants.
- - saffron -
I'm running out of things to say about plants.
- +
+
+ barberry +
This is a type of plant. We love this one.
+
+
+ chili +
This is another type of plant. Isn't it nice?
+
+
+ pepper +
We have so many plants. Yay plants.
+
+
+ saffron +
I'm running out of things to say about plants.
+
+