feat: add Artemis moon mission overview site
This commit is contained in:
Hermes Agent
@@ -0,0 +1,3 @@
|
||||
FROM nginx:alpine
|
||||
COPY index.html /usr/share/nginx/html/index.html
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,8 @@
|
||||
# Artemis Moon Mission Overview
|
||||
|
||||
A single-page overview of NASA's Artemis program, built as a static site for end-to-end pipeline testing:
|
||||
|
||||
- local artifact creation
|
||||
- Git push to Gitea
|
||||
- deploy from repo into Coolify
|
||||
- publish on a holdetech subdomain
|
||||
+695
@@ -0,0 +1,695 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Artemis — Return to the Moon</title>
|
||||
<meta name="description" content="A one-page visual overview of NASA's Artemis moon mission program." />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #060816;
|
||||
--bg-soft: rgba(14, 19, 42, 0.78);
|
||||
--panel: rgba(17, 25, 56, 0.72);
|
||||
--panel-strong: rgba(20, 31, 71, 0.9);
|
||||
--text: #eef3ff;
|
||||
--muted: #9ba7cf;
|
||||
--line: rgba(151, 173, 255, 0.18);
|
||||
--glow: #81a9ff;
|
||||
--accent: #e2ecff;
|
||||
--accent-2: #8fd3ff;
|
||||
--gold: #ffd27d;
|
||||
--shadow: 0 30px 80px rgba(2, 6, 23, 0.58);
|
||||
--radius: 24px;
|
||||
--max: 1180px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, rgba(104, 132, 255, 0.22), transparent 0 28%),
|
||||
radial-gradient(circle at 80% 16%, rgba(143, 211, 255, 0.16), transparent 0 22%),
|
||||
radial-gradient(circle at 50% 100%, rgba(92, 70, 169, 0.22), transparent 0 24%),
|
||||
linear-gradient(180deg, #04060f 0%, #050916 38%, #081126 100%);
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 30%, rgba(255,255,255,.85) 0 1px, transparent 1.2px),
|
||||
radial-gradient(circle at 67% 12%, rgba(255,255,255,.6) 0 1px, transparent 1.2px),
|
||||
radial-gradient(circle at 80% 74%, rgba(255,255,255,.7) 0 1px, transparent 1.2px),
|
||||
radial-gradient(circle at 40% 82%, rgba(255,255,255,.45) 0 1px, transparent 1.2px),
|
||||
radial-gradient(circle at 88% 38%, rgba(255,255,255,.72) 0 1px, transparent 1.2px),
|
||||
radial-gradient(circle at 31% 11%, rgba(255,255,255,.5) 0 1px, transparent 1.2px);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
.wrap {
|
||||
width: min(calc(100% - 32px), var(--max));
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
z-index: 10;
|
||||
margin: 16px auto 0;
|
||||
width: min(calc(100% - 32px), var(--max));
|
||||
backdrop-filter: blur(18px);
|
||||
background: rgba(6, 8, 22, 0.48);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 999px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.topbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.moon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 38% 35%, #fff 0 12%, #d4deff 13%, #7c91cb 66%, #4c5f98 100%);
|
||||
box-shadow: 0 0 22px rgba(170, 192, 255, 0.65);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
font-size: 0.9rem;
|
||||
color: #d8e2ff;
|
||||
}
|
||||
|
||||
nav a {
|
||||
opacity: 0.78;
|
||||
transition: opacity .2s ease, transform .2s ease;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav a:focus-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(-1px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 88px 0 52px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
gap: 30px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
background: rgba(123, 155, 255, 0.12);
|
||||
border: 1px solid rgba(162, 188, 255, 0.16);
|
||||
border-radius: 999px;
|
||||
color: #dbe6ff;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 20px 0 16px;
|
||||
font-size: clamp(3.2rem, 9vw, 6.7rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.04em;
|
||||
font-weight: 700;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.lede {
|
||||
max-width: 43rem;
|
||||
color: #d3defd;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
padding: 0 18px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
transition: transform .25s ease, border-color .25s ease, background .25s ease;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.button:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, rgba(228, 237, 255, 0.97), rgba(139, 211, 255, 0.95));
|
||||
color: #061225;
|
||||
border-color: rgba(255,255,255,0.44);
|
||||
box-shadow: 0 18px 35px rgba(116, 172, 255, 0.28);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
color: var(--accent);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
.hero-side {
|
||||
min-height: 420px;
|
||||
border-radius: 34px;
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
background:
|
||||
radial-gradient(circle at 55% 36%, rgba(255,255,255,0.95) 0 11%, rgba(214, 222, 255, 0.9) 11.2%, rgba(141, 168, 223, 0.46) 33%, rgba(8, 12, 29, 0) 33.2%),
|
||||
radial-gradient(circle at 58% 30%, rgba(255, 210, 125, 0.18), rgba(255, 210, 125, 0) 28%),
|
||||
linear-gradient(180deg, rgba(12, 18, 43, 0.18), rgba(6,10,26,0.78)),
|
||||
linear-gradient(140deg, rgba(27, 34, 71, 0.94), rgba(10, 16, 39, 0.96));
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.hero-side::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto -6% -12% auto;
|
||||
width: 88%;
|
||||
height: 26%;
|
||||
background: linear-gradient(180deg, rgba(180, 189, 224, 0.06), rgba(180, 189, 224, 0.28));
|
||||
border-radius: 100% 0 0 0;
|
||||
transform: rotate(-6deg);
|
||||
filter: blur(0.2px);
|
||||
}
|
||||
|
||||
.orbiter {
|
||||
position: absolute;
|
||||
width: 112px;
|
||||
aspect-ratio: 1;
|
||||
top: 22%;
|
||||
right: 18%;
|
||||
border-radius: 50%;
|
||||
border: 1px dashed rgba(255,255,255,.22);
|
||||
animation: orbit 11s linear infinite;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.orbiter::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: -9px;
|
||||
left: 50%;
|
||||
margin-left: -9px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #ffffff, #8ecbff);
|
||||
box-shadow: 0 0 18px rgba(170, 208, 255, 0.8);
|
||||
}
|
||||
|
||||
.hero-side .caption {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
bottom: 22px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: end;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hero-side strong {
|
||||
display: block;
|
||||
color: #f5f8ff;
|
||||
font-size: 1.05rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin: 10px 0 28px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding: 22px;
|
||||
min-height: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stat .label {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat .value {
|
||||
font-size: clamp(1.8rem, 4vw, 2.9rem);
|
||||
line-height: 1;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.stat p {
|
||||
margin: 0;
|
||||
color: #d3ddfb;
|
||||
font-size: 0.96rem;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
align-items: end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 5vw, 3.2rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.section-head p,
|
||||
.copy {
|
||||
color: #cfdbff;
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.mission-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.mission-copy,
|
||||
.mission-callout,
|
||||
.timeline,
|
||||
.stack,
|
||||
.footer-card {
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.mission-copy .copy + .copy { margin-top: 16px; }
|
||||
|
||||
.mission-callout {
|
||||
background: linear-gradient(180deg, rgba(18, 31, 73, 0.9), rgba(13, 22, 50, 0.86));
|
||||
}
|
||||
|
||||
.callout-label {
|
||||
color: var(--gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.76rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.callout-quote {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.timeline-list {
|
||||
list-style: none;
|
||||
margin: 20px 0 0;
|
||||
padding: 0 0 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, rgba(143, 211, 255, 0.7), rgba(143, 211, 255, 0.05));
|
||||
}
|
||||
|
||||
.timeline-list li {
|
||||
position: relative;
|
||||
padding: 0 0 26px 22px;
|
||||
}
|
||||
|
||||
.timeline-list li:last-child { padding-bottom: 0; }
|
||||
|
||||
.timeline-list li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, #ffffff 0 28%, #89b5ff 29% 100%);
|
||||
box-shadow: 0 0 20px rgba(121, 167, 255, 0.5);
|
||||
}
|
||||
|
||||
.kicker {
|
||||
color: var(--gold);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.timeline-list h3,
|
||||
.stack h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.timeline-list p,
|
||||
.stack p,
|
||||
.footer-card p {
|
||||
margin: 0;
|
||||
color: #d1dbfb;
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.stack-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.stack-item {
|
||||
padding: 18px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.stack-item .mini {
|
||||
color: #98aee4;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
margin: 26px 0 64px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, rgba(18, 28, 61, 0.92), rgba(13, 17, 38, 0.94));
|
||||
}
|
||||
|
||||
.footer-card strong {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,.04);
|
||||
color: #dce7ff;
|
||||
border: 1px solid rgba(255,255,255,.1);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.hero,
|
||||
.mission-layout,
|
||||
.footer-card,
|
||||
.stats,
|
||||
.stack-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero { padding-top: 56px; }
|
||||
.hero-side { min-height: 320px; }
|
||||
.section-head { align-items: start; flex-direction: column; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar { border-radius: 28px; }
|
||||
.topbar-inner { align-items: start; flex-direction: column; }
|
||||
nav { justify-content: start; gap: 12px 16px; }
|
||||
.hero-side { min-height: 280px; }
|
||||
.mission-copy,
|
||||
.mission-callout,
|
||||
.timeline,
|
||||
.stack,
|
||||
.footer-card,
|
||||
.stat { padding: 20px; }
|
||||
.callout-quote { font-size: 1.2rem; }
|
||||
.button { width: 100%; }
|
||||
.hero-actions { width: 100%; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
.orbiter,
|
||||
.button,
|
||||
nav a { animation: none !important; transition: none !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="topbar-inner">
|
||||
<div class="brand"><span class="moon" aria-hidden="true"></span> Artemis Program</div>
|
||||
<nav aria-label="Section navigation">
|
||||
<a href="#mission">Mission</a>
|
||||
<a href="#timeline">Timeline</a>
|
||||
<a href="#stack">Flight Stack</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<div class="eyebrow">NASA · Artemis · Moon to Mars</div>
|
||||
<h1>Return to the Moon.<br />Build the road to Mars.</h1>
|
||||
<p class="lede">
|
||||
Artemis is NASA’s long-horizon lunar campaign: a series of missions designed to return astronauts to the Moon,
|
||||
establish a sustained human presence near the lunar south pole, and turn that experience into the operational
|
||||
backbone for eventual crewed missions deeper into space.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button primary" href="#timeline">Explore the timeline</a>
|
||||
<a class="button secondary" href="#stack">See the mission stack</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-side card" aria-label="Illustrative lunar scene">
|
||||
<div class="orbiter" aria-hidden="true"></div>
|
||||
<div class="caption">
|
||||
<div>
|
||||
Program focus
|
||||
<strong>Sustained lunar exploration</strong>
|
||||
</div>
|
||||
<div>
|
||||
Strategic arc
|
||||
<strong>Moon → Mars</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats grid" aria-label="Program highlights">
|
||||
<article class="card stat">
|
||||
<div class="label">First flight</div>
|
||||
<div class="value">Artemis I</div>
|
||||
<p>Uncrewed Orion mission that validated the Space Launch System and deep-space operations around the Moon.</p>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Crewed return</div>
|
||||
<div class="value">Artemis II</div>
|
||||
<p>Planned crewed lunar flyby intended to prove life support, navigation, and crew systems beyond low Earth orbit.</p>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Surface ambition</div>
|
||||
<div class="value">South Pole</div>
|
||||
<p>Future surface missions aim toward regions rich in scientific value and potential water ice resources.</p>
|
||||
</article>
|
||||
<article class="card stat">
|
||||
<div class="label">Long game</div>
|
||||
<div class="value">Mars Prep</div>
|
||||
<p>Every lunar mission doubles as a rehearsal for logistics, habitation, and endurance in deeper space.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="mission">
|
||||
<div class="section-head">
|
||||
<h2>The mission in one page</h2>
|
||||
<p>Artemis is more than a flags-and-footprints return. It is a systems program combining launch, crew transport, lunar infrastructure, and human surface operations into a repeatable exploration pipeline.</p>
|
||||
</div>
|
||||
<div class="mission-layout">
|
||||
<article class="card mission-copy">
|
||||
<p class="copy">
|
||||
The program’s central promise is continuity. Apollo proved that humans could reach the Moon; Artemis is built to prove
|
||||
that humans can keep coming back, operate longer, and use the lunar environment as a training ground for much harder missions.
|
||||
</p>
|
||||
<p class="copy">
|
||||
That means pairing heavy-lift launch capability with a crew capsule for deep space, commercial lunar landing systems,
|
||||
surface suits and mobility, and the gradual build-out of cislunar infrastructure such as Gateway. In practice, Artemis
|
||||
is part exploration campaign, part engineering testbed, and part strategic bridge to the broader Moon-to-Mars architecture.
|
||||
</p>
|
||||
</article>
|
||||
<aside class="card mission-callout">
|
||||
<div class="callout-label">Why it matters</div>
|
||||
<div class="callout-quote">“Live, work, and learn on and around the Moon — so the next giant leap is sustainable, not symbolic.”</div>
|
||||
<p class="copy">Artemis links science, technology maturation, and operational experience into one continuous lunar program rather than a one-off spectacle.</p>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="timeline">
|
||||
<div class="section-head">
|
||||
<h2>Program arc</h2>
|
||||
<p>Each major Artemis phase increases confidence, complexity, and permanence — from proving the hardware to rehearsing long-duration deep-space operations.</p>
|
||||
</div>
|
||||
<article class="card timeline">
|
||||
<ol class="timeline-list">
|
||||
<li>
|
||||
<div class="kicker">Phase 01</div>
|
||||
<h3>Artemis I — uncrewed validation</h3>
|
||||
<p>Launch SLS and Orion together, perform a lunar mission without crew, and validate the integrated stack in deep space.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="kicker">Phase 02</div>
|
||||
<h3>Artemis II — crew around the Moon</h3>
|
||||
<p>Send astronauts on a lunar flyby to prove life-support, mission planning, navigation, and human operations beyond low Earth orbit.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="kicker">Phase 03</div>
|
||||
<h3>Artemis III — lunar surface return</h3>
|
||||
<p>Land astronauts on the Moon again using a commercial human landing system and begin the next era of crewed surface exploration.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="kicker">Phase 04</div>
|
||||
<h3>Gateway, logistics, and sustained presence</h3>
|
||||
<p>Expand from individual missions toward an operating cadence that supports extended lunar stays, reusable infrastructure, and deeper international/commercial participation.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="stack">
|
||||
<div class="section-head">
|
||||
<h2>Flight stack</h2>
|
||||
<p>Artemis succeeds only if multiple systems mature together. The architecture is intentionally distributed: no single vehicle is the whole mission.</p>
|
||||
</div>
|
||||
<article class="card stack">
|
||||
<div class="stack-grid">
|
||||
<div class="stack-item">
|
||||
<span class="mini">Launch</span>
|
||||
<h3>Space Launch System</h3>
|
||||
<p>NASA’s heavy-lift rocket provides the power needed to send Orion and other large payloads beyond Earth orbit.</p>
|
||||
</div>
|
||||
<div class="stack-item">
|
||||
<span class="mini">Crew</span>
|
||||
<h3>Orion</h3>
|
||||
<p>The deep-space crew capsule is designed for lunar-distance missions with life support, re-entry protection, and mission endurance beyond LEO.</p>
|
||||
</div>
|
||||
<div class="stack-item">
|
||||
<span class="mini">Lunar ops</span>
|
||||
<h3>Landing + surface systems</h3>
|
||||
<p>Commercial landers, upgraded suits, and surface tools make actual lunar operations — not just transport — the center of the program.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<article class="card footer-card">
|
||||
<div>
|
||||
<strong>Artemis is the rehearsal for living beyond Earth.</strong>
|
||||
<p>Its value is not only getting back to the Moon — it is learning how to keep going farther with repeatable systems, longer mission durations, and infrastructure that outlasts a single launch.</p>
|
||||
</div>
|
||||
<div class="tagline">One page · Full pipeline test</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user