Html building a quiz step 19

HTML-CSS
1

Tell us what’s happening:

Hint

You should nest one input element within the first div, after the label.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav>
       <ul>
         <li><a href="#student-info">INFO</a></li>
         <li><a href="#html-questions">HTML</a></li>
         <li><a href="#css-questions">CSS</a></li>
			  </ul>
     </nav>
   </header>
   <main>
     <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
       <section role="region" aria-labelledby="student-info">
         <h2 id="student-info">Student Info</h2>
         <div class="info">
           <label><input></label>
         </div>
         <div class="info">
           <label><input></label>
         </div>
         <div class="info">
           <label><input></label>
         </div>
       </section>
       <section role="region" aria-labelledby="html-questions">
         <h2 id="html-questions">HTML</h2>
       </section>
       <section role="region" aria-labelledby="css-questions">
         <h2 id="css-questions">CSS</h2>
       </section>
     </form>
   </main>
 </body>
</html>


/* file: styles.css */
body {
 background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

header {
 width: 100%;
	height: 50px;
	background-color: #1b1b32;
	display: flex;
}

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

h1 {
 color: #f1be32;
	font-size: min(5vw, 1.2em);
}

nav {
 width: 50%;
	max-width: 300px;
	height: 50px;
}

nav > ul {
 display: flex;
	justify-content: space-evenly;
}

h1,
h2 {
	font-family: Verdana, Tahoma;
}

h2 {
	border-bottom: 4px solid #dfdfe2;
}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36 OPR/87.0.4390.45 (Edition Campaign 34)

Challenge: Step 19

Link to the challenge:

2

I’ll admit, the instructions could be a little clearer, especially since a lot of the inputs you previously added in other courses were nested in labels. But for this step, you don’t want to nest the input in the label. Each input should come after the label. They are siblings, not parent/child.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.