Tell us what’s happening:
I can’t seem to figure out how to solve these:
-Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_) for the id’s.
-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 lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Technical Documentation</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav id="navbar">
<ul class="no_bullets">
<header>GPS Log Book<br> User Manual</header>
<li><a class="nav-link" href="#introduction">Introduction</a></li>
<li><a class="nav-link" href="#who_can_benefit">Who can benefit</a></li>
<li><a class="nav-link" href="#key_features">Key Features</a></li>
<li><a class="nav-link" href="#in_the_box">In the Box</a></li>
<li><a class="nav-link" href="#getting_started">Getting Started</a></li>
</ul>
</nav>
<div class="manual" style="margin-left:25%;padding:1px 16px;height:1000px;">
<main id="main-doc">
<section id="introduction" class="main-section">
<header><h1>Introduction<h1></header>
<article><p>Maintaining an accurate log book can be a tedious affair. The GPS Log Book is a simple device that, together with an online system, greatly
simplifies and assists this process. The benefits of the additional tax savings make it a very worthwhile device to own.</p>
<p>Keeping an accurate log book of business and personal travel is not only required as a legal prerequisite by the South African Revenue Service
(SARS) if travel expenses are to be claimed, it also allows claims to be based on the actual distances travelled. Without a Log book it would not be
possible to claim for travel deductions.</p></article>
</section>
<section id="who_can_benefit" class="main-section">
<header><h1>Who can benefit from keeping an accurate Log Book</h1></header>
<p>
<ul>
<li>Sole proprietors, commission earners</li>
<li>Employees who receive a travel allowance</li>
<li>Employees, directors, members who use a company owned vehicle</li>
</ul>
</p>
</section>
<section id="key_features" class="main-section">
<header><h1>Key Features of GPS Log Book</h1></header>
<p>
<ul>
<li>User friendly and well-designed online system</li>
<li>SARS Compliance</li>
<li>Google Maps used to display trips</li>
<li>Customisation of start and end points (zones) specific to any trip</li>
<li>One year warranty period from date of purchase</li>
<li>Easy to use on different computers</li>
<li>Easy to add new vehicles</li>
<li>Ample storage capacity</li>
<li>Frequent recording interval on the device</li>
<li>No annual or monthly subscription fees are associated with the GPS Log Book and related services</li>
</ul>
</p>
</section>
<section id="in_the_box" class="main-section">
<header><h1>In the Box</h1></header>
<p>When receiving the GPS Log book, the following items will be found in the box:</p>
<p>
<ul>
<li>GPS Log Book device</li>
<li>Illustrated quick start guide</li>
<li>USB Cable</li>
</ul>
</p>
</section>
<section id="getting_started" class="main-section">
<header><h1>Getting Started</h1></header>
<p><code>Download the GPS Log Book Sync Application</code></p>
<p>The Sync Application is the application used to read data off the device and send it to the GPS Log Book server for processing and storing.
Download and install this application before connecting the GPS Log Book device to your computer/laptop for the first time.</p>
<p>
<ol>
<li>Navigate to the Downloads page of the GPS Log Book website</li>
<li>Ensure that the system requirements of the computer or laptop in use, meet those listed on the page</li>
<li>Click on the relevant download icon.</li>
</ol>
</p>
<p>In the case of a computer running Microsoft Windows, the following steps are applicable.</p>
<p>
<ol>
<li value="4">If anti-virus software is installed on the computer, it may ask for confirmation that the download is allowed</li>
<li value="5">Once the file is downloaded, start the installation by running the downloaded file.</li>
<li value="6">The GPS Log Book Sync Setup Wizard will open in a new window, and the installation will begin immediately. Please wait while the files
are installed</li>
<li value="7">When the installation is complete click on Finish to end the Sync App installation process.</li>
</ol>
</p>
<p>Now you are ready to connect your device for the first time.</p>
<p><code>Plugging your device into the computer for the first time<code><p><br>
</div>
</section>
</main>
</body>
</html>
/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body{
font-family:Helvetica;
margin:0;
text-align:left;
line-height:1.6;
}
#navbar li{
max-width: 300px;
height: 50px;
}
#navbar header{
border-bottom:1px solid #555;
font-size:26px;
padding:20px;
font-weight:bold;
}
li a:hover {
background-color: #dfdfe2;
color: #4554B5;
cursor: pointer;
}
li a{
display:block;
padding: 8px 16px;
text-decoration: none;
border-bottom: 1px solid #555;
}
.no_bullets{
text-align:left;
margin: 0;
padding: 0;
height:100%;
background-color: #f1f1f1;
position: fixed;
overflow: auto;
list-style-type: disc;
}
code{
color:#4554B5;
font-weight:bold;
font-size:18px;
font-family:verdana;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 OPR/112.0.0.0
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page