Survey Form - Build a Survey Form

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<body>
<head>
  <meta charset="UTF-8">
  <title>freeCodeCamp Survey Form</title>
  <link rel="stylesheet" href="style.css">
  </head>
  
</body>
<body>
  <h1>freeCodeCamp Survey Form<h1>
  <p>Thankyou for taking the time to help us improve the platform</p>
  
  </body>
</html>
/* file: styles.css */

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Sir, where to add css element (body)

At the top, you should see this:


Press on the “styles.css” tab and it should open up a pane for your CSS.

But sir after adding why font is not changed.

The href in the link element should be directed to styles.css not style.css.

Try maybe that would work?
Change the color too to see if its working

1 Like

it is working.Thankyou

1 Like

use this code for help

Build a Survey Form using HTML and CSS
<style>

	/* Styling the Body element i.e. Color,
	Font, Alignment */
	body {
		background-color: #05c46b;
		font-family: Verdana;
		text-align: center;
	}

	/* Styling the Form (Color, Padding, Shadow) */
	form {
		background-color: #fff;
		max-width: 500px;
		margin: 50px auto;
		padding: 30px 20px;
		box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
	}

	/* Styling form-control Class */
	.form-control {
		text-align: left;
		margin-bottom: 25px;
	}

	/* Styling form-control Label */
	.form-control label {
		display: block;
		margin-bottom: 10px;
	}

	/* Styling form-control input,
	select, textarea */
	.form-control input,
	.form-control select,
	.form-control textarea {
		border: 1px solid #777;
		border-radius: 2px;
		font-family: inherit;
		padding: 10px;
		display: block;
		width: 95%;
	}

	/* Styling form-control Radio
	button and Checkbox */
	.form-control input[type="radio"],
	.form-control input[type="checkbox"] {
		display: inline-block;
		width: auto;
	}

	/* Styling Button */
	button {
		background-color: #05c46b;
		border: 1px solid #777;
		border-radius: 2px;
		font-family: inherit;
		font-size: 21px;
		display: block;
		width: 100%;
		margin-top: 50px;
		margin-bottom: 20px;
	}
</style>

GeeksforGeeks Survey Form

<!-- Create Form -->
<form id="form">

	<!-- Details -->
	<div class="form-control">
		<label for="name" id="label-name">
			Name
		</label>

		<!-- Input Type Text -->
		<input type="text"
			id="name"
			placeholder="Enter your name" />
	</div>

	<div class="form-control">
		<label for="email" id="label-email">
			Email
		</label>

		<!-- Input Type Email-->
		<input type="email"
			id="email"
			placeholder="Enter your email" />
	</div>

	<div class="form-control">
		<label for="age" id="label-age">
			Age
		</label>

		<!-- Input Type Text -->
		<input type="text"
			id="age"
			placeholder="Enter your age" />
	</div>

	<div class="form-control">
		<label for="role" id="label-role">
			Which option best describes you?
		</label>
		
		<!-- Dropdown options -->
		<select name="role" id="role">
			<option value="student">Student</option>
			<option value="intern">Intern</option>
			<option value="professional">
				Professional
			</option>
			<option value="other">Other</option>
		</select>
	</div>

	<div class="form-control">
		<label>
			Would you recommend GeeksforGeeks
			to a friend?
		</label>

		<!-- Input Type Radio Button -->
		<label for="recommed-1">
			<input type="radio"
				id="recommed-1"
				name="recommed">Yes</input>
		</label>
		<label for="recommed-2">
			<input type="radio"
				id="recommed-2"
				name="recommed">No</input>
		</label>
		<label for="recommed-3">
			<input type="radio"
				id="recommed-3"
				name="recommed">Maybe</input>
		</label>
	</div>

	<div class="form-control">
		<label>Languages and Frameworks known
			<small>(Check all that apply)</small>
		</label>
		<!-- Input Type Checkbox -->
		<label for="inp-1">
			<input type="checkbox"
				name="inp">C</input></label>
		<label for="inp-2">
			<input type="checkbox"
				name="inp">C++</input></label>
		<label for="inp-3">
			<input type="checkbox"
				name="inp">C#</input></label>
		<label for="inp-4">
			<input type="checkbox"
				name="inp">Java</input></label>
		<label for="inp-5">
			<input type="checkbox"
				name="inp">Python</input></label>
		<label for="inp-6">
			<input type="checkbox"
				name="inp">JavaScript</input></label>
		<label for="inp-7">
			<input type="checkbox"
				name="inp">React</input></label>
		<label for="inp-7">
			<input type="checkbox"
				name="inp">Angular</input></label>
		<label for="inp-7">
			<input type="checkbox"
				name="inp">Django</input></label>
		<label for="inp-7">
			<input type="checkbox"
				name="inp">Spring</input></label>
	</div>

	<div class="form-control">
		<label for="comment">
			Any comments or suggestions
		</label>

		<!-- multi-line text input control -->
		<textarea name="comment" id="comment"
			placeholder="Enter your comment here">
		</textarea>
	</div>

	<!-- Multi-line Text Input Control -->
	<button type="submit" value="submit">
		Submit
	</button>
</form>

Just a little suggestion, add the language name after the triple backtick so that it can highlight the syntax

like this :point_down:

```html

```

i don’t want understand what you are saying