Skip to content

Commit 472929d

Browse files
sahilataharsahilatahar
committed
Survey Form | 2nd Added
1 parent f37c61a commit 472929d

File tree

5 files changed

+232
-21
lines changed

5 files changed

+232
-21
lines changed

‎README.md

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,34 @@ These are simple project created using HTML, CSS, vanilla JavaScript
66

77
## (1) Survey Form
88

9-
<img src="screenshots/survey_form1.png">
10-
<img src="screenshots/survey_form2.png">
9+
<img src="screenshots/survey_form1.png" alt='Image'>
10+
<img src="screenshots/survey_form2.png" alt='Image'>
1111

1212
## (2) Decimal To Binary Converter
1313

14-
<img src="screenshots/decimal_to_binary1.png">
15-
<img src="screenshots/decimal_to_binary2.png">
14+
<img src="screenshots/decimal_to_binary1.png" alt='Image'>
15+
<img src="screenshots/decimal_to_binary2.png" alt='Image'>
1616

1717
## (3) Age Calculator
1818

19-
<img src="screenshots/ac_image.png">
20-
<img src="screenshots/ac_image2.png">
19+
<img src="screenshots/ac_image.png" alt='Image'>
20+
<img src="screenshots/ac_image2.png" alt='Image'>
2121

2222
## (4) Internet Connection Checker
2323

2424
https://user-images.githubusercontent.com/100127570/211485127-8c36fe70-6ac7-44a3-a5ac-380304008984.mp4
2525

2626
## (5) Profile Card
2727

28-
<img src="screenshots/profile_card_in_mobile.png">
29-
<img src="screenshots/profile_card_in_pc.png">
28+
<img src="screenshots/profile_card_in_mobile.png" alt='Image'>
29+
<img src="screenshots/profile_card_in_pc.png" alt='Image'>
3030

3131
https://user-images.githubusercontent.com/100127570/212472997-bb4fb495-b06a-475b-839d-f01c39729864.mp4
3232

3333
## (6) Sign in Page
3434

35-
<img src="screenshots/signinpage1.png">
36-
<img src="screenshots/signinpage2.png">
35+
<img src="screenshots/signinpage1.png" alt='Image'>
36+
<img src="screenshots/signinpage2.png" alt='Image'>
3737

3838
https://user-images.githubusercontent.com/100127570/212527202-e8abb92b-f6bb-4539-a49b-e51459af8a60.mp4
3939

@@ -42,23 +42,23 @@ https://user-images.githubusercontent.com/100127570/212527202-e8abb92b-f6bb-4539
4242
<table>
4343
<tr>
4444
<td>
45-
<img src="screenshots/rnb1.png">
45+
<img src="screenshots/rnb1.png" alt='Image'>
4646
</td>
4747
<td>
48-
<img src="screenshots/rnb2.png">
48+
<img src="screenshots/rnb2.png" alt='Image'>
4949
</td>
5050
</tr>
5151
</table>
5252

5353
## (8) Image Slider
5454

55-
<img src="screenshots/image_slider.png">
55+
<img src="screenshots/image_slider.png" alt='Image'>
5656

5757
https://user-images.githubusercontent.com/100127570/213699818-4d866fb8-73c0-4840-a83c-3ebd67db4120.mp4
5858

5959
## (9) Quotes Generator
6060

61-
<img src="screenshots/quotes_generator.png">
61+
<img src="screenshots/quotes_generator.png" alt='Image'>
6262

6363
## (10) Snack Game
6464

@@ -70,15 +70,15 @@ https://user-images.githubusercontent.com/100127570/217461633-e53daa23-d991-4649
7070

7171
## (12) Calender
7272

73-
<img src="screenshots/calender.png">
73+
<img src="screenshots/calender.png" alt='Image'>
7474

7575
## (13) File Downloader
7676

77-
<img src="screenshots/file_downloader.png">
77+
<img src="screenshots/file_downloader.png" alt='Image'>
7878

