From bc89d2852032313ca7db35169660a36247cd4fda Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Sat, 16 May 2026 14:01:29 +0100 Subject: [PATCH 01/12] my form excesis --- Form-Controls/Untitled-1.css | 63 ++++++++++++++++++++++++++++++++ Form-Controls/index.html | 70 +++++++++++++++++++++++------------- 2 files changed, 109 insertions(+), 24 deletions(-) create mode 100644 Form-Controls/Untitled-1.css diff --git a/Form-Controls/Untitled-1.css b/Form-Controls/Untitled-1.css new file mode 100644 index 000000000..a9879c6d0 --- /dev/null +++ b/Form-Controls/Untitled-1.css @@ -0,0 +1,63 @@ + +body { + background-color: #f4f7f6; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +form { + background: #ffffff; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; +} + +form div { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; +} +label { + font-weight: bold; + font-size: 0.85rem; + margin-bottom: 0.5rem; + color: #333; + text-transform: uppercase; +} + +input[type="text"], +input[type="email"], +select { + padding: 10px; + border: 1px solid #817575; + border-radius: 4px; + font-size: 1rem; + outline: none; + transition: border-color 0.3s; +} + +input:focus, +select:focus { + border-color: #007bff; +} + +button { + width: 100%; + padding: 12px; + background-color: #28a745; + color: white; + border: none; + border-radius: 4px; + font-size: 1.1rem; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #218838; +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..d8012a686 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,49 @@ - - - + + + + My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - + + + + +
+ +
+ + +
+ +
+ + +
+ +
+ colour of T-shirt + + +
+ +
+ size of T-shirt + + + +
+ + + + From 2f98a7b7e290d66fae03edee87eb9f0d3733b8ff Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Sat, 16 May 2026 14:03:44 +0100 Subject: [PATCH 02/12] my form working --- Form-Controls/Untitled-1.css | 4 ++-- Form-Controls/index.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Form-Controls/Untitled-1.css b/Form-Controls/Untitled-1.css index a9879c6d0..3111a2b52 100644 --- a/Form-Controls/Untitled-1.css +++ b/Form-Controls/Untitled-1.css @@ -1,6 +1,6 @@ body { - background-color: #f4f7f6; + background-color: #7a8f88; display: flex; justify-content: center; align-items: center; @@ -9,7 +9,7 @@ body { } form { - background: #ffffff; + background: #9b7a7a; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); diff --git a/Form-Controls/index.html b/Form-Controls/index.html index d8012a686..597f351c5 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,7 +4,7 @@ - My form exercise + My form exercise work From c17d2584ce46a0d7033b663031c1d242af2400e8 Mon Sep 17 00:00:00 2001 From: Ogbemi Mene Date: Sat, 16 May 2026 14:33:58 +0100 Subject: [PATCH 03/12] Change page title to 'T-shirt sales' --- 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 597f351c5..f88d9f899 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,7 +4,7 @@ - My form exercise work + T-shirt sales From ad6aa94dda7b904321d3fbf42840627a05053a39 Mon Sep 17 00:00:00 2001 From: Ogbemi Mene Date: Sat, 16 May 2026 15:16:17 +0100 Subject: [PATCH 04/12] Add email input and fix label formatting --- Form-Controls/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index f88d9f899..2c948d094 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -17,12 +17,13 @@
+
- colour of T-shirt + From ff30284bba152eb1a5ca12b6e1b0407520201714 Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Sun, 24 May 2026 08:25:09 +0100 Subject: [PATCH 05/12] my new form for luke --- Form-Controls/Untitled-1.css | 70 ++++++++++++++++++++++-------------- Form-Controls/index.html | 17 +++++---- 2 files changed, 54 insertions(+), 33 deletions(-) diff --git a/Form-Controls/Untitled-1.css b/Form-Controls/Untitled-1.css index 3111a2b52..faa53afd5 100644 --- a/Form-Controls/Untitled-1.css +++ b/Form-Controls/Untitled-1.css @@ -1,63 +1,81 @@ - +/* 1. Reset defaults and center everything on the page */ body { - background-color: #7a8f88; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f4f7f6; + margin: 0; + padding: 20px; display: flex; - justify-content: center; + flex-direction: column; align-items: center; - height: 100vh; - margin: 0; + justify-content: center; + min-height: 100vh; + box-sizing: border-box; +} + +h1 { + color: #2c3e50; + margin-bottom: 20px; + font-size: 2rem; } -form { - background: #9b7a7a; - padding: 2rem; +.form { + background-color: #ffffff; + padding: 30px; border-radius: 8px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); width: 100%; max-width: 400px; + box-sizing: border-box; } -form div { - margin-bottom: 1.5rem; +.form > div { + margin-bottom: 20px; display: flex; flex-direction: column; } + label { - font-weight: bold; font-size: 0.85rem; - margin-bottom: 0.5rem; - color: #333; + font-weight: 600; + color: #34495e; + margin-bottom: 8px; text-transform: uppercase; + letter-spacing: 0.5px; } input[type="text"], input[type="email"], select { - padding: 10px; - border: 1px solid #817575; - border-radius: 4px; + padding: 10px 14px; font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; + background-color: #fff; + color: #333; outline: none; - transition: border-color 0.3s; + transition: border-color 0.2s ease, box-shadow 0.2s ease; } -input:focus, +input:focus, select:focus { - border-color: #007bff; + border-color: #3498db; + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); } button { - width: 100%; - padding: 12px; - background-color: #28a745; + background-color: #366280; color: white; border: none; + padding: 12px; + font-size: 1rem; + font-weight: 600; border-radius: 4px; - font-size: 1.1rem; cursor: pointer; - transition: background-color 0.3s; + width: 100%; + transition: background-color 0.2s ease; + margin-top: 10px; } button:hover { - background-color: #218838; + background-color: #2980b9; } \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 597f351c5..7406173cd 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,16 +4,18 @@ - My form exercise work + Product Pick Form - +

PRODUCT PICK

+ +
- +
@@ -22,7 +24,6 @@
- colour of T-shirt + @@ -45,5 +45,8 @@
+ + + From 9eb72233272e8ce58d8f71dd1f25749c4dc095df Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Tue, 26 May 2026 09:52:35 +0100 Subject: [PATCH 06/12] my new form control --- Form-Controls/Untitled-1.html | 34 ++++++++++++++++++++++++++++++++++ Form-Controls/index.html | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 Form-Controls/Untitled-1.html diff --git a/Form-Controls/Untitled-1.html b/Form-Controls/Untitled-1.html new file mode 100644 index 000000000..fcbabf344 --- /dev/null +++ b/Form-Controls/Untitled-1.html @@ -0,0 +1,34 @@ + + + + + + My product pick form + + + + + +

Your Order Details

+ +
+ + ← Go back to form + + + + + \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index ad995301d..300ce7e73 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -35,7 +35,7 @@

PRODUCT PICK

- size of T-shirt + T-shirt size + + From d2cfd225f72d9efb0ab2c4822669a22a9a83fb09 Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Wed, 27 May 2026 13:37:02 +0100 Subject: [PATCH 08/12] removal of the untitled-1.html --- Form-Controls/Untitled-1.html | 34 ---------------------------------- 1 file changed, 34 deletions(-) delete mode 100644 Form-Controls/Untitled-1.html diff --git a/Form-Controls/Untitled-1.html b/Form-Controls/Untitled-1.html deleted file mode 100644 index fcbabf344..000000000 --- a/Form-Controls/Untitled-1.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - My product pick form - - - - - -

Your Order Details

- -
- - ← Go back to form - - - - - \ No newline at end of file From 47042bef000d7b21cccb83bc0489bdfbadaa3c69 Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Wed, 27 May 2026 21:33:27 +0100 Subject: [PATCH 09/12] my formated vasion --- Form-Controls/index.html | 98 ++++++++++++++++++++++++---------------- 1 file changed, 58 insertions(+), 40 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index de5531e1b..e3bd1b9bf 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,58 +1,76 @@ - + - - - - + + + My form exercise work - - - - -

PRODUCT PICK

- -
+ + + +
+

PRODUCT PICK

-
- - -
+ +
+ + +
-
- - - -
+
+ + +
-
- - - + - -
+ +
-
- T-shirt size - +
+ T-shirt size + - + - -
+ +
- - - + +

+ We are selling T-shirts. this is a form to collect the following data: + Our customers already have accounts, so we know their addresses and + charging details already. We don't need to collect that data. We want + to confirm they are the right person, then get them to choose a colour + and size. +

+ + + - - From fbe384ddf0e737bbbb6cc2e1a7ddee241023ccd7 Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Wed, 27 May 2026 22:06:25 +0100 Subject: [PATCH 10/12] my new formated form --- Form-Controls/index.html | 118 ++++++++++---------- Form-Controls/{Untitled-1.css => style.css} | 2 +- 2 files changed, 59 insertions(+), 61 deletions(-) rename Form-Controls/{Untitled-1.css => style.css} (96%) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index e3bd1b9bf..9a14daca3 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -4,73 +4,71 @@ My form exercise work - + + -
-

PRODUCT PICK

+

PRODUCT PICK

-
-
- - -
+ +
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- T-shirt size - +
+ T-shirt size + - -
+ +
- -

- We are selling T-shirts. this is a form to collect the following data: - Our customers already have accounts, so we know their addresses and - charging details already. We don't need to collect that data. We want - to confirm they are the right person, then get them to choose a colour - and size. -

-
-
+ + We are selling T-shirts. this is a form to collect the following data Of + our customers who already have accounts, so we know their addresses and + charging, We want to confirm they are the right person, then get them to + choose a colour and size. + diff --git a/Form-Controls/Untitled-1.css b/Form-Controls/style.css similarity index 96% rename from Form-Controls/Untitled-1.css rename to Form-Controls/style.css index faa53afd5..cfd0abeca 100644 --- a/Form-Controls/Untitled-1.css +++ b/Form-Controls/style.css @@ -1,4 +1,4 @@ -/* 1. Reset defaults and center everything on the page */ + body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; From 913717579136bfdd83d66617ea32e1a4c41a2454 Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Wed, 27 May 2026 22:17:04 +0100 Subject: [PATCH 11/12] new formatted change --- Form-Controls/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 9a14daca3..00826adaa 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -64,11 +64,12 @@

PRODUCT PICK

- - We are selling T-shirts. this is a form to collect the following data Of + +

We are selling T-shirts. this is a form to collect the following data Of our customers who already have accounts, so we know their addresses and charging, We want to confirm they are the right person, then get them to choose a colour and size. +

From 0d2fafa920981c6ab70fb31edee4da3b9953be2a Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Wed, 27 May 2026 22:20:40 +0100 Subject: [PATCH 12/12] formated code --- Form-Controls/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 00826adaa..837be73f3 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -65,10 +65,12 @@

PRODUCT PICK

-

We are selling T-shirts. this is a form to collect the following data Of - our customers who already have accounts, so we know their addresses and - charging, We want to confirm they are the right person, then get them to - choose a colour and size. + +

+ We are selling T-shirts. this is a form to collect the following data Of + our customers who already have accounts, so we know their addresses and + charging, We want to confirm they are the right person, then get them to + choose a colour and size.