JobPlug-Namibia/index.html at main · Absalom711/JobPlug-Namibia · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NamYouth Connect - Home</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
  <style>
    /* Popup Styling (Smaller + Neat) */
    .popup {
      position: fixed;
      top: 20px;
      right: 20px;
      background: #00ff88;
      color: #111;
      padding: 8px 16px;
      border-radius: 6px;
      font-family: 'Poppins', sans-serif;
      font-weight: 500;
      font-size: 14px;
      box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 1000;
    }

    .popup.show {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="home-finder.html">Home Finder</a></li>
      <li><a href="training-hub.html">Training Hub</a></li>
      <li><a href="mentorship-chat.html">Mentorship Chat</a></li>
      <li><a href="funding-access.html">Funding Access</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="hero-content">
      <div class="logo">
      <img src="img.png" alt="JobPlug Namibia Logo" />
    </div>
      <h1>Empowering Namibia's Youth</h1>
      <p>Find opportunities, training, and mentorship to grow your future.</p>
      <a href="#stats" class="cta-btn">Get Started</a>
    </div>
  </header>

  <!-- About Section -->
  <section class="about animate" id="about">
    <h2>About JobPlug Namibia</h2>
    <p>
      JobPlug Namibia is a digital platform connecting young Namibians
      with opportunities, training programs, mentorship, and job listings.
      We believe in building a stronger, connected youth community.
    </p>
  </section>

  <!-- Opportunities Section -->
  <section class="opportunities animate" id="opportunities">
    <h2>Opportunities</h2>
    <div class="cards">
      <div class="card">
        <h3>Internships</h3>
        <p>Gain real-world experience with internship programs.</p>
      </div>
      <div class="card">
        <h3>Scholarships</h3>
        <p>Access funding opportunities to support your studies.</p>
      </div>
      <div class="card">
        <h3>Workshops</h3>
        <p>Join youth-led workshops to improve your professional skills.</p>
      </div>
    </div>
  </section>

  <!-- Stats Section -->
  <section class="stats animate" id="stats">
    <h2>Our Impact</h2>
    <div class="stat-grid">
      <div class="stat">
        <h3 class="count" data-target="25">0</h3>
        <p>Youth Reached</p>
      </div>
      <div class="stat">
        <h3 class="count" data-target="18">0</h3>
        <p>Programs Hosted</p>
      </div>
      <div class="stat">
        <h3 class="count" data-target="5">0</h3>
        <p>Partners</p>
      </div>
      <div class="stat">
        <h3 class="count" data-target="12">0</h3>
        <p>Jobs Shared</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section class="contact animate" id="contact">
    <h2>Get in Touch</h2>
    <p>Have a question or want to collaborate? Reach out to us below.</p>
    <form onsubmit="sendMessage(event)">
      <input type="text" placeholder="Your Name" required />
      <input type="email" placeholder="Your Email" required />
      <textarea placeholder="Your Message" required></textarea>
      <button type="submit">Send Message</button>
    </form>
  </section>

 <!-- Popup Message -->


<div id="popup" class="popup">✅ Message sent! Thanks for interacting with JobPlug.</div>


  <!-- Footer -->
  <footer>
    <p>Designed by Absalom Willem and Stephen Nangolo | © 2025 JopPlug Namibia</p>
  </footer>

  <script src="script.js"></script>
  <script>
    // Popup logic + clear form
    function sendMessage(event) {
      event.preventDefault();
      const popup = document.getElementById('popup');
      const form = event.target;

      popup.classList.add('show');
      setTimeout(() => popup.classList.remove('show'), 2000);

      form.reset(); // clear inputs
    }
  </script>
</body>
</html>