-
Notifications
You must be signed in to change notification settings - Fork 2
/
technology.html
114 lines (103 loc) · 5.6 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
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/favicon-32x32.png" type="image/png" sizes="32x32">
<title>Space Travel</title>
<!-- 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="./index.css">
<script src="./navigation.js" defer></script>
<script 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 href="index.html" class="ff-sans-cond text-white uppercase letter-spacing-2"><span
aria-hidden="true">00</span>Home</a></li>
<li><a href="destination.html" class="ff-sans-cond text-white uppercase letter-spacing-2"><span
aria-hidden="true">01</span>Destination</a>
</li>
<li><a href="crew.html" class="ff-sans-cond text-white uppercase letter-spacing-2"><span
aria-hidden="true">02</span>Crew</a></li>
<li class="active"><a href="technology.html" class="ff-sans-cond text-white uppercase letter-spacing-2"><span
aria-hidden="true">03</span>Technology</a>
</li>
</ul>
</nav>
</header>
<main id="main" class="grid-container grid-container--technology flow">
<h1 class="numbered-title"><span aria-hidden="true">03</span> Space launch 101</h1>
<div class="number-indicators flex" style="--flow-space: 1rem" role="tablist" aria-label="technology list">
<button aria-selected="true" role="tab" aria-controls="vehicle-tab" tabindex="0" data-image="vehicle-image"><span
class="sr-only">The launch vehicle</span>1</button>
<button aria-selected="false" role="tab" aria-controls="spaceport-tab" tabindex="0"
data-image="spaceport-image"><span class="sr-only">The spaceport</span>2</button>
<button aria-selected="false" role="tab" aria-controls="capsule-tab" tabindex="0" data-image="capsule-image"><span
class="sr-only">The capsule</span>3</button>
</div>
<!-- Launch vehicle -->
<article class="technology-details flow" id="vehicle-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h2 class="ff-sans-cond fs-400 text-accent uppercase letter-spacing-2">The terminology...</h2>
<p class="ff-serif fs-700 uppercase">Launch vehicle</p>
</header>
<p class="text-accent">
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!
</article>
<!-- Spaceport -->
<article hidden class="technology-details flow" id="spaceport-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h2 class="ff-sans-cond fs-400 text-accent uppercase letter-spacing-2">The terminology...</h2>
<p class="ff-serif fs-700 uppercase">Spaceport</p>
</header>
<p class="text-accent">
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.
</article>
<!-- Capsule -->
<article hidden class="technology-details flow" id="capsule-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h2 class="ff-sans-cond fs-400 text-accent uppercase letter-spacing-2">The terminology...</h2>
<p class="ff-serif fs-700 uppercase">Space capsule</p>
</header>
<p class="text-accent">
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.
</article>
<picture id="vehicle-image">
<source srcset="./assets/technology/image-launch-vehicle-portrait.jpg" media="(min-width: 45rem)">
<img src="./assets/technology/image-launch-vehicle-landscape.jpg" alt="Launch vehicle lifting off">
</picture>
<picture id="spaceport-image">
<source srcset="./assets/technology/image-spaceport-portrait.jpg" media="(min-width: 45rem)">
<img src="./assets/technology/image-spaceport-landscape.jpg" alt="The spaceport">
</picture>
<picture id="capsule-image">
<source srcset="./assets/technology/image-space-capsule-portrait.jpg" media="(min-width: 45rem)">
<img src="./assets/technology/image-space-capsule-landscape.jpg" alt="The space capsule">
</picture>
</main>
</body>
</html>