-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
333 lines (321 loc) · 18.4 KB
/
index.html
File metadata and controls
333 lines (321 loc) · 18.4 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amped Projects</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="images/ampedlogo.jpg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
<style>
body { background: #f7f7fa; }
</style>
</head>
<body>
<div class="main-container">
<header>
<nav class="navbar glass-nav">
<div class="logo">
<img src="images/ampedlogo.jpg" alt="Amped Projects Logo">
<span>Amped Projects</span>
</div>
<button class="menu-toggle" aria-label="Open menu" style="display:none;background:none;border:none;cursor:pointer;padding:0 1rem;">
<span style="font-size:2rem;line-height:1;"><i class="fas fa-bars"></i></span>
</button>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home" class="hero">
<div class="hero-bg"></div>
<ul class="floating-shapes">
<li></li><li></li><li></li><li></li><li></li>
</ul>
<div class="hero-content center-content glass" data-aos="fade-up">
<h1><span class="gold-accent">Elevate</span> Your Online Presence</h1>
<p class="tagline"><em>Websites that captivate, convert, and inspire.</em></p>
<a href="#contact" class="cta-btn fancy-btn"><span>Get Your Free Quote</span> <i class="fa fa-arrow-right"></i></a>
<a href="catalog.html" class="cta-btn fancy-btn alt"><span>View Our Work</span> <i class="fa fa-star"></i></a>
<div class="hero-extra">
<p>Trusted by businesses, entrepreneurs, and creatives across South Africa.</p>
</div>
</div>
<div class="divider divider-bottom"></div>
</section>
<section id="services" class="services">
<h2 class="center-content section-title" data-aos="fade-up">Our Website Services</h2>
<div class="service-cards center-content">
<div class="card glass" data-aos="zoom-in" data-aos-delay="100">
<img src="images/customweb.webp" alt="Web Design">
<h3><i class="fa fa-paint-brush gold-accent"></i> Custom Web Design</h3>
<p>Modern, responsive designs tailored to your brand and audience.</p>
</div>
<div class="card glass" data-aos="zoom-in" data-aos-delay="200">
<img src="images/webdev.webp" alt="Development">
<h3><i class="fa fa-code gold-accent"></i> Website Development</h3>
<p>Fast, secure, and scalable websites built with the latest technologies.</p>
</div>
<div class="card glass" data-aos="zoom-in" data-aos-delay="300">
<img src="images/commerce.webp" alt="E-Commerce">
<h3><i class="fa fa-shopping-cart gold-accent"></i> E-Commerce Solutions</h3>
<p>Online stores with payment integration, inventory, and order management.</p>
</div>
<div class="card glass" data-aos="zoom-in" data-aos-delay="400">
<img src="images/seo.webp" alt="SEO">
<h3><i class="fa fa-chart-line gold-accent"></i> SEO & Optimization</h3>
<p>Boost your visibility and rankings with expert search engine optimization.</p>
</div>
<div class="card glass" data-aos="zoom-in" data-aos-delay="500">
<img src="images/maintenace.webp" alt="Maintenance">
<h3><i class="fa fa-shield-halved gold-accent"></i> Website Maintenance</h3>
<p>Ongoing support, updates, and security to keep your site running smoothly.</p>
</div>
<div class="card glass" data-aos="zoom-in" data-aos-delay="600">
<img src="images/branding.webp" alt="Branding and graphic design">
<h3><i class="fa fa-pen-nib gold-accent"></i> Branding & Graphics</h3>
<p>Logo, graphics, and visual identity design for a memorable online presence.</p>
</div>
</div>
<div class="divider"></div>
</section>
<section id="process" class="process">
<h2 class="center-content section-title" data-aos="fade-up">Our Process</h2>
<div class="process-steps center-content">
<div class="step-card glass" data-aos="fade-up" data-aos-delay="100">
<div class="step-icon"><i class="fa fa-comments gold-accent"></i></div>
<h3>1. Consultation</h3>
<p>We discuss your goals, requirements, and vision for your website.</p>
</div>
<div class="step-card glass" data-aos="fade-up" data-aos-delay="200">
<div class="step-icon"><i class="fa fa-pencil-ruler gold-accent"></i></div>
<h3>2. Planning & Design</h3>
<p>We create wireframes, mockups, and a project roadmap tailored to you.</p>
</div>
<div class="step-card glass" data-aos="fade-up" data-aos-delay="300">
<div class="step-icon"><i class="fa fa-laptop-code gold-accent"></i></div>
<h3>3. Development</h3>
<p>Our team builds your site using best practices for speed, security, and SEO.</p>
</div>
<div class="step-card glass" data-aos="fade-up" data-aos-delay="400">
<div class="step-icon"><i class="fa fa-rocket gold-accent"></i></div>
<h3>4. Review & Launch</h3>
<p>We test, refine, and launch your website, ensuring everything works perfectly.</p>
</div>
<div class="step-card glass" data-aos="fade-up" data-aos-delay="500">
<div class="step-icon"><i class="fa fa-handshake gold-accent"></i></div>
<h3>5. Support</h3>
<p>We offer ongoing maintenance, updates, and support as your business grows.</p>
</div>
</div>
<div class="divider"></div>
</section>
<section id="testimonials" class="testimonials">
<h2 class="center-content section-title" data-aos="fade-up">What Our Clients Say</h2>
<div class="testimonial-list center-content">
<div class="testimonial-card glass" data-aos="fade-right" data-aos-delay="100">
<div class="testimonial-avatar"><i class="fa fa-user-circle gold-accent"></i></div>
<blockquote>"Amped Projects delivered a stunning website for our business. The process was smooth and the results exceeded our expectations!"</blockquote>
<cite>- Sarah M., Small Business Owner</cite>
</div>
<div class="testimonial-card glass" data-aos="fade-right" data-aos-delay="200">
<div class="testimonial-avatar"><i class="fa fa-user-circle gold-accent"></i></div>
<blockquote>"Professional, creative, and reliable. Our online store is now thriving thanks to their expertise."</blockquote>
<cite>- Thabo K., Retailer</cite>
</div>
<div class="testimonial-card glass" data-aos="fade-right" data-aos-delay="300">
<div class="testimonial-avatar"><i class="fa fa-user-circle gold-accent"></i></div>
<blockquote>"They took care of everything from branding to launch. Highly recommended for anyone needing a website!"</blockquote>
<cite>- Lerato D., Entrepreneur</cite>
</div>
</div>
<div class="divider"></div>
</section>
<section id="faq" class="faq">
<h2 class="center-content section-title" data-aos="fade-up">Frequently Asked Questions</h2>
<div class="faq-list center-content">
<div class="faq-card glass" data-aos="fade-up" data-aos-delay="100">
<h3>How long does it take to build a website?</h3>
<p>Most projects take 2-4 weeks, depending on complexity and requirements.</p>
</div>
<div class="faq-card glass" data-aos="fade-up" data-aos-delay="200">
<h3>Can you redesign my existing website?</h3>
<p>Absolutely! We specialize in redesigns and upgrades for better performance and appearance.</p>
</div>
<div class="faq-card glass" data-aos="fade-up" data-aos-delay="300">
<h3>Do you provide hosting and domain registration?</h3>
<p>We can assist with hosting and domain setup, or work with your preferred provider.</p>
</div>
<div class="faq-card glass" data-aos="fade-up" data-aos-delay="400">
<h3>Will my website work on mobile devices?</h3>
<p>Yes, all our websites are fully responsive and optimized for mobile, tablet, and desktop.</p>
</div>
</div>
<div class="divider"></div>
</section>
<section id="about" class="about">
<h2 class="center-content section-title" data-aos="fade-up">About Amped Projects</h2>
<div class="about-content center-content">
<div class="glass" data-aos="fade-up">
<img src="images/ampedlogo.jpg" alt="Amped Projects Logo" onerror="this.onerror=null;this.src='assets/images/beautiful.jpg';" style="width:80px;height:80px;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin-bottom:1rem;">
<p style="color:#444;">Amped Projects is your partner for professional website development. Our team combines creativity, technical expertise, and business insight to deliver sites that help you succeed online.</p>
<ul style="margin-top:1rem;padding-left:1.2rem;color:#2196f3;">
<li style="margin-bottom:0.5rem;color:#2196f3;">Experienced web designers & developers</li>
<li style="margin-bottom:0.5rem;color:#2196f3;">Client-focused, results-driven approach</li>
<li style="margin-bottom:0.5rem;color:#2196f3;">Full support from concept to launch</li>
<li style="margin-bottom:0.5rem;color:#2196f3;">Based in South Africa, serving clients worldwide</li>
<li style="margin-bottom:0.5rem;color:#2196f3;">Transparent pricing and clear communication</li>
</ul>
</div>
</div>
<div class="divider"></div>
</section>
<section id="contact" class="contact">
<h2 class="center-content section-title" data-aos="fade-up">Contact Us</h2>
<form action="https://formspree.io/f/xyzppdeo" method="POST" class="contact-form center-content glass" data-aos="fade-up">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required autocomplete="name">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required autocomplete="email">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Tell us about your website project" required rows="5"></textarea>
<button type="submit" aria-label="Send Message" class="fancy-btn"><span>Send Message</span> <i class="fa fa-paper-plane"></i></button>
</form>
<div class="contact-info center-content glass" data-aos="fade-up">
<h3 style="margin-bottom:1rem;">Let's Connect</h3>
<div style="display:flex;flex-direction:column;align-items:center;gap:1rem;">
<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
<i class="fa fa-envelope gold-accent"></i>
<a href="mailto:ampedprojects5@gmail.com" style="font-weight:bold;color:#333;text-decoration:none;">ampedprojects5@gmail.com</a>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
<i class="fa fa-phone gold-accent"></i>
<a href="tel:+27716728782" style="font-weight:bold;color:#333;text-decoration:none;">+27 71 672 8782</a>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
<i class="fa fa-map-marker-alt gold-accent"></i>
<span style="font-weight:bold;color:#333;">Johannesburg, South Africa</span>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
<i class="fa fa-clock gold-accent"></i>
<span style="font-weight:bold;color:#333;">Mon-Fri 8:00-17:00</span>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;justify-content:center;">
<a href="https://wa.me/27716728782" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;text-decoration:none;color:#25D366;font-weight:bold;">
<i class="fab fa-whatsapp" style="font-size:1.3rem;margin-right:8px;"></i> Chat with us on WhatsApp
</a>
</div>
</div>
</div>
<div class="divider"></div>
</section>
<footer>
<div class="footer-content center-content glass-footer">
<div style="margin-bottom:1rem;">
<img src="images/ampedlogo.jpg" alt="Amped Projects Logo" style="width:60px;height:60px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);margin-bottom:0.5rem;">
</div>
<p style="font-size:1.1rem;font-weight:500;">© 2025 Amped Projects. Website development services. All rights reserved.</p>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="footer-social">
<a href="https://facebook.com/" target="_blank" rel="noopener" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/" target="_blank" rel="noopener" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com/" target="_blank" rel="noopener" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/27716728782" target="_blank" rel="noopener" aria-label="WhatsApp"><i class="fab fa-whatsapp"></i></a>
</div>
<p style="font-size:0.9rem;color:#bbb;margin-top:1.5rem;">Website designed & developed by Amped Projects.</p>
</div>
</footer>
<script src="script.js"></script>
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>
// AOS animation
AOS.init({ duration: 900, once: true });
// Dropdown menu functionality (robust and bug-free)
document.addEventListener('DOMContentLoaded', function() {
const menuBtn = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');
function toggleMenu() {
navLinks.classList.toggle('open');
if (navLinks.classList.contains('open')) {
navLinks.style.display = 'flex';
} else {
navLinks.style.display = '';
}
}
menuBtn.addEventListener('click', toggleMenu);
function checkWidth() {
if(window.innerWidth <= 700) {
menuBtn.style.display = 'block';
navLinks.style.display = navLinks.classList.contains('open') ? 'flex' : 'none';
navLinks.style.flexDirection = 'column';
navLinks.style.position = 'absolute';
navLinks.style.top = '60px';
navLinks.style.right = '10px';
navLinks.style.background = '#222';
navLinks.style.boxShadow = '0 2px 12px rgba(0,0,0,0.15)';
navLinks.style.borderRadius = '12px';
navLinks.style.zIndex = '1000';
navLinks.style.width = '180px';
navLinks.style.padding = '1rem 0';
navLinks.querySelectorAll('a').forEach(a => {
a.style.color = '#fff';
a.style.padding = '0.7rem 1rem';
a.style.textAlign = 'left';
});
} else {
menuBtn.style.display = 'none';
navLinks.style.display = 'flex';
navLinks.style.flexDirection = 'row';
navLinks.style.position = '';
navLinks.style.top = '';
navLinks.style.right = '';
navLinks.style.background = '';
navLinks.style.boxShadow = '';
navLinks.style.borderRadius = '';
navLinks.style.zIndex = '';
navLinks.style.width = '';
navLinks.style.padding = '';
navLinks.classList.remove('open');
navLinks.querySelectorAll('a').forEach(a => {
a.style.color = '';
a.style.padding = '';
a.style.textAlign = '';
});
}
}
window.addEventListener('resize', checkWidth);
checkWidth();
// Close menu on link click (mobile)
navLinks.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
if(window.innerWidth <= 700) {
navLinks.classList.remove('open');
navLinks.style.display = 'none';
}
});
});
});
</script>
</div>
</body>
</html>