-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
300 lines (260 loc) · 11.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet'>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 200px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 5px;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #575757;
text-decoration: underline;
color:orange;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav a {
margin: 0 15px;
color: white;
text-decoration: none;
}
nav a:hover {
color: #ddd;
}
.container {
position: relative;
margin: 750px 0 0 200px;
width: 70%;
height: 450px;
display: flex;
justify-content: start;
margin-top: 500px;
}
.container img {
width: 600px;
height: 120%;
object-fit: cover;
border-radius: 10px;
border: 2px solid transparent;
transition: all ease-in-out 0.5s;
}
.container img:hover {
height: 140%;
width: 50%;
}
.foot{
width: 100%;
position: absolute;
bottom: 0;
height: 50px;;
}
.stars{background-color: black;color: whitesmoke;font-size:10px;margin-bottom:-100px;height:10px;}
.content{
height: 180px;
color: greenyellow;
opacity: 1s;
margin: auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #0a1d37;
color: white;
line-height: 1.6;
}
header {
text-align: center;
padding: 2em;
background-color: #1e3a56;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
header h1 {
font-size: 2.5em;
margin-bottom: 0.5em;
}
header p {
font-size: 1.2em;
color: #b0c4de;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1em;
padding: 2em;
margin: top 1500px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.caption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
width: 100%;
padding: 1em;
text-align: center;
font-size: 1.1em;
opacity: 0;
transition: opacity 0.5s ease;
}
.gallery-item:hover .caption {
opacity: 1;
}
footer {
text-align: center;
background-color: transparent;
margin-top: 0em;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.5);
}
footer p {
font-size: 0.9em;
color: #b0c4de;
}
.scrollable-div {
width:100% ;
height: 80vh;
overflow-y: auto;
border: 1px groove transparent;
padding: 10px;
margin-top:100px
}
.star{
margin-top: -30px;
}
.content li{font-style: oblique;color: beige;}
.content h1{color: blanchedalmond;text-align: center;}
.ll{font-family: 'Great Vibes';}
</style>
</head>
<body>
<div class="video-background">
<video autoplay loop muted playsinline id="myVideo">
<source src="earth.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<header class="header">
<div id="logo">
<a href="index.html">
<div>
<img src="image_folder/logo.png" width="140" height="100" alt="Logo">
</div>
</a>
</div>
<nav>
<a href="index.html">HOME</a>
<div class="dropdown">
<a href="#">CATEGORIES</a>
<div class="dropdown-content">
<a href="history.html">History of space Exploration</a>
<a href="history_universe.html">History of universe</a>
<a href="black-hole.html">Black hole</a>
<a href="Galaxy.html">Galaxy</a>
</div>
</div>
<a href="aboutus.html">ABOUT US</a>
<a href="contactus.html">CONTACT US</a>
<a href="login.html">LOG IN</a>
</nav>
</header>
<div class="scrollable-div">
<main class="gallery" style="margin-top: 600px;">
<div class="gallery-item">
<img src="image.png" alt="Nebula" style="height: 100%;">
<div class="caption">Stunning Nebula</div>
</div>
<div class="gallery-item">
<img src="image copy.png" alt="Galaxy" style="height: 100%;">
<div class="caption">Spiral Galaxy</div>
</div>
<div class="gallery-item">
<img src="image copy 2.png" alt="juipter" style="height: 100%;">
<div class="caption">juipter</div>
</div>
<div class="gallery-item">
<img src="image copy 3.png" alt="Moon" style="height: 100%;">
<div class="caption">Craters of the Moon</div>
</div>
<div class="gallery-item">
<img src="image copy 4.png" alt="Saturn" style="height: 100%;">
<div class="caption">Rings of Saturn</div>
</div>
<div class="gallery-item">
<img src="image copy 5.png" alt="Aurora" style="height: 100%;">
<div class="caption">Aurora Borealis</div>
</div>
<div class="gallery-item">
<img src="image_folder/dark ages 2.png" alt="Aurora" style="height: 100%;">
<div class="caption">Dark Ages</div>
</div>
<div class="gallery-item">
<img src="image_folder/cosmic evolution.png" alt="Aurora" style="height: 100%;">
<div class="caption">Cosmic Evaluation</div>
</div>
<div class="gallery-item">
<img src="image_folder/birth of solar system.png" alt="Aurora" style="height: 100%;">
<div class="caption">Birth of solar system</div>
</div>
<div class="gallery-item">
<img src="image_folder/hubble.png" alt="Aurora" style="height: 100%;">
<div class="caption">NASA"S Hublle Telescope</div>
</div>
</main>
<div class="container">
<div class="content">
<p class ="ll" style="font-size: 60px; color: whitesmoke; font-style: italic; text-shadow:10px 10px 10px rgb(74, 65, 65);">What We Do?💫</p>
<ul style="list-style-type: none; margin-top: 17px;">
<li ><h1>Prototype of Latest Space Missions</h1> Space missions are critical to the advancement of humanity's understanding of the universe. These missions involve exploring distant planets, moons, and asteroids through both robotic probes and manned missions. For example, NASA's Perseverance rover, which is currently exploring Mars, is searching for signs of ancient life and studying the planet's geology and climate. Meanwhile, missions to moons like Europa, one of Jupiter's moons, aim to study its icy surface and subsurface ocean, which could harbor life. Additionally, missions like the New Horizons probe, which visited Pluto, and the Voyager spacecraft, which are traveling into interstellar space, expand our knowledge of the outer reaches of the solar system and beyond. These space missions are also vital for paving the way for human exploration of distant worlds in the future, such as establishing colonies on the Moon and Mars. </li>
<li><h1> Space Research</h1> Research in space science and astrophysics is an ongoing effort to better understand the cosmos. The study of celestial objects such as stars, galaxies, black holes, and exoplanets is integral to answering some of humanity's most profound questions: How did the universe begin? What is dark matter? Are there other habitable worlds beyond Earth? Instruments like the Hubble Space Telescope and the upcoming James Webb Space Telescope provide insights into distant galaxies, while telescopes on Earth study the universe in various wavelengths of light. Planetary science research helps us understand the formation and evolution of planets, including Earth’s own history. Advances in space research not only fuel our knowledge about the universe but also help us develop technologies that improve life on Earth, such as innovations in materials science, medical technologies, and communication systems.</li>
<li><h1>Futuristic Technology Development</h1> Advancements in technology are fundamental to the success of space exploration. Innovations in propulsion, robotics, and spacecraft design have allowed us to reach farther into space and improve our ability to study celestial bodies. For example, the development of reusable rocket technology by companies like SpaceX has dramatically reduced the cost of space travel, making space missions more frequent and sustainable. Similarly, advancements in artificial intelligence (AI) and robotics have allowed for autonomous spacecraft, like the Mars rovers, to explore planets with minimal human intervention. Moreover, technologies such as 3D printing are being explored for use on other planets to create tools and structures, making long-term human habitation more feasible. In addition, developments in space habitat technology, like life-support systems and radiation protection, are essential for enabling humans to live and work in space for extended periods.</li>
<li><h1>Education & Outreach</h1> Education and outreach programs are crucial in fostering the next generation of scientists, engineers, and astronauts. These initiatives aim to engage people of all ages in the wonders of space science and technology. Organizations like NASA and ESA (European Space Agency) run educational programs, offer internships, and support STEM (Science, Technology, Engineering, and Mathematics) education through various outreach efforts. By reaching out to schools, universities, and the public through events, workshops, and digital content, these programs inspire curiosity and critical thinking. For example, NASA’s "Artemis Program," which aims to return humans to the Moon and beyond, engages students through interactive learning experiences. By encouraging young minds to explore space and pursue careers in science, these initiatives play a critical role in ensuring the continued advancement of space exploration for future generations.</li>
</ul>
</div>
</div>
</div>
<footer class="foot">
<div class="lastpart_x">WONDERS OF UNIVERSE</div>
<div class="stars">
₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊
</div>
</footer>
</body>
</html>