diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 1edf6010f7e..00000000000 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,32 +0,0 @@ - - -## Because - - - -## This PR - - - -## Issue - -Closes #XXXXX - -## Additional Information - - - -## Pull Request Requirements - -- [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md) -- [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check` -- [ ] The `Because` section summarizes the reason for this PR -- [ ] The `This PR` section has a bullet point list describing the changes in this PR -- [ ] If this PR addresses an open issue, it is linked in the `Issue` section -- [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css index e35feacd28d..52dbe94f0a5 100644 --- a/flex/01-flex-center/style.css +++ b/flex/01-flex-center/style.css @@ -3,6 +3,9 @@ border: 4px solid midnightblue; width: 400px; height: 300px; + display: flex; + justify-content: center; + align-items: center; } .box { diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css index cb598c93548..07e5f098cf0 100644 --- a/flex/02-flex-header/style.css +++ b/flex/02-flex-header/style.css @@ -1,6 +1,10 @@ .header { font-family: monospace; background: papayawhip; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px } .logo { @@ -9,11 +13,16 @@ color: tomato; background: white; padding: 4px 32px; + justify-content: center; } ul { /* this removes the dots on the list items*/ list-style-type: none; + display: flex; + margin: 0; + padding: 0; + gap: 8px; } a { @@ -22,4 +31,4 @@ a { padding: 8px; /* this removes the line under the links */ text-decoration: none; -} \ No newline at end of file +} diff --git a/flex/03-flex-header-2/index.html b/flex/03-flex-header-2/index.html index 21d56170b0b..5fabc457da0 100644 --- a/flex/03-flex-header-2/index.html +++ b/flex/03-flex-header-2/index.html @@ -9,18 +9,22 @@
- \ No newline at end of file diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css index bf4c8af10d4..9193c64faab 100644 --- a/flex/03-flex-header-2/style.css +++ b/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; + padding: 8px; + justify-content: space-between; } .profile-image { @@ -45,4 +48,14 @@ a { ul { list-style-type: none; + display: flex; + gap: 16px; + margin: 0; + padding: 0; } + +.left, .right { + display: flex; + align-items: center; + gap: 16px; +} \ No newline at end of file diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html index 3cc3efd262a..88d9bb104e6 100644 --- a/flex/04-flex-information/index.html +++ b/flex/04-flex-information/index.html @@ -8,20 +8,25 @@ -
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.
- +
+
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.
+
+
Icons made by Icongeek26 from www.flaticon.com
diff --git a/flex/04-flex-information/style.css b/flex/04-flex-information/style.css index 80c00fd4bd5..ab7c58de12b 100644 --- a/flex/04-flex-information/style.css +++ b/flex/04-flex-information/style.css @@ -12,6 +12,13 @@ img { font-weight: 900; } +.icons { + display: flex; + padding: 8px; + justify-content: space-between; + flex-basis: 200px; +} + /* do not edit this footer */ .footer { position: fixed; diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html index 3b4a06f2bcf..f8f0b535ed6 100644 --- a/flex/05-flex-modal/index.html +++ b/flex/05-flex-modal/index.html @@ -10,11 +10,16 @@
!
-
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 diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css index 780b355ef3d..aad5c4da2a9 100644 --- a/flex/05-flex-modal/style.css +++ b/flex/05-flex-modal/style.css @@ -20,6 +20,15 @@ body { width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); + padding: 16px; + gap: 16px; + display: flex +} + +.main { + display: flex; + flex-direction: column; + gap: 16px; } .icon { @@ -33,6 +42,7 @@ body { display: flex; align-items: center; justify-content: center; + flex-shrink: 0; } .close-button { @@ -66,4 +76,17 @@ button.cancel { background: white; border: 1px solid #ddd; color: royalblue; +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 18px; + font-weight: 700; +} + +.buttons{ + display:flex; + gap: 8px; } \ No newline at end of file diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css index 3777aef335f..1e1766f5bdc 100644 --- a/flex/06-flex-layout/style.css +++ b/flex/06-flex-layout/style.css @@ -5,6 +5,9 @@ body { margin: 0; overflow: hidden; font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + justify-content: space-between; } img { @@ -16,6 +19,7 @@ button { border: none; border-radius: 8px; background: #eee; + padding: 8px 16px; } input { @@ -24,3 +28,39 @@ input { padding: 8px 24px; width: 400px; } + +ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 16px +} + +.header, .footer { + display: flex; + justify-content: space-between; + padding: 16px; +} + +.left-links, .right-links { + display: flex; + gap: 16px; +} + +.footer { + background-color: #eeeeee; +} + +.content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +a { + text-decoration: none; + color: grey; +} \ No newline at end of file diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html index 85c1d0b75ca..e8ac751c2b0 100644 --- a/flex/07-flex-layout-2/index.html +++ b/flex/07-flex-layout-2/index.html @@ -11,23 +11,24 @@
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/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css index 6caf04c7945..0a7c5bfbf6b 100644 --- a/flex/07-flex-layout-2/style.css +++ b/flex/07-flex-layout-2/style.css @@ -2,28 +2,69 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; } .header { height: 72px; background: darkmagenta; color: white; + font-size: 32px; + font-weight: 900; + display: flex; + align-items: center; + padding-left: 16px; } .footer { height: 72px; background: #eee; color: darkmagenta; + display: flex; + justify-content: center; + align-items: center; } .sidebar { width: 300px; background: royalblue; box-sizing: border-box; + flex-shrink: 0; + padding: 16px; } .card { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0,0,0,.06); border-radius: 4px; + display: flex; + flex-wrap: wrap; + width: 300px; + padding: 16px; +} + +.middle { + display: flex; + flex-grow: 1; +} + +.content { + display: flex; + padding: 48px; + flex-wrap: wrap; + gap: 32px; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color: white; + font-size: 24px; } \ No newline at end of file diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html index effe3cc3db0..0dd617e7700 100644 --- a/foundations/01-css-methods/index.html +++ b/foundations/01-css-methods/index.html @@ -1,14 +1,23 @@ + + + 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/01-css-methods/styles.css b/foundations/01-css-methods/styles.css new file mode 100644 index 00000000000..398dfbb13a4 --- /dev/null +++ b/foundations/01-css-methods/styles.css @@ -0,0 +1,9 @@ +/* styles.css */ + +div { + color: white; + background-color: red; + font-size: 32; + text-align: center; + font-weight: bold +} \ No newline at end of file diff --git a/foundations/02-class-id-selectors/index.html b/foundations/02-class-id-selectors/index.html index 263042ae92a..7121aec24e8 100644 --- a/foundations/02-class-id-selectors/index.html +++ b/foundations/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.
+

5 - I'm a class!

\ No newline at end of file diff --git a/foundations/02-class-id-selectors/style.css b/foundations/02-class-id-selectors/style.css index e69de29bb2d..6b20cd1b291 100644 --- a/foundations/02-class-id-selectors/style.css +++ b/foundations/02-class-id-selectors/style.css @@ -0,0 +1,21 @@ +/* styles.css */ + +.odd { + background-color: pink; + font-family: Verdana, 'DejaVu Sans', 'sans-serif'; +} + +#two { + color: blue; + font-size: 36px; +} + +.odd.three { + font-size: 24px; +} + +#four { + background-color: lightgreen; + font-size: 24px; + font-weight: bold; +} \ No newline at end of file diff --git a/foundations/03-grouping-selectors/index.html b/foundations/03-grouping-selectors/index.html index 796431e53ea..9a66beb15b9 100644 --- a/foundations/03-grouping-selectors/index.html +++ b/foundations/03-grouping-selectors/index.html @@ -1,5 +1,5 @@ - + @@ -8,7 +8,7 @@ - - + + \ No newline at end of file diff --git a/foundations/03-grouping-selectors/style.css b/foundations/03-grouping-selectors/style.css index e69de29bb2d..638feec998c 100644 --- a/foundations/03-grouping-selectors/style.css +++ b/foundations/03-grouping-selectors/style.css @@ -0,0 +1,14 @@ +.one, +.two { + font-size: 28px; + font-family: Helvetica, 'Times New Roman', sans-serif; +} + +.one { + color: white; + background-color: black; +} + +.two { + background-color: yellow; +} \ No newline at end of file diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css index d55c2c5c709..810f1299790 100644 --- a/foundations/04-chaining-selectors/style.css +++ b/foundations/04-chaining-selectors/style.css @@ -1 +1,11 @@ -/* Add CSS Styling */ \ No newline at end of file +/* Add CSS Styling */ + +.avatar.proportioned { + height: auto; + width: 300px; +} + +.avatar.distorted { + width: 200px; + height: 400px +} \ No newline at end of file diff --git a/foundations/05-descendant-combinator/style.css b/foundations/05-descendant-combinator/style.css index e69de29bb2d..60ce8a16db4 100644 --- a/foundations/05-descendant-combinator/style.css +++ b/foundations/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 diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css index daf07e0e8a4..2d129a6cf69 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/06-cascade-fix/style.css @@ -8,7 +8,7 @@ body { font-weight: 800; } -.small-para { +.para.small-para { font-size: 14px; font-weight: 800; } @@ -17,12 +17,13 @@ body { font-size: 22px; } -.confirm { +#confirm-button { background: green; color: white; font-weight: bold; } + .button { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); @@ -40,3 +41,8 @@ div.text { font-size: 22px; font-weight: 100; } + +.text.child{ + font-size: 14px; + font-weight: 800; +} \ No newline at end of file diff --git a/margin-and-padding/01-margin-and-padding-1/style.css b/margin-and-padding/01-margin-and-padding-1/style.css index f4d0a708453..c5d9651407b 100644 --- a/margin-and-padding/01-margin-and-padding-1/style.css +++ b/margin-and-padding/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,7 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; + padding: 32px; + margin-left: auto; + } \ No newline at end of file diff --git a/margin-and-padding/02-margin-and-padding-2/style.css b/margin-and-padding/02-margin-and-padding-2/style.css index 00d1de59bf9..f730474fe2a 100644 --- a/margin-and-padding/02-margin-and-padding-2/style.css +++ b/margin-and-padding/02-margin-and-padding-2/style.css @@ -1,27 +1,45 @@ body { background: #eee; font-family: sans-serif; + margin: 8px; } .card { width: 400px; background: #fff; margin: 16px auto; + padding: 8px; } .title { background: #e3f4ff; + font-size: 16px; + padding: 8px; + margin: 8px; } .content { background: #e3f4ff; + margin: 8px; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 8px; + padding-right: 8px; } .button-container { background: #e3f4ff; + text-align: center; + padding: 8px; + margin: 8px; } button { + display: inline-block; background: white; border: 1px solid #eee; + padding-top: 8px; + padding-bottom: 8px; + padding-left: 24px; + padding-right: 24px; } \ No newline at end of file