Hi Guys, Hope you are doing well. I completed the Survey Form and passes all the tests but it looks really ugly. So, could you guys help me improving it?
Here Is My Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css" type="text/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">
<label id="name-label">Name: <input id="name" type="text" placeholder="Enter your name" required></label>
<label id="email-label">Email: <input id="email" type="email" placeholder="Enter your email"required></label>
<label id="number-label">Age: <input id="number" type="number" min="12" max="120" placeholder="Enter your age" required></label>
<label>
Which option currently describes your role?
<select id="dropdown">
<option disabled selected value>(Select an option)</option>
<option>Student</option>
<option>Teacher</option>
<option>Developer</option>
<option>Prefer not to say</option>
<option>Other</option>
</select>
<p>Would you recommend freeCodeCamp to a friend?</p>
<input type="radio" name="recommend" value="definitely" class="input-radio"></label>
<label>
<input type="radio" name="recommend" value="maybe" class="input-radio">
</label>
<label>
<input type="radio" name="recommend" value="not sure" class="input-radio">
<p>What would you like to be improved? (Check all that apply)</p>
<label>
Curriculum
<input type="checkbox" value="Curriculum">
</label>
<label>
Forum
<input type="checkbox" value="Forum">
</label>
<label>
City meetups
<input type="checkbox" value="City meetups">
</label>
<label>
Videos
<input type="checkbox" value="Videos">
</label>
<label>
<textarea></textarea>
</label>
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
body {
margin: 30px auto;
font-family: 'Ubuntu', sans-serif;
background-image: linear-gradient(180deg, rgb(5, 101, 156), rgb(3, 172, 172), cyan);
color: white;
text-align: center;
}
Image:
