Tell us what’s happening:
Hie all, my code keeps failing on where i should link the id of the main section and the href of the .nav-link .please kindly assist
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Visitors Management App</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Visitors Management App</h1>
<nav id="navbar">
<header>Visitors Management App</header>
<ul>
<li>
<a class="nav-link"
href="introduction">Introduction</a></li>
<li>
<a class="nav-link" href="more_about_the_app">More about the app</a></li>
<li>
<a class="nav-link" href="How_to_use">How to use</a></li>
<li>
<a class="nav-link" href="Sectors_on_the_system">Sectors on the system</a></li>
<li>
<a class="nav-link" href="Send_button">Send button</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>
<code>Introduction</code>
</header>
<p>This is a mobile app that is used on entrances to gain visitors' information.</p><p>It can be used in the following areas: <li>Residential Areas(complexes)</li><li>Commercial Areas(Office parks)</li><li>Malls</li></p>
</section>
<section class="main-section" id="More_about_the_app">
<header>
<code>More about the app</code>
</header>
<p>The app enables the user to get detailed information on the visitor as well as the time the visitor was in and out of the premises.</p>
<p>It also enables the user to save the information on cloud so that they can access the information whenever neccessary.</p>
</section>
<section class="main-section" id="How_to_use">
<header>
<code>How to use</code>
</header>
<p> Firstly, the app user has to log in their deatils and all users will have different log in details.</p><p>The log in details will be based on the following:<li>Username</li><li>Email Address</li><li>Password</li></p><p>Each person will know only their log in code and this will reveal all the visitors that entered into the premises.</p>
</section>
<section class="main-section" id="Sectors_on_the_system">
<header>
<code>Sectors on the system</code>
</header>
<p>These are the following sectors on the Management system:</p>
<p><li>Visitors Name</li>
<li> Contact Details</li>
<li>Time in and Out</li>
<li>Person/Department being visited</li>
</p>
</section>
<section class="main-section" id="Send_button">
<header>
<code>Send button</code>
</header>
<p>The button is situated on the bottom of the the page, when clicked, it sends the information to the logged in user's email address.
</section>
</main>
</body>
</html>
/* file: styles.css */
*{
background-color: #ADD8E6;
Font-family: Sans-serif;
}
.nav-link{
font-weight: strong;
position:absolute;
}
header{
font-style: italic;
font-weight: bold;
font-size: 1.5rem;
text-align: center;
text-decoration: underline;
font-family: Times-new-roman;
}
h1{
text-align: center
}
@media screen and (min-width: 180px) {
header {width: 400px; float: top;}
section {margin-left: 16px;}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page