Tell us what’s happening:
Describe your issue in detail here.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey FOrm</title>
<link rel="stylesheet" href="survey.css">
</head>
<body>
<h1 id="title"> SURVEY FORM</h1>
<p id=description>
This form below is a survey form
<p>
<div class="container">
<form id="survey-form">
<label id="name-label">Name</label><br>
<input type="text" id="name" class="name" placeholder="enter your name" required><br><br>
<label id="email-label">Email</label><br>
<input type="email" id="email" class="name" placeholder="enter your email" required><br><br>
<label id="number-label">Age(optional)</label><br>
<input type="number" id="number" class="name" placeholder="Age" min="18" max="50"><br><br>
<labe id="name-label">Which option best describes your current role?</labe><br>
<select id="dropdown">
<option value="select role">Select Current Role</option>
<option value="Student">Student</option>
<option value="full time learner">Full Time Learner</option>
<option value="prefer not to say">Prefer Not To Say</option>
<option value="others">Others</option>
</select><br><br>
<p>Would you recommend freeCodeCamp to a friend?</p><br>
<input type="radio" id="definitely" name="response" value="definitely">
<label for="definitely">Definitely</label>
<input type="radio" id="maybe" name="response" value="maybe">
<label for="maybe">Maybe</label>
<input type="radio" id="not sure" name="response" value="not sure">
<label for="not sure">Not Sure</label><br><br>
<p>What is your favorite feature of freeCodeCamp?</p>
<input type="checkbox" name="value" id="value" valaue="front-end projects">
<label> Front-end Projects</label><br>
<input type="checkbox" name="value" id="value" value="back-end projects">
<label>Back-end Projects</label><br>
<input type="checkbox" name="value" id="value" value="Data visualization">
<label>Data Visualization</label><br>
<input type="checkbox" name="value" id="value" value="challanges">
<label>Challenges</label><br>
<input type="checkbox" name="value" id="value" value="open source community">
<label>Open Source Community</label><br>
<input type="checkbox" name="value" id="value" value="gitter help rooms">
<label>Gitter help rooms</label><br>
<input type="checkbox" name="value" id="value" value="videos">
<label>Videos</label><br>
<input type="checkbox" name="value" id="value" value="wiki">
<label>Wiki</label><br>
<input type="checkbox" name="value" id="value" value="forum">
<label>Forum</label><br>
<input type="checkbox" name="value" id="value" value="city meetups">
<label>City Meetups</label><br>
<p>Any comments or suggestions?</p>
<textarea>Enter your comment here</textarea><br><br>
<button id="submit">Submit</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100vw;
background-color: #2A2A49;
overflow-x: hidden;
}
.container{
width: 40%;
background-color:#2A2A49 ;
margin-left: 30px;
}
h1{
width: 100%;
height: 100px;
margin: 30px 0 0 150px;
font-family: sans-serif;
}
#description{
font-family: sans-serif;
font-style: oblique;
margin: 0 0 20px 30px;
}
.mike{
font-family: sans-serif;
color: aliceblue;
margin-top: 20px;
}
input[class=name]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;}
input[type=radio]{
width: 15px;
font-size: 20px;
}
label{
font-family: sans-serif;
font-size: 1.3em;
font-weight: lighter;
}
p{
font-family:sans-serif;
font-size: 1.5em;
margin: 15px 0 20px 0;
}
#dropdown, button, textarea{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;}
textarea{
height: 150px;
}
button{
background-color: #37AF65;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Build a Survey Form
Link to the challenge: