Tell us what’s happening:
The code works in terms of HTML, I am posting this to request someone to tell me how to place the Radio and Checkbox inputs vertically aligned with the text showing to the right of the inputs, like how it is on the website. https://survey-form.freecodecamp.rocks/
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html>
<head>
<h1 id="title">freeCodeCamp Survey Form
</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<form id="survey-form">
<label id="name-label"> Name <input class="xLength" id="name" type="text" placeholder= "Enter your name" required> </input>
</label>
<label id="email-label"> Email <input class="xLength" id="email" type="email" placeholder="Enter your email" required>
</label>
<label id="number-label"> Age (optional) <input class="xLength" id="number" type="number" min="10" placeholder="Age" max=100>
</label>
<label> Which option best describes your current role?
<select class="xLength" id="dropdown" placeholder=>
<option>Select current role</option>
<option>Student</option>
<option>Teacher</option>
</select>
</label>
<label> Would you recommend freeCodeCamp to a friend?
<input type="radio" name="radioB" value="Definetly"> Definetly</input>
<input type="radio" name="radioB" value="Maybe"> Maybe</input>
<input type="radio" name="radioB" value="NotSure"> Not sure</input>
</label>
<label>What is your favorite feature of freeCodeCamp?
<select class="xLength">
<option>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
</select>
</label>
<label> What would you like to see improved? (Check all that apply)
<input type="checkbox" value="FrontEnd"><span> Front-End Projects </span></input>
<input type="checkbox" value="BackEnd"><span> Back-End Projects </span></input>
<input type="checkbox" value="Data"><span> Data Visualization </span></input>
</label>
<label> Any comment or suggestions?
<textarea placeholder="Enter your comment here..."></textarea>
</label>
<button type="submit"_ id="submit">Submit </button>
</form>
</body>
</html>
/* file: styles.css */
*{
font-family: sans-serif;
}
#title, #description{
text-align: center;
color: white;
}
#title{
font-size: 20px;
}
#description{
font-size: 100%;
text-decoration: italic;
margin: auto;
font-style: italic;
margin-bottom: 20px;
}
html{
background-image: url(https://i.insider.com/5d42e0ce100a2402a63a98f6?width=700);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: rgba(0,200,0,0.5);
}
form{
background-color: rgb(40,40,80);
width: auto;
max-width: 70%;
min-width: 200px;
height: auto;
opacity: 90%;
border-radius: 5px;
color: white;
display: flex;
flex-direction: column;
align-items: left;
margin: auto;
padding: 4%;
}
input[type="checkbox"], input[type="radio"]{
}
.xLength{
width: 100%;
border-radius: 5px;
height: 35px;
margin-top: 5px;
margin-bottom: 25px;
}
textarea{
height: 100px;
width: 100%;
margin-bottom: 50px;
margin-top: 5px;
}
#submit{
height: 40px;
background-color: rgb(40,200,85);
color: white;
font-size: 90%;
border: 0;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
