Event_Static_Html/contact.html at master · johnk2hawaii/Event_Static_Html · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>EventHorizonAI Contact</title>
  <link rel="stylesheet" href="static/styles.css" />
  <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">

</head>
<body class="contact">
  <!-- Background image layer -->
  <div class="background-layer"></div>

  <nav class="navbar">
    <div class="nav-center">
      <ul class="nav-links">
        <li>
          <a href="index.html" class="logo-link">
            <img src="static/EH_logo_circle.png" alt="EventHorizonAI Logo" style="height: 40px; vertical-align: middle;" />
          </a>
        </li>
        <li><a href="services.html">Mission</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="about.html">Crew</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </nav>
  <div class="content-wrapper">


    <main>
      <section class="contact-container" style="margin-top: 90px;">
        <h1>Contact Us</h1>
        <p>Email: <a href="mailto:example@example.com" style="color: lightblue;">john@eventhorizonai.tech</a></p>
        <p>Phone: +1 (778) 802-9986</p>
        <p>Reach Out To Us For A Free Consultation.</p>
      </section>
    </main>
    <footer class="fade-in delay-3">
    <p>© 2025 EventHorizonAI. All rights reserved.</p>
    <p>EventHorizonAI™ and the EventHorizonAIU logo are trademarks of EventHorizonAI Inc.</p>
    </footer>
  </div>

  <!-- Fade-in script -->
  <script>
    window.addEventListener('DOMContentLoaded', () => {
      const bgLayer = document.querySelector('.background-layer');
      const contentWrapper = document.querySelector('.content-wrapper');

      // Determine the correct background image based on body class
      let bgImageSrc = '';
      if (document.body.classList.contains('home')) {
        bgImageSrc = 'backgrounds/BH.png';
      } else {
        bgImageSrc = 'backgrounds/space.png';
      }

      // Preload the background image
      const bgImage = new Image();
      bgImage.src = bgImageSrc;

      bgImage.onload = () => {
        // Background is ready; apply visible class
        if (bgLayer) bgLayer.classList.add('visible');

        // Fade in content shortly after
        setTimeout(() => {
          if (contentWrapper) contentWrapper.classList.add('visible');
        }, 300); // Optional shorter delay
      };

      // Fallback if image doesn't load after 3 seconds
      setTimeout(() => {
        if (!bgLayer.classList.contains('visible')) {
          bgLayer.classList.add('visible');
          contentWrapper.classList.add('visible');
        }
      }, 500);
    });
  </script>
</body>
</html>