diff --git a/survey form/survey.css b/survey form/survey.css
new file mode 100644
index 0000000..a25bfc8
--- /dev/null
+++ b/survey form/survey.css	
@@ -0,0 +1,99 @@
+.background{
+    width: 100%;
+    height: 100%;
+    
+    top: 0;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+body{
+    background: rgb(39,39,39);
+    font-family:cursive;
+}
+.d1{
+    position: absolute;
+    background: linear-gradient(to right,rgb(83, 83, 210),rgb(135, 131, 131));
+    width: 100%;
+    height: 1500px;
+    opacity: 0.8;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+   
+}
+.heading{
+   color: white;
+    font-size: 50px;
+    text-align: center;
+}
+.para1{
+    text-align: center;
+    color: white;
+    font-size: 30px;
+}
+.box{
+    background-color: rgb(5, 5, 45);
+   
+    width: 1000px;
+    height: 1280px;
+    position: absolute;
+color: white;
+    margin-left: 380px;
+}
+.Name{
+    font-size: 22px;
+    text-align: left;
+    padding-left: 40px;
+    
+}
+
+
+.input{
+    width: 900px;
+    height: 50px;
+    border-radius: 8px;
+   font-size: 18px;
+   margin-left: 40px; align-items: left;
+    padding-left: 20px;
+}
+.check{
+    font-size: 22px;
+    margin-left: 40px;
+    line-height: 40px;
+}
+.para2{
+    margin-left: 40px;
+    font-size: 22px;
+}
+.comment{
+    width: 900px;
+    height: 100px;
+    opacity: 1;
+    color: white;
+    font-size: 20px;
+    text-align:top;
+    padding-top: 0px;
+    margin-left: 40px;
+}
+.button{
+    width: 900px;
+    margin-top: 30px;
+    margin-left: 40px;
+    height: 45px;
+    background-color: green;
+    font-size: 20px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+.button:hover{
+    background-color: rgb(197, 237, 137);
+    cursor: pointer;
+    color: black;
+}
+
+
diff --git a/survey form/survey.html b/survey form/survey.html
new file mode 100644
index 0000000..b762a58
--- /dev/null
+++ b/survey form/survey.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>
+            survey-form
+        </title>
+        <link rel="stylesheet" href="survey.css">
+    </head>
+    <body>
+        <img class="background"src="https://s19.postimg.cc/gnig75jgz/shutterstock_627650747.jpg">
+       <div class="d1">
+         <h2 class="heading">Survey Form</h2>
+        <p class="para1"><i>Thank you for taking the time to help us improve the platform</i></p>
+        <div class="box">
+            
+            <p class="Name">Name</p>
+            <input class="input" type="text" placeholder="Enter your name">
+            <p class="Name">Email</p>
+            <input class="input" type="text" placeholder="Enter your Email">
+            <p class="Name">Age(optional)</p>
+            <input class="input" type="text" placeholder="Age">
+            <label for="role" class="Name">Which option best describes your current role?</label><br>
+           
+            <select id="role" class="input" >
+                <option value="Student">Student</option>
+                <option value="Full Time Job">Full Time Job</option>
+                <option value="Full Time Learner">Full Time Learner</option>
+                <option value="Prefer not to say">Prefer Not To Say</option>
+                <option value="Other">Other</option>
+            </select>
+            <p class="Name">Would you recommend freeCodeCamp to a friend?</p>
+            <label for="Definitely" class="check"><input id="Definitely"type="checkbox" name="recommend">Definitely</label> <br>
+            <label for="Maybe"class="check"><input id="Maybe"type="checkbox" name="recommend">Maybe</label><br>
+            <label for="Not sure"class="check"><input id="Not sure"type="checkbox" name="recommend">Not sure</label>  
+            <p class="para2">What would you like to see improved? (Check all that apply)</p>
+            <label for="Front-end Projects"class="check"><input id="Front-end Projects"type="checkbox" name="improved">Front-end Projects</label><br>
+            <label for="Back-end Projects"class="check"><input id="Back-end Projects"type="checkbox" name="improved">Back-end Projects</label><br>
+            <label for="Challenges"class="check"><input id="Challenges"type="checkbox" name="improved">Challenges</label><br>
+            <label for="Open Source Community"class="check"><input id="Open Source Community"type="checkbox" name="improved">Open Source Community</label><br>
+            <label for="Forum"class="check"><input id="Forum"type="checkbox" name="improved">Forum</label><br>
+            <p class="para2">Any comments or suggestions?</p>
+            <input class="comment" type="text" placeholder="Enter your comments here...">
+            <button class="button">Submit</button>
+        </div>
+        </div>
+
+    </body>
+</html>
\ No newline at end of file
