-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (64 loc) · 2.81 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
<!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">
<meta name="author" content="Travolgi">
<link rel="icon" href="https://travolgi.it/favicon.ico" />
<title>Space tourism Grid layout & Vanilla Js</title>
<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">
<link rel="stylesheet" href="./css/style.css">
</head>
<body class="home">
<a href="#main" class="skip-to-content">Skip to content</a>
<header class="primary-header flex">
<div>
<img src="./img/logo.svg" class="logo" alt="Space tourism logo">
</div>
<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false"><span class="sr-only">Menu</span></button>
<nav>
<ul id="primary-nav" data-visible="false" class="flex primary-nav underline-indicators">
<li class="active">
<a href="index" class="ff-sans-cond uppercase txt-white ls-2">
<span aria-hidden="true">00</span>Home
</a>
</li>
<li>
<a href="destination" class="ff-sans-cond uppercase txt-white ls-2">
<span aria-hidden="true">01</span>Destination
</a>
</li>
<li>
<a href="crew" class="ff-sans-cond uppercase txt-white ls-2">
<span aria-hidden="true">02</span>Crew
</a>
</li>
<li>
<a href="technology" class="ff-sans-cond uppercase txt-white ls-2">
<span aria-hidden="true">03</span>Technology
</a>
</li>
</ul>
</nav>
</header>
<main class="grid-container grid-container--home" id="main">
<div>
<h1 class="fs-500 ff-sans-cond txt-accent uppercase ls-1 fadein">
So, you want to travel to
<span class="d-block fs-900 ff-serif txt-white">Space</span>
</h1>
<p class="fadein">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="destination" class="btn-lg uppercase txt-dark bg-white ff-serif">Explore</a>
</div>
</main>
<div class="attribution">
<p>Developed by <a href="https://travolgi.it">Travolgi</a></p>
</div>
<script src="./js/navbar.js" defer></script>
</body>
</html>