Tell us what’s happening:
I am trying to seperate each attribute in the survey form project but for some reason it won’t move.
Click to see code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Survey form</title>
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Let us know how we can improve freeCodeCamp</p>
<form id="survey-form" action="/action_page.php" method="GET">
<label id="name-label" for="name">Name:</label>
<input id="name" type="text" name="name"><br>
<label id="email-label" for="email">Email:</label>
<input id="email" type="text" name="email" required><br>
<label id="number" for="age">Age:</label>
<input id="number" type="number" name="age" min="0" max="125"></br>
<label>Which option best describes your current role?</label>
<select id="dropdown">
<option>Student</option>
<option>Full time Learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
<br>
<label>How likely is that you would recommend freeCodeCamp to a friend?</label>
<input type="radio" name="option" value="definitely" checked> Definitely
<input type="radio" name="option" value="maybe"> Maybe
<input type="radio" name="option" value="not-sure"> Not sure<br>
<label>Things that should be improved in the future:</label>
<input type="checkbox" name="option" value="front-end projects"> Front-end Projects
<input type="checkbox" name="option" value="Back-end Projects"> Back-end Projects
<input type="checkbox" name="option" value="Data Visualization"> Data Visualization
<input type="checkbox" name="option" value="Challenges"> Challenges
<input type="checkbox" name="option" value="Open Source Community"> Open Source Community
<input type="checkbox" name="option" value="Glitter help rooms"> Glitter help rooms
<input type="checkbox" name="option" value="Videos"> Videos
<input type="checkbox" name="option" value="City Meetups"> City Meetups
<input type="checkbox" name="option" value="Wiki"> Wiki
<input type="checkbox" name="option" value="Forum"> Forum
<input type="checkbox" name="option" value="Additional Courses"> Additional Courses
<br>
<label for="comments">Any comments or suggestions?</label>
<textarea id="story" name="story" rows="5" cols="33" placeholder="Enter your comment..."></textarea>
<br>
<button id="submit">Submit</button>
</form>
</body>
</html>
<style>
html, body {
background-color: #7c66dd;
margin: 0 auto;
font-family: 'Raleway';
max-width: 70%;
text-align: center;
}
#title {
font-size: 30px;
}
#description {
padding-bottom: 5px;
}
#survey-form {
background: #fff;
padding: 20px 30px;
display: block;
border-radius: 5px;
}
#name-label {
margin-bottom: 20px;
}
</style>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.
Link to the challenge:
https://codepen.io/gbopola/pen/JqzxPX