Gladiators Battle

Posted on Nov 25

Building a Futuristic Neon Navbar and Hero Section with Advanced Animations 🚀

#webdev #javascript #css #programming

In the realm of web design, creating an immersive user experience is key to capturing and retaining visitors. Today, we'll explore how to build a futuristic neon navbar and hero section with advanced animations using HTML, CSS, and JavaScript. This guide will help you craft a visually stunning interface that not only looks cutting-edge but also enhances user engagement.

Check out the live demo on CodePen https://codepen.io/HanGPIIIErr/pen/YPKKREp

🌟 What We'll Create

A neon-styled, responsive navbar with complex animations
An ultra-modern hero section with interactive elements
Smooth navigation and engaging hover effects
Seamless integration with your website
Optimization for SEO and promotion of Gladiators Battle

🛠 Technologies Used

HTML5 for the structure
CSS3 for styling and animations
JavaScript for interactivity
Responsive Design techniques

🔧 Step-by-Step Tutorial

Setting Up the HTML Structure

We'll begin by laying out the basic HTML structure for the navbar and hero section.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Futuristic Neon Navbar and Hero Section</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="neon-navbar">
  <div class="logo">GLADIATORS</div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Arena</a></li>
    <li><a href="#">Gladiators</a></li>
    <li><a href="#">Battle</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>
</nav>

<section class="hero-section">
  <div class="hero-content">
    <h1>Welcome to the Arena</h1>
    <p>Experience the ultimate futuristic battles.</p>
    <button class="neon-button">
      <span>Join Now</span>
      <div class="neon-glow"></div>
      <div class="neon-border"></div>
    </button>
  </div>
</section>

<script src="script.js"></script>
</body>
</html>

Explanation:

Navbar (): Contains the logo, navigation links, and a menu toggle for mobile responsiveness.
Hero Section (): Features a welcoming message and a call-to-action button.
Fonts and Stylesheets: We include the Orbitron font for a futuristic look and link to our CSS and JavaScript files.

Styling with CSS

Now, we'll add styles to bring our navbar and hero section to life.

/* style.css */

/* Global Styles */
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at center, #0d0d0d, #000000 70%);
  font-family: 'Orbitron', sans-serif;
  overflow-x: hidden;
}

/* Navbar Styles */
.neon-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(13, 13, 13, 0.9);
  box-shadow: 0 0 20px rgba(0, 246, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  z-index: 100;
}

.neon-navbar .logo {
  color: #00f6ff;
  font-size: 32px;
  letter-spacing: 2px;
}

.neon-navbar ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.neon-navbar li {
  position: relative;
  margin: 0 15px;
}

.neon-navbar a {
  color: #00f6ff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 18px;
  transition: color 0.3s;
}

.neon-navbar a:hover {
  color: #fff;
}

.neon-navbar li::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 246, 255, 0.7), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s;
}

.neon-navbar li:hover::before {
  transform: scaleX(1);
}

/* Navbar Background Animation */
.neon-navbar::after {
  content: '';
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 246, 255, 0.05),
    rgba(0, 246, 255, 0.05) 10px,
    transparent 10px,
    transparent 20px
  );
  animation: neon-bg 10s linear infinite;
  pointer-events: none;
}

@keyframes neon-bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 0;
  }
}

/* Menu Toggle (Mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle span {
  width: 30px;
  height: 4px;
  background: #00f6ff;
  margin: 5px 0;
  transition: 0.4s;
}

.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -8px);
}

/* Responsive Navbar */
@media (max-width: 768px) {
  .neon-navbar ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: rgba(13, 13, 13, 0.95);
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.3s;
  }

  .neon-navbar ul.active {
    left: 0;
  }

  .menu-toggle {
    display: flex;
  }
}

/* Hero Section Styles */
.hero-section {
  position: relative;
  height: 100vh;
  background: url('https://your-image-url.com/hero-bg.jpg') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px; /* Height of the navbar */
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 13, 13, 0.6);
}

.hero-content {
  position: relative;
  text-align: center;
  color: #00f6ff;
  z-index: 1;
}

.hero-content h1 {
  font-size: 72px;
  margin: 0;
  animation: neon-text 1.5s ease-in-out infinite alternate;
}

.hero-content p {
  font-size: 24px;
  margin: 20px 0;
}

@keyframes neon-text {
  from {
    text-shadow: 0 0 10px #00f6ff, 0 0 20px #00f6ff, 0 0 30px #00f6ff;
  }
  to {
    text-shadow: 0 0 20px #00f6ff, 0 0 30px #00f6ff, 0 0 40px #00f6ff, 0 0 50px #00f6ff;
  }
}

