diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..856830601 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,14 +6,74 @@ My form exercise + +
-

Product Pick

+

Product T-shirts

+ + + + + + + + + + + + + +
+ Choose a colour + + + + + + + + + + + +
+ + + +
+ Choose a size + + + + + + + + + + + + + + + + + + + + +
+ + + + + @@ -21,7 +81,7 @@

Product Pick

diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..85e88072a --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,75 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background-color: #f5f5f5; + } + + header, + footer { + text-align: center; + margin-bottom: 20px; + } + + h1 { + margin-bottom: 10px; + } + + main { + display: flex; + justify-content: center; + } + + form { + background-color: white; + padding: 20px; + border-radius: 8px; + width: 100%; + max-width: 450px; + + display: flex; + flex-direction: column; + gap: 16px; + } + + label { + font-weight: bold; + } + + input[type="text"], + input[type="email"] { + width: 100%; + padding: 10px; + font-size: 16px; + box-sizing: border-box; + } + + fieldset { + border: 1px solid #ccc; + padding: 16px; + } + + legend { + font-weight: bold; + padding: 0 6px; + } + + fieldset label { + font-weight: normal; + margin-right: 6px; + } + + fieldset input[type="radio"] { + margin-right: 16px; + margin-bottom: 10px; + } + + button { + padding: 12px; + font-size: 16px; + cursor: pointer; + } + + footer p { + font-size: 14px; + } \ No newline at end of file