Navbar with Current Date & Time

<div class="container py-4">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

  <div class="container">
    <!-- ii. Header Top Section -->
    <header class="bg-dark text-white py-2 rounded-top-4 d-none d-md-block">
      <div class="container-fluid d-flex justify-content-between align-items-center px-4">
        <div class="small">
          <i class="bi bi-envelope-fill text-primary me-2"></i>hello@alexrivera.dev
          <span class="mx-3 text-secondary">|</span>
          <i class="bi bi-telephone-fill text-primary me-2"></i>+1 234 567 890
        </div>
        <div class="d-flex align-items-center">
          <div id="dateTimeDisplay" class="small me-4 text-secondary border-end pe-3"></div>
          <div class="social-top">
            <a href="#" class="text-white mx-2"><i class="bi bi-linkedin"></i></a>
            <a href="#" class="text-white mx-2"><i class="bi bi-github"></i></a>
            <a href="#" class="text-white mx-2"><i class="bi bi-twitter-x"></i></a>
          </div>
          <a href="#" class="btn btn-primary btn-sm ms-3 px-3 rounded-pill fw-bold">Login</a>
        </div>
      </div>
    </header>

    <!-- iii. Navigation Section -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top px-4 rounded-bottom-4">
      <a class="navbar-brand fw-bold fs-3" href="#"><span class="text-primary">ALEX</span>.DEV</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navItems">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navItems">
        <ul class="navbar-nav ms-auto fw-semibold custom-nav">
          <li class="nav-item"><a class="nav-link px-3" href="#home">Home</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#about">About</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#resume">Resume</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#portfolio">Portfolio</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#services">Services</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#blog">Blog</a></li>
          <li class="nav-item"><a class="nav-link ps-3" href="#contact">Contact</a></li>
        </ul>
      </div>
    </nav>

  </div>

  <!-- Additional Styles -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

    .custom-nav .nav-link {
      position: relative;
      transition: color 0.3s;
    }

    .custom-nav .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: var(--bs-primary);
      transition: width 0.3s;
    }

    .custom-nav .nav-link:hover::after {
      width: 100%;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-20px);
      }
    }

  </style>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

  <script>
    // Current Date & Time
    function updateDateTime() {
      const now = new Date();
      const options = {
        weekday: 'short',
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      };
      document.getElementById('dateTimeDisplay').innerText = now.toLocaleDateString('en-US', options);
    }
    setInterval(updateDateTime, 1000);
    updateDateTime();

  </script>
</div>