<!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>
/* 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; }
Expand for more options Login