-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathSUPERNOVA.html
187 lines (134 loc) · 5.48 KB
/
SUPERNOVA.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
<!DOCTYPE html>
<html>
<head>
<title>SUPERNOVA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="https://xp.io/storage/2OAx8lAO.png">
<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=Open+Sans&family=Titillium+Web:wght@200;300&display=swap" rel="stylesheet">
<!-- FOR HEADER -->
<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=Bakbak+One&display=swap" rel="stylesheet">
<style>
body{
background-image: url('https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png');
color :white ;}
.column {
float:left;
width:33.33%;
line-height:2rem;
text-align: center;
letter-spacing: 0.0100em;
font-family:"titillium web";
font-size: 22px;
}
.row:after {
content: "";
display: table;
clear: both;
}
a{
color: white;
font-size: 22px;
text-decoration: none;
margin-top: 15px;
}
@media screen and (max-width:600px) {
.column {
width:100%;
}
header { color: white ; }
#header_1{
background-color: black;
text-align: center;
width: 1017px;
height: 80px;
margin-top: -10px;
margin-right: 0px;
margin-left: -15px;
display: flex;
justify-content: space-around;
margin-bottom: -15px;
font-family: 'Bakbak One', cursive;
width: 100%;
}
h1{ text-align: center;
font-family:"titillium web";
text-decoration: underline;
;
}
#ANNIMATION{
width: 33.33%;
height: 98vh;
background-size: 100%;
background-repeat: no-repeat;
;
background-color: black;
position: relative;
animation-name: example;
animation-duration: 7s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-image: url(https://w0.peakpx.com/wallpaper/22/10/HD-wallpaper-beautiful-supernova-galaxy-explosion-colorful-nebulous-space-cosmos-life-thumbnail.jpg);}
50% {background-image: url(https://wallpaperaccess.com/full/232081.png);}
100% {background-image: url(https://wallpapercave.com/wp/wp3508770.jpg);}
</style>
</head>
<body>
<header>
<div id="header_1">
<img src="https://xp.io/storage/2OApv9xP.png">
<a href=""></a>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/FA2/homePAGE.html"> Home</a>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/merchandise.html"> Merchandise</a>
<a href=""> Contact </a>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/about-us.html">About us</a>
<a href=""></a>
</header>
<br>
<main>
<h1> <B>SUPERNOVA</B></h1>
<div class="row">
<div class="column" >Supernovae are naturally occurring thermonuclear explosions that happen when a massive star explodes. This phenomenon marks the death of stars. However, not all stars end their lives as supernovae and there are several types of this phenomenon. What makes the difference is the initial mass of a star and its chemical composition.
<BR>
<BR>
Facts about Supernovae:
<BR>
-Supernovae are the final explosive disruption of stars, and are more massive than our Sun.
<BR>-Supernovae are very bright and they emit more energy at the peak of the explosion than a whole galaxy, like the Milky Way, with 100 million stars typically emits. A supernova emits the same energy in a few months that our Sun will emit in its entire life!
<BR>-Because supernovae are bright they can be observed from vast distances, across the known Universe. Therefore, if astronomers can confirm the precise type of a supernova, they can use it to measure the distance to its host galaxy. This is why certain types of supernovae are referred to as standard candles.
</div>
<div class="column" id="ANNIMATION"></div>
<div class="column">How are Supernovae Formed?
<BR>
<BR>
It is a common misbelief that stars are simple hot glowing spheres of gas. In fact, stars have complex structures and at least we should split them to a core and an envelope that is surrounding the core. The properties of these two are very different and to understand supernovae we need to consider the core.
<BR>
In lower mass stars following the end of a burning stage the core starts contracting, and consequently its density increases. When the core is dense enough electrons are forced to fill certain orbitals, or states. We know from chemistry that only a certain number of electrons can occupy certain states, this is called the Pauli exclusion principle. As the core contracts and the density increases electrons are forced to occupy higher states, which requires more energy. This adds another pressure in addition to gas and radiative pressure, which together are enough to stop the core from contracting even if there is no burning in the core.
<br>
<BR>
</div>
</main>
<div style="background-color: black; text-align: center ;
font-family: 'Bakbak One', cursive;
width: 100%; ;" >
<hr>
<H2>
HOPE YOU ENJOYED TODAY'S ADVENTURE 😊
</H2>
<br>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/FA2/homePAGE.html" title="">HOME</a><br>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/about-us.html" title="">ABOUT US</a><br>
<a href="" title="">QUIZ</a><br>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/merchandise.html" title="">MERCHANDISE</a><br>
<a href="" title="">NEWS</a><br>
</div>
</body>
</html>