-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (47 loc) · 2.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
<!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="stylesheet" href="index.css">
<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:ital,wght@0,200;0,300;0,400;0,500;0,600;1,600&family=Barlow:wght@300;400;500&family=Bellefair&display=swap" rel="stylesheet">
<script src="./index.js" defer></script>
<title>Space tourism</title>
</head>
<body class="home">
<a href="#main" class="skip-to-content bg-light text-dark fs-400">Skip to content</a>
<header class="flex primary-header">
<div>
<img class="logo" src="./assets/shared/logo.svg" alt="space tourism logo">
</div>
<button id="mobile-nav-toggle" aria-expanded="false" class="mobile-nav-toggle" aria-controls="primary-navigation" >
<span class="sr-only">Menu</span>
</button>
<nav>
<ul id="primary-navigation" data-isVisible="false" class="primary-navigation flex text-light underline-indicators uppercase ff-sans-cond ls-500 fs-300">
<li class="active"><a class="text-light" href="#"><span aria-hidden="true">00</span> Home</a></li>
<li><a class="text-light" href="#"><span aria-hidden="true">01</span> Destination</a></li>
<li><a class="text-light" href="#"><span aria-hidden="true">02</span> Crew</a></li>
<li><a class="text-light" href="#"><span aria-hidden="true">03</span> Technology</a></li>
</ul>
</nav>
</header>
<main id="main" class="grid-container grid-container-home">
<div>
<h1 class="fs-500 uppercase text-accent ff-sans-cond letter-spacing-1">So, you want to travel to
<span class="d-block fs-900 uppercase text-light 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>
<a href="#" class="large-button uppercase bg-light ff-serif text-dark">Explore</a>
</div>
</main>
</body>
</html>