Learn Accessibility by Building a Quiz - Step 17

HTML-CSS
1

Tell us what’s happening:
The code below is not accepted by the system, I have tried many ways to go past this step but I am stuck. Please tellme what I am doing wrong for the h1, h2 selector below.

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>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>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>
        </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;
}


/* User Editable Region 
The code below is not accepted by the system, I have tried many ways to go past this step but I am stuck. Please tellme what I am doing wrong for the h1, h2 selector below******************************************************************************************************************/

h1, h2 {
  font-family: Verdana, "Arial", "Helvetica Neue", sans-serif;
  border-bottom: 4px solid #dfdfe2;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 17

Link to the challenge:

2

Welcome to our community!

Only h1 and h2 selector have the ‘font-family’ property. The ‘border-bottom’ property belongs to the new h2 selector only. You have to create two selectors in this challenge. The first is multiple elements selector (h1, h2), the second is only element selector (h2).

3

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