Skip to content

Commit ae47717

Browse files
futurestackintelfuturestackintel
authored
Add files via upload
1 parent e258fb3 commit ae47717

1 file changed

Lines changed: 242 additions & 0 deletions

File tree

‎contact.html‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
6+
<title>FutureStack Intelligence — Contact</title>
7+
<link rel="stylesheet" href="shared.css">
8+
<style>
9+
.page-hero {
10+
position:relative;z-index:1;
11+
background:linear-gradient(135deg,#030510 0%,#060818 100%);
12+
padding:64px 40px 48px;
13+
border-bottom:1px solid var(--glass-border);
14+
text-align:center;
15+
}
16+
17+
.contact-grid {
18+
display:grid;
19+
grid-template-columns:1fr 1.3fr;
20+
gap:48px;
21+
align-items:start;
22+
}
23+
24+
.contact-info-box { }
25+
26+
.info-title {
27+
font-family:var(--font-head);font-size:12px;color:white;
28+
letter-spacing:1px;margin-bottom:28px;
29+
}
30+
31+
.contact-item {
32+
display:flex;align-items:flex-start;gap:14px;
33+
padding:16px 0;
34+
border-bottom:1px solid var(--glass-border);
35+
}
36+
37+
.contact-item:last-child { border-bottom:none; }
38+
39+
.c-icon {
40+
width:38px;height:38px;flex-shrink:0;
41+
background:var(--glass);border:1px solid var(--glass-border);
42+
border-radius:4px;display:flex;align-items:center;justify-content:center;
43+
font-size:16px;
44+
}
45+
46+
.c-label {
47+
font-family:var(--font-head);font-size:8px;letter-spacing:2px;
48+
text-transform:uppercase;color:var(--muted);margin-bottom:4px;
49+
}
50+
51+
.c-value { font-size:14px;color:var(--text); }
52+
.c-value a { color:var(--cyan);text-decoration:none;transition:opacity 0.2s; }
53+
.c-value a:hover { opacity:0.8; }
54+
55+
.form-box {
56+
background:var(--glass);
57+
border:1px solid var(--glass-border);
58+
border-radius:8px;
59+
padding:32px;
60+
position:relative;
61+
overflow:hidden;
62+
}
63+
64+
.form-box::before {
65+
content:'';position:absolute;top:0;left:0;right:0;height:2px;
66+
background:linear-gradient(90deg,var(--cyan),var(--purple));
67+
}
68+
69+
.form-title {
70+
font-family:var(--font-head);font-size:13px;color:white;
71+
letter-spacing:1px;margin-bottom:24px;
72+
}
73+
74+
.success-msg {
75+
display:none;text-align:center;padding:20px;
76+
}
77+
78+
.success-msg .s-icon { font-size:48px;display:block;margin-bottom:12px; }
79+
.success-msg h3 { font-family:var(--font-head);font-size:15px;color:var(--cyan);margin-bottom:8px; }
80+
.success-msg p { font-size:13px;color:var(--muted); }
81+
82+
@media(max-width:768px) {
83+
.page-hero { padding:48px 20px 36px; }
84+
.contact-grid { grid-template-columns:1fr;gap:36px; }
85+
.form-box { padding:22px 16px; }
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
91+
<nav class="navbar">
92+
<a href="index.html" class="nav-logo">
93+
<img src="logo.png" alt="FutureStack">
94+
<div class="nav-brand-text">FutureStack<span>Intelligence</span></div>
95+
</a>
96+
<ul class="nav-links">
97+
<li><a href="index.html">Home</a></li>
98+
<li><a href="services.html">Services</a></li>
99+
<li><a href="ebooks.html">Ebooks</a></li>
100+
<li><a href="courses.html">Courses</a></li>
101+
<li><a href="contact.html" class="nav-cta active">Work With Us</a></li>
102+
</ul>
103+
<div class="hamburger" id="ham"><span></span><span></span><span></span></div>
104+
</nav>
105+
106+
<div class="mobile-menu" id="mobileMenu">
107+
<a href="index.html">Home</a>
108+
<a href="services.html">Services</a>
109+
<a href="ebooks.html">Ebooks</a>
110+
<a href="courses.html">Courses</a>
111+
<a href="contact.html" class="m-cta active">Work With Us</a>
112+
</div>
113+
114+
<div class="page-wrap">
115+
<div class="page-hero">
116+
<div class="section-tag" style="justify-content:center;">Work With Us</div>
117+
<h1 class="section-title">Get In <span>Touch</span></h1>
118+
<p style="color:var(--muted);font-size:15px;max-width:480px;margin:0 auto;line-height:1.8;font-weight:300;">Ready to automate your business, secure your systems or collaborate? We respond within 24 hours.</p>
119+
</div>
120+
121+
<div class="container">
122+
<div class="contact-grid">
123+
124+
<div class="contact-info-box">
125+
<div class="info-title">Contact Information</div>
126+
127+
<div class="contact-item">
128+
<div class="c-icon">✉️</div>
129+
<div><div class="c-label">Email</div><div class="c-value"><a href="mailto:futurestackintelligence@outlook.com">futurestackintelligence@outlook.com</a></div></div>
130+
</div>
131+
132+
<div class="contact-item">
133+
<div class="c-icon">𝕏</div>
134+
<div><div class="c-label">X (Twitter)</div><div class="c-value"><a href="https://x.com/FUTURESTACK001" target="_blank">@FUTURESTACK001</a></div></div>
135+
</div>
136+
137+
<div class="contact-item">
138+
<div class="c-icon">in</div>
139+
<div><div class="c-label">LinkedIn</div><div class="c-value"><a href="https://www.linkedin.com/in/futurestackintelligence" target="_blank">FutureStack Intelligence</a></div></div>
140+
</div>
141+
142+
<div class="contact-item">
143+
<div class="c-icon">💬</div>
144+
<div><div class="c-label">Discord</div><div class="c-value" style="color:var(--muted);">Coming Soon</div></div>
145+
</div>
146+
147+
<div class="contact-item">
148+
<div class="c-icon">⚡</div>
149+
<div><div class="c-label">Response Time</div><div class="c-value">Within 24 hours</div></div>
150+
</div>
151+
152+
<div class="contact-item">
153+
<div class="c-icon">🌍</div>
154+
<div><div class="c-label">Payments Accepted</div><div class="c-value">USD · GBP · EUR · Crypto · Naira</div></div>
155+
</div>
156+
</div>
157+
158+
<div class="form-box">
159+
<div class="form-title">Send A Message</div>
160+
<div class="success-msg" id="formSuccess">
161+
<span class="s-icon">✅</span>
162+
<h3>Message Sent!</h3>
163+
<p>We'll get back to you within 24 hours.</p>
164+
</div>
165+
<form id="contactForm" action="https://formspree.io/f/xbdqnerv" method="POST" onsubmit="sendContact(event)">
166+
<div class="form-group"><label class="form-label">Your Name</label><input class="form-input" type="text" name="name" placeholder="John Smith" required /></div>
167+
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input" type="email" name="email" placeholder="john@example.com" required /></div>
168+
<div class="form-group">
169+
<label class="form-label">Service Interest</label>
170+
<select class="form-input" name="service">
171+
<option value="">Select a service...</option>
172+
<option>AI Workflow Automation</option>
173+
<option>Shopify Store Automation</option>
174+
<option>Cybersecurity Services</option>
175+
<option>AI Chatbot & Support Systems</option>
176+
<option>Cloud Computing & Cloud Security</option>
177+
<option>Data & Reporting Automation</option>
178+
<option>Ebook Purchase Enquiry</option>
179+
<option>Course & Certification Waitlist</option>
180+
<option>Other</option>
181+
</select>
182+
</div>
183+
<div class="form-group"><label class="form-label">Message</label><textarea class="form-input" name="message" placeholder="Tell us about your project, timeline, or what you need..." required></textarea></div>
184+
<button type="submit" class="btn-submit" id="contactBtn">Send Message →</button>
185+
</form>
186+
</div>
187+
188+
</div>
189+
</div>
190+
</div>
191+
192+
<footer class="footer">
193+
<div class="footer-inner">
194+
<div class="footer-brand"><img src="logo.png" alt="FutureStack"><div class="footer-brand-name">FutureStack Intelligence<span>© 2026 All Rights Reserved</span></div></div>
195+
<div class="footer-links">
196+
<a href="index.html">Home</a><a href="services.html">Services</a><a href="ebooks.html">Ebooks</a>
197+
<a href="courses.html">Courses</a><a href="contact.html">Contact</a>
198+
<a href="https://x.com/FUTURESTACK001" target="_blank">X / Twitter</a>
199+
<a href="https://www.linkedin.com/in/futurestackintelligence" target="_blank">LinkedIn</a>
200+
</div>
201+
<div class="footer-copy">Built with precision. Delivered globally.</div>
202+
</div>
203+
</footer>
204+
205+
<div class="bottom-nav">
206+
<div class="bottom-nav-inner">
207+
<a href="index.html" class="bnav-item"><span class="bnav-icon">🏠</span><span class="bnav-label">Home</span></a>
208+
<a href="services.html" class="bnav-item"><span class="bnav-icon">⚡</span><span class="bnav-label">Services</span></a>
209+
<a href="ebooks.html" class="bnav-item"><span class="bnav-icon">📚</span><span class="bnav-label">Ebooks</span></a>
210+
<a href="contact.html" class="bnav-item active"><span class="bnav-icon">✉️</span><span class="bnav-label">Contact</span></a>
211+
</div>
212+
</div>
213+
214+
<script src="shared.js"></script>
215+
<script>
216+
async function sendContact(e) {
217+
e.preventDefault();
218+
const form = e.target;
219+
const btn = document.getElementById('contactBtn');
220+
btn.textContent = 'Sending...';
221+
btn.disabled = true;
222+
try {
223+
const r = await fetch(form.action, {
224+
method:'POST',
225+
body:new FormData(form),
226+
headers:{'Accept':'application/json'}
227+
});
228+
if (r.ok) {
229+
form.style.display = 'none';
230+
document.getElementById('formSuccess').style.display = 'block';
231+
} else {
232+
btn.textContent = 'Failed — Try Again';
233+
btn.disabled = false;
234+
}
235+
} catch {
236+
btn.textContent = 'Failed — Try Again';
237+
btn.disabled = false;
238+
}
239+
}
240+
</script>
241+
</body>
242+
</html>

0 commit comments

Comments
 (0)