Tell us what’s happening:
Can’t seem to link the nav-links to the designated section elements and I don’t know what I’m doing wrong. Any ideas?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main-doc">
<section class="main-section" id="Full_Crimp">
<header>Full Crimp</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="Half_Crimp">
<header>Half Crimp</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="3_Finger_Drag">
<header>3 Finger Drag</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="Sloper">
<header>Sloper</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
<section class="main-section" id="Pockets">
<header>Pockets</header>
<p></p>
<p></p>
<li></li>
<code></code>
</section>
</main>
<nav id="navbar">
<header>Climbing grips</header>
<li><a class="nav-link" href="Full_Crimp">Full Crimp</a></li>
<li><a class="nav-link" href="Half_Crimp">Half Crimp</a></li>
<li><a class="nav-link" href="3_Finger_Drag">3 Finger Drag</a></li>
<li><a class="nav-link" href="Sloper">Sloper</a></li>
<li><a class="nav-link" href="Pockets">Pockets</a></li>
</nav>
</body>
</html>
/* file: styles.css */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15
Challenge: Technical Documentation Page - Build a Technical Documentation Page
Link to the challenge: