-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
292 lines (292 loc) · 14.2 KB
/
about.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
<!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>
<!----- 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>
<!----- about-1 ----->
<div class="about-1">
<!-- Container for About Us content -->
<div class="about-1-container">
<!-- Title -->
<h1 class="about-1-title">About Us</h1>
<!-- Subtitle or description -->
<p class="about-1-subtitle">At Starlight, we are a visionary team dedicated to pushing the boundaries of exploration and technology.</p>
<!-- Image -->
<img class="about-1-image" src="images/image-3.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>
<!----- about-2 ----->
<div class="about-2">
<!-- Row for Team Title -->
<div class="about-2-row about-2-row-2">
<!-- Team Title -->
<h1>Our Team</h1>
</div>
<!-- Row for Team Members -->
<div class="about-2-row">
<!-- Team Member 1 -->
<div class="about-2-col">
<!-- Image of Team Member 1 -->
<img src="images/employee-1.jpg">
<!-- Name of Team Member 1 -->
<h3>Alex Morrison</h3>
<!-- Role/Position of Team Member 1 -->
<h5>Chief Executive Officer (CEO)</h5>
<!-- Description/Bio of Team Member 1 -->
<small>Drawing on extensive experience in e-commerce and a genuine fascination for the cosmos, Alex drives our brand's mission to make space-themed products accessible to enthusiasts worldwide.</small>
<!-- Pronouns of Team Member 1 -->
<h5>She/Her</h5>
</div>
<!-- Team Member 2 -->
<div class="about-2-col">
<!-- Image of Team Member 2 -->
<img src="images/employee-2.jpg">
<!-- Name of Team Member 2 -->
<h3>Dr. Amelia Sterling</h3>
<!-- Role/Position of Team Member 2 -->
<h5>Chief Space Exploration Officer</h5>
<!-- Description/Bio of Team Member 2 -->
<small>With a background in astrophysics and aerospace engineering, she leads our team as the Chief Space Exploration Officer, driving the company's mission to bring the wonders of space closer to Earth.</small>
<!-- Pronouns of Team Member 2 -->
<h5>She/Her</h5>
</div>
<!-- Team Member 3 -->
<div class="about-2-col">
<!-- Image of Team Member 3 -->
<img src="images/employee-3.jpg">
<!-- Name of Team Member 3 -->
<h3>Maya Patel</h3>
<!-- Role/Position of Team Member 3 -->
<h5>Senior Space Systems Engineer</h5>
<!-- Description/Bio of Team Member 3 -->
<small>A pivotal role in designing cutting-edge products that cater to space enthusiasts' needs, her attention to detail ensures that each product aligns with the highest standards of quality.</small>
<!-- Pronouns of Team Member 3 -->
<h5>She/Her</h5>
</div>
<!-- Team Member 4 -->
<div class="about-2-col">
<!-- Image of Team Member 4 -->
<div class="store-2-image-container">
<img src="images/employee-4.jpg">
</div>
<!-- Name of Team Member 4 -->
<h3>Ryan Mitchel</h3>
<!-- Role/Position of Team Member 4 -->
<h5>Director of Order Fulfillment</h5>
<!-- Description/Bio of Team Member 4 -->
<small>From orchestrating inventory management to fine-tuning shipping logistics, Ryan's meticulous approach guarantees that orders are processed efficiently and delivered promptly.</small>
<!-- Pronouns of Team Member 4 -->
<h5>He/Him</h5>
</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>
<!----- about-3 ----->
<section class="about-3">
<div class="about-3-content">
<!-- Text Content -->
<div class="about-3-text">
<!-- Section Title -->
<h1>Let's Work Together!</h1>
<!-- Section Description -->
<p>Set out on an adventurous voyage of exploration and uncover a world of innovative products and services. Whether you're drawn to cutting-edge technology or cosmic escapades, our offerings cater to the passions of every space enthusiast.</p>
<!-- Popup Container for Sign Up Button -->
<div class="popup-container">
<!-- Sign Up Button -->
<a class="about-3-btn" onclick="togglePopup(this)">Sign Up</a>
<!-- Popup Text (Coming Soon) -->
<span class="popuptext">Coming Soon!</span>
</div>
</div>
<!-- Image -->
<img class="about-3-image" src="images/image-4.jpg" alt="Image">
</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>