-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (102 loc) · 6.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HÆKÆSHIP: Extraterrestrial Networking Site</title>
<link rel="icon"type="image/x-icon" href="./assets/icons/favicon.ico">
<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=Orbitron:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/home.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
</head>
<body>
<div class="stars"></div>
<header class="header">
<nav class="header__nav">
<h1 id="top" class="header__title">HÆKÆSHIP</h1>
<ul class="header__page-list">
<li class="header__page"><a href="#main">Histøry</a></li>
<li class="header__page"><a href="#location">Løcatiøn</a></li>
<li class="header__page"><a href="#hakaship">Hækæship</a></li>
<li class="header__page"><a href="#form">Buzz-Cønnect</a></li>
</ul>
</nav>
<div class="hero" id="about">
<div class="hero__wrapper">
<span id="typed-output"> </span>
</div>
</div>
</header>
<main class="main">
<h2 id="main" class="main__heading">Our Past and Now</h2> <!--intro section: what happened (previously on...)-->
<section class="main__section">
<div class="main__div">
<p class="main__description">If you are having a bad day...</p>
<img class="main__img" src="./assets/images/feeling-down.png" alt="bad day">
</div>
<div class="main__div">
<p class="main__description">Our planet encountered a catastrophy and it was destroyed in year 5050.</p>
<img class="main__img" src="./assets/images/catastrophy.jpg" alt="catastrophy">
</div>
<div class="main__div">
<p class="main__description">We were selected and sent off into the ambyss of Space by our ancestors as the last hope.</p>
<img class="main__img" src="./assets/images/spaceship-2.jpg" alt="loading on spaceship">
</div>
<div class="main__div">
<p class="main__description">Good news: we survived :D<br>
<br>Not so good news: we are continuously wandering D:</p>
<img class="main__img" src="./assets/images/flying-space.jpg" alt="flying in space">
</div>
<div class="main__div">
<p class="main__description">...hope your day isn't that bad anymore.</p>
<img class="main__img" src="./assets/images/have-a-great-day-wishes-funny-dancing-bananas-design-template-b3f3be2f5e0f8135b794305267d7db77_screen.jpg" alt="good day">
</div>
</section>
<section id="location" class="location">
<h2 class="location__title">Our Location (Live Updates)</h2>
<div id="map" class="location__map"></div>
</section>
<section id="hakaship" class="gallery"><!--detail images of spaceship/look-->
<h2 class="gallery__ship-title">Hækæship</h2>
<img class="gallery__ship-only" src=./assets/images/main-ship.png> <!--grid display for images-->
<h2 class="gallery__inside-title">Inside the Hækæship</h2>
<div class="gallery__inside">
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior-1.jpg" alt=""></div>
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior4.webp" alt=""></div>
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior2.jpg" alt=""></div>
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior6.jpg" alt=""></div>
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior5.webp" alt=""></div>
<div class="gallery__image-container"><img class="gallery__inside-image"src="./assets/images/interior3.jpg" alt=""></div>
</div>
</section>
</main>
<section id="form" class="form">
<h2 class="form__heading">Buzz-Connect With Us</h2>
<div class="form__reponse-div">
<form class="form__submission">
<label class="form__label" for="location">Planet/Spaceship Name</label>
<input class="form__input"name="location" id="location" type="text" required>
<label class="form__label" for="species">Species Name</label>
<input class="form__input"name="species" id="species" type="text" required>
<label class="form__label" for="intention">Intention</label>
<textarea class="form__input form__input--large"name="intention" id="intention" required></textarea>
<button class="form__button" type="submit">Buzz-Connect</button>
</form>
<p class="form__response"></p>
</div>
</section>
<a href="#top"><button id="button-up" class="button-image"></button></a>
<!-- Scripts -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/leaflet.rotatedMarker.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="./scripts/stars.js" type="module"></script>
<script src="./scripts/title.js" type="module"></script>
<script src="./scripts/typing.js" type="module"></script>
<script src="./scripts/index-page.js" type="module"></script>
</body>
</html>