diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..ab8c3a097 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,4 +1,4 @@ - + @@ -6,6 +6,7 @@ My form exercise +
@@ -13,15 +14,63 @@

Product Pick

- - +
+ Customer Information +

+ + +

+

+ + +

+
+
+ T-shirt Colour and Size +

+ + +

+

+ + + +

+

+ + +

+

+ + +

+
+
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..a3ecf1c3d --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,79 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; +} + +header { + background-color: #333; + color: white; + text-align: center; + padding: 20px; +} + +header h1 { + margin: 0; +} + +main { + max-width: 600px; + margin: 30px auto; + padding: 0 20px; +} + +fieldset { + background-color: white; + border: 1px solid #ccc; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; +} + +legend { + font-weight: bold; + padding: 0 20px; +} + +fieldset p { + margin-bottom: 15px; +} + +input[type="text"], +input[type="email"] { + display: block; + width: 100%; + box-sizing: border-box; + padding: 10px; + margin-top: 6px; + border: 1px solid #bbb; + border-radius: 5px; +} + +select { + display: block; + margin-top: 6px; + padding: 10px; + border: 1px solid #bbb; + border-radius: 5px; +} + +input[type="submit"] { + background-color: #bbb; + color: black; + font-weight: bold; + padding: 10px 20px; + border-radius: 5px; +} +input[type="text"]:focus, +input[type="email"]:focus, +input[type="radio"]:focus, +input[type="submit"]:focus, +select:focus { + outline: 3px solid black; +} + +footer { + font-weight: bold; + padding: 10px 20px; + margin-top: 6px; +}