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..8e407906c342 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,8 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; -} \ No newline at end of file + padding: 32px; + margin-left: auto; + +} +/*exerise has already been solved.*/ \ 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..2538f67f8021 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 @@ -1,3 +1,6 @@ +*{ + box-sizing: border-box; +} body { background: #eee; font-family: sans-serif; @@ -6,22 +9,41 @@ body { .card { width: 400px; background: #fff; - margin: 16px auto; + margin: auto; + padding: 8px; } .title { background: #e3f4ff; + margin: 8px; + padding: 8px; } .content { background: #e3f4ff; + display:block; + margin: 8px; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 8px; + padding-right: 8px; } .button-container { background: #e3f4ff; + display:block; + margin: 8px; + padding: 8px; + text-align: center; } button { background: white; border: 1px solid #eee; -} \ No newline at end of file + display: block; + padding: 8px 24px 8px 24px; + margin: 0px auto; +} + +/*.button-container, .content, .title, .button, .card { + border: 2px red solid;*/ \ No newline at end of file diff --git a/foundations/cascade/01-cascade-fix/index.html b/foundations/cascade/01-cascade-fix/index.html index 0c5b22717488..153498c475b1 100644 --- a/foundations/cascade/01-cascade-fix/index.html +++ b/foundations/cascade/01-cascade-fix/index.html @@ -20,3 +20,4 @@ + diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..e64f8d0e8c31 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -8,17 +8,18 @@ body { font-weight: 800; } -.small-para { - font-size: 14px; - font-weight: 800; -} - +/* just repositioned this .para class selector above .small-para. This ensures this class property gets overruled by the one below it. */ .para { font-size: 22px; } -.confirm { - background: green; +.small-para { + font-size: 14px; + font-weight: 800; +} +/*changed background to background-color as error correction. Also, chained classes together to get precedence.*/ +.confirm.button { + background-color: green; color: white; font-weight: bold; } @@ -28,8 +29,8 @@ body { color: rgb(0, 0, 0); font-size: 20px; } - -.child { +/*chained three selectors to target the child div element, and give this precedence over the 2-chained selector below. */ +div.child.text { color: rgb(0, 0, 0); font-weight: 800; font-size: 14px; diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index e35feacd28d0..ecc05b2fdd5e 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -3,13 +3,19 @@ border: 4px solid midnightblue; width: 400px; height: 300px; + display: flex; + justify-content: center; /* centers the flex items horizontally */ + align-items: center; } -.box { +.container > .box { background: palevioletred; font-weight: bold; text-align: center; border: 6px solid maroon; width: 80px; height: 80px; -} \ No newline at end of file +} + +/* man i just learned a bit of flexbox and it seems pretty easy so far! Plus, i just wanted to wrap today with a few pushed commits hehe! +/* flex container contain flex items, and mostly you can just apply css properties or rules to the flex container to tweak the child flex items' alignment and order and basically everything. \ No newline at end of file diff --git a/foundations/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css index cb598c935480..619ddda71a05 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; + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px; } .logo { @@ -13,7 +17,12 @@ ul { /* this removes the dots on the list items*/ + list-style-type: none; + display: flex; + padding: 0; + margin: 0; + gap: 8px; } a { @@ -22,4 +31,5 @@ a { padding: 8px; /* this removes the line under the links */ text-decoration: none; -} \ No newline at end of file +} + diff --git a/foundations/flex/03-flex-header-2/index.html b/foundations/flex/03-flex-header-2/index.html index 21d56170b0b8..5fabc457da05 100644 --- a/foundations/flex/03-flex-header-2/index.html +++ b/foundations/flex/03-flex-header-2/index.html @@ -9,18 +9,22 @@
- \ 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..cb48ad860249 100644 --- a/foundations/flex/03-flex-header-2/style.css +++ b/foundations/flex/03-flex-header-2/style.css @@ -12,6 +12,9 @@ body { background: white; border-bottom: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,.1); + display: flex; + justify-content: space-between; + padding: 8px; } .profile-image { @@ -27,6 +30,7 @@ body { font-size: 32px; font-weight: 900; font-style: italic; + margin: 0px; } button { @@ -34,15 +38,28 @@ button { border-radius: 8px; background: rebeccapurple; color: white; - padding: 8px 24px; + padding: 8px 24px } a { /* this removes the line under our links */ text-decoration: none; color: rebeccapurple; + margin: 0px; + padding: 0px; } ul { list-style-type: none; + display: flex; + gap: 16px; + padding: 0px; + margin: 0px; + align-items: center; +} + +.left, .right { + align-items: center; + display: flex; + gap: 16px; } diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html index 3cc3efd262ae..fa82bce3b942 100644 --- a/foundations/flex/04-flex-information/index.html +++ b/foundations/flex/04-flex-information/index.html @@ -8,20 +8,28 @@ -
Information!
- - barberry -
This is a type of plant. We love this one.
- - chili -
This is another type of plant. Isn't it nice?
+
Information!
+
+
+ barberry +
This is a type of plant. We love this one.
+
- pepper -
We have so many plants. Yay plants.
+
+ chili +
This is another type of plant. Isn't it nice?
+
- saffron -
I'm running out of things to say about plants.
+
+ pepper +
We have so many plants. Yay plants.
+
+
+ saffron +
I'm running out of things to say about plants.
+
+
Icons made by Icongeek26 from www.flaticon.com
diff --git a/foundations/flex/04-flex-information/style.css b/foundations/flex/04-flex-information/style.css index 80c00fd4bd5b..a6e9a4b2b0b0 100644 --- a/foundations/flex/04-flex-information/style.css +++ b/foundations/flex/04-flex-information/style.css @@ -1,5 +1,6 @@ body { font-family: 'Courier New', Courier, monospace; + text-align: center; } img { @@ -10,6 +11,20 @@ img { .title { font-size: 36px; font-weight: 900; + text-align: center; + margin: 0px auto 32px auto; +} + +.actual-info{ + display: flex; + justify-content: center; + gap: 52px; +} + +.info{ + display: flex; + flex-direction: column; + align-items: center; } /* do not edit this footer */ diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html index 3b4a06f2bcfa..f77279e9131f 100644 --- a/foundations/flex/05-flex-modal/index.html +++ b/foundations/flex/05-flex-modal/index.html @@ -8,13 +8,23 @@ Modal -
-
!
-
Are you sure you want to do that?
- -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
- - +
+
+
+
!
+
Are you sure you want to do that?
+
+ +
+ +
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
+
+ + +
+
- \ No newline at end of file + + \ No newline at end of file diff --git a/foundations/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css index 780b355ef3de..f8cb98b227a6 100644 --- a/foundations/flex/05-flex-modal/style.css +++ b/foundations/flex/05-flex-modal/style.css @@ -20,8 +20,35 @@ body { width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); + padding: 16px; } +.caution{ + display: flex; + justify-content: center; + gap: 16px; +} + +.top-icons{ + display: flex; + justify-content: space-between; +} + +.header{ + font-weight: bold; + font-size: 20px; +} + +.rest-of-box{ + display: flex; + flex-direction: column; + gap: 16px; + margin-left: 57px; +} + +.text{ + flex-shrink: 0; +} .icon { color: royalblue; font-size: 26px; @@ -43,9 +70,9 @@ body { font-size: 16px; height: 24px; width: 24px; - display: flex; + /*display: flex; align-items: center; - justify-content: center; + justify-content: center;*/ border: 1px solid #eee; padding: 0; } diff --git a/foundations/flex/06-flex-layout/style.css b/foundations/flex/06-flex-layout/style.css index 3777aef335f0..1ae65fd780d3 100644 --- a/foundations/flex/06-flex-layout/style.css +++ b/foundations/flex/06-flex-layout/style.css @@ -5,6 +5,10 @@ body { margin: 0; overflow: hidden; font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 16px 16px 0 16px; } img { @@ -16,6 +20,7 @@ button { border: none; border-radius: 8px; background: #eee; + padding: 8px 16px; } input { @@ -24,3 +29,37 @@ input { padding: 8px 24px; width: 400px; } + +.header{ + display: flex; + justify-content: space-between; + align-items: center; +} + +ul { + display: flex; + list-style-type: none; + padding: 0; + margin: 0; + gap: 16px; +} +a { + text-decoration: none; + color: #666; +} +.footer{ + justify-content: space-between; + align-items: center; + background-color: #eeeeee; + display: flex; + padding: 16px; +} + +.content{ + flex:1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 16px; +} \ No newline at end of file diff --git a/foundations/flex/07-flex-layout-2/index.html b/foundations/flex/07-flex-layout-2/index.html index 85c1d0b75cae..635bfe766368 100644 --- a/foundations/flex/07-flex-layout-2/index.html +++ b/foundations/flex/07-flex-layout-2/index.html @@ -8,25 +8,30 @@ +
MY AWESOME WEBSITE
-
- -
+
+
+ +
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
-
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?
+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!
+
+
The Odin Project ❀️ diff --git a/foundations/flex/07-flex-layout-2/style.css b/foundations/flex/07-flex-layout-2/style.css index 6caf04c79451..38c3ffe34da3 100644 --- a/foundations/flex/07-flex-layout-2/style.css +++ b/foundations/flex/07-flex-layout-2/style.css @@ -26,4 +26,63 @@ body { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0,0,0,.06); border-radius: 4px; +} + +/*ADDED SOLUTION*/ + +body{ + display: flex; + flex-direction: column; +} + +.header{ + display: flex; + align-items: center; + font-size: 32px; + font-weight: 900; + padding-left: 16px; +} + +.content{ + display: flex; + flex:1; +} + +.sidebar{ + flex-shrink: 0; + padding: 16px; + min-width: 300px; +} + +ul{ + list-style: none; + padding: 0px; + display: flex; + flex-direction: column; + gap: 8px; +} +a{ + text-decoration: none; + color: white; +} + +.content-boxes{ + flex:1; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + padding: 16px; + box-sizing: border-box; +} + +.card{ + width: 200px; + padding: 16px; +} + +.footer{ + display: flex; + align-items: center; + justify-content: center; } \ No newline at end of file diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index effe3cc3db01..ff3ae5054f88 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -5,10 +5,18 @@ Methods for Adding CSS + +
Style me via the external method!

I would like to be styled with the internal method, please.

- + \ No newline at end of file diff --git a/foundations/intro-to-css/01-css-methods/styles/style.css b/foundations/intro-to-css/01-css-methods/styles/style.css new file mode 100644 index 000000000000..087907765b61 --- /dev/null +++ b/foundations/intro-to-css/01-css-methods/styles/style.css @@ -0,0 +1,7 @@ +div{ + background-color: red; + color: white; + font-size: 32px; + text-align: center; + font-weight: bold; +} diff --git a/foundations/intro-to-css/02-class-id-selectors/index.html b/foundations/intro-to-css/02-class-id-selectors/index.html index 263042ae92a0..8abca28cf916 100644 --- a/foundations/intro-to-css/02-class-id-selectors/index.html +++ b/foundations/intro-to-css/02-class-id-selectors/index.html @@ -8,10 +8,10 @@ -

Number 1 - I'm a class!

-
Number 2 - I'm one ID.
-

Number 3 - I'm a class, but cooler!

-
Number 4 - I'm another ID.
-

Number 5 - I'm a class!

+

Number 1 - I'm a class!

+
Number 2 - I'm one ID.
+

Number 3 - I'm a class, but cooler!

+
Number 4 - I'm another ID.
+

Number 5 - I'm a class!

\ No newline at end of file diff --git a/foundations/intro-to-css/02-class-id-selectors/style.css b/foundations/intro-to-css/02-class-id-selectors/style.css index e69de29bb2d1..abc231f01f0b 100644 --- a/foundations/intro-to-css/02-class-id-selectors/style.css +++ b/foundations/intro-to-css/02-class-id-selectors/style.css @@ -0,0 +1,16 @@ +.oddnumber{ + background-color: rgb(244, 119, 119); + font-family: 'Verdana', 'DejaVu Sans', 'sans-serif'; +} +#second-element{ + color: rgb(0,0,256); + font-size: 36px; +} +#fourth-element{ + background-color: rgb(96, 244, 96); + font-size: 24px; + font-weight: bold; +} +.largerfont{ + font-size: 24px; +} \ No newline at end of file diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html index 796431e53ea7..bedf43525cc9 100644 --- a/foundations/intro-to-css/03-grouping-selectors/index.html +++ b/foundations/intro-to-css/03-grouping-selectors/index.html @@ -8,7 +8,7 @@ - - + + \ No newline at end of file diff --git a/foundations/intro-to-css/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css index e69de29bb2d1..0db40bba5b42 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,11 @@ +.first-element{ + background-color:black; + color:white; +} +.second-element{ + background-color:yellow; +} +.first-element, .second-element{ + font-size:28px; + font-family: Helvetica, 'Times New Roman',sans-serif; +} \ No newline at end of file diff --git a/foundations/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css index d55c2c5c7090..f93dfb33917e 100644 --- a/foundations/intro-to-css/04-chaining-selectors/style.css +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -1 +1,8 @@ -/* Add CSS Styling */ \ No newline at end of file +.proportioned.avatar{ + width: 300px; + height: auto; +} +.avatar.distorted{ + width: 200px; + height: 400px; +} \ No newline at end of file diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css index e69de29bb2d1..aa6767e10279 100644 --- a/foundations/intro-to-css/05-descendant-combinator/style.css +++ b/foundations/intro-to-css/05-descendant-combinator/style.css @@ -0,0 +1,6 @@ +div p{ + background-color:yellow; + color:red; + font-size: 20px; + text-align: center; +} \ No newline at end of file