7979
## (14) QR Code Generator
8080

81-
<img src="screenshots/qr_code_generator.png">
81+
<img src="screenshots/qr_code_generator.png" alt='Image'>
8282

8383
## (15) Icon Hover Animation
8484

@@ -94,29 +94,32 @@ https://user-images.githubusercontent.com/100127570/223963774-ba2acbfc-6033-4381
9494

9595
## (18) Twitter Sidebar
9696

97-
<img src="screenshots/twitter_sidebar.png">
97+
<img src="screenshots/twitter_sidebar.png" alt='Image'>
9898

9999
## (19) Word Counter
100100

101-
<img src="screenshots/word_counter.png">
101+
<img src="screenshots/word_counter.png" alt='Image'>
102102

103103
## (20) Icon Drawer Animation
104104

105105
https://user-images.githubusercontent.com/100127570/228227870-ddec4d9b-bfe4-4d0d-950c-a1bd0d76a264.mp4
106106

107107
## (21) 10 CSS Animated Buttons
108108

109-
<img src="screenshots/animated_buttons.png">
109+
<img src="screenshots/animated_buttons.png" alt='Image'>
110110

111111
## (22) Typing Effect
112112

113113
https://user-images.githubusercontent.com/100127570/230267601-a17ce84e-7979-4fed-bb20-9adb25d29d9b.mp4
114114

115115
## (23) Image Frame
116116

117-
<img src="screenshots/image_frame.png">
117+
<img src="screenshots/image_frame.png" alt='Image'>
118118

119119
## (24) React Logo
120120

121121
https://user-images.githubusercontent.com/100127570/230298358-8e8ba82a-9812-4e4a-b02c-1486aa179693.mp4
122122

123+
## (25) Survey Form | 2nd
124+
125+
<img src="screenshots/survey_form_2nd.png" alt='Image'>

‎Survey Form I 2nd/images/bg-image.jpg

1.52 MB
Loading

‎Survey Form I 2nd/styles.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
8+
body {
9+
background-color: #fff;
10+
min-height: 100vh;
11+
color: white;
12+
}
13+
14+
.bg-image {
15+
background: url('./images/bg-image.jpg');
16+
background-repeat: no-repeat;
17+
background-size: 100% 100%;
18+
background-attachment: fixed;
19+
position: relative;
20+
isolation: isolate;
21+
22+
display: flex;
23+
justify-content: center;
24+
}
25+
26+
.bg-image::after {
27+
content: '';
28+
position: absolute;
29+
background: #5958ad;
30+
inset: 0;
31+
opacity: 0.7;
32+
z-index: -1;
33+
}
34+
35+
.container {
36+
width: max(50vw, 500px);
37+
margin-top: 3rem;
38+
}
39+
40+
#title {
41+
margin-bottom: 1rem;
42+
}
43+
44+
#title,
45+
#description {
46+
text-align: center;
47+
}
48+
49+
#description {
50+
margin-bottom: 2rem;
51+
}
52+
53+
#survey-form {
54+
width: 100%;
55+
display: flex;
56+
flex-direction: column;
57+
padding: 2.5rem;
58+
background-color: #282848;
59+
border-radius: 0.25rem;
60+
}
61+
62+
.form-group {
63+
margin-bottom: 1.25rem;
64+
}
65+
66+
.form-group label {
67+
font-size: 1.125rem;
68+
margin-bottom: 0.5rem;
69+
display: flex;
70+
align-items: center;
71+
justify-content: start;
72+
}
73+
74+
#email,
75+
#name,
76+
#number {
77+
width: 100%;
78+
background-color: #fff;
79+
padding: 0.5rem 0.8rem;
80+
font-size: 1rem;
81+
outline: none;
82+
border: none;
83+
border-radius: 0.25rem;
84+
}
85+
86+
.clue {
87+
font-size: 0.8rem;
88+
margin-left: 0.25rem;
89+
color: #e4e4e4;
90+
}
91+
92+
#dropdown {
93+
width: 100%;
94+
padding: 0.5rem 0.8rem;
95+
font-size: 1rem;
96+
}
97+
98+
.input-radio,
99+
.input-checkbox {
100+
display: inline-block;
101+
min-height: 1.25rem;
102+
min-width: 1.25rem;
103+
width: 1.25rem;
104+
margin-right: 1.125rem;
105+
}
106+
107+
#survey-form p {
108+
font-size: 1.125rem;
109+
margin-bottom: 0.5rem;
110+
}
111+
112+
.input-textarea {
113+
width: 100%;
114+
min-height: 120px;
115+
padding: 0.5rem;
116+
font-size: 1rem;
117+
resize: vertical;
118+
border-radius: 0.25rem;
119+
}
120+
121+
#submit {
122+
background-color: #37af65;
123+
color: white;
124+
padding: 0.75rem;
125+
border: none;
126+
outline: none;
127+
font-size: 1rem;
128+
}
129+
130+
@media screen and (max-width: 768px) {
131+
.container {
132+
width: 95vw;
133+
}
134+
}

