-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathTheObservableUniverse.html
225 lines (189 loc) · 6.8 KB
/
TheObservableUniverse.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Observable Universe</title>
<style>
body,
header,
section,
footer {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f0f0f0;
}
header {
background-color: #35495e;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
margin-left: 0.6%;
margin-right: 0.6%;
text-align: center;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1,
h2,
h3 {
margin: 0;
}
h1 {
font-weight: bold;
font-size: 2.8rem;
color: #fff;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
h2 {
font-weight: bold;
font-size: 1.8rem;
margin-top: 2rem;
color: #333;
}
h3 {
font-weight: lighter;
font-size: 1.5rem;
margin-top: 1.5rem;
color: #666;
}
p {
margin-bottom: 1.5rem;
color: #2d3748;
}
section {
background-color: #fff;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
margin-left: 1.5%;
margin-right: 1.5%;
}
section.visible {
opacity: 1;
visibility: visible;
}
section.hidden {
opacity: 0;
visibility: hidden;
}
section:hover {
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 2rem;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
text-align: center;
color: #fff;
background-color: #333;
}
footer p {
margin-bottom: 0px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 0.5rem;
}
ul li a {
color: #0088cc;
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.2rem;
}
section {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<header>
<h1>Dark Matter & Dark Energy</h1>
</header>
<section id="observable-universe" class="fade-in-out">
<h2>Observable Universe</h2>
<p>The observable universe is the part of the universe that we can see or detect from Earth or its space-based devices. It is a ball-shaped region of space that has a radius of about 13.8 billion light-years, the time it took for the electromagnetic radiation from the farthest objects to reach us. It contains at least 2 trillion galaxies, but it may not represent the whole universe, which could be infinite. </p>
</section>
<section id="Observable-vs-Whole-Universe" class="fade-in-out">
<h2>Observable Universe VS Whole Universe</h2>
<p>The observable universe is different from the whole universe, which is the entire cosmic system of matter and energy that exists. The whole universe could be much larger than the observable universe, or even infinite in size. However, we cannot observe anything beyond the observable universe, because the light or other signals from those regions have not had enough time to reach us since the beginning of the cosmological expansion. </p>
</section>
<section id="Observable-vs-Visible-Universe" class="fade-in-out">
<h2>Observable Universe VS Visible Universe</h2>
<p>The observable universe is also different from the visible universe, which is the part of the universe that we can see in visible light. The visible universe is smaller than the observable universe, because some regions of space are too far away for their visible light to reach us. However, we can detect other types of radiation from those regions, such as radio waves or microwaves. For example, the cosmic microwave background radiation (CMBR) is the oldest light in the universe, emitted about 380,000 years after the Big Bang, when the universe became transparent to photons. The CMBR fills the entire observable universe, but it is not visible to our eyes.</p>
</section>
<section id="significance-limitations" class="fade-in-out">
<h2>Significance and Limitations</h2>
<p>Studying the observable universe is of great importance to astronomers and cosmologists. By exploring its structure, composition, history, and evolution, scientists gain insights into the fundamental nature of the universe and its origins. Observations within the observable universe allow us to test and refine our theories and models related to the laws of physics and the behavior of matter and energy.</p>
<p>However, it is crucial to acknowledge the limitations of observing the observable universe. We are confined to a region centered around our location, and there are regions beyond our observational reach. The true extent and properties of the entire universe remain unknown, and we can only speculate about what lies beyond our observable horizon.</p>
</section>
<footer>
<p style="line-height: 0.8;">.</p>
<p style="color: #ddd; line-height: 0.8;">References:</p>
<ul>
<li><a href="https://science.nasa.gov/observable-universe">Observable Universe NASA</a></li>
<li><a href="https://en.wikipedia.org/wiki/Observable_universe">Observable Universe Wikipedia</a></li>
<li><a href="https://www.britannica.com/topic/observable-universe">Observable Universe Britannica</a></li>
</ul>
<p style="line-height: 0.8;">.</p>
<p style="color: #ddd; line-height: 0.4;">Designed and developed by:
Dev Kothari</p>
<p style="color: #ddd;line-height: 1;">Page Created on: 13th July
2023</p>
<p style="line-height: 1;">.</p>
</footer>
<script>
window.addEventListener('DOMContentLoaded', createObserver);
function createObserver() {
var fadeElements = document.querySelectorAll('.fade-in-out');
var threshold = 0.2;
var observer = new IntersectionObserver(handleFadeAnimation, {
threshold: threshold
});
fadeElements.forEach(function (element) {
observer.observe(element);
});
}
function handleFadeAnimation(entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting && !entry.target.classList.contains('visible')) {
entry.target.classList.add('visible');
}
else if (entry.target.classList.contains('visible')) {
entry.target.classList.remove('visible');
}
});
}
window.addEventListener('DOMContentLoaded', InitialEffectsLoaded);
function InitialEffectsLoaded() {
document.body.style.transition = 'none';
document.body.style.filter = 'blur(12px)';
}
window.addEventListener('load', PageBlurInTransition);
function PageBlurInTransition() {
document.body.style.transition = 'filter 0.4s ease-out';
document.body.style.filter = 'blur(0px)';
}
</script>
</body>
</html>