-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdestination.html
More file actions
131 lines (119 loc) · 7.22 KB
/
destination.html
File metadata and controls
131 lines (119 loc) · 7.22 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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@100;200&family=Barlow:wght@100;200;400&family=Bellefair&display=swap" rel="stylesheet"> <!-- <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<section class="destination">
<nav class="navbar">
<div class="hero__logo"><img src="/img/Group2.png" alt="LOGO"></div>
<span class="hero__span"> </span>
<div class="hamburger--rmv">
<svg class="hamburgers "><img src="./img/remove.svg" alt="Hamburger"></svg>
</div>
<div class="hamburger">
<svg class="hamburgers"><img src="./img/hamburger.svg" alt="Hamburger"></svg>
</div>
<div class="navbar__right">
<ul class="navbar__list">
<li class="navbar__list--00"> <a class="navbar__list--link" href="index.html"><span class="u-margin-right">00</span>HOME</a></li>
<li class="navbar__list--01"> <a class="navbar__list--link" href="destination.html"><span class="u-margin-right">01</span>DESTINATION</a></li>
<li class="navbar__list--02"> <a class="navbar__list--link" href="crew.html"><span class="u-margin-right">02</span>CREW</a></li>
<li class="navbar__list--03"> <a class="navbar__list--link" href="technology.html"><span class="u-margin-right">03</span>TECHNOLOGY</a></li>
</ul>
</div>
</nav>
<div class="relative">
<section class="moon content__active">
<div class="moon__left">
<div class="moon__pick">01 <span class="moon__pick--content">PICK YOUR DESTINATION</span></div>
<div class="moon__img"><img src="img/moon.png" alt="MOON"></div>
</div>
<div class="moon__right">
<ul class="moon__navbar">
<li class="moon__navbar--link active">MOON</li>
<li class="moon__navbar--link">MARS</li>
<li class="moon__navbar--link">EUROPA</li>
<li class="moon__navbar--link">TITAN</li>
</ul>
<div class="moon__middle">MOON</div>
<div class="moon__content">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.</div>
<div class="moon__footer">
<div class="moon__distance"> AVG. DISTANCE <span class="moon__number">384,400 KM</span></div>
<div class="moon__time">EST. TRAVEL TIME<span class="moon__number">3 DAYS</span></div>
</div>
</div>
</section>
<section class="moon">
<div class="moon__left">
<div class="moon__pick">01 <span class="moon__pick--content">PICK YOUR DESTINATION</span></div>
<div class="moon__img"><img src="img/mars.png" alt="MOON"></div>
</div>
<div class="moon__right">
<ul class="moon__navbar">
<li class="moon__navbar--link active">MOON</li>
<li class="moon__navbar--link">MARS</li>
<li class="moon__navbar--link">EUROPA</li>
<li class="moon__navbar--link">TITAN</li>
</ul>
<div class="moon__middle">MARS</div>
<div class="moon__content">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!</div>
<div class="moon__footer">
<div class="moon__distance"> AVG. DISTANCE <span class="moon__number">225 MIL. KM</span></div>
<div class="moon__time">EST. TRAVEL TIME<span class="moon__number">9 MONTHS</span></div>
</div>
</div>
</section>
<section class="moon">
<div class="moon__left">
<div class="moon__pick">01 <span class="moon__pick--content">PICK YOUR DESTINATION</span></div>
<div class="moon__img"><img src="img/europa.png" alt="MOON"></div>
</div>
<div class="moon__right">
<ul class="moon__navbar">
<li class="moon__navbar--link active">MOON</li>
<li class="moon__navbar--link">MARS</li>
<li class="moon__navbar--link">EUROPA</li>
<li class="moon__navbar--link">TITAN</li>
</ul>
<div class="moon__middle">EUROPA</div>
<div class="moon__content">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.</div>
<div class="moon__footer">
<div class="moon__distance"> AVG. DISTANCE <span class="moon__number">628 MIL. kM</span></div>
<div class="moon__time">EST. TRAVEL TIME<span class="moon__number">3 YEARS</span></div>
</div>
</div>
</section>
<section class="moon">
<div class="moon__left">
<div class="moon__pick">01 <span class="moon__pick--content">PICK YOUR DESTINATION</span></div>
<div class="moon__img"><img src="img/titan.png" alt="MOON"></div>
</div>
<div class="moon__right">
<ul class="moon__navbar">
<li class="moon__navbar--link active">MOON</li>
<li class="moon__navbar--link">MARS</li>
<li class="moon__navbar--link">EUROPA</li>
<li class="moon__navbar--link">TITAN</li>
</ul>
<div class="moon__middle">TITAN</div>
<div class="moon__content">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.</div>
<div class="moon__footer">
<div class="moon__distance"> AVG. DISTANCE <span class="moon__number">1.6 BIL. kM</span></div>
<div class="moon__time">EST. TRAVEL TIME<span class="moon__number">7 YEARS</span></div>
</div>
</div>
</section>
</section>
</div>
</section>
<script src="app.js"></script>
</body>
</html>