Help me out with my Landing Page Project

HTML-CSS
1

Tell us what’s happening:

  • Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”)

    Your code so far

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <header>
   <h2>JS Documentation</h2>
 </header>
 <body>
   <main id="main-doc">

<nav id="navbar">
       <header>Nav Links</header>
       <ul>
         <li><a class="nav-link" href="#introduction">Introduction</a></li>
         <li><a class="nav-link" href="#variables">Variables</a></li>
         <li><a class="nav-link" href="#constants">Constants</a></li>
         <li><a class="nav-link" href="#sass">Saas</a></li>
         <li><a class="nav-link" href="#vuejs">VueJs</a></li>
         </ul>
     </nav>

     <section class="main-section" id="introduction">
       <header>Introduction</header>
       <p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
       <p><li>Boolean. true and false.</li></p>
     </section>
     <section class="main-section" id="variables">
       <header>Variables</header>
       <p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
       <p><li>Boolean. true and false.</li></p>
     </section>
     <section class="main-section" id="constants">
       <header>Constants</header>
       <p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
       <p><li>Boolean. true and false.</li></p>
     </section>
     <section class="main-section" id="sass">
       <header>Sass</header>
       <p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
       <p><li>Boolean. true and false.</li></p>
     </section>
     <section class="main-section" id="vuejs">
       <header>VueJs</header>
       <p><code>function greetMe(yourName) { alert("Hello " + yourName); }
greetMe("World");</code></p>
       <p><li>Boolean. true and false.</li></p>
     </section>
   </main>
 </body>
</body>
</html>


/* file: styles.css */
@media (max-width: 600px) {
#nav {
     position: relative;
     margin-left: 0px;
     margin-top: 270px;
 }
}


 **Your browser information:**

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

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Just a typo. Check it again.

<li><a class="nav-link" href="#sass">Saas</a></li>
1 Like
3

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