<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
#header {
background-color: blue;
color: white;
padding: 10px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="header">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<main>
<section id="about">
<h2>About Us</h2>
<p>Here is the example on how span work as this text is highlighted <span class="highlight">see its highlighted</span> using span with css.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</main>
<footer>
<p>Copyright ©2022 My Website</p>
</footer>
</body>
</html>