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 lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>What kind of gamer are you?</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="top_page">
<h1 id="title">What kind of gamer are you?</h1>
<p id="description">Thank you for telling us what type of gamer you are!</p>
</div>
<form class="survey-form" id="survey-form">
<div class="first_panel">
<label class="first_panel_label" id="name-label">Name<input class="first_panel_input" type="text" id="name" placeholder="Enter name" required/></label>
<label class="first_panel_label" id="email-label">Email<input class="first_panel_input" type="email" id="email" placeholder="Email here" required/></label>
<label class="first_panel_label" id="number-label">Age (optional)<input class="first_panel_input" type="number" id="number" min="12" max="112" placeholder="Age"/></label>
<label class="first_panel_label">Which platform do you most prefer?
<select class="first_panel_select" id="dropdown">
<option disabled selected value>Select a platform</option>
<option value="xbox">Xbox</option>
<option value="playstation">Playstation</option>
<option value="pc">PC</option>
<option value="oculus">Oculus</option>
<option value="mobile">Mobile</option>
</select>
</label>
</div>
<div class="second_panel">
<label class="second_panel_label">Do you like co-op games?</label>
<label class="second_panel_label_two"><input type="radio" name="multi" value="yes"/>Yes</label>
<label class="second_panel_label_two"><input type="radio" name="multi" value="sometimes"/>Sometimes</label>
<label class="second_panel_label_two"><input type="radio" name="multi" value="no"/>No</label>
</div>
<div class="third_panel">
<label class="third_panel_label">Why do you play video games?
<select name="why" class="third_panel_select">
<option disabled selected value>Select an option</option>
<option value="To play competitions">To play competitions</option>
<option value="To play with friends">To play with friends</option>
<option value="To pass time">To pass time</option>
<option value="To relax">To relax</option>
</select>
</label>
</div>
<div class="fouth_panel">
<label class="fourth_panel_label">Why do you enjoy playing video games? (Check all that apply)</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="fun-hobby"/>Fun Hobby</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="kills-bordom"/>Kills Bordom</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="clears-the-mind"/>Clears the Mind</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="for-money"/>For Money</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="connecting-with-people"/>Connecting with People</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="hanging-with-friends"/>Hanging with Friends</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="i-stream"/>I Stream</label>
<label class="fourth_panel_label_two"><input type="checkbox" name="enjoy" value="to-be-a-gaming-connoisseur"/>To be a Gaming Connoisseur</label>
</div>
<div class="fifth_panel">
<label class="fifth_panel_label">What do you like about the platform you play and why?<textarea class="fifth_panel_textarea" name="comment" placeholder="Enter comment here..."></textarea></label>
</div>
<input class="submit_button" type="submit" value="submit" id="submit"/>
</form>
</body>
</html>
body {
background-color: #206c00;
}
.top_page {
display: center;
background-color: #881122;
color: #DDA21E;
padding: 30px;
margin: 20px;
}
h1 {
text-align: center;
font-family: Garamond;
font-size: 40px;
}
p {
text-align: center;
font-family: Garamond;
}
.survey-form {
display: center;
margin: 25px;
}
.first_panel {
display: center;
width: 100%;
background-color: #003377;
color: #206c00;
padding: 32px 0;
margin: 25px 0;
}
.first_panel_label {
display: block;
margin: 15px 15px 15px 15px;
font-size: 20px;
}
.first_panel_input {
margin: 10px 0 0 0;
width: 100%;
font-size: 15px;
}
.first_panel_select {
margin: 10px 0 0 0;
width: 100%;
font-size: 15px;
}
.second_panel {
max-width: 2000px;
width: 100%;
height: 10%;
background-color: #003377;
color: #206c00;
padding: 32px 0;
margin: 25px 0;
}
.second_panel_label {
display: block;
margin: 15px 15px 15px 15px;
font-size: 20px;
}
.second_panel_label_two {
display: block;
margin: 15px 15px 15px 15px;
font-size: 18px;
}
.third_panel {
max-width: 2000px;
width: 100%;
height: 10%;
background-color: #003377;
color: #206c00;
padding: 32px 0;
margin: 25px 0;
}
.third_panel_label {
display: block;
margin: 15px 15px 15px 15px;
font-size: 20px;
}
.third_panel_select {
margin: 10px 0 0 0;
width: 100%;
font-size: 16px;
}
.fourth_panel {
max-width: 2000px;
width: 100%;
height: 10%;
background-color: #003377;
color: #206c00;
padding: 32px 0;
margin: 25px 0;
}
.fourth_panel_label {
display: block;
margin: 15px 15px 15px 15px;
font-size: 20px;
background-color: #003377;
color: #206c00;
}
.fourth_panel_label_two {
display: block;
margin: 15px 15px 15px 15px;
font-size: 16px;
background-color: #003377;
color: #206c00;
}
.fifth_panel {
max-width: 2000px;
width: 100%;
height: 10%;
background-color: #003377;
color: #206c00;
padding: 32px 0;
margin: 25px 0;
}
.fifth_panel_label {
display: block;
margin: 15px 15px 15px 15px;
font-size: 20px;
}
.fifth_panel_textarea {
margin: 10px 0 0 0;
width: 100%;
font-size: 15px;
}
.submit_button {
max-width: 2000px;
width: 100%;
height: 3%;
background-color: #003377;
color: #206c00;
border-color: #206c00;
font-size: 20px;
padding: 32px 0;
margin: 25px 0;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37
Challenge: Build a Survey Form
Link to the challenge: