From bc89d2852032313ca7db35169660a36247cd4fda Mon Sep 17 00:00:00 2001 From: Ogbemi mene Date: Sat, 16 May 2026 14:01:29 +0100 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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 @@
+ + +