-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrpihack.html
More file actions
91 lines (91 loc) · 4.7 KB
/
Copy pathrpihack.html
File metadata and controls
91 lines (91 loc) · 4.7 KB
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
<!doctype html>
<html>
<head>
<link href="//db.onlinewebfonts.com/c/cd0161509171ec0b9558c548d8e9c26d?family=Bank+Gothic" rel="stylesheet" type="text/css"/>
<title>SpaceX</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul>
<li><a href="#sec" class="active">Explore</a></li>
<li><a href="#sec" class="active">About</a></li>
<li><a href="#sec2" class="active">Latest Launch</a></li>
<li><a href="#sec3" class="active">Contact</a></li>
</ul>
</header>
<section>
<img src="stars.png" id="stars">
<img src="mars.png" id="mars">
<img src="mountains_behind.png" id="mountains_behind">
<img src="rocket.png" id="rocket">
<h2 id="text">SpaceX</h2>
<a href="#" id="btn"></a>
<img src="mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>About SpaceX</h2>
<h3>Description</h3>
<p>SpaceX designs, manufactures and launches advanced rockets and spacecraft. The company was founded in 2002 to revolutionize space technology, with the ultimate goal of enabling people to live on other planets.<br><br>
<h3>Making History</h3>
<p>SpaceX has gained worldwide attention for a series of historic milestones. It is the only private company capable of returning a spacecraft from low-Earth orbit, and in 2012 our Dragon spacecraft became the first commercial spacecraft to deliver cargo to and from the International Space Station. And in 2020, SpaceX became the first private company to take humans there as well. Click through the timeline above to see some of our milestone accomplishments.</p><br>
<h3>Reusability</h3>
<p>SpaceX believes a fully and rapidly reusable rocket is the pivotal breakthrough needed to substantially reduce the cost of space access. The majority of the launch cost comes from building the rocket, which historically has flown only once.<br><br>
Compare that to a commercial airliner—each new plane costs about the same as Falcon 9 but can fly multiple times per day and conduct tens of thousands of flights over its lifetime. Following the commercial model, a rapidly reusable space launch vehicle could reduce the cost of traveling to space by a hundredfold.<br><br>
While most rockets are designed to burn up on reentry, SpaceX rockets can not only withstand reentry but can also successfully land back on Earth and refly again.
</p>
</div class="sec">
<div class="sec2" id="sec2">
<h2>Latest Launch Information</h2>
<h3>Flight Number</h3>
<iframe src = 'f1.txt' width="100" height="45"></iframe><br><br>
<h3>Flight Name</h3>
<iframe src = 'f2.txt' width="100" height="45"></iframe><br><br>
<h3>Launch Date</h3>
<iframe src = 'f3.txt' width="200" height="45"></iframe><br><br>
<h3>YouTube Video Link</h3>
<iframe src = 'f4.txt' width="500" height="45"></iframe><br><br>
<h3>Rocket Name</h3>
<iframe src = 'f5.txt' width="100" height="45"></iframe><br><br>
<h3>Rocket Success Rate</h3>
<iframe src = 'f6.txt' width="100" height="45"></iframe><br><br>
<h3>Launchpad Name</h3>
<iframe src = 'f7.txt' width="500" height="45"></iframe><br><br>
<h3>Launchpad Success Rate</h3>
<iframe src = 'f8.txt' width="100" height="45"></iframe><br><br>
</div class="sec">
<div class="sec3" id="sec3">
<h2>Contact Us</h2>
<h3>SpaceX Headquarters</h3>
<p>1 Rocket Road, Hawthorne, CA 90250<br><br>
<h3>Phone Number</h3>
<p>(310) 363-6000</p><br>
<h3>Media Inquiries</h3>
<p>media@spacex.com<br><br>
<h3>Sales Inquiries</h3>
<p>sales@spacex.com
</p>
</div class="sec3">
<script type="text/javascript">
let mars = document.getElementById('mars');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let rocket = document.getElementById('rocket');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
rocket.style.top = -value * -2.0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
</body>
</html>