spacex/index.html at master · MikhailTyuftyaev/spacex · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space X</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/vidbg.css">
  <link rel="stylesheet" href="css/aos.css">
</head>
<body>
  <header class="header">
    <img src="img/logo.svg" alt="Logo Space X" class="logo" data-aos="fade-down" data-aos-delay="100">
    <nav class="main-nav" data-aos="fade-down">
      <ul class="list">
        <li class="item">
          <a href="#" class="item-link">Falcon 9</a>
        </li>
        <li class="item">
          <a href="#" class="item-link">Falcon Heavy</a>
        </li>
        <li class="item">
          <a href="#" class="item-link">Dragon</a>
        </li>
        <li class="item">
          <a href="#" class="item-link">Updates</a>
        </li>
      </ul>
    </nav>
    <nav class="secondary-nav" data-aos="fade-down" data-aos-delay="100">
      <ul class="list">
        <li class="item">
          <a href="#" class="item-link">About</a>
        </li>
        <li class="item">
          <a href="#" class="item-link">Gallery</a>
        </li>
        <li class="item">
          <a href="#" class="item-link">Shop</a>
        </li>
      </ul>
    </nav>
  </header>
  <section class="main">
    <h1 class="title" data-aos="fade-up" data-aos-delay="600">Falcon Heavy</h1>
    <p class="description" data-aos="fade-up" data-aos-delay="1000">
      The most powerful operational rocket in the world by a factor of two
    </p>
  </section>
  <div class="video" data-aos="fade-up" data-aos-delay="1500"></div>
  <section class="features">
    <div class="overview">
      <h2 class="features-title" data-aos="fade-right">Falcon Heavy<br>Overview</h2>
      <table class="table" data-aos="fade-right" data-aos-delay="100">
        <tr>
          <td class="table-column">HEIGHT</td>
          <td class="table-column">70 m / 229.6 ft</td>
        </tr>
        <tr>
          <td class="table-column">DIAMETER</td>
          <td class="table-column">12.2 m / 39.9 ft</td>
        </tr>
        <tr>
          <td class="table-column">MASS</td>
          <td class="table-column">1,420,788 kg / 3,125,735 lb</td>
        </tr>
        <tr>
          <td class="table-column">PAYLOAD TO LEO</td>
          <td class="table-column">63,800 kg / 140,660 lb</td>
        </tr>
        <tr>
          <td class="table-column">PAYLOAD TO GTO</td>
          <td class="table-column">26,700 kg / 58,860 lb</td>
        </tr>
        <tr>
          <td class="table-column">PAYLOAD TO MARS</td>
          <td class="table-column">16,800 kg / 37,040 lb</td>
        </tr>
      </table>
      <img src="img/falcon-heavy.png" class="rocket" alt="rocket" data-rellax-speed="5"></img>
      <h2 class="features-title" data-aos="fade-right">UNMATCHED<br>PERFORMANCE</h2>
      <p class="features-text" data-aos="fade-right" data-aos-delay="100">With more than 5 million pounds of thrust at liftoff, Falcon Heavy is the most capable
        rocket flying. By comparison, the liftoff thrust of the Falcon Heavy equals approximately eighteen 747 aircraft
        at full power. Falcon Heavy can lift the equivalent of a fully loaded 737 jetliner—complete with passengers,
        luggage and fuel—to orbit.</p>
    </div>
  </section>
  <footer class="footer" data-aos="fade-up" data-aos-delay="300">
    <img class="logo" src="img/logo.svg" alt="Logo Space X">
    <nav class="footer-nav">
      <ul class="list">
          <li class="item"><a href="#" class="item-link">Twitter</a></li>
          <li class="item"><a href="#" class="item-link">Youtube</a></li>
          <li class="item"><a href="#" class="item-link">Instagram</a></li>
          <li class="item"><a href="#" class="item-link">Flickr</a></li>
          <li class="item"><a href="#" class="item-link">LinkedIn</a></li>
          <li class="item"><a href="#" class="item-link">Privacy</a></li>
          <li class="item"><a href="#" class="item-link">Policy</a></li>
      </ul>
    </nav>
    <p class="footer-text">
      For additional questions, contact
      <a class="footer-link" href="mailto:rideshare@spacex.com">rideshare@spacex.com</a>
    </p>
    <a href="#" class="button">Contact us</a>
  </footer>
  <script type="text/javascript" src="js/vidbg.js"></script>
  <script type="text/javascript" src="js/rellax.min.js"></script>
  <script type="text/javascript" src="js/aos.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
</body>
</html>