Navbar Website Design

Заказчик: AI | Опубликовано: 04.04.2026

This is a simple multi-page website design created using HTML and CSS. The layout includes a structured navigation bar with multiple sections such as Home, About, Services, Portfolio, Blog, and Contact. The design focuses on clarity, proper alignment, and user-friendly navigation. A clean header with the website name and a responsive menu makes it easy to explore different sections. This project demonstrates basic front-end development skills, including layout design, styling, and organizing content effectively. Project Sample--- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Project Nav bar</title> <style> body { background-color: aliceblue; } * { margin: 0; padding: 0; } ul li { list-style: none; display: inline; padding: 17px; font: 400; font-weight: bolder; cursor: pointer; } nav { background-color: aqua; padding: 10px; } ul li a { text-decoration: none; } h1 { text-align: center; padding: 20px; border: 2px solid black; background-color: rgba(0, 0, 0, 0.937); color: white; } h4{ text-align: center; margin-top: 20px; } </style> </head> <body> <header> <h1>Website Name </h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Contact Us</a></li> <li><a href="/">Information</a></li> <li><a href="/">Services</a></li> <li><a href="">Portfolio</a></li> <li><a href="/">Blog</a></li> <li><a href="/">FAQ</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Team</a></li> <li><a href="/">Careers</a></li> <li><a href="/">Support</a></li> <li><a href="/">Help Center</a></li> <li><a href="/">Privacy Policy</a></li> <li><a href="/"></a></li> <li><a href="/">Login / Signup</a></li> </ul> </nav> </header> <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, debitis! Adipisci dolore asperiores earum consequatur culpa mollitia repellendus, iure maxime voluptatibus perspiciatis excepturi esse eaque consequuntur. Sequi doloribus similique accusantium dolorum iste nisi harum?</h4> </body> </html>