WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barra Superior Simple
5137
Hydr4
Abrir en el editor
Publica tu código
Recomendado
24 August 2025
Ejemplo de formulario de registro HTML simple
17 May 2025
Formulario de inicio de sesión moderno + barra lateral deslizante
1 July 2025
Juego de Sudoku HTML: barra lateral y menú
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="style.css"> <title>Hydr4 - Topbar</title> </head> <body> <div class="topbar"> <div class="brand">Hydr4</div> <div class="menu"> <a href="#" class="menuItem">Home</a> <a href="#" class="menuItem">Portfolio</a> <a href="#" class="menuItem"><i class="fab fa-github"></i> GitHub</a> <a href="#" class="menuItem"><i class="fab fa-discord"></i> Discord</a> <button class="ctaButton">Contact Us</button> </div> </div> </body> </html>
CSS
Copy
body { margin: 0; padding: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to right, #000000, #6b00b3); color: #fff; padding: 10px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .brand { font-size: 24px; font-weight: bold; } .menu { display: flex; align-items: center; } .menuItem { text-decoration: none; color: #fff; margin: 0 15px; transition: color 0.3s ease-in-out; } .menuItem:hover { color: #e5a5ff; } .ctaButton { background-color: #e5a5ff; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; outline: none; transition: background-color 0.3s ease-in-out; } .ctaButton:hover { background-color: #6b00b3; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
