-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtechnology.html
112 lines (104 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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">
<!-- custom css -->
<link rel="stylesheet" href="./static/design-system-v2.css">
<!-- <link rel="stylesheet" href="./static/index.css"> -->
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<!-- custom js -->
<script src="./static/navigation.js" defer></script>
<script src="./static/tabs.js" defer></script>
<title>Frontend Mentor | Space tourism website</title>
</head>
<body class="technology">
<a class="skip-to-content" href="#main">skip to content</a>
<!-- navigation -->
<header class="primary-header flex">
<div>
<a href="index.html">
<img src="./assets/shared/logo.svg" alt="space tourism logo" class="logo">
</a>
</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--technology">
<h1 class="number-title"><span aria-hidden="true">03</span>Space launch 101</h1>
<!-- launch-picture -->
<picture id="lanuch-image">
<img src="assets/technology/image-launch-vehicle-landscape.jpg" alt="Launch Vehicle Landscape">
</picture>
<!-- spaceport-picture -->
<picture hidden id="spaceport-image">
<img src="assets/technology/image-spaceport-landscape.jpg" alt="Spaceport">
</picture>
<!-- capsule-picture -->
<picture hidden id="capsule-image">
<img src="assets/technology/image-space-capsule-landscape.jpg" alt="Capsule">
</picture>
<div class="num-indicators" role="tablist" aria-label="technology list">
<button aria-selected="true" aria-selected="true" aria-controls="launch-tab" data-image="lanuch-image"
role="tab" tabindex="0">
<span>1</span></button>
<button aria-selected="false" aria-controls="spaceport-tab" data-image="spaceport-image"
role="tab" tabindex="-1">
<span>2</span></button>
<button aria-selected="false" aria-controls="capsule-tab" data-image="capsule-image"
role="tab" tabindex="-1">
<span>3</span></button>
</div>
<!-- launch-article -->
<article class="technology-info flow" id="launch-tab" role="tabpanel" tabindex="0">
<p class="text-accent ff-sans-nomal fs-200 uppercase letter-spacing-3">
The terminology...</p>
<h3 class="f-serif fs-700 uppercase">Launch vehicle</h3>
<p class="ff-sans-nomal fs-200 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!
</p>
</article>
<!-- spaceport-article -->
<article hidden class="technology-info flow" id="spaceport-tab" role="tabpanel" tabindex="0">
<p class="text-accent ff-sans-nomal fs-200 uppercase letter-spacing-3">
The terminology...
</p>
<h3 class="f-serif fs-700 uppercase">Spaceport</h3>
<p class="ff-sans-nomal fs-200 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.
</p>
</article>
<!-- capsule-article -->
<article hidden class="technology-info flow" id="capsule-tab" role="tabpanel" tabindex="0">
<p class="text-accent ff-sans-nomal fs-200 uppercase letter-spacing-3">
The terminology...</p>
<h3 class="f-serif fs-700 uppercase">Space capsule</h3>
<p class="ff-sans-nomal fs-200 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.
</p>
</article>
</main>
<body>
</body>
</html>