Tell us what’s happening:
The code runs and it’s okay, but my preview looks unorganized. I’m having trouble figuring out which margin or padding I should change. I’ve done the Read-Search method and it only adds more chaos to my work. Please help me, whoever can find my problem and give a solution. I will post the screenshot of my preview
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
</html>
<head>
<meta charset="UTF-8">
<title> Survey Form</title>
<link rel="stylesheet" href="styles.css"
</head>
<body>
<h1 id="title" > free CodeCamp Survey Form<h1>
<p id="description" > Your participation in this survey is completely voluntary. However, if you feel uncomfortable answering any questions, you can withdraw at any given point. Thank you very much for your time and support. Please start with the survey by Filling out your name below<p>
<form id="survey-form">
<Fieldset>
<label id="name-label">Name<input type="text" id="name" name="name" placeholder="Enter your Name" required/>
</label>
<label id="email-label">Email<input type="email" id="email" name="email" placeholder="Enter your email" required/>
</label>
<label id="number-label">Age (optional)<input type="number" id="number" name="age" min="10" max="100" placeholder="10"/>
</label>
</fieldset>
<fieldset>
<label>Which option best describes your current role?
<select id="dropdown">
<option>Select your role</option>
<option>Student</option>
<option>Full time Job</option>
<option> Freelancer</option>
<option> prefer not say</option>
<option> other</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Would you recommend freeCodeCamp to a friend?
<input type="radio" name="user-recommend" value="definitely" class="inline" required>Definitely</input>
</label>
<label>
<input type="radio" name="user-recommend" value="maybe" class="inline" required>Maybe</input>
</label>
<label>
<input type="radio" name="user-recommend" value="not sure" class="inline" required>Not Sure</input>
</label>
</fieldset>
<fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select id="dropdown">
<option value="">Select an option</option>
<option value="1">Completely free to use</option>
<option value="2">Designed for Beginners</option>
<option value="3">The Platform is easy to use and navigate</option>
<option value="4">Offers Certificates</option>
</select>
</label>
</fieldset>
<fieldset>
<label>What would you like to see improved? (Check all that apply)
<input type="checkbox" name="prefer" value="Front-end projects">Front-end projects</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Back-end projects">Back-end projects</input>
</label>
<label>
<input type="checkbox" name="prefer" value="data analysis">Data analysis
</input>
</label>
<label>
<input type="checkbox" name="prefer" value="challenges">Challenges</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Open Source Community">Open Source Community</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Gitter help rooms">Gitter help rooms</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Videos">Videos</input>
</label>
<label>
<input type="checkbox" name="prefer" value="City Meetups">City Meetups</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Wiki">Wiki</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Forum">Forum</input>
</label>
<label>
<input type="checkbox" name="prefer" value="Additional Courses">Additional Courses</input>
</label>
<label>Any comments or suggestions?
<textarea rows="3" cols="30" placeholder="Enter your comment here..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit"/>
<submit type="submit"></submit>
/* file: styles.css */
body{
width: 100;
height: 100vh;
margin:0;
background-color: #222257;
color: #f5f6f7;
}
h1, p {
margin: 1em auto;
text-align: center;
}
p{
font-family: Arial, italic;
font-size:16px;
}
form {
width: 60vw;
max-width: 550px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
}
fieldset:last-of-type {
border-bottom: none;
}
label{
display: block;
margin:0.2rem 0;
font-family: Tahoma;
font-size: 16px;
}
input,
textarea,
select{
background-color: white;
margin: 10px 0 0 0;
width: 100px;
min-height: 2em;
border-radius: 3px;
}
textarea{
background-color: white;
border-radius: 3px;
border: 1px solid #0a0a23
color: #ffffff;
border: none;
height:100px;
width:400px;
}
input{
background-color: white;
border-radius: 3px;
border: 1px solid #0a0a23
color: #ffffff;
border: none;
}
select{
background-color: white;
border-radius: 3px;
}
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: center;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 0 auto;
height: 2em;
font-size: 1.1rem;
background-color: #34a83a;
border-color: #34a83a;
border-radius:3px;
margin-top: 1em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
min-width: 300px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form
