diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..dd9a3a027 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,65 @@ - - - - My form exercise - - - - -
-

Product Pick

-
-
-
- - -
-
- - - + + + + My form exercise + + + + + + +
+

Product Pick

+
+
+
+ + + + + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + +
+
+ + + \ No newline at end of file diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..c2731978d --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,41 @@ +/* Creates a container for the form that is also centered*/ + +.form-container{ + display: flex; + flex-direction: column; + border-style:solid; + padding: 10px; + max-width:400px; + margin:auto; + font-size: 28px; +} + +/* Ensures that inputs and options are standard size and centered*/ +.form-container input, +.form-container option{ + font-size: 24px; + width:100%; + max-width: 325px; + box-sizing: border-box; + margin-left:auto; + margin-right:auto; +} + +/* Ensures that select and buttons are a standard size and centered*/ +.form-container select, +.form-container button{ + max-width:325px; + width: 100%; + box-sizing: border-box; + margin-left:auto; + margin-right:auto; + font-size: 24px; +} + +h1{ + text-align: center; +} + +footer{ + text-align: center; +}