Tell us what’s happening:
I need help don’t know what to do next. Guide me please
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Crypto Survey</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Crypto Survey</h1>
<p id="description">Thank you for taking the time to fill out this form. We hope you'll have a great day. God bless.</p>
<div class="overlay">
<form id="survey-form">
<fieldset>
<label for="name">Name: <input id="name" name="name" type="text" required placeholder="Enter Your Name"></label>
<label for="email">Email: <input id="email" name="email" type="email" required placeholder="Enter Your Email"></label>
<label for="age">Age (optional): <input id="number" type="number" name="number" min="13" max="120" placeholder="Age"></label>
<label for="role">Which role describes you best?
<select id="role" name="role">
<option value="0">(select your best role)</option>
<option value="1">Persistent</option>
<option value="2">Genuine</option>
<option value="3">Patient</option>
<option value="4">Other</option>
</select>
</label>
<p>Is Cryptocurrency recommendable to others?</p>
<label for="definitely"><input id="definitely" type="radio" name="recommend" class="inline" value="definitely">Definitely</label>
<label for="maybe"><input id="maybe" type="radio" name="recommend" class="inline" value="maybe">Maybe</label>
<label for="not-sure"><input id="not-sure" type="radio" name="recommend" class="inline" value="not-sure">Not sure</label>
</fieldset>
<fieldset>
<label for="feature">What feature is your favorite in a cryptocurrency?
<select id="feature" name="feature">
<option value="0">(select your favorite feature)</option>
<option value="1">Anonymity</option>
<option value="2">Security</option>
<option value="3">Decentralization</option>
<option value="4">Other</option>
</select>
</label>
</fieldset>
<fieldset>
<label>What type of crypto do you usually use? (Check all that apply)</label>
<label for="bitcoin"><input id="bitcoin" type="checkbox" name="crypto" value="bitcoin">Bitcoin</label>
<label for="litecoin"><input id="litecoin" type="checkbox" name="crypto" value="litecoin">Litecoin</label>
<label for="ethereum"><input id="ethereum" type="checkbox" name="crypto" value="ethereum">Ethereum</label>
<label for="cardano"><input id="cardano" type="checkbox" name="crypto" value="cardano">Cardano</label>
<label for="solana"><input id="solana" type="checkbox" name="crypto" value="solana">Solana</label>
<label for="tether"><input id="tether" type="checkbox" name="crypto" value="tether">Tether</label>
<label for="dogecoin"><input id="dogecoin" type="checkbox" name="crypto" value="dogecoin">Dogecoin</label>
</fieldset>
<fieldset>
<label for="idea">Any idea on how to improve a cryptocurrency?</label>
<textarea id="idea" name="idea" rows="2" cols="20" placeholder="Enter your idea here..."></textarea>
<button type="submit">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS code
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: black;
color: white;
font-family: rockwell;
font-size: 16.4px;
background-image: url(xxxhttps://images.pexels.com/photos/843700/pexels-photo-843700.jpeg?auto=compress&cs=tinysrgb&w=600xxx);
background-size: cover;
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
max-width: 500px;
margin: 0 auto;
padding-bottom: 3em;
}
fieldset {
border: none;
padding: 1rem 0;
}
label {
display: grid;
margin: 0.5em 0;
}
input,
textarea,
select {
margin: 0.5em 0 1em;
width: 100%;
min-height: 1em;
vertical-align: baseline;
box-sizing: border-box;
}
.inline {
position: absolute;
width: 10%;
margin: 5 0 0 50px;
accent-color: purple;
}
button {
display: block;
width: 60%;
margin: 1em auto;
height: 3em;
font-size: 1.1rem;
background-color:white;
border-color: purple;
min-width: 325px;
}
.overlay {
width: 80%;
background-color: rgba(0, 0, 0, 0.7);
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
input[type="checkbox"] {
position: absolute;
vertical-align: middle;
width: 10%;
margin: 5 0 0 50px;
accent-color: purple;
}
textarea {
margin: 1px 0 10 0;
width: 100%;
min-height: 6em;
font-size: 16px;
}
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.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge:
