Tell us what’s happening:
Hi all, I just completed the survey from project. I want to be able to go back and adjust my CSS on the project. Is there a way that i can come back to this and play around if i submit and move onto the next challenge?
Also, How can i get my radio and check box’s on the same line as my labels as well as closer to the label without? thanks for the guidance!!
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Buena Onda Surf Camp Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title"> Buena Onda Surf camp Survey</h1>
<p id="description"> Thanks for taking the time to help us improve!</p>
<form id="survey-form">
<fieldset>
<label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
</label>
<label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
</label>
<label for="number" id="number-label"> Age <input id="number" type="number" required min="11" max="120" placeholder="Enter Your Age">
</label>
</fieldset>
<fieldset>
<label for="current-level" id="current-level-label">Which option best describes your current level?
<select id="dropdown" name="dropdown">
<option value="current-level">(Select Current Level)</option>
<option value="1">I rode the white water</option>
<option value="2">I rode a green wave</option>
<option value="3">I caught many green waves</option>
<option value="4">I can cut back and bottom turn</option>
<option value="5">I get barreled</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Would you Recommend Buena Onda Surf Camp to a friend?</label>
<label for="definitely"><input id="definitely" name="recommend" value="definitely" type="radio"> Definitely</label>
<label for="maybe"><input id="maybe" type="radio" value="maybe" name="recommend"> Maybe</label>
<label for="not-sure"><input id="not-sure" type="radio" value="not-sure" name="recommend"> Not Sure</label>
<label for="no-way-jose"><input id="no-way-jose" type="radio" value="no-way-jose" name="recommend">No Way Jose!
</label>
</fieldset>
<fieldset>
<label for="favorite-feature" id="favorite-feature-label">What was your favorite thing about our camp? (select an option/s)</label>
<select id="dropdown" name="dropdown">
<option value="favorite-feature">(Select Favorite Feature)</option>
<option value="1">Accomodations</option>
<option value="2">Food</option>
<option value="3">Surf Instructors</option>
<option value="4">Surf Excursions</option>
<option value="5">Other Activities</option>
</select>
</fieldset>
<fieldset>
<label>What would you like to see improved? (check all that apply)</label>
<label for="food"><input type="checkbox" value="food" name="food" id="food">Food</label>
<label for="accomodations"><input type="checkbox" value="accomodations" name="accomodations" id="accomodations">Accomodations</label>
<label for="surf-instruction"><input type="checkbox" value="surf-instruction" name="surf-instruction" id="surf-instruction">Surf Instruction</label>
</fieldset>
<fieldset>
<label for="comments">Any Comments or Suggestions?</label>
<textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
</fieldset>
<div>
<button type="submit" id="submit"> Submit</button>
</div>
</form>
</body>
</html>
/* file: styles.css */
/* file: styles.css */
body {
width: 100%;
background: rgba(192, 47, 47, 0.079);
height: 100vh;
margin: 10px;
color: #423c3c;
font-family: Tahoma, sans-serif;
}
h1, p {
color: rgb(193, 58, 58);
margin: 20px 10px;
text-align: center;
}
form {
width: 80vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 1em;
background: rgba(192, 47, 47, 0.079)
}
fieldset {
border: none;
padding: 2 rem 0;
}
label {
display: block;
margin: 0.5rem 0;
}
input,
textarea,
select {
margin: 10px 0 0 0;
width: 100%;
min-height: 2em;
.inline {
width: unset;
margin: 0 0.5em 0 0;
vertical-align: middle;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0
Challenge: Survey Form - Build a Survey Form
Link to the challenge: