forked from cryptocat8/Code-Alchemists-IEI
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (181 loc) · 8.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orion Trail Tours</title>
<link rel="stylesheet" href="styles.css">
<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=Poppins:ital@1&family=Space+Mono&display=swap" rel="stylesheet">
<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=Quicksand&display=swap" rel="stylesheet">
</head>
<body>
<div class="main__container">
<div class="stars" id="stars-container"></div>
<!-- <div class="nav-bar">
<img src="logo.png" alt="" class="page-logo">
<ul>
<a href="#super-section"><li>About</li></a>
<a href="#feedback-cust"><li>Feedbacks</li></a>
<a href="#tour-section"><li>Tour Packages</li></a>
<a href="./sign-in.html"><li>Sign In</li></a>
</ul>
</div> -->
<nav>
<img src="/Code-Alchemists-IEI/logo.png" class="page-logo" alt="">
<ul>
<li>
<a href="#super-section">About</a>
</li>
<li>
<a href="#feedback-cust">Feedback</a>
</li>
<li>
<a href="#tour-section">Packages</a>
</li>
<li>
<a href="./sign-in.html">SignIn</a>
</li>
</ul>
</nav>
<div class="super-section" id="super-section">
Orion Trail Tours
</div>
<div class="section-1 body-section">
<h2>Space-Themed Experiences</h2>
<span></span>
<div>
Our company stands out for crafting immersive and thematic travel experiences centered around space exploration. From moon bases to interstellar observatories, every itinerary is carefully designed to offer customers a journey beyond Earth.
</div>
</div>
<div class="section-2 body-section">
<h2>Innovative Packages</h2>
<span></span>
<div>
The company's offerings go beyond conventional travel packages. With a focus on innovation, Orion Trail Tours presents travel options that are not only adventurous but also reflect the imagination and curiosity associated with space exploration.
</div>
</div>
<div class="section-3 body-section">
<h2>Environmental Responsibility</h2>
<span></span>
<div>
Orion Trail Tours takes pride in its commitment to responsible and sustainable space tourism. The company strives to minimize its ecological footprint, emphasizing eco-friendly practices and environmental stewardship in the pursuit of space exploration. </div>
</div>
</div>
<div class="section-4 body-section">
<h2>Educational Enrichment</h2>
<span></span>
<div>
Orion Trail Tours is committed to providing educational value to its customers. Guided tours, interactive sessions, and expert-led experiences aim to enhance the understanding of space science, astronomy, and the broader realm of celestial wonders.
</div>
</div>
<div class="feedback-cust" id="feedback-cust">
<h1>Feedback from customers</h1>
</div>
<div class="feedbacks">
<table>
<tr><td class="table-header">“Educational Enrichment”</td></tr>
<td>Orion Trail Tours is committed to providing educational value to its customers. Guided tours, interactive sessions, and expert-led experiences aim to enhance the understanding of space science, astronomy, and the broader realm of celestial wonders.</td>
</table>
<table>
<tr><td class="table-header">"Educational and Exciting!"</td></tr>
<td>The educational aspects of the tour were a highlight for us. The guided tours and informative sessions provided a deeper understanding of space science. The mix of education and excitement made this trip truly special. Kudos to the team at Orion Trail Tours!</td>
</table>
<table>
<tr><td class="table-header">"A Stellar Vacation!"</td></tr>
<td>Our family vacation with Orion Trail Tours surpassed all expectations. From the luxurious space-themed accommodations to the breathtaking views of distant planets, every moment was magical. It was a stellar escape that we'll cherish forever.</td>
</table>
<table class="table-part1">
<tr><td class="table-header">"Incredible Space Cuisine!"</td></tr>
<td>The gastronomic journey was out of this world! The fusion of Earthly and space-inspired cuisine was a delightful surprise. Dining on the surface of Titan with Saturn in the backdrop was an experience we never imagined possible. Bravo to the culinary team!</td>
</table>
<table class="table-part1">
<tr><td class="table-header">"Smooth Operations and Professionalism"</td></tr>
<td>From the moment we booked our trip until our safe return, Orion Trail Tours exhibited exceptional professionalism. The logistics were seamless, and the entire team ensured our safety and comfort throughout. We felt in good hands, allowing us to fully enjoy the adventure.</td>
</table>
</div>
<div class="tour-section" id="tour-section"><h1>Tour Packages</h1></div>
<div class="grid-container">
<div class="package">
<h2>Celestial Explorer Package</h2>
<h3>Duration: 7 days and 6 nights</h3>
<ul>
<li>Moon Base</li>
<li>Alpha Mars Colonies</li>
<li>Saturn's Rings Observation Station</li>
</ul>
<div class="highlights">
<h3>Highlights:</h3>
<ul>
<li>Guided tour of Moon Base Alpha with an astronaut-led excursion.</li>
<li>Martian cuisine tasting in the Mars Colonies.</li>
<li>Stargazing and educational sessions at the Saturn's Rings Observation Station.</li>
<li>Exclusive access to space-themed events and activities.</li>
</ul>
</div>
</div>
<div class="package">
<h2>Galactic Adventure Getaway</h2>
<h3>Duration: 10 days and 9 nights</h3>
<ul>
<li>Venus Floating Cities</li>
<li>Jupiter's Moon Europa Research Station</li>
<li>Interstellar Observatory on Alpha Centauri</li>
</ul>
<div class="highlights">
<h3>Highlights:</h3>
<ul>
<li>Floating city exploration and cloud-surfing on Venus.</li>
<li>Research and interactive experiences at Europa Research Station.</li>
<li>Journey to the stars with a visit to the Interstellar Observatory on Alpha Centauri.</li>
<li>Spacewalk experience for an up-close view of the cosmos.</li>
</ul>
</div>
</div>
<div class="package">
<h2>Interplanetary Honeymoon Escape</h2>
<h3>Duration: 14 days and 13 nights</h3>
<ul>
<li>Romantic Moonlit Cruise around Earth</li>
<li>Luxury Accommodation on Ganymede, Jupiter's Moon</li>
<li>Intimate Dinner on the Surface of Titan, Saturn's Moon</li>
</ul>
<div class="highlights">
<h3>Highlights:</h3>
<ul>
<li>Private moonlit cruise with panoramic views of Earth.</li>
<li>Exclusive stay in a luxury habitat on Ganymede.</li>
<li>Gourmet dinner on the surface of Titan with breathtaking views of Saturn.</li>
<li>Couple's stargazing experience with a personal astronomer.</li>
</ul>
</div>
</div>
</div>
<footer>
<p>Created by Code Alchemists</p>
<p>© 2023, All Rights Reserved</p>
<p>IEI: Web Wizards</p>
</footer>
</div>
<script>
// Number of stars you want on the screen
const numStars = 100;
// Function to generate random number within a range
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Create stars and add them to the container
const starsContainer = document.getElementById('stars-container');
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.top = `${getRandomInt(0, 100)}vh`;
star.style.left = `${getRandomInt(0, 100)}vw`;
starsContainer.appendChild(star);
}
</script>
</body>
</html>