diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..349555ed 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -10,19 +10,60 @@
-

Product Pick

+

T-shirts

-
- - + +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+ +
+ + +
+
+
- \ No newline at end of file + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..5e362712 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,94 @@ +body{ + font-family: 'Poppins', sans-sherif; + background-repeat: no-repeat; + background-size: cover; + background-image: linear-gradient( + 115deg, + rgba(58, 58, 158, 0.8), + rgba(136, 136, 206, 0.7) + ), url("https://cdn.pixabay.com/photo/2017/09/09/11/52/t-shirts-2731768_960_720.jpg"); + background-position: center; + width: 100vw; + color: white; + margin: 0; +} + + + +.form-div{ + display: flex; + flex-direction: column; +justify-content: center; +align-items: center; +margin: 0 auto 1.25rem auto; +padding: 0.25rem; +} + +label{ + margin-bottom: 10px; + width: 90%; + font-size: 18px; + padding-top: 8px; + margin-right: auto; + } + + input{ + width: 25%; + height: 40px; + border-radius: 5px; + font-size: 15px; + margin-right: auto; + } + + select{ + width: 90%; + height: 40px; + border-radius: 5px; + font-size: 15px; + margin-right: auto; +} + +textarea{ + width: 90%; + font-size: 16px; + height: 100px; +} + +input[type="radio"], input[type="checkbox"]{ + height: 20px; + margin-left: 80px; + width: 10px; + +} + +.form-radio, .div-checkbox{ + display: flex; + flex-direction: row; + align-items: center; + padding-bottom: 5px; +} + + input[type="date"]{ + + + width: 100%; + color: white; + background-color: #0080ff; + border: 1px solid #0080ff; + margin-bottom: 50px; + } + ::-webkit-calendar-picker-indicator{ + background-color: #ffffff; + padding: 5px; + cursor: pointer; + border-radius: 3px; + } + + +input[type="submit"]{ + width: 100%; + color: white; + background-color: green; + border: 1px solid green; + margin-bottom: 50px; +} \ No newline at end of file