Hello, I was writing the code for this survey form in VS Code and the result is ok but when I paste it into freeCodeCamp, everything is messed up. Works fine in other browsers too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>HTML Survey Form</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;1,200&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help
us improve the platform</p>
</header>
<form method="post" id="survey-form">
<div class="form-group">
<label id="name-label">Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label">Email</label>
<input type="email" id="email" placeholder="Enter your Email" required>
</div>
<div class="form-group">
<label id="number-label">Age <span class="small">(optional)</span> </label>
<input type="number" id="number" placeholder="Select your age" max="120" min="13" required>
</div>
<div class="form-group">
<p class="ask-user">Which option best describes your current role?</p>
<select id="dropdown">
<option>Select current role</option>
<option>Student</option>
<option>Full Time Job</option>
<option>Full Time Learner</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<p class="ask-user">Would you recommend freeCodeCamp to a friend?</p>
<label class="user-response" for="Definitely"><input type="radio" id="Definitely" name="user-response" value="Definitely">Definitely</label>
<label class="user-response" for="Maybe"><input type="radio" id="Maybe" name="user-response" value="Maybe">Maybe</label>
<label class="user-response" for="Not_sure"><input type="radio" id="Not_sure" name="user-response" value="Not_sure">Not sure</label>
</div>
<div class="form-group">
<p class="ask-user">What is your favorite feature of freeCodeCamp?</p>
<select id="dropdown">
<option>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
</div>
<div class="form-group">
<p class="ask-user">What would you like to see improved? <span class="small">(Check all that apply)</span></p>
<label class="user-response"><input type="checkbox" value="Front-end projects">Front-end projects</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Back-end projects</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Data Visualization</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Challenges</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Open Source Community</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Gitter help rooms</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Videos</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">City Meetups</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Wiki</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Forum</label>
<label class="user-response"><input type="checkbox" value="Back-end projects">Additional Courses</label>
</div>
<div class="form-group">
<p class="ask-user">Any comments or suggestions?</p>
<textarea id="suggestion" rows="7"></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-btn">Submit</button>
</div>
</form>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-attachment: fixed;
font-family: 'Poppins', sans-serif;
color: white;
}
.container {
margin: auto;
/* border: 5px solid red; */
}
header{
text-align: center;
margin: 3em 0 2.2em;
/* border: 3px solid red; */
}
.description {
font-style: italic;
font-weight: 200;
letter-spacing: .3px;
margin: .2em auto;
max-width: 28.1em;
}
#survey-form {
width: 80%;
max-width: 720px;
background-color: rgba(27, 27, 50, 0.8);
border-radius: 4px;
border: none;
margin: 1em auto;
font-family: inherit;
font-size: 300;
padding: 1em 0;
/* overflow: hidden; */
}
.form-group {
display: block;
margin: 0 auto;
/* border: 1px solid red; */
padding: .5em 0;
}
label, input, select, .ask-user, textarea, .submit-btn {
display: block;
width: 90%;
margin: 0 auto;
border: none;
outline: none;
font-family: inherit;
}
label, .ask-user {
font-size: 1rem;
margin: 10px auto;
}
input, select, textarea{
height: 2.5em;
border: none;
border-radius: .2em;
padding: 0 .8em;
font-size: medium;
}
.small {
font-size: small;
}
.ask-user{
/* color: gray; */
}
.user-response {
display: flex;
align-items: center;
margin: 0 auto;
/* border: 1px solid white; */
}
input[type="radio"], input[type="checkbox"] {
width: 1.2em;
margin: 0 0.5em 0 0;
vertical-align: middle;
border: 10px solid yellow;
}
#suggestion {
height: auto;
padding: .8em 1em;
}
.submit-btn {
height: 2.8em;
margin: 1.5em auto 2em;
border: none;
border-radius: .2em;
background-color: #37af65;
color: white;
font-family: Poppins;
font-size: 200;
cursor: pointer;
}
#dropdown {
font-family: inherit;
color: gray;
}
Your browser information:
Browser: Google Chrome, Firefox
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: