-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (151 loc) · 7.45 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ! Title (important for SEO) -->
<title>Journey Through the Cosmos: Explore the Wonders of Our Solar System | Eclipse Enigma</title>
<!-- ! Meta Description (important for SEO) -->
<meta
name="description"
content="Embark on a captivating journey through our Planetary Gallery. Explore the unique wonders of each planet, from their stunning features to their intriguing stories. Whether you're a space enthusiast or a curious explorer, this gallery offers a mesmerizing glimpse into the cosmos."
/>
<!-- ! Meta Keywords (optional, less impactful for SEO now) -->
<meta
name="keywords"
content="planetary gallery, solar system, planets, space exploration, cosmic journey, astronomy, planet details, celestial bodies, space enthusiasts, solar system discovery, interstellar exploration, cosmic wonders, planets in focus, space education"
/>
<!-- ! Favicon -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🚀</text></svg>"></link>
<!-- ! Open Graph Tags (for social sharing) -->
<meta
property="og:title"
content="Journey Through the Cosmos: Explore the Wonders of Our Solar System | Eclipse Enigma"
/>
<meta
property="og:description"
content="Explore the wonders of our solar system in this captivating planetary gallery. Discover the unique features and stories of each planet, perfect for space enthusiasts and curious minds."
/>
<meta
property="og:image"
content="[URL to an image representing your weather app]"
/>
<meta property="og:url" content="mypersona.cyou/eclipse-enigma" />
<meta property="og:type" content="website" />
<!-- ! Twitter Card Tags (for social sharing) -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Journey Through the Cosmos: Explore the Wonders of Our Solar System | Eclipse Enigma"
/>
<meta
name="twitter:description"
content="Explore the wonders of our solar system in this captivating planetary gallery. Discover the unique features and stories of each planet, perfect for space enthusiasts and curious minds."
/>
<meta
name="twitter:image"
content="[URL to an image representing your weather app]"
/>
<meta name="twitter:site" content="@YourTwitterHandle" />
<!-- ! Canonical URL (important for SEO) -->
<link rel="canonical" href="mypersona.cyou/eclipse-enigma" />
<!-- ! Google Fonts -->
<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=Abril+Fatface&display=swap" rel="stylesheet"> <!-- ! Abril Fatface -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!-- ! Poppins -->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet"> <!-- ! Great Vibes -->
<!-- ! Font Awesome Libraries (important for Icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- ! External CSS -->
<link rel="stylesheet" href="components/styles.css" />
<!-- ! External JS -->
<script src="components/scripts.js" defer></script>
</head>
<body>
<!-- ! Preloader Start -->
<div class="preloader" id="preloader">
<div id="loader"></div>
</div>
<!-- ! Preloader End -->
<!-- ! Mouse Pointer Start -->
<i class="fa-brands fa-galactic-senate"></i>
<!-- ! Mouse Pointer End -->
<!-- ! Header Start -->
<header>
<div id="logo" class="logo"><a href="/">Eclipse Enigma</a></div>
<ul type="none">
<li>
<a href="https://mypersona.cyou/">Swapnadeep</a>
</li>
</ul>
<div class="github">
<i class="fa-solid fa-computer-mouse"></i>
<a href="https://github.com/helloswapnadeep/eclipse-enigma"><i class="fa-brands fa-github-alt"></i></a>
</div>
</header>
<!-- ! Header End -->
<!-- ! Slider Start -->
<div class="slider">
<div class="list">
<!-- ! Item1 Start -->
<div class="item active">
<img src="/assets/image/img1.png" alt="Slide 1" />
<div class="content">
<p>Habitable</p>
<h2>Earth</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, est! Dolor necessitatibus quisquam, rerum iure modi incidunt corporis voluptatem, non illum, ipsum esse ipsam eum consequuntur? Doloremque sequi earum aperiam.</p>
</div>
</div>
<!-- ! Item1 End -->
<!-- ! Item2 Start -->
<div class="item">
<img src="/assets/image/img2.jpg" alt="Slide 1" />
<div class="content">
<p>Habitable</p>
<h2>Earth</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, est! Dolor necessitatibus quisquam, rerum iure modi incidunt corporis voluptatem, non illum, ipsum esse ipsam eum consequuntur? Doloremque sequi earum aperiam.</p>
</div>
</div>
<!-- ! Item2 End -->
<!-- ! Item3 Start -->
<div class="item">
<img src="/assets/image/img3.jpg" alt="Slide 1" />
<div class="content">
<p>Habitable</p>
<h2>Earth</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, est! Dolor necessitatibus quisquam, rerum iure modi incidunt corporis voluptatem, non illum, ipsum esse ipsam eum consequuntur? Doloremque sequi earum aperiam.</p>
</div>
</div>
<!-- ! Item3 End -->
<!-- ! Item4 Start -->
<div class="item">
<img src="/assets/image/img4.jpg" alt="Slide 1" />
<div class="content">
<p>Habitable</p>
<h2>Earth</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, est! Dolor necessitatibus quisquam, rerum iure modi incidunt corporis voluptatem, non illum, ipsum esse ipsam eum consequuntur? Doloremque sequi earum aperiam.</p>
</div>
</div>
<!-- ! Item4 End -->
<!-- ! Item5 Start -->
<div class="item">
<img src="/assets/image/img5.jpg" alt="Slide 1" />
<div class="content">
<p>Habitable</p>
<h2>Earth</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, est! Dolor necessitatibus quisquam, rerum iure modi incidunt corporis voluptatem, non illum, ipsum esse ipsam eum consequuntur? Doloremque sequi earum aperiam.</p>
</div>
</div>
<!-- ! Item5 End -->
<!-- ! Arrow Button Start -->
<div class="arrows">
<button id="prev"><i class="fa-solid fa-caret-left"></i></button>
<button id="next"><i class="fa-solid fa-caret-right"></i></button>
</div>
<!-- ! Arrow Button End -->
</div>
</div>
<!-- ! Slider End -->
</body>
</html>