diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..b41d6136a 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,9 +3,11 @@ - My form exercise - + T-Shirt Order Form + + +
@@ -13,15 +15,77 @@

Product Pick

- - + +
+ + +
+ + +
+ + +
+ + +
+ Choose a colour + + + + + + + +
+ + +
+ + +
+ + +
+ +
+
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..ec55ae642 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,119 @@ +/* RESET */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +/* PAGE */ +body { + background-color: #f7f7f7; + color: #333; /* high contrast for accessibility */ + line-height: 1.5; + padding: 20px; +} + +/* HEADER */ +header h1 { + text-align: center; + font-weight: 500; + margin-bottom: 20px; +} + +/* MAIN CONTAINER */ +main { + max-width: 520px; + margin: 40px auto; + background: #fff; + padding: 25px; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); +} + +/* FORM ELEMENT SPACING */ +form div, +fieldset { + margin-bottom: 16px; +} + +/* LABELS */ +label { + display: block; + margin-bottom: 6px; + font-size: 0.95rem; + color: #333; +} + +/* INPUT + SELECT */ +input, +select { + width: 100%; + padding: 10px; + border: 1px solid #bbb; + border-radius: 6px; + font-size: 1rem; + background: #fff; + color: #333; +} + +/* FOCUS STATES (IMPORTANT FOR ACCESSIBILITY SCORE 100) */ +input:focus, +select:focus { + outline: 3px solid #000; + outline-offset: 2px; +} + +/* FIELDSET */ +fieldset { + border: 1px solid #ddd; + border-radius: 6px; + padding: 10px; +} + +/* LEGEND */ +legend { + padding: 0 6px; + font-weight: 500; +} + +/* RADIO OPTIONS */ +fieldset label { + display: inline-flex; + align-items: center; + margin-right: 15px; + font-size: 0.95rem; + cursor: pointer; +} + +fieldset input { + margin-right: 6px; +} + +/* BUTTON */ +button { + width: 100%; + padding: 12px; + border: none; + border-radius: 6px; + background-color: #333; + color: #fff; + font-size: 1rem; + cursor: pointer; +} + +/* BUTTON HOVER + FOCUS */ +button:hover, +button:focus { + background-color: #555; + outline: 3px solid #000; + outline-offset: 2px; +} + +/* FOOTER */ +footer { + text-align: center; + margin-top: 20px; + font-size: 0.85rem; + color: #444; /* improved contrast */ +} \ No newline at end of file