From 09c4ce268020d6955d150bb45c129ed3ff57fda2 Mon Sep 17 00:00:00 2001 From: bestunmoh Date: Sat, 30 Nov 2024 16:03:05 +0000 Subject: [PATCH] form-controls --- Form-Controls/index.html | 57 ++++++++++++++++++++++++++++++---------- Form-Controls/styles.css | 55 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 14 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..2c15106c 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,57 @@ - - - My form exercise - - + + + T-Shirt Order Form
-

Product Pick

+

T-Shirt Order Form

+
-
- - -
+
+ + + + + + + + +
+ Select T-Shirt Color: + + + +
+ + + + + + + + + + + +
+ - - \ No newline at end of file + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..fa27a873 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,55 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + } + + header, main, footer { + max-width: 800px; + margin: 0 auto; + padding: 20px; + background: #fff; + } + + h1 { + text-align: center; + } + + form { + display: flex; + flex-direction: column; + gap: 15px; + } + + label { + font-weight: bold; + } + + input, select, button { + padding: 10px; + font-size: 1rem; + border-radius: 5px; + border: 1px solid #2bb7dd; + } + + input:focus, select:focus, button:focus { + outline: 2px solid #007BFF; + } + + button { + background-color: blue; + color: white; + border: none; + cursor: pointer; + } + + button:hover { + background-color: #0056b3; + } + + fieldset { + border: 1px solid #ccc; + padding: 10px; + } + \ No newline at end of file