-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (112 loc) · 5.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Added Favicon -->
<link rel="shortcut icon" href="Assets/Favicon/Favicon_2.png" type="image/x-icon">
<title>Phantom Hacks</title>
<!-- Linked CSS file -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/scroll.css">
<!-- Added Fonts: Nosifer and Creepster -->
<link href="https://fonts.googleapis.com/css2?family=Nosifer&family=Creepster&display=swap" rel="stylesheet">
<!-- Added Font Awesome Icons Latest Version to render Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Page Loader Animation -->
<div id="loading-screen">
<h1>Loading...</h1>
<img src="Assets/Page_Loader.gif" alt="Loading Spinner"> <!-- Optional loading spinner -->
</div>
<!-- Header Section -->
<header class="header">
<nav class="navbar">
<a href="index.html">
<div class="logo">
<img src="Assets/Page_Logo/Logo_Before.png" alt="Phantom Logo" class="logo-image"/>
<h1>Phantom Hacks</h1>
</div>
</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#games">Games</a></li>
<li><a href="/html/about.html">About</a></li>
<li><a href="/html/activities.html">Activities</a></li> <!-- Tell about costumes wearing ceremony here -->
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-text">
<h2>Unleash Your Creativity in the Spooky Realm</h2>
<p>Phantom Hacks - Where Code Meets the Crypt</p>
<a href="/html/about.html" class="cta-button">Learn More</a> <!-- Redirect to About page -->
</div>
</section>
<!-- Games Section --> <!-- Add Game: Catch the witch, Trade Soul, Trick or Treat -->
<section class="games" id="games">
<h2>Games</h2>
<div class="game-cards">
<div class="card">
<a href="/html/catchTheWitch.html">
<h3>Catch the Witch</h3>
<div class="card-img">
<img src="Assets/Game_Cards/Catch the Witch.png" alt="Catch the Witch Game">
</div>
<p>Outrun the broomsticks and snag the mischievous witch before she vanishes into the night!</p>
</a>
</div>
<div class="card">
<a href="/html/tradeyoursoul.html">
<h3>Trade Your Soul</h3>
<div class="card-img">
<img src="Assets/Game_Cards/Trade Soul.jpg" alt="Trade Your Soul" class="card-img">
</div>
<p>Make chilling deals and trade your soul for thrilling rewards in this spine-tingling adventure!
</p>
</a>
</div>
<div class="card">
<a href="/html/trickortreat.html">
<h3>Trick or Treat</h3>
<div class="card-img">
<img src="Assets/Game_Cards/Trick or Treat.jpg" alt="Trick or Treat" class="card-img">
</div>
<p>Embark on a spooky quest for candy, where every house holds a delightful surprise or a haunting
trick!</p>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<h2>The Graveyard</h2>
<form action="#" method="POST">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Book Your Slot</button>
</form>
</section>
<!-- Footer Section -->
<footer class="footer">
<p>© 2024 Phantom Hacks. Built with 💀 and 🎃.</p>
<!-- Add Scroll to top button -->
<button id="scrollToTopBtn" class="scrollToTopBtn" onclick="scrollToTop()">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Social Icons -->
<div class="social-links">
<a href="https://github.com/rajdeepchakraborty-rc/Phantom_Hacks"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/rajdeepchakraborty69/"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://x.com/RajChkDev"><i class="fa-brands fa-x-twitter"></i></a>
</div>
</footer>
<script src="js/script.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>