-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (100 loc) · 3.35 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
<!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"
/>
<link rel="stylesheet" href="./index.css" />
<!-- 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"
/>
<!-- Custom CSS -->
<link rel="stylesheet" href="../starter-code/index.css" />
<script src="./index.js" defer></script>
<title>Frontend Mentor | Space tourism website</title>
</head>
<body class="home">
<a class="skip-to-content" href="#main">Skip to content</a>
<header class="primary-header flex">
<div>
<img
src="./assets/shared/logo.svg"
alt="space-tourism-logo"
class="logo"
/>
</div>
<button class="mobile-nav-toggle" aria-controls="primary-navigation">
<span class="sr-only" aria-expanded="false" role="menu">Menu</span>
</button>
<nav>
<ul
id="primary-navigation"
class="primary-navigation underline-indicators numbered-title flex"
>
<li class="active" data-id="home">
<a class="text-white letter-spacing-3 fs-300" href="index.html"
><span style="color: var(--text-white)" aria-hidden="true"
>00</span
>
Home</a
>
</li>
<li data-id="destination">
<a
class="text-white letter-spacing-3 fs-300"
href="destination.html"
><span style="color: var(--text-white)" aria-hidden="true"
>01</span
>
Destination</a
>
</li>
<li data-id="crew">
<a class="text-white letter-spacing-3 fs-300" href="crew.html"
><span style="color: var(--text-white)" aria-hidden="true"
>02</span
>
Crew</a
>
</li>
<li data-id="technology">
<a class="text-white letter-spacing-3 fs-300" href="technology.html"
><span style="color: var(--text-white)" aria-hidden="true"
>03</span
>
Technology</a
>
</li>
</ul>
</nav>
</header>
<main id="main" class="grid-container grid-container--home">
<div>
<h1 class="text-light fs-500 ff-sans-cond uppercase letter-spacing-1">
So, you want to travel to
<span class="fs-900 ff-serif text-white d-block">Space</span>
</h1>
<p class="text-light">
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>
<a href="#" class="large-button bg-white ff-serif uppercase text-dark"
>Explore</a
>
</div>
</main>
</body>
</html>