-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathASTEROIDX.html
184 lines (140 loc) · 5.86 KB
/
ASTEROIDX.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
<!DOCTYPE html>
<html>
<head>
<title>ASTEROID</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;
}
@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: 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: 100vh;
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://i.pinimg.com/originals/7c/a2/b7/7ca2b776a17804676a835ab493bde8d8.jpg);}
50% {background-image: url(https://cdn.wallpapersafari.com/43/64/jOetDI.jpg);}
100% {background-image: url(https://i.pinimg.com/originals/dd/f3/45/ddf345d7c1fef29d037b0540501f4422.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>ASTEROID</B></h1>
<div class="row">
<div class="column" >Asteroids, sometimes called minor planets, are rocky, airless remnants left over from the early formation of our solar system about 4.6 billion years ago.
<BR>
<BR>
The current known asteroid count is: 1,113,527.
<BR>
<BR>
Most of this ancient space rubble can be found orbiting the Sun between Mars and Jupiter within the main asteroid belt. Asteroids range in size from Vesta – the largest at about 329 miles (530 kilometers) in diameter – to bodies that are less than 33 feet (10 meters) across. The total mass of all the asteroids combined is less than that of Earth's Moon.
<BR>
Most asteroids are irregularly shaped, though a few are nearly spherical, and they are often pitted or cratered. As they revolve around the Sun in elliptical orbits, the asteroids also rotate, sometimes quite erratically, tumbling as they go. More than 150 asteroids are known to have a small companion moon (some have two moons). There are also binary (double) asteroids, in which two rocky bodies of roughly equal size orbit each other, as well as triple asteroid systems.
<BR>
Near-Earth Asteroids: These objects have orbits that pass close by that of Earth. Asteroids that actually cross Earth's orbital path are known as Earth-crossers.<BR>
</div>
<div class="column" id="ANNIMATION"></div>
<div class="column">Composition
The three broad composition classes of asteroids are C-, S-, and M-types.
<BR>
-The C-type (chondrite) asteroids are most common. They probably consist of clay and silicate rocks, and are dark in appearance. They are among the most ancient objects in the solar system.
<BR>
-The S-types ("stony") are made up of silicate materials and nickel-iron.
<BR>
-The M-types are metallic (nickel-iron). The asteroids' compositional differences are related to how far from the Sun they formed. Some experienced high temperatures after they formed and partly melted, with iron sinking to the center and forcing basaltic (volcanic) lava to the surface.
<H3>Asteroid Classifications</H3>
Main Asteroid Belt: The majority of known asteroids orbit within the asteroid belt between Mars and Jupiter, generally with not very elongated orbits. The belt is estimated to contain between 1.1 and 1.9 million asteroids larger than 1 kilometer in diameter, and millions of smaller ones. Early in the history of the solar system, the gravity of newly formed Jupiter brought an end to the formation of planetary bodies in this region and caused the small bodies to collide with one another, fragmenting them into the asteroids we observe today.
</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>