-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathhistory_universe.html
193 lines (171 loc) · 7.42 KB
/
history_universe.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timeline of the Universe</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: url(https://images.unsplash.com/photo-1527467779599-34448b3fa6a7?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat center center fixed;
background-size: cover;
color: #fff;
line-height: 1.6;
}
header {
text-align: center;
padding: 20px 0;
background: rgba(0, 0, 0, 0.8);
border-bottom: 2px solid #ff4081;
}
header h1 {
font-size: 2.5rem;
color: #ff4081;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
header p {
font-size: 1.2rem;
color: #ddd;
max-width: 800px;
margin: 0 auto;
}
.section {
margin: 40px auto;
max-width: 900px;
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}
.section h2 {
color: #ff4081;
font-size: 2rem;
margin-bottom: 10px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.section p {
font-size: 1.2rem;
margin: 20px 0;
line-height: 1.8;
}
.section img {
width: 100%;
max-width: 800px;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.section img:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
}
iframe {
width: 100%;
height: 600px;
border: 0;
margin: 30px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
border-radius: 10px;
}
footer {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
color: #ddd;
font-size: 1rem;
border-top: 2px solid #ff4081;
}
footer a {
color: #ff4081;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Timeline of the Universe</h1>
<p>A journey through the incredible events that shaped our universe, from the Big Bang to the present day.</p>
</header>
<div class="section">
<h2>The Big Bang (13.8 Billion Years Ago)</h2>
<p>
The universe began as a singularity—a point of infinite density and temperature. The Big Bang marked the rapid expansion of space-time.
During the first seconds, the four fundamental forces—gravity, electromagnetism, and the strong and weak nuclear forces—emerged, setting the stage for everything we know today.
</p>
<img src="image_folder/image copy.png" alt="Big Bang">
</div>
<div class="section">
<h2>Formation of Atoms (380,000 Years After the Big Bang)</h2>
<p>
During the recombination era, electrons combined with protons and nuclei to form neutral atoms, primarily hydrogen and helium.
The universe cooled, allowing light to travel freely, creating the Cosmic Microwave Background (CMB), a snapshot of the early universe.
</p>
<img src="image_folder/formation of atoms.png" alt="Formation of Atoms">
</div>
<div class="section">
<h2>The Dark Ages (380,000 to 100 Million Years)</h2>
<p>
With no stars or galaxies, the universe entered a period of darkness filled with neutral hydrogen and dark matter.
Over time, gravitational forces created denser regions, laying the foundation for the first stars.
</p>
<img src="image_folder/image copy 2.png" alt="Dark Ages">
</div>
<div class="section">
<h2>Formation of Stars and Galaxies (100 Million to 1 Billion Years)</h2>
<p>
The first stars, known as Population III stars, formed. These massive stars lived short but powerful lives, synthesizing heavier elements in their cores.
Over time, stars grouped into galaxies, creating the vast cosmic structures we see today.
</p>
<img src="image_folder/formation of stars.png" alt="Formation of Stars">
</div>
<div class="section">
<iframe src="https://mapoftheuniverse.net/" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p>Explore the vast cosmos through this interactive map of the universe.</p>
</div>
<div class="section">
<h2>Cosmic Evolution (1 Billion to 10 Billion Years)</h2>
<p>
Galaxies evolved, with some forming supermassive black holes at their centers. These black holes emitted enormous amounts of energy as quasars.
Over billions of years, galaxies formed clusters and superclusters, shaping the universe's large-scale structure.
</p>
<img src="image_folder/cosmic evolution.png" alt="Cosmic Evolution">
</div>
<div class="section">
<h2>Birth of the Solar System (4.6 Billion Years Ago)</h2>
<p>
A cloud of gas and dust collapsed to form our Sun. Around it, a protoplanetary disk emerged, eventually giving birth to the planets, including Earth.
</p>
<img src="image_folder/birth of solar system.png" alt="Birth of the Solar System">
</div>
<div class="section">
<h2>Life on Earth (3.5 Billion Years Ago to Present)</h2>
<p>
Microbial life first appeared on Earth around 3.5 billion years ago. Through billions of years of evolution, life diversified into complex organisms, culminating in humans approximately 300,000 years ago.
</p>
<img src="image_folder/life on earth.png" alt="Life on Earth">
</div>
<div class="section">
<h2>Expansion and Dark Energy (Present Era)</h2>
<p>
The universe continues to expand, driven by the mysterious force of dark energy. The observable universe now contains billions of galaxies, each with countless stars and planets.
</p>
<img src="image_folder/dark ages 2.png" alt="Dark Energy">
</div>
<footer>
<p>Created with love for the wonders of the universe. Learn more on <a href="https://www.nasa.gov" target="_blank">NASA's website</a>.</p>
<footer class="foot" style="text-align: center;background-color: black; margin-top:20px; font-size: 20px; ">
<div class="lastpart_x">WONDERS OF UNIVERSE</div>
<div class="stars">
₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊₊‧.°.⋆✮⋆.°.‧₊
</div>
</footer>
</footer>
</body>
</html>