-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (61 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aries</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<span class="dot"></span>
<span><a href="#aries" class="aries">Aries</a></span>
</div>
</header>
<main>
<br>
<h1 id="aries"><br>
Map to view Exoplanets</h1>
<div class="buttons">
<form action="map.html">
<button class="launch" type="submit">Launch</button>
</form>
<button class="features"><a href="#fea" class="fea">Features</a></button>
</div>
<br>
<section class="about-section">
<div class="about-content">
<h2>About Us</h2>
<p>We are two enthusiastic young students who have recently embarked on our coding journey. We're excited to participate in this contest to improve our HTML and CSS skills while gaining valuable experience. Thank you for your support as we take on this challenge! This is Candy and Violetz, and we can’t wait to share our progress.</p>
</div>
</section>
<section id="fea" class="features-section">
<br>
<h1>Features</h1>
<div class="feature">
<img class="fe1" src="Fea1.png" alt="Description of Image 1">
<p class="text">The interactive map is key for visualizing exoplanets. It helps users explore space easily and engage with the content.</p>
</div>
<div class="feature">
<p class="text">The search function allows users to quickly find specific exoplanets, making navigation straightforward and enhancing overall satisfaction.</p>
<img class="fe1" src="Fea3.png" alt="blah">
</div>
<div class="feature">
<img class="fe1" src="Fea4.png" alt="Description of Image 1">
<p class="text">The information tab offers detailed facts about each exoplanet. This enriches the experience and helps users learn more about the planets they’re interested in.</p>
</div>
<div class="feature">
<p class="additional-text">This feature shows the connection between exoplanets and the sun, helping users understand their locations in space.</p>
<img class="fe1" src="Fea5.png" alt="Description of Image 2">
</div>
<div class="feature">
<img class="fe1" src="Fea2.png" alt="Description of Image 1">
<p class="text">The constellation drawing feature lets users connect exoplanets to create constellations. While not essential, it adds a fun, creative aspect to the exploration experience.</p>
</div>
</section>
</main>
</body>
</html>