Hello,
Im almost done, but I have a question, everything looks good, but my radio and checkboxs are aligned in the middle, I believe because they are styled at the css with “input”…
Eitherway, how can I set them so they can be on the left of their own option?, what step did I make them go in the middle?
<!Doctype html>
<html lang="en">
<head>
<meta charset"utf-8">
<link rel="stylesheet" href="styles.css">
<title>Survey Form</title>
</head>
<body>
<h1 id="title">Rodolfo´s Survey form</h1>
<p id="description">Thank you for your time to help us improve.</p>
<form id="survey-form">
<br>
<label class="margenes" id="name-label">Name<input id="name" type="text" placeholder="Enter your name" required></input>
</label><br><br>
<label id="email-label">Email<input id="email" type="email" placeholder="Enter your email" required></input>
</label><br><br>
<label id="number-label">Age
<input id="number" type="number" min="1" max="99" placeholder="Enter your age"></input>
</label><br><br>
<label>Which option best describes your current role</label>
<br><br>
<select id="dropdown">
<option>Student</option>
<option>Full time job</option>
<option>Full time learner</option>
<option>Other</option>
</select>
<br><br>
<label>Whould you recommend freecodecamp to a friend?</label>
<br><br>
<label class="checks">Definitely<input type="radio" value="value" name="value"></input></label>
<label class="checks">Maybe<input type="radio" value="value" name="value"></input></label>
<label class="checks">Not sure<input type="radio" value="value" name="value"></input></label>
<br>
<label>What would you like to see improved? (Check all that apply)</label><br><br>
<label class="checks">Front-end projects<input type="checkbox" name="value" value="value"></input></label>
<br>
<label class="checks">Back-end projects<input type="checkbox" name="value" value="value"></input></label>
<br>
<label class="checks">Data Visualization<input type="checkbox" name="value" value="value"></input></label>
<br>
<label class="checks">Challenges<input type="checkbox" name="value" value="value"></input></label>
<br>
<label class="checks">Open Source Community<input type="checkbox" name="value" value="value"></input></label> <br>
<label class="checks">Videos<input type="checkbox" name="value" value="value"></input></label>
<label>Any comments or suggestions?</label><br><br>
<textarea>Enter your comment here...</textarea><br>
<div>
<br><button id="submit" type="submit">Submit</button>
</form>
</div>
</body>
</html>
body {
background-image: url(https://miro.medium.com/max/1400/1*SEJQh2lJJP3SJdApxlF95A.png);
color: white;
font-family: sans-serif;
display: block;
margin: 20;
}
h1 {
color: white;
text-align: center;
margin-top: 30;
margin-bottom: 10;
}
p {
text-align: center;
}
label {
font-size: 15;
margin-left: 10;
}
form {
margin-left: 100;
margin-right: 100;
background-color: rgba(0,0,80,0.5);
}
button {
text-align: center;
width: 95%;
margin-left: 12;
margin-right: 12;
margin-bottom: 20;
background-color: rgba(100,155,100);
height: 35;
color: white;
border: white;
}
input {
margin-left: 10;
margin-bottom: 5;
margin-top: 5;
width: 95%;
padding: 4;
}
select {
margin-left: 10;
margin-top: 1;
width: 95%
}
textarea {
margin-left: 10;
width: 95%;
height: 80;
}
.checks {
font-size: 13;
margin-left: 40;
}
input[type=checkbox],[type=radio]{
}