-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathnebulax.html
164 lines (127 loc) · 4.69 KB
/
nebulax.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
<!DOCTYPE html>
<html>
<head>
<title>NEBULA</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">
<style>
body{
background-image: url('https://cdn.pixabay.com/photo/2015/09/29/15/12/stars-964022_960_720.png');
color :white ;
font-family:"titillium web";
font-size: 20px;
}
.column {
float:left;
width:33.33%;
line-height:2rem;
text-align: center;
letter-spacing: 0.0100em;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width:600px) {
.column {
width:100%;
}
}
a{
color: white;
font-size: 22px;
text-decoration: none;
margin-top: 15px;
}
header { color: white ; }
#header_1{
background-color: black;
text-align: center;
width: 90%;
height: 90px;
margin-top: -10px;
margin-right: 2px;
margin-left: 5px;
display: flex;
justify-content: space-around;
margin-bottom: -15px;
text-transform: uppercase;
}
h1{ text-align: center; }
div
#ANNIMATION{
width: 33.33%;
height: 90vh;
background-color: black;
position: relative;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
0% {background-image: url(https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/images/176699main_image_feature_827_ys_full.jpg);}
50% {background-image: url(http://cdn.spacetelescope.org/archives/images/screen/heic1806b.jpg);}
100% {background-image: url(https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fstartswithabang%2Ffiles%2F2018%2F04%2FNo-dark-matter-ultra-diffuse.jpg);}
</style>
</head>
<body>
<header>
<div id="header_1">
<img src="https://xp.io/storage/2OApv9xP.png">
<a href=""></a>
<a href=""></a>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/FA2/homePAGE.html"> Home</a>
<a href=""></a>
<a href="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/merchandise.html"> Merchandise</a>
<a href=""></a>
<a href=""> Contact </a>
<a href=""></a>
<a href=" file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/about-us.html">About us</a>
<a href=""></a>
<a href="">Quiz</a>
<a href=""></a>
<a href="">RECENT DISCOVERIES</a>
</div>
</header>
<br>
<main>
<h1>NEBULA</h1>
<div class="row">
<div class="column" >
A nebula is a giant cloud of dust and gas in space. Some nebulae (more than one nebula) come from the gas and dust thrown out by the explosion of a dying star, such as a supernova. Other nebulae are regions where new stars are beginning to form. For this reason, some nebulae are called "star nurseries."
How do stars form in a nebula?
<BR>
<br>Nebulae are made of dust and gases—mostly hydrogen and helium. The dust and gases in a nebula are very spread out, but gravity can slowly begin to pull together clumps of dust and gas. As these clumps get bigger and bigger, their gravity gets stronger and stronger.
Eventually, the clump of dust and gas gets so big that it collapses from its own gravity. The collapse causes the material at the center of the cloud to heat up-and this hot core is the beginning of a star.
</div>
<div class="column" id="ANNIMATION"></div>
<div class="column">Where are nebulae?
Nebulae exist in the space between the stars—also known as interstellar space. The closest known nebula to Earth is called the Helix Nebula. It is the remnant of a dying star—possibly one like the Sun. It is approximately 700 light-years away from Earth. That means even if you could travel at the speed of light, it would still take you 700 years to get there!
How do we know what nebulae look like?
Astronomers use very powerful telescopes to take pictures of faraway nebulae. Space telescopes such as NASA's Spitzer Space Telescope and Hubble Space Telescope have captured many images of faraway nebulae.
<BR>
<br
</div>
</div>
</main>
<div style="background-color: black; text-align: center ;" >
<hr>
<H2>
HOPE YOU ENJOYED TODAY'S ADVENTURE
</H2>
<br>
<a href="" title="file:///C:/Users/HP/OneDrive/Desktop/HTML/FA2/homePAGE.html">HOME</a><br>
<a href="" title="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/about-us.html">ABOUT US</a><br>
<a href="" title="">QUIZ</a><br>
<a href="" title="file:///C:/Users/HP/OneDrive/Desktop/HTML/PROJECT/merchandise.html">MERCHANDICE</a><br>
</div>
</body>
</html>