Tell us what’s happening:
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<!DOCtype html>
<html>
<head>
<title>https://survey-form.freecodecamp.rocks</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description" class="description">Thank you for taking the time to help us improve the platform</p>
<form id="survey-form" action="https://survey-form.freecodecamp.rocks">
<fieldset>
<label>Name <input id="email-label" type="text" name="name" id="name-label" required placeholder="Enter Your Name"> </label>
<label>Email <input type="text" name="email" id="email-label" required placeholder="Enter Your Email"></label>
<label for="number">Age <span class="clue">(optional)</span> <input type="number" name="age" min="10" max="99" class="form-control" placeholder="Age" id="email-label" required></label>
<label>Which option best describes your current role?
<select id="dropdown">
<option value="" disabled selected>Select Current Role</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to say</option>
<option value="5">Other</option>
</select>
</label>
<fieldset>
<label id="would"> Would you recommend freeCodeCamp to a friend?</label>
<label><input type="radio" name="user" class="input-radio" value="1" checked> Definitely</label>
<label><input type="radio" name="user" class="input-radio" value="2">Maybe</label>
<label><input type="radio" name="user" class="input-radio" value="3">Not sure</label>
</fieldset>
<fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select id="dropdown">
<option disabled selected value>Select an option</option>
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</select>
</label>
</fieldset>
<fieldset>
<label>What would you like to see improved? (Check all that apply)
</label>
<label><input type="checkbox" value="Front-end Projects" name="Front-end Projects" class="inline">Front-end Projects</label>
<label><input type="checkbox" value="Back-end Projects" name="Back-end Projects" class="inline">Back-end Projects</label>
<label><input type="checkbox" value="Data Visualization" name="Data Visualization" class="inline">Data Visualization</label>
<label><input type="checkbox" value="Challenges" name="Challenges" class="inline">Challenges</label>
<label><input type="checkbox" value="Open Source Community" name="Open Source Community" class="inline">Open Source Community</label>
<label><input type="checkbox" value="Gitter help rooms" name="Gitter help rooms" class="inline">Gitter help rooms</label>
<label><input type="checkbox" value="Videos" name="Videos" class="inline">Videos</label>
<label><input type="checkbox" value="City Meetups" name="City Meetups" class="inline">City Meetups</label>
<label><input type="checkbox" value="Wiki" name="Wiki" class="inline">Wiki</label>
<label><input type="checkbox" value="Forum" name="Forum" class="inline">Forum</label>
<label><input type="checkbox" value="Additional Courses" name="Additional Courses" class="inline">Additional Courses</label>
</fieldset>
<fidldset>
<label>Any comments or suggestions?</label>
<textarea rows="6" cols="50" placeholder="Enter your comment here..."></textarea>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">
Submit
</button>
</body>
</html>
<style>
body{
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--color-white);
margin: 0;
display: block;
margin-top: 8px;
}
body:before{
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: darkblue;
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h1 {
font-weight: 400;
line-height: 1.2;
color:white;
margin-top: 1.5em;
font-size: 2.5rem;
font-style: normal;
}
p {
font-size: 1.125rem;
color:white;
font-weight:normal;
font-style: normal;
margin-bottom: 1.5em;
word-spacing: 100%;
}
h1,
p {
margin-top: 0.8em;
margin-bottom: 0.5rem;
text-align:center;
font-family:poppins;
}
label {
display: block;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
color:white;
}
label {
display: block;
align-items: center;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
input,
button,
select,
textarea {
margin: 10px 0 0 0;
min-height: 2em;
font-family: inherit;
font-size: inherit;
line-height: inherit;}
form {
font-family:poppins;
margin:auto;
opacity:95%;
background: #1b1b32;
padding: 2.5rem 5rem 2rem 3rem;
margin-right: 8em;
margin-left: 33em;
margin-top: 2em;
border-radius: 0.25rem;
align:center;
width:35%
}
input[type=radio] ,input[type=checkbox] {
display:block;
margin-right: 0.625rem;
min-height: 1.25rem;
min-width: 1.25rem;
color:white;
float:left;
}
textarea {
min-height: 120px;
width: 96.2%;
padding: 0.625rem;
resize: vertical;
margin: auto;
}
#submit{
display: block;
width: 100%;
padding: 0.75rem;
background: green;
color: white;
border-radius: 2px;
cursor: pointer;
}
fieldset{
border:none;
margin: auto;
justify-content: center;
}
button{
border:none;
}
.inline{
display: inline-block;
margin-right: 0.625rem;
min-height: 1.25rem;
min-width: 1.25rem;
}
.input-radio{
display: inline-block;
margin-right: 0.625rem;
min-height: 1.25rem;
min-width: 1.25rem;
}
input[type=text]{
padding:0
}
#description{
font-weight:italic;
}
#email-label{
display:block;
padding:0 7em 0 1em;
width: 74%;
text-align: left;
margin-bottom: 2em;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
#dropdown{
display:block;
padding:0 em 0 5em;
height: 90%;
}
select, option {
width: 600px;
display:block;
}
option {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 15em;
}
input[placeholder=Age]{
text-align:justify
}
#dropdown{
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.clue {
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}
.description {
font-style: italic;
font-weight: 200;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#firstq{
font-size: 33rem;
}
.pelement{
font-weight: 900;
}
fieldset:first-child + fieldset{
margin-top: 5em;
}
form fieldset:first-child + fieldset{ background: red; }
.form-control {
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15
Challenge: Build a Survey Form
Link to the challenge: