<!DOCTYPE html>
<html lang="en"> <head> <style> .navbar{ background-color: black; border-radius: 30px; } .navbar li{ display: inline; list-style: none; margin: 13px 20px; } .navbar ul{ overflow: auto; } .navbar li a{ padding: 3px 3px; text-decoration: none; color: white; } </style> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <title>Document</title> </head> <body> <header> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> </header> </body> </html> |
<!DOCTYPE html>
<html lang="en"> <head> <style> .navbar{ background-color: black; border-radius: 30px; } .navbar li{ float:left; list-style: none; margin: 13px 20px; } .navbar ul{ overflow: auto; } .navbar li a{ padding: 3px 3px; text-decoration: none; color: white; } </style> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <title>Document</title> </head> <body> <header> <nav class="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </nav> </header> </body> </html> |