diff --git a/Form-Controls/README.md b/Form-Controls/README.md index 86f623d89..112ccbd38 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -25,7 +25,7 @@ Writing that out as a series of questions to ask yourself: 3. What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours? 4. What size does the customer want? I must provide the following 6 options: XS, S, M, L, XL, XXL -All fields are required. +All fields are required. Do not write a form action for this project. ## Acceptance Criteria diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..38ce25b4d 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,73 @@ + My form exercise + + +

Product Pick

-
+ + - + + + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + + +
+ + + +
+ + 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; +}