WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barre supérieure simple
5009
Hydr4
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 June 2025
Barre de navigation et section héros du site Web HTML
26 March 2025
Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3
5 June 2024
Formulaire de connexion HTML simple et gratuit
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) */
