Tell us what’s happening:
Describe your issue in detail here.
Project Request: You should have at least five code elements that are descendants of .main-section elements.
“I am unable to figure out what are the “five” code elements I’m missing. I’ve complete all other checks for this assignment. Thank you for any help you can provide.”
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles.css">
<main id="main-doc">
<nav id="navbar"><header>Sections</header>
<a class="nav-link" href="#1"><button type="submit" accesskey="s">1</button></a>
<a class="nav-link" href="#2"><button type="submit" accesskey="s">2</button></a>
<a class="nav-link" href="#3"><button type="submit" accesskey="s">3</button></a>
<a class="nav-link" href="#4"><button type="submit" accesskey="s">4</button></a>
<a class="nav-link" href="#5"><button type="submit" accesskey="s">5</button></a></nav>
<section id="1" class="main-section" aria-labelledby="1"><header>1</header><p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul>
</p>
<p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p></section>
<section id="2" class="main-section" aria-labelledby="2"><header>2</header><p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p>
<p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p></section>
<section id="3" class="main-section" aria-labelledby="3"><header>3</header><p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p>
<p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p></section>
<section id="4" class="main-section" aria-labelledby="4"><header>4</header><p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p>
<p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p></section>
<section id="5" class="main-section" aria-labelledby="5"><header>5</header><p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p>
<p><ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
<li>green</li>
<li>purple</li></ul></p></section>
</main>
/* file: styles.css */
/* On smaller screens, where height is less than 450px, change the style of the navbar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
# navbar {padding-top: 15px;}
#navbar a {font-size: 18px;}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: