-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
272 lines (266 loc) · 16 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starlight Station</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white font-roboto">
<!-- Navigation Bar -->
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">Starlight Station</a>
<ul class="flex space-x-4">
<li><a href="#home" class="hover:text-gray-400">Home</a></li>
<li><a href="#research" class="hover:text-gray-400">Research</a></li>
<li><a href="#tourism" class="hover:text-gray-400">Tourism</a></li>
<li><a href="#gateway" class="hover:text-gray-400">Lunar/Mars Gateway</a></li>
<li><a href="#services" class="hover:text-gray-400">Services</a></li>
<li><a href="#contact" class="hover:text-gray-400">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative h-screen bg-cover bg-center" style="background-image: url('https://placehold.co/1920x1080');">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="container mx-auto h-full flex flex-col justify-center items-center text-center relative z-10">
<h1 class="text-5xl font-bold mb-4">Welcome to the Future of Space Exploration</h1>
<p class="text-xl mb-8">A modular, orbiting space station for astronomical research, space tourism, and lunar/Mars gateway.</p>
<a href="#research" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</a>
</div>
</section>
<!-- Research Section -->
<section id="research" class="py-16 bg-gray-800">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Astronomical Research</h2>
<p class="text-xl mb-8">Our space station is equipped with state-of-the-art laboratories and telescopes for cutting-edge astronomical research.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-microscope text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Advanced Labs</h3>
<p>Conduct experiments in microgravity with our advanced laboratory facilities.</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-telescope text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">High-Power Telescopes</h3>
<p>Observe distant galaxies and celestial phenomena with our high-power telescopes.</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-robot text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Robotic Assistants</h3>
<p>Utilize robotic assistants for complex tasks and experiments.</p>
</div>
</div>
</div>
</section>
<!-- Tourism Section -->
<section id="tourism" class="py-16 bg-gray-900">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Space Tourism</h2>
<p class="text-xl mb-8">Experience the thrill of space travel with our luxurious space tourism packages.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-rocket text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Space Flights</h3>
<p>Embark on a journey to the stars with our safe and comfortable space flights.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-hotel text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Luxury Accommodations</h3>
<p>Stay in our luxurious space hotels with stunning views of Earth and beyond.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-utensils text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Gourmet Dining</h3>
<p>Enjoy gourmet meals prepared by top chefs in our space restaurants.</p>
</div>
</div>
</div>
</section>
<!-- Lunar/Mars Gateway Section -->
<section id="gateway" class="py-16 bg-gray-800">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Lunar/Mars Gateway</h2>
<p class="text-xl mb-8">Our space station serves as a gateway for missions to the Moon and Mars.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-moon text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Lunar Missions</h3>
<p>Launch and support missions to the Moon from our space station.</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-mars text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Mars Missions</h3>
<p>Prepare for and embark on missions to Mars with our advanced facilities.</p>
</div>
<div class="bg-gray-700 p-6 rounded-lg">
<i class="fas fa-space-shuttle text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Spacecraft Docking</h3>
<p>Utilize our docking facilities for spacecraft heading to the Moon and Mars.</p>
</div>
</div>
</div>
</section>
<!-- Advanced Services Section -->
<section id="services" class="py-16 bg-gray-900">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Advanced Services</h2>
<p class="text-xl mb-8">Our space station offers a range of advanced services to support your space missions and experiences.</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-satellite text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Satellite Deployment</h3>
<p>Deploy and manage satellites with our state-of-the-art facilities.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-wifi text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">High-Speed Internet</h3>
<p>Stay connected with high-speed internet access throughout the space station.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-shield-alt text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Radiation Shielding</h3>
<p>Advanced radiation shielding to protect you from cosmic rays and solar radiation.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-heartbeat text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Medical Facilities</h3>
<p>Comprehensive medical facilities to ensure your health and safety in space.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-recycle text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Sustainable Living</h3>
<p>Eco-friendly systems for waste management and resource recycling.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-user-astronaut text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Astronaut Training</h3>
<p>Comprehensive training programs for aspiring astronauts.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-brain text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">AI Integration</h3>
<p>Advanced AI systems to assist with research, navigation, and daily operations.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-solar-panel text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Solar Power</h3>
<p>Utilize solar power for sustainable energy solutions.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-seedling text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Hydroponic Farming</h3>
<p>Grow fresh produce in space with our hydroponic farming systems.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-vr-cardboard text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Virtual Reality</h3>
<p>Experience immersive virtual reality environments for training and entertainment.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-dna text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Genetic Research</h3>
<p>Conduct advanced genetic research in our specialized labs.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-rocket-launch text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Rapid Launch Systems</h3>
<p>Utilize rapid launch systems for quick deployment of missions and supplies.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-space-station-moon-alt text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Space Habitat Modules</h3>
<p>Modular habitat units for long-term space living and research.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-atom text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Quantum Computing</h3>
<p>Leverage quantum computing for advanced data processing and simulations.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-biohazard text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Biosecurity Systems</h3>
<p>Advanced biosecurity measures to protect against extraterrestrial contaminants.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-thermometer-half text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Climate Control</h3>
<p>Maintain optimal living conditions with advanced climate control systems.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-satellite-dish text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Deep Space Communication</h3>
<p>Reliable communication systems for deep space missions.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-rocket text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Reusable Rockets</h3>
<p>Utilize reusable rockets for cost-effective space missions.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-battery-full text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Energy Storage</h3>
<p>Advanced energy storage systems to ensure a constant power supply.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-wind text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Atmospheric Control</h3>
<p>Maintain a stable and breathable atmosphere within the station.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-water text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Water Recycling</h3>
<p>Efficient water recycling systems to ensure a sustainable water supply.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-robot text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Autonomous Maintenance</h3>
<p>Robotic systems for autonomous maintenance and repairs.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-rocket text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Interstellar Travel</h3>
<p>Advanced propulsion systems for interstellar travel.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-meteor text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Asteroid Mining</h3>
<p>Technologies for mining resources from asteroids.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-robot text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Robotic Exploration</h3>
<p>Deploy robotic explorers for planetary and lunar missions.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-rocket text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Hypersonic Travel</h3>
<p>Experience hypersonic travel for rapid transportation.</p>
</div>
<div class="bg-gray-800 p-6 rounded-lg">
<i class="fas fa-robot text-4xl mb-4"></i>
<h3 class="text-2xl font-bold mb-2">Exoskeleton Suits</h3>
<p>Advanced exoskeleton suits for enhanced mobility and strength.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-gray-900">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-8">Contact Us</h2>
<p class="text-xl mb-8">Get in touch with us for more information about our space station and services.</p>
<form class="max-w-lg mx-auto">
<div class="mb-4">
<input type="text" placeholder="Name" class="w-full p-3 rounded bg-gray-800 text-white">
</div>
<div class="mb-4">
<input type="email" placeholder="Email" class="w-full p-3 rounded bg-gray-800 text-white">
</div>
<div class="mb-4">
<textarea placeholder="Message" class="w-full p-3 rounded bg-gray-800 text-white"></textarea>
</div>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Send Message</button>
</