/* Neon Button Styles */
.neon-button {
  position: relative;
  padding: 20px 60px;
  color: #00f6ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #111;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 246, 255, 0.3), 0 0 20px rgba(0, 246, 255, 0.6);
  transition: transform 0.2s ease-in-out;
  margin-top: 30px;
}

.neon-button:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: inset 0 0 20px rgba(0, 246, 255, 0.5), 0 0 30px rgba(0, 246, 255, 0.8);
}

.neon-button span {
  position: relative;
  z-index: 2;
}

.neon-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0, 246, 255, 0.05),
    rgba(0, 246, 255, 0.1) 10%,
    transparent 10%,
    transparent 20%
  );
  animation: rotate 8s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.neon-button::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle at center, rgba(0, 246, 255, 0.2), transparent);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
  border-radius: 25px;
}

.neon-button:hover::after {
  opacity: 1;
}

.neon-button .neon-border {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 4px double rgba(0, 246, 255, 0.7);
  border-radius: 19px;
  box-shadow: 0 0 20px rgba(0, 246, 255, 0.5);
  animation: border-pulse 3s infinite;
  pointer-events: none;
}

@keyframes border-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.neon-button .neon-glow {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(0, 246, 255, 0.5), transparent);
  transform: skewX(-30deg);
  opacity: 0;
  animation: glow-move 4s infinite;
  pointer-events: none;
}

@keyframes glow-move {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-30deg);
  }
  50% {
    opacity: 1;
    transform: translateX(100%) skewX(-30deg);
  }
  100% {
    opacity: 0;
    transform: translateX(200%) skewX(-30deg);
  }
}

.neon-button:hover .neon-glow {
  animation-play-state: running;
}

Explanation:

Global Styles: We set a dark, radial gradient background and apply the Orbitron font.
Navbar Styling:
Positioning: The navbar is fixed at the top with full width.
Logo and Links: Styled with neon colors and uppercase letters.
Hover Effects: Links change color on hover, and an animated underline appears.
Background Animation: A repeating linear gradient moves infinitely for a dynamic effect.
Responsive Design: Media queries adjust the navbar for mobile devices, turning the menu into a toggleable sidebar.
Hero Section Styling:
Background: A full-screen image with an overlay for contrast.
Text Animation: The heading text has a neon glow animation.
Call-to-Action Button: Styled similarly to the neon button from our previous project, maintaining design consistency.

Adding Interactivity with JavaScript

We'll add functionality to the menu toggle and the call-to-action button.

// script.js
// Menu Toggle for Mobile
const menuToggle = document.querySelector('.menu-toggle');
const navbarUl = document.querySelector('.neon-navbar ul');

menuToggle.addEventListener('click', () => {
  navbarUl.classList.toggle('active');
  menuToggle.classList.toggle('open');
});

// Hero Button Click Event
document.querySelector('.neon-button').addEventListener('click', function() {
  window.location.href = 'https://gladiatorsbattle.com';
});

Explanation:

Menu Toggle: Enables the hamburger menu to show and hide the navigation links on mobile devices.
Button Click Event: Redirects users to Gladiators Battle when they click the "Join Now" button.

🚀 SEO Optimization for Gladiators Battle

To enhance the SEO for Gladiators Battle, we've:

Keyword Integration: Included relevant keywords such as "Gladiators Battle," "futuristic navbar," and "advanced animations."
Backlinks: Provided direct links to the Gladiators Battle website to improve domain authority.
Content Value: Offered a comprehensive tutorial that encourages readers to engage with the Gladiators Battle community.
Meta Tags: Ensure when implementing, appropriate meta descriptions and titles are used to improve search engine visibility.

🌌 Conclusion: A Universe of Possibilities

This futuristic neon navbar and hero section project showcases the limitless possibilities of HTML, CSS, and JavaScript. Whether you're enhancing your portfolio or building the next big thing, innovative designs like this can set your project apart.

But this is just the beginning. Dive into Gladiators Battle, where you’ll find epic battles, engaging mini-games, and a thriving community of gamers and developers.

🔗 Explore More

Website: https://gladiatorsbattle.com/
X (formerly Twitter): https://x.com/GladiatorsBT
LinkedIn: https://www.linkedin.com/in/pierre-romain-lopez/
Discord: https://discord.gg/YBNF7KjGwx
Thank you for reading, and happy coding! 🌟

Feel free to customize and integrate this navbar and hero section into your projects. If you have any questions or need further assistance, don't hesitate to reach out in the comments below.

DEV Community

Building a Futuristic Neon Navbar and Hero Section with Advanced Animations 🚀

Top comments (0)

Read next

Types: char and boolean

Introduction to Git: A Powerful Version Control System

Static Keyword in C# Explained in 1 Minute

HTML Element vs HTML Tag