-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (110 loc) · 6.19 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="This is a website that showcases a mesmerizing animation of a galaxy using only HTML, CSS, and JavaScript.">
<meta name="keywords" content="sufyaantalish, mohd-sufyaan-talish, sufyn, Galaxy Animation, Galaxy, Animation, Solar System, Solar System Animation">
<meta name="author" content="Sufyaan">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:url" content="https://sufyn.github.io/celestialvoyages/">
<meta property="og:type" content="website">
<meta property="og:title" content="Sufyaan | Galaxy Animation"/>
<title>Sufyaan | SolarSystem</title>
<link rel = "icon" href = "./img/logo1.png" type = "image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./src/styles/footer.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css"
integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Oxygen:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="nav wrapper">
<a href="./" class="logo">Celestial Voyages</a>
<ul class="social-links">
<a href="./index.html" target="_blank">
Home
</a>
</li>
<li>
<a href="./galaxy.html" target="_blank">
Galaxy
</a>
</li>
<li>
<a href="./galaxy.html" target="_blank">
Statistics
</a>
</li>
<li>
<a href="./chat.html" target="_blank">
Spacebot
</a>
</li>
<li>
<a href="https://github.com/sufyn" target="_blank">
<i class="bi bi-github"></i>
</a>
</li>
<li>
</ul>
</div>
<main class="hero-section" style="padding: 80px;">
<section class="wrapper hero-container">
<h1 class="animate__animated animate__fadeInLeft">
Welcome to Your Solar System Adventure! <a id="github-link" href="https://github.com/sufyn" tagetr="_blank" class="name fancy">.</a>
</h1>
<p class="animate__animated animate__fadeInLeft animation_delay">
We've crafted a tool to ignite your curiosity about the wonders of our solar system. Imagine being a space tourist, charting your course through the cosmos, exploring planets, and uncovering the mysteries of the great beyond.
</p>
<br>
</section>
<h2>Embark on a journey beyond the stars with our futuristic space tourism agency. 🚀✨</h2>
</main>
</header>
<section>
<main class="hero-section" style="padding: 20px;">
<section class="wrapper hero-container">
<h1 class="animate__animated animate__fadeInLeft">
How to Travel to Different Planets:
</h1> <br>
<p class="animate__animated animate__fadeInLeft animation_delay">
Ready for an adventure? Choose your destination and build your dream itinerary. From the towering Olympus Mons on Mars to the majestic rings of Saturn, every stop promises a unique experience. Select your favorite spots, plan your journey, and get ready for an otherworldly voyage!
</p>
<br>
<a id="github-link" href="./galaxy.html" tagetr="_blank" class="name fancy">CLICK ME TO EXPLORE THE WORLD BEYONDS</a>
</section>
<img style="width: 50%;" src="./img/page1.png">
</main>
</section>
<section>
<main class="hero-section" style="padding: 20px;">
<section class="wrapper hero-container">
<h1 class="animate__animated animate__fadeInLeft">
Explore Each Planet in Detail:
</h1> <br>
<p class="animate__animated animate__fadeInLeft animation_delay">
Dive deeper into the specifics of each celestial body. Our Statistics page provides a comprehensive view of the planets, their composition, and fascinating facts. Visualize the data with interactive pie charts, making learning about the solar system both engaging and educational.
</p>
<br>
<a id="github-link" href="./Statistics.html" tagetr="_blank" class="name fancy">CLICK ME FOR MORE DETAILS</a>
</section>
<img style="width: 50%;" src="./img/page2.png">
</main>
</section>
<footer style="left: 100px;" class="footer">
<div class="icons">
<a href="https://www.linkedin.com/in/mohd-sufyaan-talish/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/sufyn" target="_blank"><i class="fab fa-github-square"></i></a>
<a href="mailto:sufyaan4guys@gmail.com" class="bryan-santos">by Sufyaan</a>
</div>
</footer>
</body>
</html>