From 14f7d3fc6d51bcd571e35ee5e9387da0511e0d1e Mon Sep 17 00:00:00 2001 From: Basavarajakjbasuu Date: Fri, 29 Sep 2023 11:45:07 +0530 Subject: [PATCH] Create a Survey Form using html and css --- servey form/form.css | 110 +++++++++++++++++++++++++++++++++++++++++ servey form/index.html | 64 +++++++++++++++++++++++- 2 files changed, 173 insertions(+), 1 deletion(-) diff --git a/servey form/form.css b/servey form/form.css index e69de29..6616127 100644 --- a/servey form/form.css +++ b/servey form/form.css @@ -0,0 +1,110 @@ +input, +textarea, +select { + outline: none; +} + +input[type="radio"] +select { + cursor: pointer; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + height: 100dvh; +} + +.container { + max-width: 500px; + margin: 0 auto; + padding: 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); +} + +h1 { + text-align: center; + color: #333; + margin: 0; +} + +p { + text-align: center; + color: #666; +} + +form { + margin-top: 20px; + padding-inline: 20px; +} + +.form-group { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +label { + display: block; + font-weight: bold; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +select { + width: 100%; + padding: 10px; + margin-bottom: 20px; + margin-top: 10px; + border: 1px solid #ccc; + border-radius: 3px; + font-size: 16px; + background: hsl(0, 0%, 50%, 0.1); +} + +select { + height: 40px; +} + +.radio-group { + margin-bottom: 33px; +} + +.radio-elements { + + margin-top: 12px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 5px; +} + +input[type="radio"] { + margin-right: 5px; +} + +button { + display: block; + width: 100%; + padding: 10px; + background-color: #007BFF; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} \ No newline at end of file diff --git a/servey form/index.html b/servey form/index.html index 1a4f758..15978e4 100644 --- a/servey form/index.html +++ b/servey form/index.html @@ -6,8 +6,70 @@ Servey Form - + +
+

Survey Form

+

We value your feedback. Please take a moment to complete this survey.

+
+
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + + + +
+
+ + +
+ +
+
+ +
+ + + + + + + + +
+
+
+
+ + +
+
\ No newline at end of file