diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..8f56d6862 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,79 @@ - My form exercise - + T-shirt Order Form + +

Product Pick

+
-
- - + +
+ + +
+ +
+ + +
+ +
+ Choose a colour +
+ + + + + +
+
+ +
+ + +
+ +
+ diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css new file mode 100644 index 000000000..66fbd87ce --- /dev/null +++ b/Form-Controls/styles.css @@ -0,0 +1,139 @@ +* { + box-sizing: border-box; +} + +:root { + --bg: #f5f7fb; + --surface: #ffffff; + --border: #d9deea; + --text: #1a2433; + --muted: #475569; + --accent: #2d6cdf; + --accent-soft: #eaf1ff; + --shadow: rgba(15, 23, 42, 0.08); +} + +body { + margin: 0; + min-height: 100vh; + font-family: Arial, Helvetica, sans-serif; + background: linear-gradient(180deg, var(--bg), #edf3ff); + color: var(--text); +} + +header { + padding: 2rem 1rem 0; +} + +h1 { + text-align: center; + margin: 0; + font-size: clamp(2rem, 3vw, 3rem); +} + +main { + display: flex; + justify-content: center; + padding: 2rem 1rem 3rem; +} + +form { + width: min(100%, 620px); + background: var(--surface); + border: 1px solid var(--border); + border-radius: 16px; + box-shadow: 0 12px 30px var(--shadow); + padding: 2rem; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +label { + font-weight: 700; + color: var(--text); +} + +input, +select, +button { + font: inherit; +} + +input[type='text'], +input[type='email'], +select { + width: 100%; + padding: 0.8rem 0.9rem; + border: 1px solid var(--border); + border-radius: 10px; + background: #fff; + color: var(--text); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +input[type='text']:focus, +input[type='email']:focus, +select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-soft); +} + +.radio-group { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 0.75rem; +} + +.option { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 0.9rem; + border: 1px solid var(--border); + border-radius: 10px; + background: #fafbff; +} + +.option input { + margin: 0; +} + +button { + width: 100%; + padding: 0.9rem 1.25rem; + border: none; + border-radius: 10px; + background: var(--accent); + color: #fff; + font-weight: 700; + cursor: pointer; + transition: background 0.2s ease, transform 0.2s ease; +} + +button:hover { + background: #1d57bc; + transform: translateY(-1px); +} + +button:focus-visible { + outline: 3px solid #a4c2ff; + outline-offset: 2px; +} + +footer { + text-align: center; + padding: 1rem; + color: var(--muted); +} + +@media (max-width: 480px) { + form { + padding: 1.25rem; + } +}