‎Survey Form I 2nd/survey_form.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
11+
<title>Survey Form | 2nd </title>
12+
<link rel="stylesheet" href="styles.css">
13+
</head>
14+
15+
<body>
16+
<div class="bg-image">
17+
<div class="container">
18+
19+
<h1 id='title'>Survey Form</h1>
20+
<p id="description">Thank you for taking the time to help us improve the platform</p>
21+
<form id='survey-form'>
22+
<div class="form-group">
23+
<label id='name-label'>Name</label>
24+
<input type='text' id='name' placeholder="Enter your name" required>
25+
</div>
26+
<div class="form-group">
27+
<label id='email-label'>Email</label>
28+
<input type='email' id='email' placeholder="Enter your email" required>
29+
</div>
30+
<div class="form-group">
31+
<label id='number-label'>Age<span class="clue">(optional)</span></label>
32+
<input type='number' id='number' placeholder="Enter your age" min='18' max='80' required>
33+
</div>
34+
<p>Which option best describes your current role?</p>
35+
<div class="form-group">
36+
<select id='dropdown'>
37+
<option disabled selected>Select current role</option>
38+
<option>Student</option>
39+
<option>Full Time Job</option>
40+
<option>Part Time Job</option>
41+
<option>Full Time Learner</option>
42+
<option>Other</option>
43+
</select>
44+
</div>
45+
<p>Would you recommend freeCodeCamp to a friend?</p>
46+
<div class="form-group">
47+
<label><input type='radio' class="input-radio" name='friend-suggestion'
48+
value='Definitely'>Definitely</label>
49+
<label><input type='radio' class="input-radio" name='friend-suggestion' value='May be'>May
50+
be</label>
51+
<label><input type='radio' class="input-radio" name='friend-suggestion' value='Not Sure'>Not
52+
Sure</label>
53+
</div>
54+
<p>What would you like to see improved? (Check all that apply)</p>
55+
<div class="form-group">
56+
<label><input type='checkbox' class='input-checkbox' value='Front-end Projects'>Front-end
57+
Projects</label>
58+
<label><input type='checkbox' class='input-checkbox' value='Back-end Projects'>Back-end
59+
Projects</label>
60+
<label><input type='checkbox' class='input-checkbox' value='Open source Community'>Open source
61+
Community</label>
62+
</div>
63+
<div class="form-group">
64+
<label>Any comments or suggestions?</label>
65+
<textarea class="input-textarea" placeholder="Enter your comment here"></textarea>
66+
</div>
67+
<input type='submit' id='submit'>
68+
</form>
69+
</div>
70+
</div>
71+
72+
</body>
73+
74+
</html>

‎screenshots/survey_form_2nd.png

716 KB
Loading

0 commit comments

Comments
 (0)