**Tell us what’s happening:**My html and css code as provided below for the survey form project however, something wrong with my code somewhere. two issues:
- My alignment for radio and checkbox tabs are not aligned properly.
- I am trying to insert an image into the header but not successful yet .
thanks /suggestions invited./meera
**Y
Survey Form
<p id="description">
Let us know how we can improve Fashionista@Fashionistette
<div class="rowTab">
<div class="labels">
<label id="email-label" for="email">Email:</label>
</div>
<div class="rightTab">
<input id="email" type="email" required name="email" class="input-field" required placeholder="Enter your Email">
</div>
</div>
<div class="rowTab">
<div class="labels">
<label id="number-label" for="age"
>Age:</label>
</div>
<div class="rightTab">
<input id="number" type="number" min="15" max="80" name="age" placeholder="Age">
</div>
</div>
<div class="rowTab">
<div class="labels">
<label id="occupation-label" for=>Which of the following is your current occupation?</label>
</div>
<div class="rightTab">
<select id="dropdown" name="occupation" class="dropdown">
<option disabled selected value="Select an option">Select an option</option>
<option value="student">Student</option>
<option value="full time job">Full time job</option>
<option value="Business ">Business </option>
<option value="prefer not to say">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="recommend">
How likely is that you would recommend our shop to a friend?</label>
</div>
<div class="rightTab">
<ul style="list-style: none;">
<li class="radio">
<label>Surely
<input type="radio" class="recommend" name="radio-buttons" value="1">
</label></li>
<li class="radio">
<label>Maybe
<input type="radio" class="recommend" name="radio-buttons" value="2">
</label></li>
<li class="radio">
<label>Never
<input type="radio" class="recommend" name="radio-buttons" value="3">
</label></li>
</ul>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="favourite-item">
What is your favourite item from my shop:
Select an option
Shoes
Bags
Backpacks
Watches
<div class="rowTab">
<div class="labels">
<label for="price-point">My price range preference</label>
</div>
<div class="rightTab">
<ul id="price" style="list-style: none;">
<li class="checkbox"><label><input name="price" type="checkbox" value="1" class="userPreference">$10-$20</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="2" class="userPreference">$20-$50</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="3" class="userPreference">$50-$70</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="4" class="userPreference">$70-$99</label></li>
<li class="checkbox"><label><input name="price" type="checkbox"value="5" class="pricePreference">$99-$150</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="6" class="pricePreference">$150-$175</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="7" class="pricePreference">$175-$199</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="8" class="pricePreference">$199-$225</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="9" class="pricePreference">$225-$250</label></li>
<li class="checkbox"><label><input name="price" type="checkbox" value="10" class="pricePreference">$250-$500</label></li>
</ul> </div>
</div> <div class="rowTab">
<div class="labels">
<label for="suggestions">Your kind suggestions and feedback are welcome</label>
</div>
<div class="rightTab">
<textarea id="suggestions" class="input-field" style="height:25px; Resize: vertical;" name="suggestions" placeholder="Enter your suggestions here"></textarea>
</div>
}
#form-outer{
background-color: Silver;
margin: 10px auto;
border-radius: 16px;
width: 80%;
max-width: 875px;
padding: 20px;
padding-top: 15px;
}
.labels{
display: inline-block;
text-align: left;
width: 40%;
padding: 10px;
vertical-align: middle;
margin-top: 15px;
}
.rightTab{
display: inline-block;
text-align: left;
width: 50%
vertical-align: middle;
}
header{
font-weight: bold;
font-size: 4em;
margin: 30px;
background-image: url(https://images4.alphacoders.com/241/241954.jpg);
}
header img{
float: left;
display: inline-block;
}
#submit{
background: Violet;
color: white;
font: bold;
border-radius: 5px;
font-size: 1em;
height: 30px;
width: 100px;
margin: 12px;
border: 2px solid white;
}
h1{
color: black;
text-align: center;
font-family: verdana;
font-size: 35px;
}
.radio{
display: block;
position: relative;
align: vertical;
height: 100%;
margin-left: -25px;
list-style-type: vertical;
margin-top: -5px;
}
.rowTab{
display: block;
align: vertical;
}
input[type=“radio”]
margin-top: -1px;
vertical-align: middle;
height: 100%;
padding: 10px;
margin: 10px;
left: -60px;
right: 20px;
}
checkbox{
position: relative;
display: block;
margin-left: 20px;
padding-bottom: 10px;
display: block;
}
.dropdown{
width:85%px;
padding: 20px;
margin: 10px 10px;
border: 2px solid Violet;
box-sizing: border-box;
}
form{
margin-left: 20px;
}
input{
width:85%px;
padding: 20px;
margin: 10px 10px;
border: 2px solid Violet;
box-sizing: border-box;
}
input[type=number]{
width:214px;
padding: 20px;
margin: 10px 10px;
border: 2px solid Violet;
box-sizing: border-box;
cursor: pointer;
}
input:focus{
border: 2px solid Violet;
}
input[type=text] {
-webkit-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
input[type=text]:focus {
width: 80%;
}
textarea {
width: 80%;
height: 400px;
padding: 35px 92px;
box-sizing: border-box;
border: 2px solid Violet;
resize: 20%;
background-color: white;
}
our code so far**
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.
Link to the challenge: