SSC-Artemis-Program/SLS.html at main · ABDEEPCODING/SSC-Artemis-Program · 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/x-icon" href="Assets/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Launch System</title>
</head>

<body>

<div id="container">
    <!-- ================= HEADER ================= -->
    <div id="header">
        <!-- Centered ARTEMIS title -->
        <div class="heading-wrap">
            <a href="index.html" class="heading fly-right">ARTEMIS</a>
        </div>
        <!-- Sancta Space Club logo -->
        <a href="about_ssc.html">
            <img class="SSC" src="Assets/Sancta Space Club.webp">
        </a>
        <!-- NASA Artemis logo -->
        <a href="https://www.nasa.gov/humans-in-space/artemis/">
            <img class="artemis-logo" src="Assets/Artemis_logo.webp">
        </a>
        <!-- Artemis II crew image -->
        <img class="ACREW"
             title="Artemis II Crew: Reid, Goggins, Christina, Jeremy"
             src="Assets/artemis-ii-crew-Photoroom.webp">
    </div>
    <!-- =============== END HEADER =============== -->


    <!-- ================= NAVBAR ================= -->
    <div id="navbar">
        <!-- Left nav items -->
        <div class="nav-item fly-left"><a href="about_ssc.html">ABOUT SSC</a></div>
        <div class="sep fly-left">|</div>
        <div class="nav-item fly-left"><a href="index.html">HOME</a></div>
        <div class="sep fly-left">|</div>
        <!-- Dropdown menu -->
        <div class="nav-item drop">
            <button class="dropdownbtn fly-left">MORE ABOUT ARTEMIS</button>
            <div class="drop-content fly-left">
                <a href="Artemis.html">Artemis Missions</a>
                <a href="SLS.html">Space Launch System</a>
            </div>
        </div>

        <!-- Right nav items -->
        <div class="sep fly-right">|</div>
        <div class="nav-item fly-right"><a href="about_ssc.html">CONTACT US</a></div>

    </div>
    <!-- =============== END NAVBAR =============== -->


    <!-- ============ Orion INTRODUCTION SECTION (using same as SLS.html)============ -->
    <div id="SLS-Introduction">
        <!-- Section heading -->
        <h1 class="sls-intro-header fly-left">Space Launch System</h1>
        <!-- Intro paragraph -->
        <p class="sls-intro-p fly-right">
            The Space Launch System (SLS) is NASA's super heavy-lift rocket designed to carry astronauts,
            scientific payloads, and deep-space hardware far beyond Earth orbit. It provides more payload mass,
            volume, and departure energy than any other current rocket, making it the only launch vehicle capable
            of sending the Orion spacecraft and large cargo on a single mission toward the Moon and deeper
            destinations. As the backbone of NASA's return to deep-space exploration, the SLS enables the
            long-term goal of building a sustainable human presence beyond Earth.
        </p>
    </div>
    <!-- ============ END INTRO SECTION ============ -->


    <!-- ============ INTERACTIVE Orion SECTION ============ -->
    <div id="SLS-Interactive">
        <!-- Section heading -->
        <h2 class="sls-interactive-header fly-left">Interactive Space Launch System</h2>
        <!-- Rocket container (keeps proportions) -->
        <div id="Interactive_Area">
            <!-- Core Stage -->
            <img class="rocket-layer rocket-core fly-left"
                 src="Assets/Core-Stage.png"
                 alt="Core Stage"
                 data-label="Core Stage — the backbone of the SLS, fueling the climb out of Earth's atmosphere.">
            <!-- Orion Capsule -->
            <img class="rocket-layer rocket-orion fly-left"
                 src="Assets/Orion-Capsule.png"
                 alt="Orion Capsule"
                 data-label="Orion Spacecraft — the crew capsule that carries astronauts to deep space and back.">
            <!-- SRB (top half) -->
            <img class="rocket-layer rocket-srb-top fly-left"
                 src="Assets/SRB-1.png"
                 alt="Solid Rocket Booster (top)"
                 data-label="Solid Rocket Booster — provides over 75% of the thrust at liftoff, then detaches.">
            <!-- SRB (bottom half) -->
            <img class="rocket-layer rocket-srb-bottom fly-left"
                 src="Assets/SRB-2.png"
                 alt="Solid Rocket Booster (bottom)"
                 data-label="Solid Rocket Booster — provides over 75% of the thrust at liftoff, then detaches.">
        </div>
        <!-- Caption under rocket -->
        <p class="sls-caption" id="sls-caption">Hover over any part of the rocket above.</p>
    </div>
    <!-- ============ END INTERACTIVE SECTION ============ -->


    <!-- ================= FOOTER ================= -->
    <div id="footer">
        <div class="footerheading-wrap">
            <!-- GitHub link -->
            <a href="https://github.com/ABDEEPCODING" class="footerheading">
                <img src="Assets/github-icon.png" alt="" class="github-icon">
                @AB_DEEPCODING on Github
            </a>
        </div>
    </div>
    <!-- =============== END FOOTER =============== -->

</div><!--Container-->

<!-- External JS file -->
<script src="script.js"></script>

</body>
</html>