Virtual-Incubation-website/header.html at master · Siphelele-Maphumulo/Virtual-Incubation-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!-- header.html -->
<!-- External Stylesheets & Fonts -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/css/pikaday.min.css"
/>
<link href="css/porfolio.css" rel="stylesheet" />

<!-- Navigation Bar & Header -->
<header>
  <nav class="navbar">
    <a class="navbar-brand" href="home.html">
      <img src="../assets/img/preview.png" alt="Logo" />
    </a>

    <div class="nav-toggle" onclick="toggleMenu()">&#9776;</div>

    <ul class="nav-links" id="navMenu">
      <li>
        <a href="home.html"><i class="fas fa-house"></i> Home</a>
      </li>
      <li>
        <a href="index.html#services"
          ><i class="fas fa-handshake"></i> Our Services</a
        >
      </li>
      <li>
        <a href="index.html#digital"
          ><i class="fas fa-info-circle"></i> About Us</a
        >
      </li>
      <li>
        <a href="#contact"><i class="fas fa-envelope"></i>Contact Us</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropbtn">
          <i class="fa fa-user"></i> User
          <span><i class="fa fa-caret-down"></i></span>
        </a>
        <div class="dropdown-content">
          <a
            href="login.html"
            style="background-color: rgba(241, 143, 143, 0.329)"
          >
            <i class="fas fa-sign-out-alt"></i> Logout
          </a>
          <a href="#password-reset">
            <i class="fas fa-user-cog"></i> Account
          </a>
        </div>
      </li>
    </ul>
  </nav>
</header>

<!-- Toggle Menu Script -->
<script>
function toggleMenu() {
  const navMenu = document.getElementById("navMenu");
  navMenu.classList.toggle("active");
}
</script>

<!-- Active Link CSS -->
<style>
.nav-links a.active {
  color: #2AC8A8; /* strong green highlight */
  font-weight: 600;
  border-bottom: 2px solid #2AC8A8;
}
</style>