trohit/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="content">
    <!-- Your page content goes here -->
  </div>
</body>
</html>

## styles.css
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

nav {
  background-color: #333;
}

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.menu li {
  float: left;
}

.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #111;
}

/* Mobile styles */
@media (max-width: 600px) {
  .menu {
    display: none;
  }

  .menu li a {
    display: block;
    text-align: left;
  }

  /* Show the menu icon */
  .menu-icon {
    display: block;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .menu-icon:hover {
    background-color: #111;
  }

  /* Show the menu when menu icon is clicked */
  .menu-icon.active {
    background-color: #111;
  }

  .menu.active {
    display: block;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
	<nav>
	<ul class="menu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>

	<div class="content">
	<!-- Your page content goes here -->
	</div>
	</body>
	</html>
	body {
	margin: 0;
	font-family: Arial, sans-serif;
	}

	nav {
	background-color: #333;
	}

	.menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.menu li {
	float: left;
	}

	.menu li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	.menu li a:hover {
	background-color: #111;
	}

	/* Mobile styles */
	@media (max-width: 600px) {
	.menu {
	display: none;
	}

	.menu li a {
	display: block;
	text-align: left;
	}

	/* Show the menu icon */
	.menu-icon {
	display: block;
	background-color: #333;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	.menu-icon:hover {
	background-color: #111;
	}

	/* Show the menu when menu icon is clicked */
	.menu-icon.active {
	background-color: #111;
	}

	.menu.active {
	display: block;
	}
	}