Section 1
This is the content for section 1.
Section 2
This is the content for section 2.
Section 3
This is the content for section 3.
**CSS (styles.css):**
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
**JavaScript (script.js):**
javascript
document.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
let targetId = this.getAttribute('href').substring(1);
document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
});
});
In this example, clicking on the links in the navigation will smoothly scroll to the corresponding sections on the page, demonstrating the use of the hash property for content navigation.
This basic setup provides a simple and decent look for technical documentation, allowing users to click on topics in the left section to load the content on the right, as described in the search results [[1]](https://www.knowledgehut.com/blog/web-development/html-projects).