-
Notifications
You must be signed in to change notification settings - Fork 0
/
technology.html
108 lines (97 loc) · 5.81 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
<!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 CSS style -->
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/navigation.js" defer></script>
<script src="./js/tabs.js" defer></script>
<title>Frontend Mentor | Space tourism website</title>
</head>
<body class="technology">
<a href="#main" class="skip-to-content">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-expanded="false"><span class="sr-only">Menu</span></button>
<nav>
<ul id="primary-navigation" data-visible="false" class="primary-navigation underlined-indicators flex">
<li>
<a href="./index.html" class="ff-sans-cond text-white letter-spacing-2 uppercase"><span
aria-hidden="true">00</span>Home</a>
</li>
<li>
<a href="./destination.html" class="ff-sans-cond text-white letter-spacing-2 uppercase"><span
aria-hidden="true">01</span>Destination</a>
</li>
<li>
<a href="./crew.html" class="ff-sans-cond text-white letter-spacing-2 uppercase"><span
aria-hidden="true">02</span>Crew</a>
</li>
<li class="active">
<a href="./technology.html" class="ff-sans-cond text-white letter-spacing-2 uppercase"><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="numbers-indicators flex" role="tablist" aria-label="technology list">
<button aria-selected="true" class="ff-serif fs-600" aria-controls="vehicle-tab" role="tab"
data-image="vehicle-image" tabindex="0">1</button>
<button aria-selected="false" class="ff-serif fs-600" aria-controls="spaceport-tab" role="tab"
data-image="spaceport-image" tabindex="-1">2</button>
<button aria-selected="false" class="ff-serif fs-600" aria-controls="capsule-tab" role="tab"
data-image="capsule-image" tabindex="-1">3</button>
</div>
<!-- launch vehicle -->
<article class="technology-details flow" id="vehicle-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase text-light">The Terminology</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>
<!-- spaceport -->
<article hidden class="technology-details flow" id="spaceport-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase text-light">The Terminology</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>
<!-- spaceport -->
<article hidden class="technology-details flow" id="capsule-tab" role="tabpanel" tabindex="0">
<header class="flow flow--space-small">
<h2 class="fs-600 ff-serif uppercase text-light">The Terminology</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>
<picture id="vehicle-image">
<img src="assets/technology/image-launch-vehicle-landscape.jpg" alt="launch vehicle">
</picture>
<picture hidden id="spaceport-image">
<img src="assets/technology/image-spaceport-landscape.jpg" alt="spaceport">
</picture>
<picture hidden id="capsule-image">
<img src="assets/technology/image-space-capsule-landscape.jpg" alt="space capsule">
</picture>
</main>
</body>
</html>