-
Notifications
You must be signed in to change notification settings - Fork 1
/
technology.html
105 lines (93 loc) · 6.25 KB
/
technology.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<!-- Google fonts -->
<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=Barlow+Condensed:wght@400;700&family=Bellefair&family=Barlow:wght@400;700&display=swap"
rel="stylesheet">
<!-- Our custom CSS -->
<link rel="stylesheet" href="./src/index.css">
<title>Space Tourism</title>
<script src="./src/navigation.js" defer></script>
<script src="./src/tabs.js" defer></script>
</head>
<body class="technology">
<a class="skip-to-content" href="#main">Skip to content</a>
<header class="primary-header flex">
<div>
<img src="./assets/shared/logo.svg" alt="space tourism logo" class="logo">
</div>
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<nav>
<ul id="primary-navigation" data-visible="false" class="primary-navigation underline-indicators flex">
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="index.html"><span aria-hidden="true">00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span aria-hidden="true">01</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span aria-hidden="true">02</span>Crew</a>
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span aria-hidden="true">03</span>Technology</a>
</ul>
</nav>
</header>
<main id="main" class="grid-container grid-container--crew flow">
<h1 class="numbered-title"><span aria-hidden="true">03</span> SPACE LAUNCH 101</h1>
<div class="dot-indicators flex" role="tablist" aria-label="technology list">
<button class="large-button-tech uppercase ff-serif text-dark bg-white" aria-selected="true" aria-controls="commander-tab" role="tab" data-image="commander-image" tabindex="0"><span class="sr-only" style="align:left!important; position:absolute!important">The commander</span>1</button>
<button class="large-button-tech uppercase ff-serif text-dark bg-white" aria-selected="false" aria-controls="mission-tab" role="tab" data-image="mission-image" tabindex="-1"><span class="sr-only">The mission specialist</span>2</button>
<button class="large-button-tech uppercase ff-serif text-dark bg-white" aria-selected="false" aria-controls="pilot-tab" role="tab" data-image="pilot-image" tabindex="-1"><span class="sr-only">The pilot</span>3</button>
</div>
<!-- Launch vehicle -->
<article class="crew-details flow" id="commander-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase">The technology...</h2>
<p class="fs-700 uppercase ff-serif">Launch vehicle</p>
</header>
<p>A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!</p>
</article>
<!-- mission specialist -->
<article hidden class="crew-details flow" id="mission-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase">The technology...</h2>
<p class="fs-700 uppercase ff-serif">Spaceport</p>
</header>
<p>A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch.</p>
</article>
<!-- pilot -->
<article hidden class="crew-details flow" id="pilot-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase">The technology...</h2>
<p class="fs-700 uppercase ff-serif">Space capsule</p>
</header>
<p>A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained.</p>
</article>
<!-- engineer -->
<article hidden class="crew-details flow" id="crew-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase">Flight Engineer</h2>
<p class="fs-700 uppercase ff-serif">Anousheh Ansari</p>
</header>
<p>Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems.
Ansari was the fourth self-funded space tourist, the first self-funded woman to
fly to the ISS, and the first Iranian in space.</p>
</article>
<picture id="commander-image">
<source srcset="assets/technology/image-launch-vehicle-portrait.jpg" type="image/jpg">
<img src="assets/technology/image-launch-vehicle-landscape.jpg" alt="Douglas Hurley">
</picture>
<picture hidden id="mission-image">
<source srcset="assets/technology/image-spaceport-portrait.jpg" type="image/jpg">
<img src="assets/technology/image-spaceport-landscape.jpg" alt="Douglas Hurley">
</picture>
<picture hidden id="pilot-image">
<source srcset="assets/technology/image-space-capsule-portrait.jpg" type="image/jpg">
<img src="assets/technology/image-space-capsule-landscape.jpg" alt="Douglas Hurley">
</picture>
<picture hidden id="crew-image">
<source srcset="assets/crew/image-anousheh-ansari.webp" type="image/jpg">
<img src="assets/crew/image-anousheh-ansari.png" alt="Douglas Hurley">
</picture>
</main>
</body>
</html>