Skip to content

Commit 07428dd

Browse files
NarendraKoya999NarendraKoya999
authored
Added HTML, CSS Files
Designed Survey Form Using HTML and CSS along with Responsive design
1 parent ccd2ba1 commit 07428dd

2 files changed

Lines changed: 265 additions & 0 deletions

File tree

‎Build a Survey Form/index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Survey Form</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
<h1 id="title">Survey Form</h1>
13+
<p id="description">Following details contain personal information</p>
14+
15+
<form id="survey-form">
16+
17+
<div class="form-group">
18+
<label id="name-label" for="name">Name</label>
19+
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required>
20+
</div>
21+
22+
<div class="form-group">
23+
<label id="email-label" for="email">Email</label>
24+
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required>
25+
</div>
26+
27+
<div class="form-group">
28+
<label id="number-label" for="number">Age<span class="clue">(optional)</span></label>
29+
<input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age">
30+
</div>
31+
32+
<div class="form-group">
33+
<p>Which option best describes your current role?</p>
34+
<select id="dropdown" name="role" class="form-control" required>
35+
<option disabled selected>Select current role</option>
36+
<option value="student">Student</option>
37+
<option value="job">Full Time Job</option>
38+
<option value="learner">Full Time Learner</option>
39+
<option value="preferNo">Prefer not to say</option>
40+
<option value="other">Other</option>
41+
</select>
42+
</div>
43+
44+
<div class="form-group">
45+
<p>Would you recommend freeCodeCamp to a friend?</p>
46+
<label>
47+
<input name="user-recommend" value="definitely" type="radio" class="input-radio" checked> Definitely
48+
</label>
49+
<label>
50+
<input name="user-recommend" value="maybe" type="radio" class="input-radio"> Maybe
51+
</label>
52+
<label>
53+
<input name="user-recommend" value="not-sure" type="radio" class="input-radio"> Not sure
54+
</label>
55+
</div>
56+
57+
<div class="form-group">
58+
<p>What is your favorite feature of freeCodeCamp?</p>
59+
<select id="most-like" name="mostLike" class="form-control" required>
60+
<option disabled selected>Select an option</option>
61+
<option value="challenges">Challenges</option>
62+
<option value="projects">Projects</option>
63+
<option value="community">Community</option>
64+
<option value="openSource">Open Source</option>
65+
</select>
66+
</div>
67+
68+
<div class="form-group">
69+
<p>What would you like to see improved?<span class="clue">(Check all that apply)</span></p>
70+
</div>
71+
72+
<div class="form-group">
73+
<label>
74+
<input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox"> Front-end Projects
75+
</label>
76+
<label>
77+
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox"> Back-end Projects
78+
</label>
79+
<label>
80+
<input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox"> Data Visualization
81+
</label>
82+
<label>
83+
<input name="prefer" value="challenges" type="checkbox" class="input-checkbox"> Challenges
84+
</label>
85+
<label>
86+
<input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox"> Open Source Community
87+
</label>
88+
<label>
89+
<input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox"> Gitter help rooms
90+
</label>
91+
<label>
92+
<input name="prefer" value="videos" type="checkbox" class="input-checkbox"> Videos
93+
</label>
94+
<label>
95+
<input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox"> City Meetups
96+
</label>
97+
<label>
98+
<input name="prefer" value="wiki" type="checkbox" class="input-checkbox"> Wiki
99+
</label>
100+
<label>
101+
<input name="prefer" value="forum" type="checkbox" class="input-checkbox"> Forum
102+
</label>
103+
<label>
104+
<input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox"> Additional Courses
105+
</label>
106+
</div>
107+
108+
<div class="form-group">
109+
<p>Any comments or suggestions?</p>
110+
<textarea id="comments" class="input-textarea" name="comment" placeholder="Enter your comment here..."></textarea>
111+
</div>
112+
113+
<div class="form-group">
114+
<button type="submit" id="submit" class="submit-button">Submit</button>
115+
</div>
116+
</form>
117+
</body>
118+
</html>

‎Build a Survey Form/styles.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
body {
2+
font-family: 'Helvetica', Arial, sans-serif;
3+
background: rgb(238,174,202);
4+
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(215,177,210,1) 26%, rgba(194,180,217,1) 49%, rgba(171,184,225,1) 75%, rgba(148,187,233,1) 100%);
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
#survey-form {
10+
max-width: 500px;
11+
margin: 20px auto;
12+
background-color: #fff;
13+
padding: 30px;
14+
border-radius: 10px;
15+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
color: #333;
21+
}
22+
23+
#description {
24+
text-align: center;
25+
color: #777;
26+
margin-bottom: 20px;
27+
}
28+
29+
.form-group {
30+
margin-bottom: 20px;
31+
}
32+
33+
label {
34+
display: block;
35+
margin-bottom: 8px;
36+
color: #555;
37+
}
38+
39+
.input-text,
40+
.input-radio,
41+
.input-checkbox,
42+
.input-textarea,
43+
.form-control,
44+
.select,
45+
.submit-button {
46+
width: 100%;
47+
padding: 12px;
48+
box-sizing: border-box;
49+
border: 1px solid #ddd;
50+
border-radius: 6px;
51+
margin-top: 6px;
52+
margin-bottom: 16px;
53+
transition: border-color 0.3s ease-in-out;
54+
}
55+
56+
.input-text:focus,
57+
.input-radio:focus,
58+
.input-checkbox:focus,
59+
.input-textarea:focus,
60+
.form-control:focus,
61+
.select:focus {
62+
outline: none;
63+
border-color: #3498db;
64+
}
65+
66+
.input-radio,
67+
.input-checkbox {
68+
margin-right: 8px;
69+
}
70+
71+
.input-textarea {
72+
resize: vertical;
73+
}
74+
75+
.select {
76+
appearance: none;
77+
background: #ecf0f1;
78+
cursor: pointer;
79+
}
80+
81+
.submit-button {
82+
background-color: #3498db;
83+
color: #fff;
84+
cursor: pointer;
85+
transition: background-color 0.3s ease-in-out;
86+
}
87+
88+
.submit-button:hover {
89+
background-color: #2980b9;
90+
}
91+
92+
.clue {
93+
font-style: italic;
94+
color: #888;
95+
}
96+
97+
/* Different Color for Section */
98+
/* Personal Information Section */
99+
#title,
100+
#description,
101+
#name-label,
102+
#email-label,
103+
#number-label,
104+
#name,
105+
#email,
106+
#number {
107+
color: #333;
108+
}
109+
110+
/* Current Role Section */
111+
#dropdown,
112+
#dropdown option {
113+
color: #27ae60;
114+
}
115+
116+
/* Recommendation Section */
117+
.input-radio,
118+
.input-checkbox,
119+
.form-group p {
120+
color: #e67e22;
121+
}
122+
123+
/* Favorite Feature Section */
124+
#most-like,
125+
#most-like option {
126+
color: #9b59b6;
127+
}
128+
129+
/* Improvement Section */
130+
.input-checkbox[name="prefer"],
131+
.form-group p:nth-last-child(2) {
132+
color: #e74c3c;
133+
}
134+
135+
/* Comments Section */
136+
#comments {
137+
color: #555;
138+
}
139+
140+
/* Responsive styles */
141+
@media screen and (max-width: 600px) {
142+
#survey-form {
143+
margin: 10px;
144+
padding: 20px;
145+
}
146+
}
147+

0 commit comments

Comments
 (0)