From 20eaeeef7536f677b8eb5ed20a10b8e72a733f65 Mon Sep 17 00:00:00 2001 From: softacoder Date: Tue, 24 Jan 2023 15:14:53 +0000 Subject: [PATCH 1/5] updated version jans code --- .vscode/settings.json | 3 ++ Form-Controls/index.html | 49 ++++++++++++++++++++-- Form-Controls/styles.css | 87 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json 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..0b566538 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -10,18 +10,61 @@
-

Product Pick

+

T-shirts

-
+ + +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+ + +
+
+
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..f7eee2ce 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,87 @@ +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; + } + + #title{ + margin-top: 30px; + text-align: center; + margin-bottom: 5px; + font-weight: 400; + } + + #description{ + margin-top: 0; + text-align: center; + font-style: italic; + } + + #survey-form{ + background-color: rgba(27, 27, 50, 0.8); + width: 80%; + margin: 0 auto; + border-radius: 10px; + } + + .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; + } + + input, select{ + width: 90%; + height: 40px; + border-radius: 5px; + font-size: 15px; + } + + 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="submit"]{ + width: 100%; + color: white; + background-color: green; + border: 1px solid green; + margin-bottom: 50px; + } + \ No newline at end of file From e73d2eabfd5301847172a09e402567f9b52e788f Mon Sep 17 00:00:00 2001 From: softacoder Date: Wed, 15 Feb 2023 11:47:07 +0000 Subject: [PATCH 2/5] Second version --- Form-Controls/index.html | 16 ++-- Form-Controls/styles.css | 182 ++++++++++++++++++++++----------------- 2 files changed, 109 insertions(+), 89 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 0b566538..655e37ca 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -13,8 +13,7 @@

T-shirts

- -
+
@@ -49,23 +48,22 @@

T-shirts

- - +
- - + +
- +

By Jan Softa

- \ No newline at end of file + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index f7eee2ce..16c40638 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -1,87 +1,109 @@ 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; - } - - #title{ - margin-top: 30px; - text-align: center; - margin-bottom: 5px; - font-weight: 400; - } - - #description{ - margin-top: 0; - text-align: center; - font-style: italic; - } - - #survey-form{ - background-color: rgba(27, 27, 50, 0.8); - width: 80%; - margin: 0 auto; - border-radius: 10px; - } + 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; +} + + +#title{ + margin-top: 30px; + text-align: center; + margin-bottom: 5px; + font-weight: 400; +} + +#description{ + margin-top: 0; + text-align: center; + font-style: italic; +} + +#survey-form{ + background-color: rgba(27, 27, 50, 0.8); + width: 80%; + margin: 0 auto; + border-radius: 10px; +} + + +.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; + } + +input, select{ + width: 90%; + height: 40px; + border-radius: 5px; + font-size: 15px; +} + +textarea{ + width: 90%; + font-size: 16px; + height: 100px; +} + +input[type="radio"], input[type="checkbox"]{ + height: 20px; + margin-left: 80px; + width: 10px; - .form-div{ +} + +.form-radio, .div-checkbox{ display: flex; - flex-direction: column; - justify-content: center; + flex-direction: row; align-items: center; - margin: 0 auto 1.25rem auto; - padding: 0.25rem; - } + padding-bottom: 5px; +} - label{ - margin-bottom: 10px; - width: 90%; - font-size: 18px; - padding-top: 8px; - } - - input, select{ - width: 90%; - height: 40px; - border-radius: 5px; - font-size: 15px; - } - - 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"]{ + background-color: #0080ff; + padding: 5px; + position: absolute; + transform: translate(-50%,-50%); + + left: 50%; + font-family: "Roboto Mono",monospace; + color: #ffffff; + font-size: 18px; + border: none; + outline: none; + border-radius: 5px; } - - input[type="submit"]{ - width: 100%; - color: white; - background-color: green; - border: 1px solid green; - margin-bottom: 50px; + ::-webkit-calendar-picker-indicator{ + background-color: #ffffff; + padding: 5px; + cursor: pointer; + border-radius: 3px; } - \ No newline at end of file + + +input[type="submit"]{ + width: 100%; + color: white; + background-color: green; + border: 1px solid green; + margin-bottom: 50px; +} \ No newline at end of file From b0f00cf73cf60c0ceb4bcc680c13f805231d22dc Mon Sep 17 00:00:00 2001 From: softacoder Date: Wed, 15 Feb 2023 12:07:57 +0000 Subject: [PATCH 3/5] Third update CSS styling of date of delivery --- Form-Controls/index.html | 2 +- Form-Controls/styles.css | 17 ++++++----------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 655e37ca..349555ed 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -49,7 +49,7 @@

T-shirts

-
+
diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 16c40638..61790be2 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -79,18 +79,13 @@ input[type="radio"], input[type="checkbox"]{ } input[type="date"]{ - background-color: #0080ff; - padding: 5px; - position: absolute; - transform: translate(-50%,-50%); - left: 50%; - font-family: "Roboto Mono",monospace; - color: #ffffff; - font-size: 18px; - border: none; - outline: none; - border-radius: 5px; + + width: 100%; + color: white; + background-color: #0080ff; + border: 1px solid #0080ff; + margin-bottom: 50px; } ::-webkit-calendar-picker-indicator{ background-color: #ffffff; From 107747871b5cd395489a2f4e6309919963ce5688 Mon Sep 17 00:00:00 2001 From: softacoder Date: Wed, 15 Feb 2023 12:52:36 +0000 Subject: [PATCH 4/5] Update input boxes --- Form-Controls/styles.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 61790be2..4822b9ba 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -36,8 +36,8 @@ body{ .form-div{ -display: flex; -flex-direction: column; + display: flex; + flex-direction: column; justify-content: center; align-items: center; margin: 0 auto 1.25rem auto; @@ -49,13 +49,23 @@ label{ width: 90%; font-size: 18px; padding-top: 8px; + margin-right: auto; } -input, select{ + 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{ From bd8897ae263353293233e7def178c267ec796d34 Mon Sep 17 00:00:00 2001 From: softacoder Date: Wed, 15 Feb 2023 13:02:32 +0000 Subject: [PATCH 5/5] CSS update --- Form-Controls/styles.css | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index 4822b9ba..5e362712 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -14,26 +14,6 @@ body{ } -#title{ - margin-top: 30px; - text-align: center; - margin-bottom: 5px; - font-weight: 400; -} - -#description{ - margin-top: 0; - text-align: center; - font-style: italic; -} - -#survey-form{ - background-color: rgba(27, 27, 50, 0.8); - width: 80%; - margin: 0 auto; - border-radius: 10px; -} - .form-div{ display: flex;