Tell us what’s happening:
I can’t do the checkboxes and the radio thing and their texts in the same line. Please i need this to finish the project.
Your code so far
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<h1>freeCodeCamp Survey Form</h1>
<p>Thank you for taking the time to help us improve the platform</p>
</head>
<body>
<form id="survey-form"></form>
<fieldset>
<label>Name <input id="name" class="name" type="text" placeholder="Enter Your Name" required /></label>
<label>Email <input id="email" class="email" type="email" placeholder="Enter Your Email" required /></label>
<label>Age(optional) <input id="age" class="age" type="number" min="10" max="99" placeholder="Enter Your Age" /></label>
<label>Which option best describes your current role?
<select id="dropdown" required>
<option hidden> Select current role</option>
<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>
</label>
<label required>Would you recommend freeCodeCamp to a friend?
<input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Definitely"> Definitely
<input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Maybe"> Maybe
<input class="inline" type="radio" name="Definitely-Maybe-Not sure" value="Not sure"> Not sure
</label>
<label required>What is your favorite feature of freeCodeCamp?
<select id="dropdown" required>
<option hidden> Select an option</option>
<option value="Challenges"> Challengens</option>
<option value="Projects"> Projects</option>
<option value="Community"> Community</option>
<option value="Open Source"> Open Source</option>
</select>
</label>
<label required>What would you like to see improved? (Check all that apply)
<input type="checkbox" class="check" value="Front-end Projects"> Front-end Projects
<input type="checkbox" class="check" value="Back-end Projects"> Back-end Projects
<input type="checkbox" class="check" value="Data Visualization"> Data Visualization
<input type="checkbox" class="check" value="Challenges"> Challenges
<input type="checkbox" class="check" value="Open Source Community"> Open Source Community
<input type="checkbox" class="check" value="Gitter help rooms"> Gitter help rooms
<input type="checkbox" class="check" value="Videos"> Videos
<input type="checkbox" class="check" value="City Meetups"> City Meetups
<input type="checkbox" class="check" value="Wiki"> Wiki
<input type="checkbox" class="check" value="Forum"> Forum
<input type="checkbox" class="check" value="Additional Courses"> Additional Courses
</label>
<label>Any comments or suggestions?
<textarea name="text" rows="3" cols="40" placeholder="Enter your comment here...">
</textarea>
</label>
<input required type="submit" value="submit" id="submit">
</fieldset>
</body>
</html>
h1{
text-align: center;
font-family: Helvetica;
font-size: 30px;
color: white;
opacity: 95%;
}
p{
text-align: center;
font-family: Helvetica;
font-size: 20px;
font-style: italic;
color: white;
opacity: 90%
}
body{
background-image: linear-gradient(90deg, rgba(70, 70, 255, 0.5), rgba(100, 90, 255, 0.8)), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-position: center;
}
fieldset{
border: none;
width: 60vw;
margin: 30 250;
background: rgb(50, 70, 100)
}
label{
display: block;
margin: 0.5rem 0;
color: white;
font-size: 25px;
font-family: Helvetica;
}
.name,.email,.age{
display: block;
margin-bottom: 1.5rem;
margin-top: 0.2rem;
width: 100%;
height: 27px;
}
select{
width: 100%;
height: 26px;
margin-bottom: 1.5rem;
margin-top: 0.2rem;
}
input{
display: block;
}
.inline{
width: unset;
margin: 0 0.5rem 0 0;
vertical-align: middle;
}
input[type="submit"] {
display: block;
width: 100%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: rgb(0, 240, 80);
min-width: 300px;
border-color: rgb(0, 240, 80);
color: white;
}
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
