Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <style> .main-nav { display: flex; padding: 1em; border-radius: 5px; background: #1c87c9; color: white; } .main-nav > ul { display: flex; flex: 2; padding: 0; margin: 0; list-style-type: none; } .main-nav li { margin-right: 1em; } .main-nav > form { display: flex; justify-content: flex-end; flex: 1; } .main-nav input { flex: 1; } .main-nav button { padding: 0 1em; margin-left: .3em; border: 0; border-radius: 1em; background: white; color: #666666; } @media screen and (max-width: 575px) { .main-nav { flex-direction: column; } .main-nav ul { margin-bottom: 1em; } } </style> <body> <nav class="main-nav"> <ul> <li>Home</li> <li>About us</li> <li>Services</li> <li>Contact us</li> </ul> <form> <input type="search" placeholder="Search"> <button>Go</button> </form> </nav> </body> </html>