Hi all! Struggling a little with this project - I wanted to try to challenge myself to make something as visually similar to the example as I can, but I’m running into this issue where my checkbox and radio labels and inputs are indented further in than everything else. I’m sure it’s some issue with how I set my width or something, but I’m having a hard time figuring it out. Any help would be much appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name <input name="name" id="name" type="text" required placeholder="Enter name here"></input>
</label>
<label id="email-label">Email <input name="email" id="email" type="email" required placeholder="Enter email here"></input>
</label>
<label id="number-label">Age (optional) <input name="age" id="number" type="number" min="0" max="100" placeholder="Enter age here"></input></label>
<label>Which of these best describes your current role? <select name="current-role" id="dropdown"></label>
<option value="">(Select current role)</option>
<option value="1">Student</option>
<option value="2">Full time job</option>
<option value="3">Full time learner</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select>
<label>Would you recommend freeCodeCamp to a friend?
<label><input type="radio" name="rec" value="1"/>Definitely </label>
<label><input type="radio" name="rec" value="2"/>Maybe </label>
<label><input type="radio" name="rec" value="3"/>Not sure </label>
</label>
<label>What is your favorite feature of freeCodeCamp? <select name="fave-feature" id="dropdown"></label>
<option value="">(Select an option)</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
<label>What would you like to see improved?
<label><input name="front-end-projects" type="checkbox" value="front-end projects"/> Front-end projects</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Back-end projects</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Data visualization</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Challenges</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Open source community</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Glitter help rooms</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Videos</label>
</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> City meetups</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Wiki</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Forum</label>
<label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Additional courses</label>
</label>
<label>Any comments or suggestions? <textarea id="comments" rows="4" cols="30" placeholder="Enter your comment here..."></textarea>
</label>
</fieldset>
<button id="submit" type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
CSS:
body {
background-color: black;
width: 100%;
height: 100vh;
margin: 0;
color: white;
font-family: sans-serif;
}
h1 {
margin-top: 40px;
margin-bottom: 0px;
}
p {
margin-top: 10px;
font-size: 14px;
font-style: italic;
}
h1, p {
text-align: center;
font-family: sans-serif;
}
label {
display: block;
margin: 1rem 0;
padding-right: 20px;
padding-left: 20px;
}
input[type="text"], input[type="email"], input[type="number"], select {
display:block;
margin: 4px 0px 0px 0px;
border-radius: 5px;
width: 100%;
height: 2.5em;
}
input [type="radio"], input[type="checkbox"] {
margin-left: -10px;
}
fieldset {
background-color: #2e2561;
width: 75%;
margin: auto;
border: 0px;
border-radius: 8px;
}
#name-label {
padding-top: 20px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; 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:
