From f4bef7a606bbcc40e827899e4f8de45d50827254 Mon Sep 17 00:00:00 2001 From: Sebatiantorres <84696802+Sebatiantorres@users.noreply.github.com> Date: Sun, 6 Apr 2025 16:58:20 -0400 Subject: [PATCH 01/10] feat!: Solve flexbox center alignment exercise - Apply changes to the solution.css file to center the box using flexbox By: Sebastian Torres --- .../flex/01-flex-center/solution/solution.css | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/foundations/flex/01-flex-center/solution/solution.css b/foundations/flex/01-flex-center/solution/solution.css index 1df86d4b0b49..b0130a17be92 100644 --- a/foundations/flex/01-flex-center/solution/solution.css +++ b/foundations/flex/01-flex-center/solution/solution.css @@ -3,6 +3,10 @@ border: 4px solid midnightblue; width: 400px; height: 300px; + display: flex; + flex: 1; + align-items: center; + justify-content: center; } .box { @@ -14,16 +18,4 @@ height: 80px; } -/* SOLUTION */ - -/* disclaimer: duplicating the `.container` selector here isn't best practice. -In your solution you probably put it right inside the existing `.container`, -which _is_ the best practice. - -We separated it out here to make it extra clear what has changed. */ -.container { - display: flex; - align-items: center; - justify-content: center; -} \ No newline at end of file From 246e61681e400063ca8033425e0936122397f011 Mon Sep 17 00:00:00 2001 From: Sebatiantorres <84696802+Sebatiantorres@users.noreply.github.com> Date: Sun, 6 Apr 2025 17:46:52 -0400 Subject: [PATCH 02/10] feat!: add flexbox header solution - added flexbox layout using flexbox properties - Set 0 margin and padding to body - Set display to flex on header by: Sebastian Torres --- .../flex/02-flex-header/solution/solution.css | 54 +++++++++++++------ 1 file changed, 38 insertions(+), 16 deletions(-) diff --git a/foundations/flex/02-flex-header/solution/solution.css b/foundations/flex/02-flex-header/solution/solution.css index 884e862e13b1..0a802a74ae9b 100644 --- a/foundations/flex/02-flex-header/solution/solution.css +++ b/foundations/flex/02-flex-header/solution/solution.css @@ -1,11 +1,47 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + .header { font-family: monospace; background: papayawhip; } +.header { + display: flex; + margin: 10px; + flex-basis: 100%; + +} +.left-links { + display: flex; + flex: 1; + flex-basis: auto; + justify-content: flex-start; + align-items: center; + padding: 0 10px; + +} +.right-links { + display: flex; + flex: 1 1 auto; + justify-content: flex-end; + align-self: center; + padding: 0 10px; +} .logo { + width: 180px; + margin: 18px; + display: flex; + + flex-direction: column; + justify-content: center; + align-items: center; font-size: 48px; font-weight: 900; + color: tomato; background: white; padding: 4px 32px; @@ -14,6 +50,8 @@ ul { /* this removes the dots on the list items*/ list-style-type: none; + display: flex; + gap: 10px; } a { @@ -23,19 +61,3 @@ a { /* this removes the line under the links */ text-decoration: none; } - -/* SOLUTION */ - -.header { - padding: 8px; - display: flex; - align-items: center; - justify-content: space-between; -} - -ul { - display: flex; - margin: 0; - padding: 0; - gap: 8px; -} \ No newline at end of file From 347b7aafbe4bdc97304b8312f0f2ec221b035af6 Mon Sep 17 00:00:00 2001 From: Sebatiantorres <84696802+Sebatiantorres@users.noreply.github.com> Date: Sun, 6 Apr 2025 18:44:24 -0400 Subject: [PATCH 03/10] feat!: Add flexbox header-2 solution - Add flexbox properties to create a responsive header layout - Respect the design specifications of image By: Sebastian Torres --- .../03-flex-header-2/solution/solution.css | 44 +++++++++++-------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/foundations/flex/03-flex-header-2/solution/solution.css b/foundations/flex/03-flex-header-2/solution/solution.css index df6c99a9e449..7d585ce2f032 100644 --- a/foundations/flex/03-flex-header-2/solution/solution.css +++ b/foundations/flex/03-flex-header-2/solution/solution.css @@ -12,6 +12,25 @@ body { background: white; border-bottom: 1px solid #ddd; box-shadow: 0 0 8px rgba(0,0,0,.1); + width: 100%; + display: flex; + + +} +.left { + display: flex; + align-items: center; + justify-items: flex-start; + padding: 10px; + flex: 1; +} + +.right { + display: flex; + flex-direction: row; + align-items: center; + margin-left: auto; + padding: 10px; } .profile-image { @@ -19,7 +38,8 @@ body { box-shadow: inset 2px 2px 4px rgba(0,0,0,.5); border-radius: 50%; width: 48px; - height: 48px; + height: 48px; + margin: 0 10px; } .logo { @@ -35,6 +55,7 @@ button { background: rebeccapurple; color: white; padding: 8px 24px; + } a { @@ -44,26 +65,11 @@ a { } ul { - list-style-type: none; -} - -/* SOLUTION */ - -.header { display: flex; - justify-content: space-between; - padding: 8px; + list-style-type: none; } -ul { - display: flex; - margin: 0; - padding: 0; - gap: 16px; +li { + margin: 0 10px; } -.left, .right { - display: flex; - align-items: center; - gap: 16px; -} From 9274cb673f516cae0e3af4a77ca1351510d50e41 Mon Sep 17 00:00:00 2001 From: Sebatiantorres <84696802+Sebatiantorres@users.noreply.github.com> Date: Mon, 7 Apr 2025 21:47:28 -0400 Subject: [PATCH 04/10] feat!: add solutions for flexbox 04-information - Edit the html. - Add css rules to make the layout responsive. - Add solution image to this and past exercise by: Sebastian Torres --- .../flex/01-flex-center/solution/solution.png | Bin 0 -> 11165 bytes .../flex/02-flex-header/solution/solution.png | Bin 0 -> 19105 bytes .../03-flex-header-2/solution/solution.png | Bin 0 -> 13300 bytes .../04-flex-information/solution/solution.css | 61 ++++++++++++------ .../solution/solution.html | 16 ++--- .../04-flex-information/solution/solution.png | Bin 0 -> 72402 bytes 6 files changed, 48 insertions(+), 29 deletions(-) create mode 100644 foundations/flex/01-flex-center/solution/solution.png create mode 100644 foundations/flex/02-flex-header/solution/solution.png create mode 100644 foundations/flex/03-flex-header-2/solution/solution.png create mode 100644 foundations/flex/04-flex-information/solution/solution.png diff --git a/foundations/flex/01-flex-center/solution/solution.png b/foundations/flex/01-flex-center/solution/solution.png new file mode 100644 index 0000000000000000000000000000000000000000..d38ebd4456c0d4eeb382669c355b7145198a6ffa GIT binary patch literal 11165 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 literal 0 HcmV?d00001 diff --git a/foundations/flex/02-flex-header/solution/solution.png b/foundations/flex/02-flex-header/solution/solution.png new file mode 100644 index 0000000000000000000000000000000000000000..9c4f9e95d2d0c87bc9d81f39c942fcab041338fb GIT binary patch literal 19105 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 literal 0 HcmV?d00001 diff --git a/foundations/flex/03-flex-header-2/solution/solution.png b/foundations/flex/03-flex-header-2/solution/solution.png new file mode 100644 index 0000000000000000000000000000000000000000..0490571a70276f5016e1c85e24baaf282529b7c8 GIT binary patch literal 13300 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 EKauN{@c;k- literal 0 HcmV?d00001 diff --git a/foundations/flex/04-flex-information/solution/solution.css b/foundations/flex/04-flex-information/solution/solution.css index 2e53bb8e3c5f..d2d9b1a7baeb 100644 --- a/foundations/flex/04-flex-information/solution/solution.css +++ b/foundations/flex/04-flex-information/solution/solution.css @@ -8,10 +8,49 @@ img { } .title { + text-align: center; font-size: 36px; font-weight: 900; } +.flex.container { + width: 80%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + margin: 2em 10% 0 10%; +} + +.card { + + + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; + margin: 20px 40px; +} +.text { + text-align: center; + text-justify: center; +} +/* img { + flex: 0 0 25%; + order: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; +} +.text { + text-align: center; +} */ + + + /* do not edit this footer */ .footer { position: fixed; @@ -23,24 +62,4 @@ img { align-items: center; justify-content: center; background: #eee; -} - -/* SOLUTION */ - -body { - text-align: center; -} - -.title { - margin-bottom: 32px; -} - -.container { - display: flex; - justify-content: center; - gap: 52px; -} - -.info { - max-width: 200px; -} +} \ No newline at end of file diff --git a/foundations/flex/04-flex-information/solution/solution.html b/foundations/flex/04-flex-information/solution/solution.html index a9c70eb375d8..6b733cf8a06a 100644 --- a/foundations/flex/04-flex-information/solution/solution.html +++ b/foundations/flex/04-flex-information/solution/solution.html @@ -10,25 +10,25 @@
Information!
-
-
+
+
barberry -
This is a type of plant. We love this one.
+
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.
+
We have so many plants. Yay plants.
-
+ +
saffron
I'm running out of things to say about plants.
-