From 2e4891a1e1804659b10524c9204237dad5156185 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Sun, 2 Feb 2025 19:53:08 -0500 Subject: [PATCH 01/37] changed div1 and div3 padding argument's first value to 32px. (First value for padding refers to up/down padding, second value refers to left/right padding.) --- .../block-and-inline/01-margin-and-padding-1/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 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..b6df3ed86e06 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,7 +7,7 @@ body { background: pink; border: 3px solid blue; /* CHANGE ME */ - padding: 0px; + padding: 32px; margin: 0px; } @@ -23,6 +23,6 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; + padding: 32px; margin-left: 0px; } \ No newline at end of file From 534272e56cbfb1648d07585a9521973e793ffa61 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Sun, 2 Feb 2025 20:17:23 -0500 Subject: [PATCH 02/37] changed div1's margin to 12 px to address second bullet point in the readme task. --- foundations/block-and-inline/01-margin-and-padding-1/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b6df3ed86e06..bef94185b305 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 @@ -8,7 +8,7 @@ body { border: 3px solid blue; /* CHANGE ME */ padding: 32px; - margin: 0px; + margin: 12px; } .two { From 1fa6ec8c195ac2dacde630eaa92e8d483f1090ee Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Sun, 2 Feb 2025 20:22:36 -0500 Subject: [PATCH 03/37] changed margin-bottom to 48px for div2, to address 3rd bullet point in the task readme. --- foundations/block-and-inline/01-margin-and-padding-1/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bef94185b305..c83a924ee3de 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 @@ -15,7 +15,7 @@ body { background: lightblue; border: 3px solid purple; /* CHANGE ME */ - margin-bottom: 0px; + margin-bottom: 48px; } .three { From 0b8d51bb9389d8c00a5bc4056e9b244f9ab62a94 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Sun, 2 Feb 2025 20:27:26 -0500 Subject: [PATCH 04/37] idk how, but changing margin-left from 0px to 'auto'(for the div 3) aligned it to the right. THus, fourth bullet point is addressed. --- foundations/block-and-inline/01-margin-and-padding-1/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 c83a924ee3de..c5d9651407bc 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 @@ -24,5 +24,6 @@ body { width: 200px; /* CHANGE ME */ padding: 32px; - margin-left: 0px; + margin-left: auto; + } \ No newline at end of file From b100e95f7ccaa7b957031b911a4fc87cbf868ae4 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Sun, 2 Feb 2025 23:18:05 -0500 Subject: [PATCH 05/37] crated external stylesheet; linked it to html; addded type selector for div element and made required style modifications. --- foundations/intro-to-css/01-css-methods/index.html | 1 + foundations/intro-to-css/01-css-methods/styles/style.css | 7 +++++++ 2 files changed, 8 insertions(+) create mode 100644 foundations/intro-to-css/01-css-methods/styles/style.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..ef9a70d44a6d 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -5,6 +5,7 @@ Methods for Adding CSS +
Style me via the external method!
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; +} From 77d11efe6aae956078bcd73da924a790bd165826 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 18:28:01 -0500 Subject: [PATCH 06/37] Added internal CSS style to p element. Addresses second requirement. --- foundations/intro-to-css/01-css-methods/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index ef9a70d44a6d..9bc90c4c33f0 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -6,6 +6,13 @@ Methods for Adding CSS +
Style me via the external method!
From a77eee42f949ac55611cd6cc2a6b295a0656d99f Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 18:31:08 -0500 Subject: [PATCH 07/37] Addressed third requirement; added inline styling to button element. --- foundations/intro-to-css/01-css-methods/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index 9bc90c4c33f0..ff3ae5054f88 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -17,6 +17,6 @@
Style me via the external method!

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

- + \ No newline at end of file From 4fd35ff98d3c1a8c669bc941d523b8befee9525f Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:00:41 -0500 Subject: [PATCH 08/37] created oddnumber class, and added style rules to it. Then, applied it to 1,3,5 elements in html. --- .../intro-to-css/02-class-id-selectors/index.html | 10 +++++----- .../intro-to-css/02-class-id-selectors/style.css | 4 ++++ 2 files changed, 9 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..5d548459b9ba 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..ddeddb02b242 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,4 @@ +.oddnumber{ + color: rgb(244, 119, 119); + font-family: 'Verdana', 'DejaVu Sans', 'sans-serif'; +} \ No newline at end of file From db1f615c4bcfc3b6b226a8f6f34ec414fe578b8d Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:06:23 -0500 Subject: [PATCH 09/37] created appropriate style rules for classes second-element and fourth-element. --- .../intro-to-css/02-class-id-selectors/style.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) 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 ddeddb02b242..333638eb6fe7 100644 --- a/foundations/intro-to-css/02-class-id-selectors/style.css +++ b/foundations/intro-to-css/02-class-id-selectors/style.css @@ -1,4 +1,13 @@ .oddnumber{ color: rgb(244, 119, 119); font-family: 'Verdana', 'DejaVu Sans', 'sans-serif'; -} \ No newline at end of file +} +#second-element{ + color: rgb(0,0,256); + font-size: 36px; +} +#fourth-element{ + background-color: rgb(96, 244, 96); + font-size: 24px; + font-weight: bold; +} From eb573503679ac61fb4d6c6114f43d38f7c1fa430 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:08:29 -0500 Subject: [PATCH 10/37] third element should have two classes, so created new class and applies greater font size for the class. --- foundations/intro-to-css/02-class-id-selectors/index.html | 2 +- foundations/intro-to-css/02-class-id-selectors/style.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) 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 5d548459b9ba..8abca28cf916 100644 --- a/foundations/intro-to-css/02-class-id-selectors/index.html +++ b/foundations/intro-to-css/02-class-id-selectors/index.html @@ -10,7 +10,7 @@

