-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
30 lines (30 loc) · 4.42 KB
/
about.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
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jura:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styleAbout.css">
<title>Helios Project - August Wang</title>
</head>
<body>
<h1>HELIOS PROJECT</h1>
<h2> Welcome,Navigator! <br> Here's your mission debrief!</h2>
<div class="div2" style="position:absolute;left:40%;top:4%;transform:-50%,-50%;">Long story short, due to reasons we can't yet understand, the sun of our solar system is expanding extremely fast. As the Navigator, Your mission is to navigate spaceships each carrying a mini human biobank to survive through the deep space, away from the sun, until a new home is found for future humans.</div>
<div class="div2" style="position:absolute;left:50%;top:20%;transform:-50%,-50%;">Helios, the spaceship will be with you till the end. You can use the <span style="font-weight:700;"><u>AWSD</u></span> key to control the ship. You can read your travel time, speed, and distance to the sun's surface in real time. The ship has a self-repairing shield system, but the repairing process takes time, so be careful.</div>
<div class="div2" style="position:absolute;left:60%;top:36%;transform:-50%,-50%;">When pressing <span style="font-weight:700;"><u>space</u></span> bar, you can activate the mini Dyson Ring on the ship and collect the solar power nearby, with which we can accelerate and upgrade our shield system. Please notice, The process will slow down the ship, so be as quick as possible.</div>
<div class="div2" style="position:absolute;left:60%;top:52%;transform:-50%,-50%;">On the journey, you will encounter many of these obstacles in different sizes and shapes. Don't worry, the shield will protect you, but please still try to avoid them just in case.</div>
<div class="div2" style="position:absolute;left:50%;top:68%;transform:-50%,-50%;">We observed some unusual dark trails in the deep space, we think it results from lightspeed abnormality, which is caused by interstellar transportation technologies we can't yet achieve. We don't know what it does. Try avoiding them too if you can.</div>
<div class="div2" style="position:absolute;left:40%;top:84%;transform:-50%,-50%;">A wormhole can be a great opportunity for you to jump a long distance in a short time, but they'll affect our shield and we don't know where they'll take you, so make a wise decision when you see one.</div>
<div class="div1" style="position:absolute;left:40%;top:4%;transform:-50%,-50%;background-image: url('STORY.jpeg');background-color:black;background-repeat: no-repeat;background-attachment:local;background-size:525px;background-position: center;">MISSION</div>
<div class="div1" style="position:absolute;left:50%;top:20%;transform:-50%,-50%;background-image: url('SPACESHIP.jpg');background-color:black;background-repeat: no-repeat;background-attachment: local;background-size:525px;background-position:center;">HELIOS</div>
<div class="div1" style="position:absolute;left:60%;top:36%;transform:-50%,-50%;background-image: url('ENERGY.jpg');background-color:black;background-repeat: no-repeat;background-attachment: local;background-size:525px;background-position: center;">SOLAR POWER</div>
<div class="div1" style="position:absolute;left:60%;top:52%;transform:-50%,-50%;background-image: url('ASTEROID.jpg');background-color:black;background-repeat: no-repeat;background-attachment: local;background-size:525px;background-position: center;">ASTEROIDS</div>
<div class="div1" style="position:absolute;left:50%;top:68%;transform:-50%,-50%;background-image: url('BLACKDOMAIN.jpg');background-color:black;background-repeat: no-repeat;background-attachment: local;background-size:525px;background-position: center;">BLACK DOMAIN</div>
<div class="div1" style="position:absolute;left:40%;top:84%;transform:-50%,-50%;background-image: url('WORMHOLE.jpg');background-color:black;background-repeat: no-repeat;background-attachment: local;background-size:525px;background-position: center;">WORMHOLE</div>
<a href="https://alligatorw.github.io/Project-B/index"><div class="startButton";>CONDUCT<br>MISSION</div></a>
</body>
</html>