WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Bleu Navbar
1535
Anes_unk
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
20 May 2024
Responsive_navbar
HTML
Copy
<!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Anes Navbar</title> <link rel="stylesheet" href="styles.css"> <!-- ربط ملف CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </header> </body> </html>
CSS
Copy
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; overflow-x: hidden; background-color: #0A1128; } nav { background: linear-gradient(135deg, #000, #0A1128); padding: 30px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); position: relative; z-index: 1000; } nav ul { list-style: none; display: flex; gap: 40px; margin: 0; } nav ul li a { color: white; text-decoration: none; padding: 20px 40px; transition: background-color 0.3s ease, transform 0.3s ease; border-radius: 10px; font-weight: bold; font-size: 20px; } nav ul li a:hover { background-color: #130c73; transform: scale(1.1); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
