<header>Survey Form</header>
<div id="form-outer">
<form method="GET" action="https://crossorigin.me/https://freecodecamp.com">
<div class="rowTab">
<div class="labels">
<label for="username">* Name: </label>
</div>
<div class="rightTab">
<input autofocus type="text" name="userName" id="username" class="input-field" placeholder="Enter your name" required>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="userEmail">* Email: </label>
</div>
<div class="rightTab">
<input type="email" name="userEmail" id="userEmail" class="input-field" placeholder="Enter your Email" required>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="userAge">* Age: </label>
</div>
<div class="rightTab">
<input type="number" name="userAge" id="userAge" min="1" max="125" class="input-field" placeholder="age" required>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="currentPos">Which option best describes your current role?</label>
</div>
<div class="rightTab">
<select id="currentPos" name="currentPos">
<option disabled selected value>Select an option</option>
<option value="student">Student</option>
<option value="job">Full Time Job</option>
<option value="learner">Full Time Learner</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="userRating">* How likely is that you would recommend FCC to a friend or colleague? </label>
</div>
<div class="rightTab">
<ul style="list-style: none;">
<li><label>1<input name="rating" value="1" type="radio" class="userRatings" required></label></li>
<li><label>2<input name="rating" value="2" type="radio" class="userRatings" required></label></li>
<li><label>3<input name="rating" value="3" type="radio" class="userRatings" required></label></li>
<li><label>4<input name="rating" value="4" type="radio" class="userRatings" required></label></li>
<li><label>5<input name="rating" value="5" type="radio" class="userRatings" required></label></li>
<li><label>6<input name="rating" value="6" type="radio" class="userRatings" required></label></li>
<li><label>7<input name="rating" value="7" type="radio" class="userRatings" required></label></li>
<li><label>8<input name="rating" value="8" type="radio" class="userRatings" required></label></li>
<li><label>9<input name="rating" value="9" type="radio" class="userRatings" required></label></li>
<li><label>10<input name="rating" value="10" type="radio" class="userRatings" required></label></li>
</ul>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="most-like">What do you like most in FCC: </label>
</div>
<div class="rightTab">
<select id="most-like" name="mostLike">
<option disabled selected value>Select an option</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="openSource">Open Source</option>
</select>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="preferences">Things that should be improved more in future<br>(Check all that implies): </label>
</div>
<div class="rightTab">
<ul id="preferences" style="list-style: none;">
<li><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
<li><label><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</label></li>
<li><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
<li><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
<li><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
<li><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter helper rooms</label></li>
<li><label><input name="prefer" value="7" type="checkbox" class="userRatings">Hikes</label></li>
<li><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
<li><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
<li><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
<li><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courses</label></li>
</ul>
</div>
</div>
<div class="rowTab">
<div class="labels">
<label for="comments">Any Comment or Suggestion</label>
</div>
<div class="rightTab">
<textarea id="comments" class="input-field" style="height:50px;resize:vertical;" name="comment" placeholder="Enter your comment here..."></textarea>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
*{
font-family:"Trebuchet MS", Helvetica, sans-serif
}
html,body{
background:#2B3A42;
text-align:center;
font-family:"Trebuchet MS", Helvetica, sans-serif;
min-width:320px;
}
header{
font-size:2em;
font-weight:bold;
margin:20px;
color: #fff;
}
#form-outer{
background-color:rgb(250,250,250);
margin:0 auto;
border:2px solid;
width:75%;
padding:10px;
}
.labels{
display:inline-block;
text-align:right;
width:40%;
padding:5px;
vertical-align:middle;
}
.rightTab{
display:inline-block;
text-align:left;
width:48%;
padding:5px;
vertical-align:middle;
}
.input-field{
height:20px;
width:280px;
padding:5px;
margin:10px;
border:2px solid;
}
#userAge{
width:40px;
}
.userRatings, input[type="checkbox"]{
float:left;
margin-right:5px;
}
button[type="submit"]{
background-color:#00FF00;
height:32px;
width:70px;
margin:10px;
border: 2px solid;
}
select{
height:35px;
width:140px;
padding:5px;
margin:10px;
border:2px solid;
}
li{
float:left;
position:relative;
left:-40px;
margin-left:10px;
display:inline-block;
padding-bottom:10px;
}
@media screen and (max-width: 833px) {
.input-field{
width:80%;
}
select{
width:90%;
}
}
@media screen and (max-width: 520px) {
.labels{
width:100%;
text-align:left;
}
.rightTab{
width:80%;
float:left;
}
.input-field{
width:100%;
}
select{
width:100%;
}
}