<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<style>
/* Style for the sidebar container */
.sidebar {
height: 40%; /* Set the height of the sidebar to fill 40 % of the screen */
width: 200px; /* Set the width of the sidebar */
position: fixed; /* Make the sidebar fixed */
top: 0; /* Position the sidebar at the top of the screen */
left: 0; /* Position the sidebar on the left side of the screen */
background-color: #c3c3c3; /* Set the background color of the sidebar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Style for the links inside the sidebar */
.sidebar a {
display: block; /* Display links as block elements */
padding: 16px; /* Add some padding to the links */
color: #000; /* Set the color of the links */
text-decoration: none; /* Remove underline from links */
}
/* Add a hover effect to the links */
.sidebar a:hover {
background-color: #ddd;
}
/* Style for the main content area */
.main-content {
margin-left: 200px; /* Set the left margin to the width of the sidebar */
padding: 20px; /* Add some padding to the main content */
}