SBAerospace.github.io/contact.html at main · SBAerospace/SBAerospace.github.io · 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contact | SBAerospace</title>
  <meta name="description" content="Get in touch with SBAerospace: South Brunswick High School's aerospace engineering team, for membership, sponsorship, or general questions." />
  <link rel="stylesheet" href="style.css" />
  <script src="main.js" defer></script>
</head>
<body>
  <a href="#main" class="skip-link">Skip to content</a>

  <header>
    <div class="nav-inner">
      <a href="index.html" class="logo">
        <img src="assets/logo/white-logo.png" alt="SBAerospace logo" />
        SBAerospace
      </a>
      <nav class="nav-links" aria-label="Primary navigation">
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
        <a href="projects.html">Work</a>
        <a href="teams.html">Team</a>
        <a href="sponsor.html">Sponsor</a>
        <a href="contact.html">Contact</a>
        <a href="tryouts.html" style="color: var(--accent); font-weight: 700;">Tryouts</a>
      </nav>
      <div class="nav-actions">
        <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
          <!-- Moon: shown in light mode -->
          <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
          </svg>
          <!-- Sun: shown in dark mode -->
          <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="12" cy="12" r="5"/>
            <line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
            <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
          </svg>
        </button>

        <a href="contact.html" class="btn-nav">Join Us</a>
        <button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  </header>

  <nav class="mobile-nav" id="mobileNav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="projects.html">Work</a>
    <a href="teams.html">Team</a>
    <a href="sponsor.html">Sponsor</a>
    <a href="contact.html">Contact</a>
    <a href="tryouts.html" style="color: var(--accent);">Tryouts →</a>
  </nav>

  <main id="main">

    <div class="page-header">
      <div class="container">
        <div class="section-label">Contact</div>
        <h1>Reach out.<br /><em>We respond.</em></h1>
        <p>Whether you want to join, partner with us, or just ask a question, and we're happy to talk. Responses usually come within a few days.</p>
      </div>
    </div>

    <section class="section">
      <div class="container">
        <div class="contact-grid reveal">

          <!-- Left: contact info -->
          <div class="contact-info">
            <h3>How to reach us</h3>

            <div class="contact-channel">
              <div class="channel-icon-wrap">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--accent);">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                  <polyline points="22,6 12,13 2,6"/>
                </svg>
              </div>
              <div>
                <div class="channel-label">Email</div>
                <div class="channel-val"><a href="mailto:sbhsaerospace@gmail.com">sbhsaerospace@gmail.com</a></div>
              </div>
            </div>

            <div class="contact-channel">
              <div class="channel-icon-wrap">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: var(--accent);">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </svg>
              </div>
              <div>
                <div class="channel-label">School</div>
                <div class="channel-val">South Brunswick High School<br />Monmouth Junction, NJ 08852</div>
              </div>
            </div>

            <div style="margin-top: 2.5rem; background: var(--surface); border-radius: var(--radius-md); padding: 1.5rem;">
              <div class="section-label" style="margin-bottom: 0.75rem;">Joining the club</div>
              <p style="font-size: 0.875rem; color: var(--text-2); line-height: 1.6;">
                We accept new members on a rolling basis. Send us an email or fill out the form and mention which team you're interested in. We'll get you connected to the right lead and onboarded before the next meeting.
              </p>
            </div>
          </div>

          <!-- Right: form -->
          <div class="form-wrap">
            <form id="contactForm" novalidate>
              <div class="form-group">
                <label for="contact-name">Name</label>
                <input type="text" id="contact-name" name="name" placeholder="Your name" required />
              </div>
              <div class="form-group">
                <label for="contact-email">Email</label>
                <input type="email" id="contact-email" name="email" placeholder="you@example.com" required />
              </div>
              <div class="form-group">
                <label for="contact-subject">Subject</label>
                <select id="contact-subject" name="subject">
                  <option value="">Select a topic...</option>
                  <option value="join">I want to join</option>
                  <option value="sponsor">Sponsorship inquiry</option>
                  <option value="media">Press / media</option>
                  <option value="general">General question</option>
                </select>
              </div>
              <div class="form-group">
                <label for="contact-message">Message</label>
                <textarea id="contact-message" name="message" rows="5" placeholder="What's on your mind?" required></textarea>
                <small>We read every message. For urgent stuff, email directly.</small>
              </div>
              <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button>
            </form>
          </div>

        </div>
      </div>
    </section>

  </main>

  <footer>
    <div class="footer-inner">
      <div class="footer-brand">
        <h3>SBAerospace</h3>
        <p>South Brunswick High School's student-run aerospace engineering team. We design, build, and fly rockets, and everything inside them.</p>
      </div>
      <div class="footer-col">
        <h4>Pages</h4>
        <a href="about.html">About</a>
        <a href="projects.html">Work</a>
        <a href="teams.html">Team</a>
        <a href="sponsor.html">Sponsor</a>
        <a href="contact.html">Contact</a>
      </div>
      <div class="footer-col">
        <h4>Connect</h4>
        <a href="mailto:sbhsaerospace@gmail.com">Email Us</a>
        <a href="https://www.instagram.com/sbhs_aerospaceclub_team_a/" target="_blank" rel="noopener noreferrer">Instagram</a>
        <a href="https://www.linkedin.com/company/south-brunswick-high-school-aerospace" target="_blank" rel="noopener noreferrer">LinkedIn</a>
        <a href="https://github.com/SBAerospace" target="_blank" rel="noopener noreferrer">GitHub</a>
        <a href="https://www.facebook.com/people/SB-Aerospace/61559474409905/" target="_blank" rel="noopener noreferrer">Facebook</a>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="copy-year">2026</span> SBAerospace. South Brunswick, NJ.</span>
      <a href="contact.html">sbhsaerospace@gmail.com</a>
    </div>
  </footer>

</body>
</html>