diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css index e35feacd28d0..c187ab490cd9 100644 --- a/flex/01-flex-center/style.css +++ b/flex/01-flex-center/style.css @@ -3,6 +3,7 @@ border: 4px solid midnightblue; width: 400px; height: 300px; + display: flex; } .box { @@ -12,4 +13,5 @@ border: 6px solid maroon; width: 80px; height: 80px; -} \ No newline at end of file + margin: auto; +} diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css index cb598c935480..d2b12114243e 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; + padding: 8px; + display: flex; + justify-content: space-between; + align-items: center; } .logo { @@ -14,6 +18,10 @@ ul { /* this removes the dots on the list items*/ list-style-type: none; + margin: 0px; + padding: 0px; + display: flex; + gap: 8px; } a { @@ -22,4 +30,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 fa39648cda18..9af06b19ace8 100644 --- a/flex/03-flex-header-2/index.html +++ b/flex/03-flex-header-2/index.html @@ -12,15 +12,19 @@ - - +
+ +
+
+ +
- \ 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 bf4c8af10d4c..78fff41b74a1 100644 --- a/flex/03-flex-header-2/style.css +++ b/flex/03-flex-header-2/style.css @@ -12,6 +12,11 @@ body { background: white; border-bottom: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,.1); + padding: 8px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; } .profile-image { @@ -29,6 +34,11 @@ body { font-style: italic; } +.links { + display: flex; + gap: 8px; +} + button { border: none; border-radius: 8px; @@ -46,3 +56,7 @@ a { ul { list-style-type: none; } + +.notifications-container { + margin-left: auto; +} diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html index 3cc3efd262ae..cb9e17b1cb49 100644 --- a/flex/04-flex-information/index.html +++ b/flex/04-flex-information/index.html @@ -8,23 +8,34 @@ +
Information!
- barberry -
This is a type of plant. We love this one.
+
+
+ barberry +
This is a type of plant. We love this one.
+
- chili -
This is another type of plant. Isn't it nice?
+
+ chili +
This is another type of plant. Isn't it nice?
+
- pepper -
We have so many plants. Yay plants.
+
+ pepper +
We have so many plants. Yay plants.
+
- saffron -
I'm running out of things to say about plants.
+
+ saffron +
I'm running out of things to say about plants.
+
+
Icons made by Icongeek26 from www.flaticon.com
- \ No newline at end of file + diff --git a/flex/04-flex-information/style.css b/flex/04-flex-information/style.css index 80c00fd4bd5b..619e72cb071a 100644 --- a/flex/04-flex-information/style.css +++ b/flex/04-flex-information/style.css @@ -1,5 +1,6 @@ body { font-family: 'Courier New', Courier, monospace; + text-align: center; } img { @@ -10,6 +11,17 @@ img { .title { font-size: 36px; font-weight: 900; + margin-bottom: 32px; +} + +.header { + display: flex; + justify-content: center; + gap: 52px; +} + +.item { + width: 200px; } /* do not edit this footer */ @@ -23,4 +35,4 @@ img { align-items: center; justify-content: center; background: #eee; -} \ No newline at end of file +} diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html index 3f523e234c4b..e677341e079f 100644 --- a/flex/05-flex-modal/index.html +++ b/flex/05-flex-modal/index.html @@ -10,11 +10,13 @@
!
-
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 58fda8bfa33a..fc84326434f5 100644 --- a/flex/05-flex-modal/style.css +++ b/flex/05-flex-modal/style.css @@ -20,6 +20,9 @@ body { width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); + display: flex; + gap: 18px; + padding: 18px; } .icon { @@ -33,6 +36,13 @@ body { display: flex; align-items: center; justify-content: center; + flex-shrink: 0; +} + +.container { + display: flex; + flex-wrap: wrap; + gap: 8px; } .close-button { @@ -46,6 +56,12 @@ body { display: flex; align-items: center; justify-content: center; + margin-left: auto; +} + +.header { + font-weight: 700; + font-size: 18px; } button { @@ -63,4 +79,4 @@ button.cancel { background: white; border: 1px solid #ddd; color: royalblue; -} \ No newline at end of file +} diff --git a/flex/06-flex-layout/index.html b/flex/06-flex-layout/index.html index a05f14bb0257..185085c01c1e 100644 --- a/flex/06-flex-layout/index.html +++ b/flex/06-flex-layout/index.html @@ -39,4 +39,4 @@ - \ No newline at end of file + diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css index 743aa09f4ca1..bb27b4264dbe 100644 --- a/flex/06-flex-layout/style.css +++ b/flex/06-flex-layout/style.css @@ -5,6 +5,47 @@ body { margin: 0; overflow: hidden; font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; +} + +.header, +.footer { + display: flex; + justify-content: space-between; + padding: 8px; +} + +.footer { + background-color: #eee; +} + +ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + gap: 16px; +} + +a { + text-decoration: none; + font-size: 22px; + font-weight: 700; + color: gray; +} + +/* .left-links, + .right-links { + padding: 8px; + } + */ +.content { + display: flex; + flex-direction: column; + flex: auto; + justify-content: center; + align-items: center; } img { @@ -13,9 +54,14 @@ img { button { font-family: Roboto, sans-serif; + font-size: 18px; + font-weight: 600; + color: gray; + padding: 16px; border: none; border-radius: 8px; background: #eee; + margin: 0 8px; } input { diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html index 85c1d0b75cae..37c6e1813a84 100644 --- a/flex/07-flex-layout-2/index.html +++ b/flex/07-flex-layout-2/index.html @@ -12,24 +12,28 @@ 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 ❀️
- \ No newline at end of file + diff --git a/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css index 7516f6b0b611..45e7b5c1c9d3 100644 --- a/flex/07-flex-layout-2/style.css +++ b/flex/07-flex-layout-2/style.css @@ -2,27 +2,65 @@ 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; } .header { height: 72px; background: darkmagenta; color: white; + font-size: 32px; + font-weight: 900; + display: flex; + align-items: center; + padding: 0 16px; } -.footer { - height: 72px; - background: #eee; - color: darkmagenta; +.content { + display: flex; + flex: auto; } .sidebar { width: 300px; background: royalblue; + display: flex; + flex-shrink: 0; +} + +ul { + list-style-type: none; + margin: 0 8px; + padding: 16px; +} + +a { + text-decoration: none; + color: #FFF; + font-size: 24px; +} + +.articles { + display: flex; + flex-wrap: wrap; } .card { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0,0,0,.06); border-radius: 4px; -} \ No newline at end of file + width: 300px; + height: 300px; + margin: 10px; + padding: 32px; +} + +.footer { + height: 72px; + background: #eee; + color: darkmagenta; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html index effe3cc3db01..e557455374ec 100644 --- a/foundations/01-css-methods/index.html +++ b/foundations/01-css-methods/index.html @@ -4,11 +4,19 @@ + + Codestin Search App
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/style.css b/foundations/01-css-methods/style.css new file mode 100644 index 000000000000..f6b8e8068ff7 --- /dev/null +++ b/foundations/01-css-methods/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/02-class-id-selectors/index.html b/foundations/02-class-id-selectors/index.html index 263042ae92a0..6f417792402b 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.
+

Number 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 e69de29bb2d1..529b5bfb965b 100644 --- a/foundations/02-class-id-selectors/style.css +++ b/foundations/02-class-id-selectors/style.css @@ -0,0 +1,19 @@ +.odd { + background-color: #FF7C7C; + font-family: Verdana, "DejaVu Sans", sans-serif; +} + +#two { + color: #0015FF; + font-size: 36px; +} + +.three { + font-size: 24px; +} + +#four { + background-color: #00FF90; + font-size: 24px; + font-weight: bold; +} diff --git a/foundations/03-grouping-selectors/index.html b/foundations/03-grouping-selectors/index.html index 796431e53ea7..dc699660fed6 100644 --- a/foundations/03-grouping-selectors/index.html +++ b/foundations/03-grouping-selectors/index.html @@ -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 e69de29bb2d1..07a075fba65a 100644 --- a/foundations/03-grouping-selectors/style.css +++ b/foundations/03-grouping-selectors/style.css @@ -0,0 +1,14 @@ +.first, +.second { + font-family: Helvetica, "Times New Roman", sans-serif; + font-size: 28px; +} + +.first { + background-color: #000000; + color: #FFFFFF; +} + +.second { + background-color: #F7FF00; +} diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css index e69de29bb2d1..b6a1f521c6fe 100644 --- a/foundations/04-chaining-selectors/style.css +++ b/foundations/04-chaining-selectors/style.css @@ -0,0 +1,9 @@ +.avatar.proportioned { + width: 300px; + height: auto; +} + +.avatar.distorted { + width: 200px; + height: 400px; +} diff --git a/foundations/05-descendant-combinator/style.css b/foundations/05-descendant-combinator/style.css index e69de29bb2d1..b8976be0ba88 100644 --- a/foundations/05-descendant-combinator/style.css +++ b/foundations/05-descendant-combinator/style.css @@ -0,0 +1,6 @@ +.container > p { + background-color: yellow; + color: red; + font-size: 20px; + text-align: center; +} diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css index b5104293b105..67c08a2c19f4 100644 --- a/foundations/06-cascade-fix/style.css +++ b/foundations/06-cascade-fix/style.css @@ -2,41 +2,42 @@ body{ font-family:Arial, Helvetica, sans-serif } -.para, +.para { + font-size: 22px; +} + .small-para { - color: hsl(0, 0%, 0%); + font-size: 14px; font-weight: 800; } +.para, .small-para { - font-size: 14px; + color: hsl(0, 0%, 0%); font-weight: 800; } -.para { - font-size: 22px; +.button { + background-color: rgb(255, 255, 255); + color: rgb(0, 0, 0); + font-size: 20px; } -.confirm { +#confirm-button { background: green; color: white; font-weight: bold; } -.button { - background-color: rgb(255, 255, 255); +.text { color: rgb(0, 0, 0); - font-size: 20px; + font-size: 22px; + font-weight: 100; } -.child { +.text.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; -} 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 f4d0a7084532..9dd1c8f0a5d0 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: 30px; + margin: 10px; } .two { background: lightblue; border: 3px solid purple; /* CHANGE ME */ - margin-bottom: 0px; + margin-bottom: 40px; } .three { @@ -23,6 +23,6 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; -} \ No newline at end of file + padding: 30px; + margin-left: auto; +} 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 00d1de59bf90..d0099dcd34a3 100644 --- a/margin-and-padding/02-margin-and-padding-2/style.css +++ b/margin-and-padding/02-margin-and-padding-2/style.css @@ -7,21 +7,32 @@ body { width: 400px; background: #fff; margin: 16px auto; + padding: 8px; } .title { background: #e3f4ff; + margin-top: 0px; + padding: 8px; + font-size: 16px; } .content { background: #e3f4ff; + padding: 16px 8px; } .button-container { background: #e3f4ff; + text-align: center; + padding: 8px; + margin-top: 8px; } button { background: white; border: 1px solid #eee; -} \ No newline at end of file + display: block; + padding: 8px 24px; + margin: 0px auto; +}