Merge pull request #13 from Basavarajakjbasuu/servey-form-using-html-css

Excellent work on the Survey Form using HTML and CSS.
krishnapatidar458 · Sep 29, 2023 · 4aab010 · 4aab010
2 parents aaa9be6 + 14f7d3f
commit 4aab010
Show file tree

Hide file tree

Showing 2 changed files with 173 additions and 1 deletion.
diff --git 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;
+}
diff --git a/servey form/index.html b/servey form/index.html
@@ -6,8 +6,70 @@
         <title>Servey Form</title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="">
+        <link rel="stylesheet" href="form.css">
     </head>
     <body>
+        <div class="container">
+            <h1>Survey Form</h1>
+            <p>We value your feedback. Please take a moment to complete this survey.</p>
+            <form>
+                <div class="form-group">
+                   <div>
+                        <label for="firstname">First Name:</label>
+                        <input type="text" id="firstname" name="lastname" required>
+                   </div>
+
+                   <div>
+                    <label for="lastname">Last Name:</label>
+                    <input type="text" id="lastname" name="lastname" required>
+               </div>
+                </div>
+
+               <div class="form-group">
+                    <div>
+                        <label for="email">Email:</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>
+                    <div>
+                        <label for="age">Age:</label>
+                        <input type="number" id="age" name="age" required>
+                    </div>
+               </div>
+
+                <label for="feedback">Feedback:</label>
+                <textarea id="feedback" name="feedback" rows="3" required></textarea>
+
+                <div class="form-group">
+                    <div>
+                        <label for="rating">Rate our service:</label>
+                    <select id="rating" name="rating" required>
+                        <option value="">Select...</option>
+                        <option value="excellent">Excellent</option>
+                        <option value="good">Good</option>
+                        <option value="average">Average</option>
+                        <option value="poor">Poor</option>
+                    </select>
+                    </div>
+
+                    <div class="div">
+                        <div class="radio-group">
+                            <label>How did you hear about us?</label>
+                            <div class="radio-elements">
+                                    <input type="radio" id="friend" name="hear-about" value="friend">
+                                <label for="friend">Friends</label>
+
+                                <input type="radio" id="website" name="hear-about" value="website">
+                                <label for="website">Website</label>
+
+                                <input type="radio" id="social-media" name="hear-about" value="social-media">
+                                <label for="social-media">Social Media</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <button type="submit">Submit</button>
+            </form>
+        </div>
     </body>
 </html>