Feedback please. This is what I have completed so far. I would like to get feedback because I know there are a lot of things to improve, also when I hover the mouse over the select element, it changes its size, moving all the form elements bellow the select element, how can I resolve this. thank you
in advance.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css" />
<title>Calisthenic Form</title>
</head>
<body>
<h1 id="title">Calisthenic Form</h1>
<p id="description">Let us know your favorite calisthenic's excersices.</p>
<form action='https://register-demo.freecodecamp.org' id="survey-form">
<fieldset>
<label id="name-label">Full Name: <input id="name" name="name" type="text" required placeholder="Enter your name." /></label><br>
<label id="email-label">Email: <input name="email" id="email" type="email" required placeholder="Provide a valid email." /></label><br>
<label id="number-label">Age: <input id="number" name="number" type="number" min="15" max="120" placeholder="Years." /></label>
</fieldset>
<fieldset>
<label for="exercise">What's your favorite calisthenic's excersice?
<select id="dropdown" name="exercise">
<option value="">(Select one)</option>
<option value="1">Push-ups.</option>
<option value="2">Pull-ups.</option>
<option value="3">Chin-ups.</option>
<option value="4">Plank.</option>
<option value="5">Lunges.</option>
<option value="6">Other.</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Where do you do calisthenics?<br><input value="1" id="indoor" type="radio" name="place" class="inline" />Indoor</label>
<label><input value="2" id="outdoor" type="radio" name="place" class="inline" />Outddoor</label>
<label><input value="3" id="other" type="radio" name="place" class="inline" />Other</label>
</fieldset>
<fieldset>
<legend>What equipment do you use?</legend>
<label for="rings"><input id="rings" value="rings" name="equipment" type="checkbox" checked class="inline" />Gymnastics Rings.</label>
<label for="parallettes"><input id="parallettes" value="parallettes" name="equipment" type="checkbox" class="inline" />Parallettes.</label>
<label for="Others"><input id="Others" value="Others" name="equipment" type="checkbox" class="inline" />Others.</label>
<label for="body"><input id="body" value="body" name="equipment" type="checkbox" class="inline" />Only my body.</label>
</fieldset>
<fieldset>
<label for="journey">Share your calisthenic journey:
<textarea id="journey" name="journey" rows="4" cols="40" placeholder="I started when I was 15 years old..."></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit">
</form>
<footer>
<p>Sebastian BG</p>
</footer>
</body>
/* file: styles.css */
body{
background-repeat: no-repeat;
background-size: 100% 100%;
color: rgb(245, 255, 250);
background-attachment: fixed;
font-size: 18px;
font-family: cursive;
background-image: url(https://lh3.googleusercontent.com/pw/AMWts8Cl1MEhxXiim6Rqw28nDZF2hrt5-r-iuOu-Mq4NoGi676XXULXnZKsAGJfPgtc-4jbcI9E9gwsfz7FGMNAjtfptktmB6yBCnb42NtRGhWnO_HwCgn9iTqhnJ4QnRLc3CXX5Qjcsnrszs2aS-VqEh9yw=w759-h500-s-no)
}
h1, p {
text-align: center;
text-shadow: 0 0 20px #000000, 0 3px #000000;
}
fieldset {
border: none;
}
form {
background-color: #352f44;
color: #dbd8e3;
padding: 10px 10px 15px 10px;
border-radius: 10px;
margin: 0 auto;
}
label {
display: block;
}
input, select {
border-radius: 10px;
}
input, select, textarea {
width: 100%;
}
.inline {
width: unset;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #dbd8e3;
border-color: 352f44;
min-width: 300px;
}
input[type="submit"]:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="radio"]:hover,
input[type="checkbox"]:hover,
select:hover {
border: 2px solid #871F78;
box-shadow: 0 0 10px #871F78 ;
cursor: pointer;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.54
Challenge: Survey Form - Build a Survey Form
Link to the challenge: