WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
5346
Hydr4
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 April 2025
Ein Code von Metehan
25 November 2025
Kleinfischen
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) */
