From 4687e0fe12ebf8c203e4aa080bf055f19c303a70 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sat, 7 Jun 2025 13:16:15 +0000 Subject: [PATCH 01/16] 01-Css-methods: Create styles.css and edit index.html Added style to div via external css, p via the internal css and button via inline css. --- foundations/intro-to-css/01-css-methods/index.html | 10 +++++++++- foundations/intro-to-css/01-css-methods/styles.css | 7 +++++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 foundations/intro-to-css/01-css-methods/styles.css diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index effe3cc3db01..11a5606ed9e3 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.css b/foundations/intro-to-css/01-css-methods/styles.css new file mode 100644 index 000000000000..d75b453190e9 --- /dev/null +++ b/foundations/intro-to-css/01-css-methods/styles.css @@ -0,0 +1,7 @@ +div { + background: red; + color: white; + font-size: 32px; + font-weight: bold; + text-align: center; +} \ No newline at end of file From 8607515cb0dde470d74a84b4fa375857b4ee5062 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sat, 7 Jun 2025 16:41:59 +0000 Subject: [PATCH 02/16] 02-class-id-selectors Edit index.html and style.css Added class of description and cool to the three odd elements div 1 and 2 with an ID of even-one even-two respectively. Applied the styling to the selectors in the style sheet accordingly. --- .../02-class-id-selectors/index.html | 10 ++++----- .../02-class-id-selectors/style.css | 22 +++++++++++++++++++ 2 files changed, 27 insertions(+), 5 deletions(-) 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..bebce1febad8 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..e94e40fc84bd 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,22 @@ +.description.odd { + font-family: 'Verdana', 'DejaVu Sans', sans-serif; + background-color:#dd77b1 ; +} + +.description.odd.cool { + font-size: 24px;; +} + +.text { + color: #153bc5; +} + +#even-two { + background-color: #74be6a; + font-size: 24px; + font-weight: bold; +} + +#even-one { + font-size: 36px; +} \ No newline at end of file From 79cbece53ae3c6dbd410714a8ddb635f134e1a02 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sat, 7 Jun 2025 20:47:02 +0000 Subject: [PATCH 03/16] Add solutions to grouping-selectors --- .../intro-to-css/03-grouping-selectors/index.html | 4 ++-- .../intro-to-css/03-grouping-selectors/style.css | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html index 796431e53ea7..e3af7de49e61 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..8837436debce 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,14 @@ +.btn.black { + background-color: #000; + color: #fff; +} + +.btn.yellow { + background-color: #fff000; +} + +.btn.black, +.btn.yellow { + font-family: 'Helvetica', 'Times New Roman', sans-serif; + font-size: 28px; +} \ No newline at end of file From 2bc8ee0ad0d356124ebe5d357ee136cb7cb3dbc7 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sat, 7 Jun 2025 21:38:56 +0000 Subject: [PATCH 04/16] Add solutions and ignore .vscode folder Added solutions to chaining selectors and added .vscode folder to .gitignore as i did not want to push this settings to the upstream. --- .gitignore | 1 + .../intro-to-css/04-chaining-selectors/style.css | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) 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/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css index d55c2c5c7090..fc304a5e279e 100644 --- a/foundations/intro-to-css/04-chaining-selectors/style.css +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -1 +1,10 @@ -/* Add CSS Styling */ \ No newline at end of file +/* Add CSS Styling */ +.avatar.proportioned { + width: 300px; + height: auto; +} + +.avatar.distorted { + width: 300px; + height: 600px; +} From aa5589d137bbe76252f61c1ea81806601b12fdd1 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sat, 7 Jun 2025 23:21:50 +0000 Subject: [PATCH 05/16] Add solutions to descendant combinator Experiment with both type and class selectors for this project and commented out the class descendant combinators. --- .../intro-to-css/05-descendant-combinator/style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css index e69de29bb2d1..a48ac1e516e5 100644 --- a/foundations/intro-to-css/05-descendant-combinator/style.css +++ b/foundations/intro-to-css/05-descendant-combinator/style.css @@ -0,0 +1,13 @@ +/* .container .text { + background-color: #fff000; + color: #ff0000; + font-size: 20px; + text-align: center; +} */ + +div p { + background-color: #fff000; + color: #ff0000; + font-size: 20px; + text-align: center; +} \ No newline at end of file From 5f585203c218cc88800d2b475c8720cb0cda9c2b Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sun, 8 Jun 2025 09:44:27 +0000 Subject: [PATCH 06/16] Fix cascade order issues - Move grouped selectors for para down below .small-para - Use ID selector #confirm-button to target the confirm button - Chain type and class selector to target the div with child class --- foundations/cascade/01-cascade-fix/style.css | 34 ++++++++++++-------- 1 file changed, 21 insertions(+), 13 deletions(-) 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 From 55ce63f3252f44d20d85595b5c38f38e937a9b4d Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Sun, 8 Jun 2025 20:24:46 +0000 Subject: [PATCH 07/16] Add solution to 01-margin-and-padding --- .../block-and-inline/01-margin-and-padding-1/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 From f4bd4f7d9395f512b7f554e0a7de6f75a31af335 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Mon, 9 Jun 2025 09:19:48 +0000 Subject: [PATCH 08/16] Add solutions --- .../02-margin-and-padding-2/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) 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 From e2273d617531f8262c2163c037da6eb18f429648 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Tue, 10 Jun 2025 07:16:40 +0000 Subject: [PATCH 09/16] Add solution to flex-center --- foundations/flex/01-flex-center/style.css | 3 +++ 1 file changed, 3 insertions(+) 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 { From b5b68273727bd728985165b5b735cf74e13da18e Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Tue, 10 Jun 2025 09:45:52 +0000 Subject: [PATCH 10/16] Add solutions to flex header --- foundations/flex/02-flex-header/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) 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 { From 61f45326a64883093ef6dd31ab03626c71eefcab Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Tue, 10 Jun 2025 10:39:46 +0000 Subject: [PATCH 11/16] Modify css and Html files - Center all items vertically inside the header - Insert two divs as a container for items on the right and items on the left --- foundations/flex/03-flex-header-2/index.html | 28 +++++++++++++------- foundations/flex/03-flex-header-2/style.css | 22 +++++++++++++++ 2 files changed, 40 insertions(+), 10 deletions(-) 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..9c5034e91227 100644 --- a/foundations/flex/03-flex-header-2/style.css +++ b/foundations/flex/03-flex-header-2/style.css @@ -12,6 +12,24 @@ 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 add 16px of space between the left and right items */ + gap: 16px; +} + +/* + 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: 8px; } .profile-image { @@ -45,4 +63,8 @@ a { ul { list-style-type: none; + display: flex; + margin: 0; + padding: 0; + gap: 10px; } From 05e45b21d11b780f624416aec82a00ca3b783402 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Tue, 10 Jun 2025 10:49:16 +0000 Subject: [PATCH 12/16] Delete last comment in .header declaration --- foundations/flex/03-flex-header-2/style.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css index 9c5034e91227..6053addcdcca 100644 --- a/foundations/flex/03-flex-header-2/style.css +++ b/foundations/flex/03-flex-header-2/style.css @@ -17,8 +17,6 @@ body { justify-content: space-between; /* This inserts a space between the items and the header */ padding: 8px; - /* This add 16px of space between the left and right items */ - gap: 16px; } /* @@ -29,7 +27,7 @@ body { .left-items { display: flex; align-items: center; - gap: 8px; + gap: 16px; } .profile-image { From cc3694b3e9a40f6ac35f2eb0093b53753101b6b8 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Tue, 10 Jun 2025 13:12:54 +0000 Subject: [PATCH 13/16] Add solution to flex information Modify index.html and style.css files --- .../flex/04-flex-information/index.html | 31 +++++++++++-------- .../flex/04-flex-information/style.css | 12 +++++++ 2 files changed, 30 insertions(+), 13 deletions(-) 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.
+
+
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..c33a3047368e 100644 --- a/foundations/flex/04-flex-information/style.css +++ b/foundations/flex/04-flex-information/style.css @@ -1,5 +1,13 @@ body { font-family: 'Courier New', Courier, monospace; + text-align: center; +} + +.container { + display: flex; + justify-content: center; + gap: 52px; + margin-top: 32px; } img { @@ -7,6 +15,10 @@ img { height: 100px; } +.frame { + max-width: 200px; +} + .title { font-size: 36px; font-weight: 900; From ec2b156a4e2923fd37d60209831d77a722f2fac2 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Wed, 11 Jun 2025 14:42:56 +0000 Subject: [PATCH 14/16] Modify index and styles file with solution - Wrap the header close btn text and buttons in a container for flex. Apply flex: 1, to make container take up remaining space - Wrap the buttons in a container to align the two buttons horizontally. - Use gaps for consistent spacing. - Encompass the close button in the header div. --- foundations/flex/05-flex-modal/index.html | 18 ++++++++++------ foundations/flex/05-flex-modal/style.css | 26 ++++++++++++++++++++++- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html index 3b4a06f2bcfa..7f54f5b0ce71 100644 --- a/foundations/flex/05-flex-modal/index.html +++ b/foundations/flex/05-flex-modal/index.html @@ -8,13 +8,17 @@ 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 diff --git a/foundations/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css index 780b355ef3de..32e1f508c6ec 100644 --- a/foundations/flex/05-flex-modal/style.css +++ b/foundations/flex/05-flex-modal/style.css @@ -15,11 +15,29 @@ body { justify-content: center; } +div .header { + display: flex; + justify-content: space-between; + font-weight: bold; + font-size: 18px; +} +/* flex container for the header, close button and the main text */ +.container { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; /* Flex 1 on the container makes the container grow to take rest of the space */ + gap: 10px; +} + .modal { background: white; width: 480px; border-radius: 10px; box-shadow: 2px 4px 16px rgba(0,0,0,.2); + padding: 15px; /* Add flexbox to the modal container to align icon next to the content */ + display: flex; /* Space between layout */ + gap: 15px; } .icon { @@ -32,7 +50,8 @@ body { border-radius: 50%; display: flex; align-items: center; - justify-content: center; + justify-content: center; /* Prevents icon from shrinking */ + flex-shrink: 0; } .close-button { @@ -49,6 +68,11 @@ body { border: 1px solid #eee; padding: 0; } +/* container for the continue and cancel buttons */ +.btn-container { + display: flex; /* makes the container a flexbox and aligns the buttons horizontally as the default flex direction is row */ + gap: 10px; +} button { cursor: pointer; From 0588c85fb9ed6e306a2f44835a28f8c8de489e3b Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Wed, 11 Jun 2025 17:32:08 +0000 Subject: [PATCH 15/16] Modify stylesheet with solution --- foundations/flex/06-flex-layout/style.css | 46 +++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/foundations/flex/06-flex-layout/style.css b/foundations/flex/06-flex-layout/style.css index 3777aef335f0..23dc8cc018b8 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; + /* Add this to center the three main containers (.header, .footer, and .content) vertically. */ + display: flex; + flex-direction: column; + justify-content: space-between; } img { @@ -16,6 +20,9 @@ button { border: none; border-radius: 8px; background: #eee; + /* Add space around the content of the button and space between the input and the buttons */ + padding: 10px; + margin-top: 10px; } input { @@ -24,3 +31,42 @@ input { padding: 8px 24px; width: 400px; } +/* Centers the items horizontally with space between the left and right links */ +.header, +.footer { + display: flex; + justify-content: space-between; + padding: 0; +} + +.footer { + background-color: #eee; +} + +.left-links, +.right-links, +ul.left-links, +ul.right-links { + display: flex; + gap: 10px; + padding: 0 8px; +} +/* Add this to remove the bullet point style */ +ul { + list-style-type: none; +} + +/* Add this to remove the text underline */ +li a { + text-decoration: none; + color: #333; +} + +/* Add this to center the main content. The input, img and buttons */ +.content { + display: flex; + flex-direction: column; + align-items: center; /* horizontal alignment of the div */ + justify-content: center; /* Vertical alignment of the div */ + gap: 10px; +} \ No newline at end of file From 50441a3a0846a6114268f40805ecd4a95071d254 Mon Sep 17 00:00:00 2001 From: malvin149 <205408852+malvin149@users.noreply.github.com> Date: Wed, 11 Jun 2025 23:42:04 +0000 Subject: [PATCH 16/16] Modify style.css with solution --- foundations/flex/07-flex-layout-2/index.html | 46 ++++++++++-------- foundations/flex/07-flex-layout-2/style.css | 51 ++++++++++++++++++-- 2 files changed, 73 insertions(+), 24 deletions(-) diff --git a/foundations/flex/07-flex-layout-2/index.html b/foundations/flex/07-flex-layout-2/index.html index 85c1d0b75cae..4c912d074a4e 100644 --- a/foundations/flex/07-flex-layout-2/index.html +++ b/foundations/flex/07-flex-layout-2/index.html @@ -8,28 +8,32 @@ -
- MY AWESOME WEBSITE -
- -
- -
+
+ 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!
+
+
+ +
-
- The Odin Project ❀️ -
+
+
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/foundations/flex/07-flex-layout-2/style.css b/foundations/flex/07-flex-layout-2/style.css index 6caf04c79451..415ca9cd775e 100644 --- a/foundations/flex/07-flex-layout-2/style.css +++ b/foundations/flex/07-flex-layout-2/style.css @@ -2,28 +2,73 @@ 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; + height: 72px; + display: flex; + align-items: center; + padding-left: 16px; } .footer { - height: 72px; background: #eee; color: darkmagenta; + height: 72px; + display: flex; + align-items: center; + justify-content: center; } .sidebar { - width: 300px; background: royalblue; box-sizing: border-box; + display: flex; + flex-shrink: 0; + width: 300px; + padding: 16px; +} + +.sidebar ul { + list-style: none; + padding: 0; + margin: 10px; +} + +.sidebar li { + margin-top: 8px; +} + +.sidebar a { + color: #fff; + text-decoration: none; + font-size: 24px; +} + +.content { + display: flex; + flex: 1; + flex-wrap: wrap; + padding: 48px; + gap: 20px; } .card { border: 1px solid #eee; box-shadow: 2px 4px 16px rgba(0,0,0,.06); border-radius: 4px; + flex: 1 1 200px; + padding: 16px; + min-width: 250px; +} + +main { + display: flex; + flex: 1; } \ No newline at end of file