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
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 
```html
```
i don’t want understand what you are saying
system
Closed
9
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
