-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
397 lines (393 loc) · 21.7 KB
/
index.html
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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starlight</title>
<!-- Link to your custom CSS file -->
<link rel="stylesheet" href="css/style.css">
<!-- Link to Swiper CSS for sliders -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"/>
<!-- Link to Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Link to Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Link to Boxicons CSS for icons -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet"/>
</head>
<body>
<!-- Link to the website: https://tipzilla.github.io/index.html -->
<!-- GitHub Repository: https://github.com/Tipzilla/tipzilla.github.io/tree/main -->
<!-- This website has been thoroughly tested for compatibility on the latest versions of popular web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and mobile browsers like Chrome for Android and Safari for iOS. -->
<!----- header ----->
<header class="header">
<!-- Header wrapper to contain logo, navigation, and menu icon -->
<div class="header-wrapper">
<!-- Logo with a link to the homepage -->
<div class="header-logo">
<a href="index.html"><img src="images/logo.png" width="125"></a>
</div>
<!-- Header text and navigation -->
<div class="header-text">
<!-- Navigation menu -->
<nav>
<ul id="MenuItems">
<!-- Menu items with links to different pages -->
<li><a href="index.html">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Menu icon for mobile navigation, triggers the 'menutoggle()' function -->
<img src="images/menu.png" class="header-menu-icon" onclick="menutoggle()">
</div>
</div>
<!-- Horizontal line as a separator -->
<hr>
</header>
<!----- index-1 ----->
<div class="index-1">
<!-- Container for content in the "index-1" section -->
<div class="index-1-container">
<!-- Main title -->
<h1 class="index-1-title">Starlight Space Journeys</h1>
<!-- Slogan or subtitle -->
<p class="index-1-slogan">"Embrace the Infinity: Your Journey to Starlight Awaits!"</p>
<!-- Button for pre-purchasing tickets, identified by its ID -->
<button id="index-1-btn" class="index-1-button">Pre-Purchase Tickets</button>
<!-- Image for this section with a specified height -->
<img class="index-1-image" src="images/image-1.jpg" height="800">
</div>
</div>
<!----- trusted brands ----->
<div class="brands">
<!-- Container for content in the "brands" section -->
<div class="brands-container">
<!-- Title indicating "Trusted by" -->
<h2 class="brands-title">Trusted by</h2>
<!-- Brand logos in separate columns -->
<div class="brands-col">
<!-- Link to PayPal's website with its logo -->
<a href="https://www.paypal.com/"><img src="images/logo-paypal.png"></a>
</div>
<div class="brands-col">
<!-- Link to NASA's website with its logo, specifying height -->
<a href="https://www.nasa.gov/"><img src="images/logo-nasa.png" height="50"></a>
</div>
<div class="brands-col">
<!-- Link to LEGO's website with its logo -->
<a href="https://www.lego.com/"><img src="images/logo-lego.png"></a>
</div>
<div class="brands-col">
<!-- Link to Coca-Cola's website with its logo -->
<a href="https://www.coke.co.nz/"><img src="images/logo-coca-cola.png"></a>
</div>
<div class="brands-col">
<!-- Link to Philips' website with its logo -->
<a href="https://www.philips.com/"><img src="images/logo-philips.png"></a>
</div>
</div>
</div>
<!----- index-2 ----->
<div class="index-2">
<!-- Container for the "index-2" section -->
<div class="index-2-container">
<!-- First product row: SpaceGuard -->
<div class="index-2-row">
<!-- Column for displaying product image -->
<div class="index-2-col-img">
<img src="images/product-1.png" height="500">
</div>
<!-- Column for displaying product information -->
<div class="index-2-col">
<!-- Product title -->
<h1>SpaceGuard™</h1>
<!-- Product description -->
<small>
The pinnacle of astronaut safety and exploration technology. Designed to withstand the harshest cosmic conditions, this sleek and ergonomic helmet offers an unmatched fusion of form and function. With its reinforced impact-resistant visor, advanced life support systems, and intuitive heads-up display, SpaceGuard™ ensures that every astronaut remains not just protected, but fully connected to mission-critical data while venturing into the uncharted realms of space. Discover a new dimension of confidence as you embark on celestial journeys with the assurance of uncompromised safety and visionary engineering that define our SpaceGuard™ Helmet.
</small>
<br>
<!-- Button to navigate to the store -->
<a href="store.html" class="index-2-btn">Buy Now →</a>
</div>
</div>
</div>
<!-- Second product row: VoyagerEx -->
<div class="index-2-container">
<div class="index-2-row">
<div class="index-2-col-img">
<img src="images/product-2.png" height="500">
</div>
<div class="index-2-col">
<h1>VoyagerEx™</h1>
<small>
A marvel of modern engineering crafted for the most demanding extraterrestrial endeavors. Meticulously designed with lightweight yet highly durable materials, the VoyagerEx™ suit provides exceptional mobility without sacrificing protection. Its advanced thermal regulation system guarantees comfort in the extreme temperatures of space, while the integrated communication gear ensures seamless contact with mission control and fellow astronauts. With reinforced joints and a sleek, customizable design, the VoyagerExTM Space Suit empowers explorers to venture beyond Earth's confines, pushing the boundaries of human potential in the cosmos.
</small>
<br>
<a href="store.html" class="index-2-btn">Buy Now →</a>
</div>
</div>
</div>
<!-- Third product row: StellarStride -->
<div class="index-2-container">
<div class="index-2-row">
<div class="index-2-col-img">
<img src="images/product-3.png" height="500">
</div>
<div class="index-2-col">
<h1>StellarStride™</h1>
<small>
The ultimate fusion of comfort, performance, and reliability for celestial explorers. Engineered with cutting-edge materials, these boots offer unparalleled grip and stability on alien terrains, ensuring secure footing in microgravity and varied planetary landscapes. The innovative anti-fatigue sole technology minimizes strain during extended spacewalks, while the reinforced toe and heel protection safeguard against impacts and sharp surfaces. StellarStrideTM Space Boots also feature an integrated magnetic clasp system for easy donning and doffing in zero-gravity environments. Elevate your spacewalk experience with the confidence of superior traction and support, making each step a giant leap into the unknown.
</small>
<br>
<a href="store.html" class="index-2-btn">Buy Now →</a>
</div>
</div>
</div>
<!-- Fourth product row: AeroJet XE-1 -->
<div class="index-2-container">
<div class="index-2-row">
<div class="index-2-col-img">
<img src="images/product-4.png" height="500">
</div>
<div class="index-2-col">
<h1>AeroJet XE-1™</h1>
<small>
The pinnacle of personal propulsion technology. The AeroJet XE-1™ jetpack redefines human mobility, offering an unparalleled blend of power, control, and innovation. Designed for both urban commuting and adventurous exploration, its compact and ergonomic design belies its impressive thrust capability, enabling swift, vertical takeoffs and precise aerial maneuvers. With a cutting-edge fuel efficiency system and intuitive controls, AeroJet XE-1™ ensures both novices and experts can enjoy the thrill of flight while maintaining the highest safety standards. Whether navigating through cityscapes or soaring above natural landscapes, AeroJet XE-1™ offers the freedom to transcend boundaries and experience the world from an entirely new perspective.
</small>
<br>
<a href="store.html" class="index-2-btn">Buy Now →</a>
</div>
</div>
</div>
</div>
<!----- testimonials ----->
<section class="test-container">
<!-- Testimonial container with swiper -->
<div class="testimonial mySwiper">
<!-- Testimonial content wrapper -->
<div class="testi-content swiper-wrapper">
<!-- Testimonial slide 1 -->
<div class="slide swiper-slide">
<!-- Testimonial author image -->
<img src="images/profile-1.png" alt="" class="image"/>
<!-- Testimonial text -->
<p>Scored some sharp starship decals and a killer blaster holster from this site. Impressed by the quick delivery and top-notch quality. They even tossed in a Wookiee-sized bag of space jerky as a bonus. If it's got my seal of approval, you're good to go.</p>
<!-- Quotation icon -->
<i class="bx bxs-quote-alt-left quote-icon"></i>
<!-- Testimonial author details -->
<div class="details">
<span class="name">Han Solo</span>
<span class="job">Smuggler</span>
</div>
</div>
<!-- Testimonial slide 2 -->
<div class="slide swiper-slide">
<img src="images/profile-2.png" alt="" class="image"/>
<p>Mesa ordered some gungan tech doodads, and boy oh boy, theysa delivered big time. The podracer engine stabilizer? Utter perfection! And the underwater breathing apparatus? Muy muy useful! If yousa need gungan gear, thissa website is where yousa wanna go. Mesa lovin' it!</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Jar-Jar Binks</span>
<span class="job">Gungan Military Commander</span>
</div>
</div>
<!-- Testimonial slide 3 -->
<div class="slide swiper-slide">
<img src="images/profile-3.png" alt="" class="image"/>
<p>Having acquired lightsaber components and a Jedi robe from this website, I'm impressed by their quality and authenticity. In a realm with limited reliable sources, this platform stands out for its craftsmanship and prompt service. May the Force be with those who choose this site for their Jedi gear needs.</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Obi-Wan Kenobi</span>
<span class="job">Jedi Master</span>
</div>
</div>
<!-- Testimonial slide 4 -->
<div class="slide swiper-slide">
<img src="images/profile-4.png" alt="" class="image"/>
<p>Beep beep, whirr!</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">R2-D2</span>
<span class="job">Astromech Droid</span>
</div>
</div>
<!-- Testimonial slide 5 -->
<div class="slide swiper-slide">
<img src="images/profile-5.png" alt="" class="image"/>
<p>I recently scored some awesome pilot gear from this website. The flight helmet fits like a dream and the blaster holster is on point. The rebel insignia patches I got add that extra touch of camaraderie. If you're taking to the skies like me, this site's a must-visit. May the Force be with you out there!</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Luke Skywalker</span>
<span class="job">Rebel Pilot</span>
</div>
</div>
<!-- Testimonial slide 6 -->
<div class="slide swiper-slide">
<img src="images/profile-6.png" alt="" class="image"/>
<p>The diplomatic gown I received is elegant and regal, perfect for representing the Rebel Alliance. The blaster holster is practical and stylish, ready for action. And the hair accessories? They capture that iconic Alderaanian look. For fellow leaders and rebels, this site offers quality gear to match the mission. Stay strong, and may hope guide you.</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Leia Organa</span>
<span class="job">Leader of the Rebel Alliance</span>
</div>
</div>
</div>
<!-- Navigation buttons for testimonial slider -->
<div class="swiper-button-next nav-btn"></div>
<div class="swiper-button-prev nav-btn"></div>
<!-- Pagination for testimonial slider -->
<div class="swiper-pagination"></div>
</div>
</section>
<!----- index-3 ----->
<section id="index-3" class="index-3">
<!-- Container for the pricing section -->
<div class="index-3-container">
<!-- Pricing section title -->
<h2 class="index-3-title">Pricing</h2>
<!-- Pricing section subtitle -->
<p class="index-3-subtitle">Select your plan below!</p>
<!-- Toggle buttons for plan selection -->
<div class="toggle-button">
<button id="one-off-btn" class="option-button active">One-Off</button>
<button id="plan-btn" class="option-button">Plan</button>
</div>
<!-- Ticket options container -->
<div class="ticket-column">
<!-- Economy Ticket -->
<div class="ticket" id="economy-ticket">
<h2>Economy</h2>
<p class="text-mini">Suborbital adventure, safety training, memorable photo.</p>
<p class="price">
<span class="price-value">$500</span>
<span class="text-plan">/one-time payment</span>
</p>
<hr>
<br>
<!-- Features of the Economy Ticket -->
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Suborbital Flight: Experience weightlessness and see Earth from the edge of space.</span>
<br>
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Commemorative Photo: Capture the moment with a professional space-themed photo.</span>
<br>
<i class="fa fa-times cross-icon" aria-hidden="true"></i>
<span class="text-features">Personalized Meals: Customized meals based on preferences.</span>
<br>
<i class="fa fa-times cross-icon" aria-hidden="true"></i>
<span class="text-features">Access to Launch Facility: Tour the launch site and witness the rocket preparation.</span>
<hr>
<!-- Pre-Purchase button with popup -->
<div class="popup-container">
<a class="ticket-column-button" onclick="togglePopup(this)">Pre-Purchase</a>
<span class="popuptext">Coming Soon!</span>
</div>
</div>
<!-- Business Ticket -->
<div class="ticket" id="business-ticket">
<!-- Ticket header with a "Hot!" label -->
<div class="ticket-header">
<h2>Business</h2>
<span class="ticket-hot-label">Hot!</span>
</div>
<p class="text-mini">Extended voyage, custom meals, priority assistance.</p>
<p class="price">
<span class="price-value">$750</span>
<span class="text-plan">/one-time payment</span>
</p>
<hr>
<br>
<!-- Features of the Business Ticket -->
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Suborbital Flight: Experience weightlessness and see Earth from the edge of space.</span>
<br>
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Commemorative Photo: Capture the moment with a professional space-themed photo.</span>
<br>
<i class="fa fa-check-square-o tick-icon" aria-hidden="true"></i>
<span class="text-features">Personalized Meals: Customized meals based on preferences.</span>
<br>
<i class="fa fa-times cross-icon" aria-hidden="true"></i>
<span class="text-features">Access to Launch Facility: Tour the launch site and witness the rocket preparation.</span>
<hr>
<!-- Pre-Purchase button with popup -->
<div class="popup-container">
<a class="ticket-column-button" onclick="togglePopup(this)">Pre-Purchase</a>
<span class="popuptext">Coming Soon!</span>
</div>
</div>
<!-- VIP Ticket -->
<div class="ticket" id="vip-ticket">
<h2>VIP</h2>
<p class="text-mini">Ultimate journey with extended flight, facility tour, and more.</p>
<p class="price">
<span class="price-value">$1200</span>
<span class="text-plan">/one-time payment</span>
</p>
<hr>
<br>
<!-- Features of the VIP Ticket -->
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Suborbital Flight: Experience weightlessness and see Earth from the edge of space.</span>
<br>
<i class="fa fa-check-square-o tick-icon"></i>
<span class="text-features">Commemorative Photo: Capture the moment with a professional space-themed photo.</span>
<br>
<i class="fa fa-check-square-o tick-icon" aria-hidden="true"></i>
<span class="text-features">Personalized Meals: Customized meals based on preferences.</span>
<br>
<i class="fa fa-check-square-o tick-icon" aria-hidden="true"></i>
<span class="text-features">Access to Launch Facility: Tour the launch site and witness the rocket preparation.</span>
<hr>
<!-- Pre-Purchase button with popup -->
<div class="popup-container">
<a class="ticket-column-button" onclick="togglePopup(this)">Pre-Purchase</a>
<span class="popuptext">Coming Soon!</span>
</div>
</div>
</div>
</div>
</section>
<!----- footer ----->
<div class="footer">
<div class="container">
<!-- Footer content container -->
<div class="footer-content">
<!-- Logo -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="125"></a>
</div>
<!-- Navigation links -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Social media links using Font Awesome -->
<div class="social-media">
<a href="https://www.facebook.com/your-facebook-page" target="_blank">
<i class="fab fa-facebook"></i> <!-- Facebook icon -->
</a>
<a href="https://www.instagram.com/your-instagram-page" target="_blank">
<i class="fab fa-instagram"></i> <!-- Instagram icon -->
</a>
<a href="https://www.twitter.com/your-twitter-page" target="_blank">
<i class="fab fa-twitter"></i> <!-- Twitter icon -->
</a>
</div>
</div>
<!-- Horizontal line separator -->
<hr>
<!-- Copyright notice -->
<p class="copyright">© Copyright <span id="copyright-year"></span> - Starlight, Inc. All rights reserved.</p>
</div>
</div>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
<!-- JavaScript -->
<script src="js/script.js"></script>
</body>
</html>