-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
244 lines (233 loc) · 9.41 KB
/
index.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
<!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&family=Barlow+Condensed&family=Bellefair&display=swap"
rel="stylesheet"
/>
<!-- Style and Javascript Files -->
<link rel="stylesheet" href="css/style.css" />
<title>Space Travel</title>
</head>
<body class="bg bg--home">
<div class="container">
<!-- HEADER -->
<header class="header">
<!-- Logo -->
<img
class="header__logo"
src="assets/shared/logo.svg"
alt="Space Travel"
/>
<!-- Navigation -->
<!-- Mobile Icons -->
<img class="toggle toggle--menu" src="assets/shared/icon-hamburger.svg" alt="Open menu">
<img class="toggle toggle--close" src="assets/shared/icon-close.svg" alt="Open menu">
<nav>
<ul id="nav" class="nav">
<li class="nav__item active" data-section="home">
<span>00</span> home
</li>
<li class="nav__item" data-section="destination" id="destination">
<span>01</span> destination
</li>
<li class="nav__item" data-section="crew"><span>02</span> crew</li>
<li class="nav__item" data-section="technology">
<span>03</span> technology
</li>
</ul>
</nav>
</header>
<main>
<!-- HOME SECTION -->
<section class="section home visible">
<div class="home__container">
<div class="home__content">
<h5 class="home__title anim__fade-in-left">
SO, YOU WANT TO TRAVEL TO
</h5>
<h1 class="home__subtitle anim__focus-in-expand">SPACE</h1>
<p class="home__text anim__fade-in">
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 id="btn" class="home__button anim__slide-top">
<button class="btn btn--main" data-section="destination">
EXPLORE
</button>
</div>
</div>
</section>
<!-- DESTINATION SECTION -->
<section class="section destination">
<div class="destination__container">
<h5 class="destination__title anim__fade-in-left">
<span>01</span>Pick your destination
</h5>
<div class="destination__content">
<div class="destination__img">
<img src="./assets/destination/image-moon.png" alt="Moon" />
</div>
<!-- Tabbed Content Area -->
<div class="destination__tabs">
<nav>
<ul id="tabs" class="tabs">
<li data-tab="moon" class="tabs__item active">Moon</li>
<li data-tab="mars" class="tabs__item">Mars</li>
<li data-tab="europa" class="tabs__item">Europa</li>
<li data-tab="titan" class="tabs__item">Titan</li>
</ul>
</nav>
<div data-animated-content-tabs>
<h2 class="tabs__title">Moon</h2>
<p class="tabs__text">
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>
<div class="tabs__details">
<div class="tabs__details--distance">
<span>Avg. Distance</span> 384,400 km
</div>
<div class="tabs__details--time">
<span>Est. Travel Time</span> 3 days
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CREW SECTION -->
<section class="section crew">
<div class="crew__container">
<!-- Page Title -->
<div class="crew__info">
<h5 class="crew__title anim__fade-in-left">
<span>02</span>Meet your crew
</h5>
<div data-animated-content-slides>
<!-- Crew Title -->
<h5 class="crew__job">Commander</h5>
<h3 class="crew__name">Douglas Hurley</h3>
<p class="crew__bio">
Douglas Gerald Hurley is an American engineer, former Marine
Corps pilot and former NASA astronaut. He launched into space
for the third time as commander of Crew Dragon Demo-2.
</p>
</div>
<div id="dots" class="crew__dots">
<button
class="btn btn--dots active"
data-slide="slide-1"
></button>
<button class="btn btn--dots" data-slide="slide-2"></button>
<button class="btn btn--dots" data-slide="slide-3"></button>
<button class="btn btn--dots" data-slide="slide-4"></button>
</div>
</div>
<!-- Image on right -->
<div class="crew__img">
<img
src="assets/crew/image-douglas-hurley.png"
alt="Crew - Douglas Hurley"
/>
</div>
</div>
</section>
<!-- TECHNOLOGY SECTION -->
<section class="section technology">
<div class="technology__container">
<h5 class="technology__title anim__fade-in-left">
<span>03</span>Space Launch 101
</h5>
<div class="technology__wrapper">
<div class="technology__content">
<!-- Numbers and Texts (tech component) -->
<nav>
<ul id="numbers" class="technology__numbers">
<li
class="technology__item btn btn--numbers active"
data-no="tech-1"
>
1
</li>
<li
class="technology__item btn btn--numbers"
data-no="tech-2"
>
2
</li>
<li
class="technology__item btn btn--numbers"
data-no="tech-3"
>
3
</li>
</ul>
</nav>
<article
class="technology__article"
data-animated-content-numbers
>
<h5 class="technology__article--sub">The terminology ...</h5>
<h3 class="technology__article--title">LAUNCH VEHICLE</h3>
<p class="technology__article--text">
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>
</div>
<!-- Image on right -->
<div class="technology__img">
<picture>
<source
media="(max-width:1024px)"
srcset="./assets/technology/image-launch-vehicle-landscape.jpg"
/>
<img
src="./assets/technology/image-launch-vehicle-portrait.jpg"
alt="Launch Vehicle"
/>
</div>
</picture>
</div>
</div>
</section>
</main>
</div>
<div id="preload" style="display: none">
<img src="./assets/destination/image-europa.png" alt="Europa" />
<img src="./assets/destination/image-mars.png" alt="Mars" />
<img src="./assets/destination/image-moon.png" alt="Moon" />
<img src="./assets/destination/image-titan.png" alt="Titan" />
<img src="./assets/crew/image-anousheh-ansari.png" alt="Ansari" />
<img src="./assets/crew/image-douglas-hurley.png" alt="Hurley" />
<img src="./assets/crew/image-mark-shuttleworth.png" alt="Mark" />
<img src="./assets/crew/image-victor-glover.png" alt="Victor" />
<img src="./assets/technology/image-launch-vehicle-portrait.jpg" alt="tech image" />
<img src="./assets/technology/image-space-capsule-portrait.jpg" alt="tech image" />
<img src="./assets/technology/image-spaceport-portrait.jpg" alt="tech image" />
</div>
<script src="js/app.js"></script>
</body>
</html>