-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
97 lines (89 loc) · 2.85 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="style.css">
<style>
body{background-image: url('./assets/home/background-home-desktop.jpg');}
@media(max-width:1280px){
body{
background-image: url('./assets/home/background-home-tablet.jpg');
}
}
@media(max-width: 760px){
body{
background-image: url('./assets/home/background-home-mobile.jpg');
}
}
</style>
</head>
<body>
<header>
<img src="./assets/shared/logo.svg" alt="" id="logo">
<hr>
<ul id="nav">
<li class="nav-link">
<span>00</span>
<a href="#">Home</a>
</li>
<li class="nav-link">
<span>01</span>
<a href="destination.html">Destination</a>
</li>
<li class="nav-link">
<span>02</span>
<a href="crew.html">Crew</a>
</li>
<li class="nav-link">
<span>03</span>
<a href="technology.html">Technology</a>
</li>
</ul>
<img id="hamburg" src="/assets/shared/icon-hamburger.svg" alt="hello">
</header>
<nav>
<ul class="nav">
<li class="nav-link">
<span>00</span>
<a href="#">Home</a>
</li>
<li class="nav-link">
<span>01</span>
<a href="destination.html">Destination</a>
</li>
<li class="nav-link">
<span>02</span>
<a href="crew.html">Crew</a>
</li>
<li class="nav-link">
<span>03</span>
<a href="technology.html">Technology</a>
</li>
</ul>
</nav>
<div class="container">
<div class="main-content">
<h4 id="heading-small">SO, YOU WANT TO TRAVEL TO</h4>
<h1 id="heading-large">SPACE</h1>
<p id="main-para">Let's face it: if you want to go to space, you genuinely would go to outer space, and not kind of hover on the outer edge.Well, sit back and relax because we will give youll a truly out of this world experience.</p>
</div>
<div id="explore">
<a href="destination.html">Explore</a>
</div>
</div>
<script src="./DOM.js"></script>
<script>
let hamburg = element('#hamburg');
let nav = element('nav');
hamburg.addEventListener('click', () => {
if(nav.style.display == 'none'){
nav.style.display = 'block';
}else{
nav.style.display = 'none';
}
})
</script>
</body>
</html>