style.css

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100&display=swap');

body{
	background-image: url(sam.jpg);
	margin: 0;
	color: white;
	font-family: 'Libre Franklin', sans-serif;
}
.container{
	
}
.nav{
	height: 5rem;
	width: 100%;
	background-color: #4caf50;
	position: sticky;
	top: 0px;
}
.header{
	text-align: center;
}
#survey-form{
	width: 60%;
	background-color: #272747;
	margin: auto;
	padding: 1.5rem;
	line-height: 2rem;
	font-size: 1.2rem; 
	margin-bottom: 2rem;
}

.space input{
	width: 100%;
	height: 1.8rem;
	border-radius: 0.2rem;
	
}
.space{
	height: 2.5rem;
	width: 100%;
}
.space select{
	height: 2.5rem;
	width: 100%;
	border-radius: 0.2rem;
}
input[type=radio] {
    width: 1rem;
    height: 1rem;
    margin: 0px;

}
#radio-space{
	padding-left: 10px;
}
input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin: 0px;
}

.submit-button{
	height: 3rem;
	width: 100%;
	background-color: #37af65;
	font-size: 1.5rem;
	color: white;
}

survey.html

<div class="container">
		<div class="nav">
			
		</div>
		<div class="header">
			<h1 id="title">freeCodeCamp Survey Form</h1>
			<p id="discription">Thank you for taking the time to help us improve the platform</p>			
		</div>
		<form id="survey-form">
			<div class="form-group">
				<div class="space"><label id="name" for="name">Name</label></div>
				<div class="space"><input type="text" name="name" placeholder="Enter Your Name" required/></div>
			</div>
			<div class="form-group">
				<div class="space"><label id="Email" for="Email">Email</label></div>
				<div class="space"><input type="text" name="Email" placeholder="Enter Your Name" required/></div>
			</div>
			<div class="form-group">
				<div class="space"><label id="age" for="age">Age(optional)</label></div>
				<div class="space"><input type="Number" name="age" placeholder="Age"  required min="10" max="99"></div>
			</div>
			<div class="form-group">
				<div class="space"><p>Which option best describes your current role?</p></div>
				<div class="space">
					<select name="role" required>
						<option disabled selected value>Select Current Role</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>
				</div>
			</div>
			<div class="form-group">
				<div class="space"><p>Would you recommend freeCodeCamp to a friend?</p></div>
				<div>
					<input type="radio" name="definitely" checked><label id="radio-space">Definitely</label></div>
					<div><input type="radio" name="Maybe"><label id="radio-space">Maybe</label></div>
					<div><input type="radio" name="Not sure"><label id="radio-space">Not sure</label></div>
				</div>
				<div class="form-group">
					<div class="space"><p>What is your favorite feature of freeCodeCamp?</p></div>
					<div class="space"><select id="most-like" name="mostLike" class="form-control" required>
						<option disabled selected value>Select an Option</option>
						<option value="challenges">Challenges</option>
						<option value="projects">Projects</option>
						<option value="community">Community</option>
						<option value="openSource">Open Source</option>
					</select>
				</div>
			</div>
			<div class="form-grop">
				<div class="space"><p>What would you like to see improved? (Check all that apply)</p></div>
				<div>
					<input type="checkbox" name="Front-end Projects"><label id="radio-space">Front-end Projects</label>
				</div>
				<div>
					<input type="checkbox" name="Back-end Projects"><label id="radio-space">Back-end Projects</label>
				</div>
				<div>
					<input type="checkbox" name="Data Visualization"><label id="radio-space">Data Visualization</label>
				</div>
				<div>
					<input type="checkbox" name="Challenges"><label id="radio-space">Challenges</label>
				</div>
				<div>
					<input type="checkbox" name="Open Source Community"><label id="radio-space">Open Source Community</label>
				</div>
				<div>
					<input type="checkbox" name="Gitter help rooms"><label id="radio-space">Gitter help rooms</label>
				</div>
				<div>
					<input type="checkbox" name="Videos"><label id="radio-space">Videos</label>
				</div>
				<div>
					<input type="checkbox" name="City Meetups"><label id="radio-space">City Meetups</label>
				</div>
				<div>
					<input type="checkbox" name="Wiki"><label id="radio-space">Wiki</label>
				</div>
				<div>
					<input type="checkbox" name="Forum"><label id="radio-space">Forum</label>
				</div>
				<div>
					<input type="checkbox" name="Additional Courses"><label id="radio-space">Additional Courses</label>
				</div>
			</div>
			<div class="form-group">
				<div class="space"><p>Any comments or suggestions?</p></div>
				<div><textarea
				id="comments"
				class="input-textarea"
				name="comment"
				placeholder="Enter your comment here..."
				rows="10" cols="69"
				></textarea></div>
			</div>
			<div class="form-group">
				<button type="submit" id="submit" class="submit-button">Submit
				</button>
			</div>
		</form>

	</div>