diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..848fe012 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,58 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file + + + + My form exercise + + + + + +
+

Product Pick

+
+
+
+ + + + + + + + + + + + +
+ +
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..3cf1e9ec 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,78 @@ +form { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: sans-serif; + background-color: #f2f2f2; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + +} + +h1, footer { + text-align: center; +} + +label { + margin-bottom: 5px; +} + +input[type="text"], +input[type="email"], +select { + font-size: 1rem; + padding: 10px; + border-radius: 5px; + border: none; + margin-bottom: 20px; + width: 100%; + max-width: 300px; +} + +select { + appearance: none; + background-color: #fff; + background-position: right 10px center; + background-repeat: no-repeat; +} + +select:focus { + outline: none; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); +} + +input[type="date"] { + font-size: 1rem; + padding: 10px; + border-radius: 5px; + border: none; + margin-bottom: 20px; + width: 100%; + max-width: 300px; + appearance: none; + background-color: #fff; + background-position: right 10px center; + background-repeat: no-repeat; +} + +input[type="date"]:focus { + outline: none; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); +} + +button[type="submit"] { + background-color: #007bff; + color: #fff; + font-size: 1rem; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.2s ease-in-out; +} + +button[type="submit"]:hover { + background-color: #0069d9; +}