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