I keep getting th error " Your new p
element should have the text Trans Fat 0g
."
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="styles.css">
<title>Sanrio Survey</title>
</head>
<body>
<header>
<h1 id='title'>Sanrio Survey</h1>
<p id='description'>Who's your favorite?</p>
</header>
<main>
<form id='survey-form'>
<hr>
<label for='name' id='name-label'>*Name:</label>
<input id='name' type='text' placeholder='Hello Kitty' required>
</hr>
<hr>
<label for='email' id='email-label'>*Email:</label>
<input id='email' type='email' placeholder='hellokitty@sanrio.com' required>
</hr>
<hr>
<label for='number' id='number-label'>Age:</label>
<input id='number' type='number' min='5' max='120' placeholder='8'>
</hr>
<hr>
<input type='radio' name='sweet-rude'id='sweet' value='0'>
<label for='sweet'>sweet</label>
<input type='radio'
name='sweet-rude'id='rude' value='1'>
<label for='rude'>rude</label>
<hr>
<select id='dropdown'>
<option value=''>(favorite)</option>
<option value='1'>Hello Kitty</option>
<option value='2'>Kuromi</option>
<option value='3'>Badtz-Maru</option>
<option value='4'>Gudetama</option>
<option value='5'>Tuxedo Sam</option>
<option value='6'>Mimmy</option>
<option value='7'>My Melody</option>
<option value='8'>Kerropi</option>
<option value='9'>Other</option>
</select>
</hr>
<hr>
</h2 id='favorite color'>Favorite color:</h2>
<input type='checkbox' id='purple' name='color' value='0'>
<label for='purple'>purple</label>
<input type='checkbox' id='black' name='color' value='1'>
<label for='black'>black</label>
<input type='checkbox' id='blue' name='color' value='2'>
<label for='blue'>blue</label>
<input type='checkbox' id='green' name='color' value='3'>
<label for='green'>green</label>
<input type='checkbox' id='red' name='color' value='4'>
<label for='red'>red</label>
<input type='checkbox' id='orange' name='color' value='5'>
<label for='orange'>orange</label>
<input type='checkbox' id='other' name='color' value='6'>
<label for='other'>other</label>
<textarea>additional comments</textarea>
</hr>
<input id='submit' type='submit'>
</form>
</main>
</body>
</html>
/* file: styles.css */
* {
font-family: cursive;
}
body {
background-image: url(https://c4.wallpaperflare.com/wallpaper/908/631/590/hello-kitty-1440x900-anime-hello-kitty-hd-art-wallpaper-preview.jpg);
background-size: 100% 100%;
}
h1, p {
text-align: center;
}
h1 {
margin-bottom: 0;
}
p {
margin-top: 0;
margin-bottom: 2rem;
}
label {
font-family: cursive;
}
form {
padding: 15px 15px 25px 15px
}
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
Challenge: Survey Form - Build a Survey Form
Link to the challenge: