diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..5801eefc1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,7 @@ My form exercise +
@@ -16,12 +17,57 @@

Product Pick

+ this will also help you fill in your PR message later + + requirements + -What is the customer's name? I must collect this data and ensure it contains at least two non-space characters + -What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern + -What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? + -What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL --> +
+ 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..2a2469b87 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,61 @@ +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 { + padding: 10px; + border: 1px solid #bbb; + border-radius: 5px; + margin-left: 10px; +} +footer{ + font-weight: bold; +} \ No newline at end of file