-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtechnology.html
118 lines (101 loc) · 5.39 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
115
116
117
118
<!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="index.css">
<title>Frontend Mentor | Space tourism website</title>
<script src="tabs.js" defer></script>
<script src="navigation.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--technology flow">
<h1 class="numbered-title"><span aria-hidden="true">03</span>Space launch 101
</h1>
<picture id="vehicle-image">
<source srcset="assets/technology/image-launch-vehicle-landscape.jpg" media="(max-width: 45rem)">
<img src="assets/technology/image-launch-vehicle-portrait.jpg" alt="vehicle-img">
</picture>
<picture hidden id="capsule-image">
<source srcset="assets/technology/image-space-capsule-landscape.jpg" media="(max-width: 45rem)">
<img src="assets/technology/image-space-capsule-portrait.jpg" alt="capsule-img">
</picture>
<picture hidden id="spaceport-image">
<source srcset="assets/technology/image-spaceport-landscape.jpg" media="(max-width: 45rem)">
<img src="assets/technology/image-spaceport-portrait.jpg" alt="spaceport-img">
</picture>
<div class="number-indicators tab-list flex" role="tablist" aria-label="tecnology list">
<button aria-selected="true" class="number-indicators uppercase ff-serif " tabindex="0" role="tab"
aria-controls="launch-vehicle-tab" data-image="vehicle-image">1</button>
<button aria-selected="false" class="number-indicators uppercase ff-serif" tabindex="-1" role="tab"
aria-controls="space-capsule-tab" data-image="capsule-image">2</button>
<button aria-selected="false" class="number-indicators uppercase ff-serif " tabindex="-1" role="tab"
aria-controls="space-port-tab" data-image="spaceport-image">3</button>
</div>
<article class="technology-info flow" id="launch-vehicle-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h3 class="fs-600 uppercase ff-serif">The terminology...</h3>
<h2 class="fs-700 uppercase ff-serif">Launch Vehicle</h2>
</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!
</p>
</article>
<article hidden class="technology-info flow" id="space-capsule-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h3 class="fs-600 uppercase ff-serif">The terminology...</h3>
<h2 class="fs-700 uppercase ff-serif">Capsule</h2>
</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.
</p>
</article>
<article hidden class="technology-info flow" id="space-port-tab" tabindex="0" role="tabpanel">
<header class="flow flow--space-small">
<h3 class="fs-600 uppercase ff-serif">The terminology...</h3>
<h2 class="fs-700 uppercase ff-serif">Spaceport</h2>
</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.
</p>
</article>
</main>
</body>
</html>