diff --git a/Form-Controls/img/T-shirt1.png b/Form-Controls/img/T-shirt1.png new file mode 100644 index 00000000..831d469f Binary files /dev/null and b/Form-Controls/img/T-shirt1.png differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..aa9965c6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,105 @@ - - - - My form exercise - - - - - -
-

Product Pick

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

Product Pick

+
+ +
+

+ To order your T-shirt, please fill out the form! +

+
+
+ + +
+
+ + +
+ + +
+ Choose a color for your T-Shirt:* + + + + + + + + + +
+ +
+ + +
+ +
+
+ + +
+ + +
+ + +
+
+ + + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..bf56dcb2 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,116 @@ +body { + margin-top: 20px; + margin-left: 40px; + margin-right: 40px; + border: 3px solid silver; +} + +/* header */ +h1 { + margin-top: 1em; + margin-left: -1em; + padding-left: 1em; +} +.header { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 120px 80px; + margin: 10px; +} + +.avatar { + grid-column: 1/-1; + background-image: url(img/T-shirt1.png); + background-repeat: repeat-x; + border-bottom: 4px solid #1d556f; +} + +/* main */ + +.main { + width: 50%; + margin-left: -0.1em; + margin-bottom: 3.5em; + padding-left: 0.5em; + border: 5px solid rgb(158, 153, 153); + box-shadow: 10px 5px 5px silver; + background-color: #aedadd; +} + +.main:hover { + cursor: pointer; +} + +/* form */ + +input:focus { + background-color: #ffc60b; +} + +.form_text { + font-size: medium; + padding-left: 0em; + line-height: 2em; +} + +.order_form { + line-height: 1.5em; + margin-left: 0em; +} + +.email { + padding-bottom: 1em; +} + +.shirt_color { + border: none; + padding: 0; + margin: 0; + margin-bottom: 1em; + line-height: 2em; +} + +.shirt_size { + margin-bottom: 1em; +} + +.delivery_date { + margin-bottom: 1em; +} + +.btn_order { + padding: 1.1em 4em; + margin-right: 14em; + margin-top: 0.1em; + margin-bottom: 1em; + font-weight: 700; + background-color: #1d556f; + border-radius: 3px; + border-color: silver; + border-bottom: 2px solid black; + color: whitesmoke; +} + +.btn_order:hover { + background-color: whitesmoke; + color: #1d556f; + border: 2px solid black; +} + +.wrapper { + display: flex; + justify-content: space-between; + margin-bottom: 2em; +} +/* footer */ +/* span { + display: block; + width: 100%; + height: 1em; + background-color: rgb(134, 132, 136); +} */ +.footer { + text-align: center; + font-size: 6px; + font-weight: light; +}