-
Notifications
You must be signed in to change notification settings - Fork 0
/
destination.html
321 lines (302 loc) · 15.1 KB
/
destination.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="google" content="notranslate">
<meta name="apple-mobile-web-app-title" content="Space tourism website">
<meta name="application-name" content="Space tourism website">
<meta name="msapplication-TileColor" content="#0b0d17">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#0b0d17">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="apple-mask-icon.svg" type="image/svg+xml" color="#0b0d17">
<link rel="manifest" href="site.webmanifest">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, print">
<title>Pick your destination — Frontend Mentor | Space tourism website</title>
<meta name="description" content="Pick your destination: the Moon, Mars, Europa or Titan">
<!-- Begin canonical URL -->
<link rel="canonical" href="https://webdevbynight.github.io/space-tourism-website/destination.html">
<!-- End canonical URL -->
<!-- Begin Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@frontendmentor">
<meta name="twitter:creator" content="@webdevbynight">
<meta name="twitter:title" content="Pick your destination – Frontend Mentor | Space tourism website">
<meta name="twitter:description" content="Pick your destination: the Moon, Mars, Europa or Titan">
<meta name="twitter:image" content="https://webdevbynight.github.io/space-tourism-website/android-chrome-512x512.png">
<meta name="twitter:image:alt" content="Logo Space tourism website">
<!-- End Twitter card -->
<!-- Begin Open Graph -->
<meta property="og:url" content="https://webdevbynight.github.io/space-tourism-website/">
<meta property="og:title" content="Pick your destination">
<meta property="og:description" content="Pick your destination: the Moon, Mars, Europa or Titan">
<meta property="og:image" content="https://webdevbynight.github.io/space-tourism-website/android-chrome-512x512.png">
<meta property="og:image:alt" content="Logo Space tourism website">
<meta property="og:type" content="article">
<meta property="og:locale" content="en_US">
<meta property="og:article:published_time" content="2023-05-19">
<meta property="og:article:author" content="Frontend Mentor">
<meta property="og:article:tag" content="space tourism destination">
<meta property="og:article:tag" content="Moon">
<meta property="og:article:tag" content="Mars">
<meta property="og:article:tag" content="Europa">
<meta property="og:article:tag" content="Titan">
<!-- End Open Graph -->
<!-- Begin JSON-LD microdata -->
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Pick your destination — Frontend Mentor | Space tourism website",
"description": "Pick your destination: the Moon, Mars, Europa or Titan",
"publisher":
{
"@type": "Organization",
"name": "Frontend Mentor",
"url": "https://www.frontendmentor.io/"
},
"sdPublisher":
{
"@type": "Person",
"givenName": "Victor",
"familyName": "Brito",
"url": "https://victor-brito.dev/"
}
},
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://webdevbynight.github.io/space-tourism-website/",
"name": "Home"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://webdevbynight.github.io/space-tourism-website/destination.html",
"name": "Pick your destination"
}
}
]
}
]
</script>
<!-- End JSON-LD microdata -->
</head>
<body class="destination">
<!-- Begin header -->
<header id="header">
<h1><img src="images/logo.svg" alt="Logo Space tourisme website" width="40" height="40"></h1>
<p id="skip-link">
<a href="#menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21">
<desc>Go to menu</desc>
<g>
<path d="M0 0h24v3H0zM0 9h24v3H0zM0 18h24v3H0z"/>
</g>
</svg>
</a>
</p>
</header>
<!-- End header -->
<!-- Begin menu -->
<nav id="menu">
<ul>
<li><a href="./">Home</a></li>
<li><a href="destination.html" aria-current="true">Destination</a></li>
<li><a href="crew.html">Crew</a></li>
<li><a href="technology.html">Technology</a></li>
</ul>
</nav>
<!-- End menu -->
<!-- Begin content -->
<main id="content">
<!-- Begin article -->
<article>
<h1 data-article-number="1">Pick your destination</h1>
<!-- Begin destination card -->
<section id="destination-moon" class="card">
<h2>Moon</h2>
<picture>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/moon-desktop.webp 1x"
width="445"
height="445"
media="(min-width: 1327px)"
>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/moon-tablet.webp 1x"
width="300"
height="300"
media="(min-width: 600px)"
>
<img
src="images/moon-mobile.webp"
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x"
alt=""
width="170"
height="170"
>
</picture>
<p>See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.</p>
<dl>
<dt><abbr title="Average">Avg.</abbr> distance</dt>
<dd>384,400 <abbr title="kilometres">km</abbr></dd>
<dt><abbr title="Estimated">Est.</abbr> travel time</dt>
<dd>3 days</dd>
</dl>
</section>
<!-- End destination card -->
<!-- Begin destination card -->
<section id="destination-mars" class="card">
<h2>Mars</h2>
<picture>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/mars-desktop.webp 1x"
width="445"
height="445"
media="(min-width: 1327px)"
>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/mars-tablet.webp 1x"
width="300"
height="300"
media="(min-width: 600px)"
>
<img
src="images/mars-mobile.webp"
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x"
alt=""
width="170"
height="170"
>
</picture>
<p>Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!</p>
<dl>
<dt><abbr title="Average">Avg.</abbr> distance</dt>
<dd>225 <abbr title="million">mil.</abbr> <abbr title="kilometres">km</abbr></dd>
<dt><abbr title="Estimated">Est.</abbr> travel time</dt>
<dd>9 months</dd>
</dl>
</section>
<!-- End destination card -->
<!-- Begin destination card -->
<section id="destination-europa" class="card">
<h2>Europa</h2>
<picture>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/europa-desktop.webp 1x"
width="445"
height="445"
media="(min-width: 1327px)"
>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/europa-tablet.webp 1x"
width="300"
height="300"
media="(min-width: 600px)"
>
<img
src="images/europa-mobile.webp"
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x"
alt=""
width="170"
height="170"
>
</picture>
<p>The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.</p>
<dl>
<dt><abbr title="Average">Avg.</abbr> distance</dt>
<dd>628 <abbr title="million">mil.</abbr> <abbr title="kilometres">km</abbr></dd>
<dt><abbr title="Estimated">Est.</abbr> travel time</dt>
<dd>3 years</dd>
</dl>
</section>
<!-- End destination card -->
<!-- Begin destination card -->
<section id="destination-titan" class="card">
<h2>Titan</h2>
<picture>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/titan-desktop.webp 1x"
width="445"
height="445"
media="(min-width: 1327px)"
>
<source
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x,
images/titan-tablet.webp 1x"
width="300"
height="300"
media="(min-width: 600px)"
>
<img
src="images/titan-mobile.webp"
srcset="images/[email protected] 4x,
images/[email protected] 3x,
images/[email protected] 2x"
alt=""
width="170"
height="170"
>
</picture>
<p>The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.</p>
<dl>
<dt><abbr title="Average">Avg.</abbr> distance</dt>
<dd>1.6 <abbr title="billion">bil.</abbr> <abbr title="kilometres">km</abbr></dd>
<dt><abbr title="Estimated">Est.</abbr> travel time</dt>
<dd>7 years</dd>
</dl>
</section>
<!-- End destination card -->
</article>
<!-- End article -->
</main>
<!-- End content -->
<!-- Begin scripts -->
<script src="js/scripts.js"></script>
<!-- End scripts -->
</body>
</html>