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

Product Pick

- - +
+ + +
+ +
+ + +
+ +
+ T-Shirt Colour + + + + + + + + + + +
+ +
+ + +
+ +
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..b7df663f4 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,58 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + max-width: 340px; + margin: 40px auto; +} + +form { + display: flex; + flex-direction: column; + gap: 8px; + background: #f5f5f5; + padding: 20px; + box-sizing: border-box; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20); + border-radius: 12px; +} + +input[type="text"], +input[type="email"] { + width: 280px; + +} + +fieldset { + width: 280px; + padding: 10px; + border-radius: 8px; +} + +input, +select { + padding: 10px; + margin-top: 5px; + +} + +button { + width: 120px; + padding: 10px; + border-radius: 6px; + display: block; + margin: 8px auto 0; + border:none; + background-color: rgb(44, 44, 247); + color: white; + cursor: pointer; + transition: background-color 0.3s ease; + +} + +button:hover { + background-color: rgb(65, 74, 206); + +}