Tell us what’s happening:
I know i’m going to have to rewrite this to fulfill the requirements of the test, i wrote this in vs code and i got a little carried away just trying to get used to using css to manipulate the page. honestly, i’m just looking for a little verification that i’m on the right track and if anyone can explain mistakes i’m making when linking elements to the style.css file
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.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Survey Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body background="sunset.jpg">
<main>
<section">
<h1>Dev Obie's Survey Page</h1>
<p name="desc" id="desc">This survey allows direct feedback I can use during development.</p>
<p name="desc" id="desc">Thank you for trying my game, I hope you're liking it so far!</p>
</section>
<div>
<section>
<fieldset>
<p class="textbox-title">Username</p><label for="user-name"><input id="user-data" name="user-name"
type="text" required placeholder="Enter your username"></label>
<p class="textbox-title">Email</p><label for="user-email"><input id="user-data" name="user-email"
type="email" required placeholder="Enter the email linked to your username"></label>
<label></label>
</fieldset>
</section>
<section>
<h2>What brings you to my survey page?</h2>
<fieldset>
<label class="radio-label"><input name="opinion" type="radio">I'm just here to show support</label>
<br>
<label class="radio-label"><input name="opinion" type="radio">I would like something added to the
game</label>
<br>
<label class="radio-label"><input name="opinion" type="radio">I'm having a problem with the
game</label>
</fieldset>
</section>
<section>
<h2>Check any boxes that apply to you</h2>
<fieldset>
<label class="check-label"><input type="checkbox">New player</label>
<br>
<label class="check-label"><input type="checkbox">Casual player</label>
<br>
<label class="check-label"><input type="checkbox">Veteran gamer</label>
<br>
<label class="check-label"><input type="checkbox">I'm happy with the game, and it's
development</label>
<br>
<label class="check-label"><input type="checkbox">It's fun, but it needs work</label>
<br>
<label class="check-label"><input type="checkbox">I'm not having fun, and i'm dissapointed</label>
</fieldset>
</section>
<section>
<h2>Take a moment to speak your mind</h2>
<fieldset>
<label for="long-entry"><textarea placeholder="This is your chance to say hi to the dev!" name="long-entry" id="long-entry" maxlength="1000" minlength="20"
type="text"></textarea></label>
</fieldset>
</section>
<section>
<h2>Where did you first hear about the game?</h2>
<fieldset>
<select required>
<option>Select an option</option>
<option>I saw a video on Youtube</option>
<option>My friend showed me</option>
<option>I found it randomly</option>
<option>The Dev gave me my copy :P</option>
<option>Other</option>
</select>
</fieldset>
</section>
<section>
<h2>What is your favorite number?</h2>
<fieldset>
<label><input type="number" min="-9999999999" max="9999999999" required placeholder="Enter a number or use the arrows like a masochist"></label>
</fieldset>
</section>
<fieldset>
<input type="submit" value="submit">
</fieldset>
</div>
</main>
</body>
</html>
body {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
color: rgb(204, 216, 41, .75);
padding: 1em;
background-attachment: fixed;
}
h1,
#desc {
text-align: center;
text-shadow: 1px 1px 2px red, 0 0 2em black, 0 0 0.2em white;
}
h1 {
font-size: 38px;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
}
#desc {
font-size: 24px;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
}
p {
margin: .5em auto;
font-size: 24px;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
padding-left: 1.3em;
}
h2 {
font-size: 30px;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
padding-left: 1.9em;
text-decoration: underline;
}
input[type=submit] {
margin: 0em auto;
display: block;
width: 90%;
height: 1.5em;
background-color: red;
border-color: black;
color: rgb(204, 216, 41, .75);
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
border-radius: 12px;
}
fieldset {
padding: 20px;
border: none;
}
#user-data,input[type=number] {
display: block;
margin: 0em auto;
width: 90%;
border-radius: 5px;
font-size: 1.5em;
}
.radio-label{
display: block;
margin-bottom: .5em;
padding-left: 1.3em;
font-size: 1.5em;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
}
.check-label{
display: block;
margin-bottom: .5em;
padding-left: 1.3em;
font-size: 1.5em;
text-shadow: 1px 1px 2px red, 0 0 1em black, 0 0 0.2em white;
}
#long-entry{
display: block;
margin: 0 auto;
width: 90%;
border-radius: 5px;
font-size: 1.5em;
}
div {
padding: .5em;
margin: 0 auto;
max-width: 40%;
background-color: rgba(0, 0, 0, .75);
border-radius: 10px;
}
select{
display: block;
margin: 0em auto;
width: 90%;
border-radius: 5px;
font-size: 1.5em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 OPR/102.0.0.0
Challenge: Survey Form - Build a Survey Form
Link to the challenge: