diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..4c7ff40f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/Form-Controls/T-shirts.webp b/Form-Controls/T-shirts.webp new file mode 100644 index 00000000..02d005b2 Binary files /dev/null and b/Form-Controls/T-shirts.webp differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..8b6be9c1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,15 +13,60 @@

Product Pick

-
+
- + Choose your best T-shirt + + +
+
+ + + +
+
+ + + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..da4ae321 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,46 @@ +body { + height: 100vh; + width: 500px; + background-image: url('/Form-Controls/T-shirts.webp'); + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; + font-family: Verdana, Geneva, Tahoma, sans-serif; + + +} + +fieldset { + background-color: #E3F2C1; + border: 2px solid; + width: 500px; + height: 400px; + padding: 10px 10px; + margin-left: 100px; + +} + +legend { + font-size: larger; + font-weight: 400; +} + +input { + margin: 5px; +} + +#button { + font-size: larger; + padding: 10px; + background-color: bisque; + border: 2px solid burlywood; + border-radius: 8px; + transition-duration: 0.4s; + +} + +#button:hover { + background-color: white; + +} \ No newline at end of file