Number 1 - I'm a class!

Number 2 - I'm one ID.
-

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

+

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

Number 4 - I'm another ID.

Number 5 - I'm a class!

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 333638eb6fe7..970a65108884 100644 --- a/foundations/intro-to-css/02-class-id-selectors/style.css +++ b/foundations/intro-to-css/02-class-id-selectors/style.css @@ -11,3 +11,6 @@ font-size: 24px; font-weight: bold; } +.largerfont{ + font-size: 24px; +} \ No newline at end of file From 9b363180f9fa0d33526397a35dd1aacb43d6a789 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:10:18 -0500 Subject: [PATCH 11/37] fixed a minor error in .oddnumber class; replaced declaration that specified color to a declaration that specified background color (like the requirements asked) --- foundations/intro-to-css/02-class-id-selectors/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 970a65108884..abc231f01f0b 100644 --- a/foundations/intro-to-css/02-class-id-selectors/style.css +++ b/foundations/intro-to-css/02-class-id-selectors/style.css @@ -1,5 +1,5 @@ .oddnumber{ - color: rgb(244, 119, 119); + background-color: rgb(244, 119, 119); font-family: 'Verdana', 'DejaVu Sans', 'sans-serif'; } #second-element{ From d1ccb248ff2ebee65b6adfe24677a34956a9be83 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:16:21 -0500 Subject: [PATCH 12/37] started exercise 3; created common-style class, and added the style rules that both buttons share to the class. --- foundations/intro-to-css/03-grouping-selectors/index.html | 4 ++-- foundations/intro-to-css/03-grouping-selectors/style.css | 4 ++++ 2 files changed, 6 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..4d8f60037356 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..31046f121eb5 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,4 @@ +.common-style{ + font-size: 28px; + font-family: Helvetica,'Times New Roman', sans-serif; +} \ No newline at end of file From 94c127f935a3ec29c38f5ad040e2be32160fe58e Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:27:04 -0500 Subject: [PATCH 13/37] Reverting the change from previous commit. Why? Because I made a mistake. This reverts commit d1ccb248ff2ebee65b6adfe24677a34956a9be83. --- foundations/intro-to-css/03-grouping-selectors/index.html | 4 ++-- foundations/intro-to-css/03-grouping-selectors/style.css | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html index 4d8f60037356..796431e53ea7 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 31046f121eb5..e69de29bb2d1 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -1,4 +0,0 @@ -.common-style{ - font-size: 28px; - font-family: Helvetica,'Times New Roman', sans-serif; -} \ No newline at end of file From bf535e184fa22d9f320db6cf22b058d90b6c2a7d Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:44:31 -0500 Subject: [PATCH 14/37] created two classes ('first-element' and 'second-element') and applied the unique styles to them. --- foundations/intro-to-css/03-grouping-selectors/index.html | 4 ++-- foundations/intro-to-css/03-grouping-selectors/style.css | 7 +++++++ 2 files changed, 9 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..3a7743f4ea92 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..02c03abaa011 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,7 @@ +.first-element{ + background-color:black; + color:white; +} +.second-element{ + background-color:yellow; +} \ No newline at end of file From be7344443ab1b215065c45d58ad5a92db899b03d Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:46:04 -0500 Subject: [PATCH 15/37] fixed typo in index.html. now, classnames are matching. --- foundations/intro-to-css/03-grouping-selectors/index.html | 4 ++-- 1 file changed, 2 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 3a7743f4ea92..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 From bf46fd4e465a5dfb025143ac16b9051e7929e97f Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 19:47:56 -0500 Subject: [PATCH 16/37] used grouping selector to add common styles that apply to both elements. DONE WITH EXERCISE. --- foundations/intro-to-css/03-grouping-selectors/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/foundations/intro-to-css/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css index 02c03abaa011..0db40bba5b42 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -4,4 +4,8 @@ } .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 From bf076ed5317a06b86f6f41b042ecf4d6c16b5c65 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 3 Feb 2025 20:13:30 -0500 Subject: [PATCH 17/37] easy-peasy. Just understand when you got to use the chaining selectors, and when grouping selectors. Here, chaining selectors are the way to go. --- foundations/intro-to-css/04-chaining-selectors/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 From 9e6d11f5278b3cd15549de142ba111d422d71313 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Tue, 4 Feb 2025 02:36:39 -0500 Subject: [PATCH 18/37] EASY-PEASY. Just learned descendant combinator, and applied its knowledge. --- foundations/intro-to-css/05-descendant-combinator/style.css | 6 ++++++ 1 file changed, 6 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..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 From 1e4dd6100ec824c5c5a4bfd2f5ed0fc1524f5bcd Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 10 Feb 2025 01:21:22 -0500 Subject: [PATCH 19/37] given the description of the commit in comments on CSS! just did some basic re-ordering, that's all! --- foundations/cascade/01-cascade-fix/style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..33b15980267e 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -8,15 +8,16 @@ body { 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; +} + .small-para { font-size: 14px; font-weight: 800; } -.para { - font-size: 22px; -} - .confirm { background: green; color: white; From 09ea754b9b638f0eacc6b9f231a79aced008c8d7 Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 10 Feb 2025 01:31:12 -0500 Subject: [PATCH 20/37] commit description provided in comments. JUst used chaining selector to give confirm button precedence over button. Then, since .button selector's properties suited the cancel button's properties, didn't bother to create a chaining selector .button.cancel. --- foundations/cascade/01-cascade-fix/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index 33b15980267e..a586f121aae7 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -17,9 +17,9 @@ body { font-size: 14px; font-weight: 800; } - -.confirm { - background: green; +/*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; } From 23a4de41d5b043e5a5a765adb023b642bd5f1acc Mon Sep 17 00:00:00 2001 From: Prateek14b <50728753+Prateek14b@users.noreply.github.com.> Date: Mon, 10 Feb 2025 01:40:28 -0500 Subject: [PATCH 21/37] chained 3 selectors div.text.child to get precedence over pre-existing div.text selector, for applying special styles to child elements. --- foundations/cascade/01-cascade-fix/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index a586f121aae7..e64f8d0e8c31 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -29,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; From a5815d0205261be1821e1e2457eca9c4e9f8e8f3 Mon Sep 17 00:00:00 2001 From: Prateek Date: Thu, 22 May 2025 00:00:18 +0530 Subject: [PATCH 22/37] yeah, i just wanna call it a day, but i don't wanna leave without pushing a commit so here it goes lmao --- foundations/cascade/01-cascade-fix/index.html | 1 + 1 file changed, 1 insertion(+) 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 @@ + From da348bd01f52e72b79dae1ce0b1de25342dbd578 Mon Sep 17 00:00:00 2001 From: Prateek Date: Sat, 24 May 2025 10:14:50 +0530 Subject: [PATCH 23/37] bruh, i already completed this exercise. --- foundations/block-and-inline/01-margin-and-padding-1/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 c5d9651407bc..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 @@ -26,4 +26,5 @@ body { padding: 32px; margin-left: auto; -} \ No newline at end of file +} +/*exerise has already been solved.*/ \ No newline at end of file From c11dcaf7b228f0cae0fdd2aa6b6d74f6a5f7ec28 Mon Sep 17 00:00:00 2001 From: Prateek Date: Sun, 25 May 2025 09:59:53 +0530 Subject: [PATCH 24/37] exercise - 2 DONE! key taekaways: add dark red borders to every element on CSS, for easy debugging. Second, ALWAYS set box-sizing to border-box for ALL elements, using the * selector. --- .../02-margin-and-padding-2/style.css | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) 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..7200d52e1ece 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,42 @@ 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; + 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 From fb5868a9303a9ddb1e3f25cc469ca57164901a00 Mon Sep 17 00:00:00 2001 From: Prateek Date: Sun, 25 May 2025 10:04:45 +0530 Subject: [PATCH 25/37] fixed incorrect parantheses, small error. --- foundations/block-and-inline/02-margin-and-padding-2/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 7200d52e1ece..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 @@ -46,5 +46,4 @@ button { } /*.button-container, .content, .title, .button, .card { - border: 2px red solid;*/ -} \ No newline at end of file + border: 2px red solid;*/ \ No newline at end of file From 619d2195320772e611ee3cae7072d4d24dc94442 Mon Sep 17 00:00:00 2001 From: Prateek Date: Thu, 29 May 2025 23:57:22 +0530 Subject: [PATCH 26/37] commit-1 --- foundations/flex/01-flex-center/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index e35feacd28d0..a3832f4a6228 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -12,4 +12,6 @@ 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! \ No newline at end of file From 4ea23fc40d3163f5f96a2ae93984d8a6b8603155 Mon Sep 17 00:00:00 2001 From: Prateek Date: Thu, 29 May 2025 23:58:25 +0530 Subject: [PATCH 27/37] commit-2 --- foundations/flex/01-flex-center/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index a3832f4a6228..cb638eb348b5 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -14,4 +14,5 @@ height: 80px; } -/* 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! \ 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 From c4046ecac3762bb514712285a029fa389fb7bcb7 Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 30 May 2025 13:57:33 +0530 Subject: [PATCH 28/37] easy. centering the flex item means applying justify-content and align-items to parent container. --- foundations/flex/01-flex-center/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/foundations/flex/01-flex-center/style.css b/foundations/flex/01-flex-center/style.css index cb638eb348b5..ecc05b2fdd5e 100644 --- a/foundations/flex/01-flex-center/style.css +++ b/foundations/flex/01-flex-center/style.css @@ -3,9 +3,12 @@ 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; From ac9792307d200268e8c334c2760761f2ac0215a5 Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 30 May 2025 20:34:11 +0530 Subject: [PATCH 29/37] even the solution.css doesn't match the desired webpage layout smhh, i have no idea what how but it just works. move on --- foundations/flex/02-flex-header/style.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) 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 +} + From de66254069e567f062231cc638115079bfaa1dab Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 30 May 2025 21:01:00 +0530 Subject: [PATCH 30/37] easy. but this time i had to add an extra two parent containers to the html to make things work. --- foundations/flex/03-flex-header-2/index.html | 26 +++++++++++--------- foundations/flex/03-flex-header-2/style.css | 19 +++++++++++++- 2 files changed, 33 insertions(+), 12 deletions(-) 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; } From 6f6776697141d92ee01e5f959a00c71fbddd4e2d Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 30 May 2025 22:29:17 +0530 Subject: [PATCH 31/37] exercise-4 done. pretty easy. --- .../flex/04-flex-information/index.html | 30 ++++++++++++------- .../flex/04-flex-information/style.css | 15 ++++++++++ 2 files changed, 34 insertions(+), 11 deletions(-) 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 */ From 061a28b270c219086e21bcd498d4d6862a2b7ad5 Mon Sep 17 00:00:00 2001 From: Prateek Date: Fri, 30 May 2025 23:36:57 +0530 Subject: [PATCH 32/37] did it my own way, different from the suggested solution. but i ended up with an exact match to the desired picture. --- foundations/flex/05-flex-modal/index.html | 23 ++++++++++++----- foundations/flex/05-flex-modal/style.css | 31 +++++++++++++++++++++-- 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html index 3b4a06f2bcfa..5c26c11e141f 100644 --- a/foundations/flex/05-flex-modal/index.html +++ b/foundations/flex/05-flex-modal/index.html @@ -8,13 +8,22 @@ 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..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; } From 005dd2377db81c72fb0406178e551cbb2c435197 Mon Sep 17 00:00:00 2001 From: Prateek <50728753+Prateek14b@users.noreply.github.com> Date: Sat, 31 May 2025 00:59:15 +0530 Subject: [PATCH 33/37] Trigger commit to enable PR merge --- foundations/flex/06-flex-layout/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/foundations/flex/06-flex-layout/style.css b/foundations/flex/06-flex-layout/style.css index 3777aef335f0..da3b360e5133 100644 --- a/foundations/flex/06-flex-layout/style.css +++ b/foundations/flex/06-flex-layout/style.css @@ -24,3 +24,4 @@ input { padding: 8px 24px; width: 400px; } +/* trigger commit */ From ca2f527b8a74643e4f53dab1af6f98f4b0cde443 Mon Sep 17 00:00:00 2001 From: Prateek <50728753+Prateek14b@users.noreply.github.com> Date: Sun, 1 Jun 2025 00:40:16 +0530 Subject: [PATCH 34/37] honestly, i am getting the hang of this stuff a bit. like, i learned from the solution.css and solution.html that i need to be more minimalistic with my approach, not relying too much on flex containers and using too many wrappers that the htmls and css becomes harder to understand and, thus, scale. BE MINIMALIST. --- foundations/flex/05-flex-modal/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html index 5c26c11e141f..f77279e9131f 100644 --- a/foundations/flex/05-flex-modal/index.html +++ b/foundations/flex/05-flex-modal/index.html @@ -26,4 +26,5 @@
- \ No newline at end of file + + \ No newline at end of file From 0a1d061f228dc560468c6ca0bc849a5def14a40b Mon Sep 17 00:00:00 2001 From: Prateek <50728753+Prateek14b@users.noreply.github.com> Date: Sun, 1 Jun 2025 02:30:11 +0530 Subject: [PATCH 35/37] 99.99% perfect solution. only problem was i forgot to add the flex:1 property to the image in between, to allow it to consume any remaining space on the webpage and grow -- or shrink, whatever context. --- foundations/flex/06-flex-layout/style.css | 40 ++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/foundations/flex/06-flex-layout/style.css b/foundations/flex/06-flex-layout/style.css index da3b360e5133..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,4 +29,37 @@ input { padding: 8px 24px; width: 400px; } -/* trigger commit */ + +.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 From dfe7c5de3d12eef0195b5f1b9343ffc65b33d564 Mon Sep 17 00:00:00 2001 From: Prateek <50728753+Prateek14b@users.noreply.github.com> Date: Sun, 1 Jun 2025 03:12:26 +0530 Subject: [PATCH 36/37] added two wrappers, or parent containers, to the html. need to continue with css, to get the desired layout, in the morn. --- foundations/flex/07-flex-layout-2/index.html | 33 +++++++++++--------- 1 file changed, 19 insertions(+), 14 deletions(-) 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 ❀️ From b01c817a1af37b60041366db47ac1a987546b902 Mon Sep 17 00:00:00 2001 From: Prateek <50728753+Prateek14b@users.noreply.github.com> Date: Sun, 1 Jun 2025 12:53:50 +0530 Subject: [PATCH 37/37] final exercise 07 done! takeaway: learn to be more intentional with using the flex property. set flex-shrink to 0 for sections of the webpage you want the same size, regardless of browser window size, and set flex:1 for sections that you want to let grow when expanded. --- foundations/flex/07-flex-layout-2/style.css | 59 +++++++++++++++++++++ 1 file changed, 59 insertions(+) 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