From 4ac79cf2fb3ab73093ca9d8595395893fc89b358 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Wed, 13 May 2026 23:19:36 +0100 Subject: [PATCH 01/10] Add initial styles and update index --- Form-Controls/styles.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Form-Controls/styles.css diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css new file mode 100644 index 000000000..e69de29bb From 9030b1dbcf0690f251d56aa40ba6ba1307942f93 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Thu, 14 May 2026 13:54:55 +0100 Subject: [PATCH 02/10] form controls html structure --- Form-Controls/index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..3d544ac3d 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,8 +4,9 @@ My form exercise - + +
From 898c12024895909db2a4acd5c0d9ade3cce36787 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Thu, 14 May 2026 13:55:31 +0100 Subject: [PATCH 03/10] form control raw html --- Form-Controls/index.html | 54 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 3d544ac3d..491a24d50 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -10,7 +10,7 @@
-

Product Pick

+

T-Shirt Product Pick

@@ -18,11 +18,61 @@

Product Pick

+ +
+ + +
+
+ + +
+
+ + +
+
+ Size +
+ + + +
+
+ + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+
-

By HOMEWORK SOLUTION

+

Designed with Love by Monsur Abdulrahman

From 1e40348dbcee1107a62089f348a406fbdbf000a8 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Thu, 14 May 2026 14:29:10 +0100 Subject: [PATCH 04/10] Syling in Progress --- Form-Controls/index.html | 61 ++++++++++++++++++++++++---------------- Form-Controls/styles.css | 42 +++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 24 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 491a24d50..54182781a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,12 +1,15 @@ - + My form exercise - + - +
@@ -21,11 +24,23 @@

T-Shirt Product Pick

- +
- +
@@ -36,38 +51,36 @@

T-Shirt Product Pick

- Size -
+
+ Size + +
- - +
-
+
- +
-
+
- - +
-
+
- - +
-
+
- - +
-
+
- - +
+
- +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29bb..5dc19bb70 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,42 @@ +* { + box-sizing: border-box; +} + +main { + max-width: 400px; + margin: 50px auto; + padding: 20px; + background-color: aliceblue; + border-radius: 10px; + box-shadow: 0 4px 6px; + +} + +label { + display: block; + margin-bottom: 8px; + font-weight: bold; +} + +input, +select { + width: 100%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid black; + border-radius: 5px; + +} + +.size-option { + display: flex; + align-items: center; + gap: 5px; + margin-bottom: 5px; + +} + +input [type="radio"] { + width: auto; + margin-bottom: 0; +} \ No newline at end of file From 2d804f30a31534c1b5f2d4f3b9b7f16d3717edc6 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Thu, 14 May 2026 14:39:16 +0100 Subject: [PATCH 05/10] h1 & footer styled --- Form-Controls/styles.css | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 5dc19bb70..d884e4c57 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -2,6 +2,11 @@ box-sizing: border-box; } +h1, footer { + text-align: center; +} + + main { max-width: 400px; margin: 50px auto; @@ -39,4 +44,27 @@ select { input [type="radio"] { width: auto; margin-bottom: 0; +} + +button[type="submit"] { + + width: 100%; + padding: 12px; + background-color: green; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + +} + +button[type="submit"]:hover { + background-color: blue; +} + +footer { + margin-top: 20px; + font-size: 0.9em; + } \ No newline at end of file From 5a746853febc0e65b2a5b13b4279f269053f99a8 Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Thu, 14 May 2026 14:51:54 +0100 Subject: [PATCH 06/10] styling the fieldset and radio options --- Form-Controls/styles.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index d884e4c57..9e4c2c223 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -28,9 +28,21 @@ select { width: 100%; padding: 10px; margin-bottom: 20px; - border: 1px solid black; + border: 1px solid green; border-radius: 5px; +} + +fieldset { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + border: 1px solid green; + padding: 10px; + margin-bottom: 5px; + + + } .size-option { From d70b44737faa934fa579ee2080b22dab7cf6ab2a Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Fri, 15 May 2026 13:56:22 +0100 Subject: [PATCH 07/10] Ensuring the name input accepts the minimum of 2 characters --- Form-Controls/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 54182781a..98cf6a74a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -28,8 +28,10 @@

T-Shirt Product Pick

type="text" name="name" id="name" + minlength="2" placeholder="Monsur Abdulrahman" required + />
From 6aef7dc98d2acc32fd6855f7e7f22493743418ea Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Fri, 15 May 2026 14:01:09 +0100 Subject: [PATCH 08/10] changing the incorrect attribute of "email" to "name" --- Form-Controls/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 98cf6a74a..0e203d660 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -38,7 +38,7 @@

T-Shirt Product Pick

Date: Fri, 15 May 2026 14:05:16 +0100 Subject: [PATCH 09/10] Removing the div tag to ensure consistency --- Form-Controls/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 0e203d660..25269a3ad 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -52,7 +52,7 @@

T-Shirt Product Pick

-
+
Size @@ -81,7 +81,7 @@

T-Shirt Product Pick

- + From e732d8061c5388b39a6ae3720d6302d2e11f9d9a Mon Sep 17 00:00:00 2001 From: Monsur Abdulrahman Date: Sat, 16 May 2026 15:37:37 +0100 Subject: [PATCH 10/10] Adding comments to code --- Form-Controls/index.html | 10 +++++----- Form-Controls/styles.css | 8 ++++++-- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 25269a3ad..16784c110 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -15,12 +15,10 @@

T-Shirt Product Pick

+ +
- -
@@ -52,6 +50,8 @@

T-Shirt Product Pick

+ +
Size @@ -86,7 +86,7 @@

T-Shirt Product Pick

diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 9e4c2c223..7af6f980a 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -1,9 +1,11 @@ + + * { - box-sizing: border-box; + box-sizing: border-box; } h1, footer { - text-align: center; + text-align: center; } @@ -45,6 +47,8 @@ fieldset { } + + .size-option { display: flex; align-items: center;