diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cd..4e8fbc91 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,73 @@ - My form exercise - + + + + T-Shirt Order Form -
-

Product Pick

+
+

T-shirt Pick

-
- - + +
+ + +
+ +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css new file mode 100644 index 00000000..f4c7a187 --- /dev/null +++ b/Form-Controls/styles.css @@ -0,0 +1,124 @@ +/* body { */ +/* margin: 0; + padding: 0; +} */ +.header { + display: flex; + flex-direction: column; + text-align: center; +} +h1 { + margin-top: 20px; + margin-bottom: 1px; + font-weight: bold; + font-size: 30px; +} +/* Label-name */ +form { + display: block; + flex-direction: column; + width: 600px; + background: #f2f2f2; + border: 1px solid #cccccc; + border-radius: 5px; + margin: 20px auto 40px auto; +} +.label-name { + border-radius: 5px; + padding: 18px 20px; + margin: 8px 0; + background: #f2f2f2; +} +input[type="text"], +input[type="date"], +input[type="email"], +select { + width: 92%; + padding: 12px 20px; + margin: 8px 0; + display: flex; + border-radius: 5px; + border: 1px solid #cccccc; +} +label { + font-weight: bold; + font-size: 20px; +} +/* Email */ +.label-email { + padding: 18px 20px; + margin: 8px 0; + background: #f2f2f2; +} +/* T-shirt size */ +.tshirt { + display: flex; + justify-content: left; + padding-left: 20px; +} +#size { + display: center; + justify-content: center; + font-size: 15px; + font-weight: 700px; + margin-left: 25px; +} +/* T-shirt color */ +.radio { + display: flex; + justify-content: center; + padding: 10px 0; +} +/* Button */ +button { + width: 92%; + color: white; + font-weight: 700; + font-size: 20px; + border-radius: 4px; + background: #0019f7; + margin: 8px 26px 20px; + padding: 14px 20px; + display: center; + cursor: pointer; +} +button:hover { + background-color: #926487; +} +/* footer */ +h2 { + text-align: center; +} +/* Responsive styles */ +@media (max-width: 768px) { + header, + header h1, + header p, + form { + float: none; + text-align: center; + width: 100%; + } + input[type="text"], + input[type="date"], + select { + float: none; + text-align: center; + width: 90%; + display: block; + } + button { + float: none; + text-align: center; + width: 100%; + display: center; + margin-left: 1px; + } + #size { + float: none; + text-align: center; + } + .label-size { + text-align: center; + } +}