-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdestination.html
264 lines (212 loc) · 11.8 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Destination</title>
<link rel="icon" type="image/png" sizes="32x32" href="./assets/jif-icon2-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">
<link rel="stylesheet" href="index.css">
<!-- <link rel="stylesheet" href="second.css">-->
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="basis.css">
<!-- <link rel="stylesheet" href="dataCSS.css">-->
<script src="jjs-nav_menu.js" defer></script>
<script src="tabs.js" defer></script>
</head>
<body class="destination">
<div id="loader">
<div class="loader"></div>
</div>
<a class="skip-to-content" href="#main">Skip to content</a>
<header class="primary-header flex ">
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<div>
<a href="index.html"><img src="./assets/jif-LOGO.PNG" alt="jif logo" class="logo"></a>
</div>
<nav class="flex">
<ul id="primary-navigation" jaLaberNich="true" 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>00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="contact.html"><span>01</span>Kontakt</a>
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="destination.html"><span>02</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="crew.html"><span>03</span>Crew</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="technology.html"><span>04</span>Technology</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2" href="data.html"><span aria-hidden="true">05</span>Data</a>
</ul>
</nav>
</header>
<main id="main" class="grid-container grid-container--destination flow">
<h1 class="numbered-title"><span aria-hidden="true">01</span> Pick your destination</h1>
<picture id="moon-image">
<source srcset="assets/destination/image-moon.webp" type="image/webp">
<img src="assets/destination/image-moon.png" alt="the moon">
</picture>
<picture hidden id="mars-image">
<source srcset="assets/destination/image-mars.webp" type="image/webp">
<img src="assets/destination/image-mars.png" alt="the planet mars">
</picture>
<picture hidden id="europa-image">
<source srcset="assets/destination/image-europa.webp" type="image/webp">
<img src="assets/destination/image-europa.png" alt="the planet europa">
</picture>
<picture hidden id="titan-image">
<source srcset="assets/destination/image-titan.webp" type="image/webp">
<img src="assets/destination/image-titan.png" alt="the moon titan">
</picture>
<picture hidden id="earth-image">
<img src="assets/destination/ea.png" style="padding-bottom: 0em;" alt="the moon titan">
</picture>
<!-- <div class="tab-list underline-indicators flex" role="tablist" aria-label="destination list">
<button aria-selected="true" role="tab" aria-controls="moon-tab" class="uppercase ff-sans-cond text-accent letter-spacing-2" tabindex="0">Moon</button>
<button aria-selected="false" role="tab" aria-controls="mars-tab" class="uppercase ff-sans-cond text-accent letter-spacing-2" tabindex="-1">Mars</button>
<button aria-selected="false" role="tab" aria-controls="europa-tab" class="uppercase ff-sans-cond text-accent letter-spacing-2" tabindex="-1">Europa</button>
<button aria-selected="false" role="tab" aria-controls="titan-tab" class="uppercase ff-sans-cond text-accent letter-spacing-2" tabindex="-1">Titan</button>
</div>-->
<div class="tab-list underline-indicators flex" role="tablist" aria-label="destination list">
<button aria-selected="true" role="tab" aria-controls="moon-tab"
class="uppercase ff-sans-cond bg-transpa text-accent letter-spacing-2" tabindex="0"
data-image="moon-image">Moon</button>
<button aria-selected="false" role="tab" aria-controls="mars-tab"
class="uppercase ff-sans-cond bg-transpa text-accent letter-spacing-2" tabindex="-1"
data-image="mars-image">Mars</button>
<button aria-selected="false" role="tab" aria-controls="europa-tab"
class="uppercase ff-sans-cond bg-transpa text-accent letter-spacing-2" tabindex="-1"
data-image="europa-image">Europa</button>
<!--<button aria-selected="false" role="tab" aria-controls="titan-tab"
class="uppercase ff-sans-cond bg-transpa text-accent letter-spacing-2" tabindex="-1"
data-image="titan-image">Titan</button>-->
<button aria-selected="false" role="tab" aria-controls="earth-tab"
class="uppercase ff-sans-cond bg-transpa text-accent letter-spacing-2" tabindex="-1"
data-image="earth-image">Earth</button>
</div>
<!-- moon -->
<article class="destination-info flow" id="moon-tab" tabindex="0" role="tabpanel">
<h2 class="text-accent fs-800 uppercase ff-serif">Moon</h2>
<p>As like for Dogecoin, the destination is always the Moon. See our planet as you’ve never
seen it before. Here you´ll find webdesign - HTML, CSS, Responsiveness, and E-Commerce from outa space. Which is To the Moooon!!</p>
<div class="destination-meta flex">
<div>
<h3 class="text-accent fs-200 uppercase">Avg. distance</h3>
<p class="ff-serif uppercase no_padding">384,400 km</p>
</div>
<div>
<h3 class="text-accent fs-200 uppercase">Est. travel time</h3>
<p class="ff-serif uppercase no_padding">3 days</p>
</div>
</div>
</article>
<!-- Mars -->
<article hidden class="destination-info flow" id="mars-tab" tabindex="0" role="tabpanel">
<h2 class="text-accent fs-800 uppercase ff-serif">Mars</h2>
<p>Don’t forget to pack your hiking boots mate. You’ll need them to tackle Olympus Mons,
the tallest planetary mountain in our unique solar system. It is two and a half times
the size of Mount Everest!!</p>
<div class="destination-meta flex">
<div>
<h3 class="text-accent fs-200 uppercase">Avg. distance</h3>
<p class="ff-serif uppercase no_padding">225 mil. km</p>
</div>
<div>
<h3 class="text-accent fs-200 uppercase">Est. travel time</h3>
<p class="ff-serif uppercase no_padding">9 mon.</p>
</div>
</div>
</article>
<!-- Europa -->
<article hidden class="destination-info flow" id="europa-tab" tabindex="0" role="tabpanel">
<h2 class="text-accent fs-800 uppercase ff-serif">Europa</h2>
<p>he 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>
<div class="destination-meta flex">
<div>
<h3 class="text-accent fs-200 uppercase">Avg. distance</h3>
<p class="ff-serif uppercase no_padding">628 mil. km</p>
</div>
<div>
<h3 class="text-accent fs-200 uppercase">Est. travel time</h3>
<p class="ff-serif uppercase no_padding">3 yeahs</p>
</div>
</div>
</article>
<!-- Titan -->
<!--
<article hidden class="destination-info flow" id="titan-tab" tabindex="0" role="tabpanel">
<h2 class="text-accent fs-800 uppercase ff-serif">Titan</h2>
<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>
<div class="destination-meta flex">
<div>
<h3 class="text-accent fs-200 uppercase">Avg. distance</h3>
<p class="ff-serif uppercase">1.6 bil. km</p>
</div>
<div>
<h3 class="text-accent fs-200 uppercase">Est. travel time</h3>
<p class="ff-serif uppercase">7 years</p>
</div>
</div>
</article>
-->
<!-- Earth -->
<article hidden class="destination-info flow" id="earth-tab" tabindex="0" role="tabpanel">
<h2 class="text-accent fs-800 uppercase ff-serif">Earth 💖</h2>
<p>We are also far away again, like this different Moons here.
But we are already in the orbit of our destination!! :)
And soon we will together produce more heat then the Sun. 🔥🔥🔥 <br>
It's all in the Bereich of the Möglibilities</p>
<div class="destination-meta flex">
<div>
<h3 class="text-accent fs-200 uppercase">Avg. distance</h3>
<p class="ff-serif uppercase no_padding">∞</p>
</div>
<div>
<h3 class="text-accent fs-200 uppercase" >I love you</h3>
<p class="ff-serif uppercase no_padding">forever</p>
</div>
</div>
</article>
</main>
<!--<header class="primary-header flex ">
<button class="mobile-nav-toggle" aria-controls="primary-navigation"><span class="sr-only" aria-expanded="false">Menu</span></button>
<div>
<a href="index.html"><img src="./assets/jif-LOGO.PNG" alt="jif logo" class="logo"></a>
</div>
<nav class="flex">
<ul id="primary-navigation" jaLaberNich="true" data-visible="false" class=" primary-navigation underline-indicators flex">
<li class="active"><a class="ff-sans-cond uppercase text-white letter-spacing-2"
href="index.html"><span>00</span>Home</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2"
href="destination.html"><span>01</span>Destination</a>
<li><a class="ff-sans-cond uppercase text-white letter-spacing-2"
href="crew.html"><span>02</span>Crew</a>
<li><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>
<div class="grid-container grid-container--home">
<div>
<h1 class="text-accent fs-500 ff-sans-cond uppercase letter-spacing-1">So, you want a new web
<span class="fs-650_jones ff-serif text-white letter-spacing-0 d-block">Under Construction</span></h1>
<p> <!–Let’s face it; if you want to go to space, you might as well genuinely go to
outer space and not hover kind of on the edge of it. Well sit back, and relax
because we’ll give you a truly out of this world experience!–></p>
</div>
<div style="margin-top: 5rem">
<a href="#" class="ff-serif uppercase letter-spacing-4 large-button text-dark bg-white " style="font-size: 1.5em;">Explore</a>
</div>
</div>
<div class="container flex background">
<div class="foreground"></div>
<div class="midground"></div>
</div>-->
</body>
</html>