HTML
<!DOCTYPE html>
<html>
<head>
<title>Buildmaster - Construction Management System</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div class="logo">
<img src="logo.png" alt="Buildmaster Logo">
</div>
<div class="header-text">
<h1>Buildmaster</h1>
</div>
<div class="search-bar">
<form action="search.php" method="GET">
<input type="text" name="query" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="about.php">About</a></li>
</ul>
</nav>
</header>
<!-- Rest of your website content goes here -->
</body>
</html>
CSS
/* Add your desired styles for the header components */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.logo img {
height: 40px;
}
.header-text h1 {
margin: 0;
font-size: 24px;
}
.search-bar {
display: flex;
}
.search-bar form {
display: flex;
align-items: center;
margin-left: 10px;
}
.search-bar input[type="text"] {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.search-bar button[type="submit"] {
padding: 5px 10px;
margin-left: 5px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
}
