-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (139 loc) · 6.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Snatch - NST-SDC Event Registration</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="l.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<meta name="referrer" content="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="hero">
<div class="glowing-overlay"></div>
<div class="container">
<div class="club-brand">
<span class="club-name">NST-SDC</span>
<span class="club-line"></span>
<span class="club-subtitle"> Student Developers Club</span>
</div>
<h1 data-text="QUICK SNATCH">QUICK SNATCH</h1>
<p class="tagline">An exciting campus-wide team challenge</p>
<div id="countdown" class="countdown">
<div>
<span id="days">00</span>
<label>Days</label>
</div>
<div>
<span id="hours">00</span>
<label>Hours</label>
</div>
<div>
<span id="minutes">00</span>
<label>Minutes</label>
</div>
<div>
<span id="seconds">00</span>
<label>Seconds</label>
</div>
</div>
</div>
</div>
<main>
<section class="event-overview">
<h2><i class="fas fa-info-circle"></i> Ready for the Ultimate Tech Hunt?</h2>
<p>🚀 Join an adrenaline-pumping race across campus! Crack codes, solve puzzles, and conquer five challenging checkpoints. Your wit, speed, and teamwork could lead you to glory! Are you ready to prove you're the best?</p>
</section>
<section class="event-structure">
<h2><i class="fas fa-sitemap"></i> Event Structure</h2>
<div class="structure-grid">
<div class="structure-card">
<i class="fas fa-users"></i>
<h3>Team Dynamics</h3>
<p>One member must be stationed in the classroom while another tackles outdoor challenges. Roles can be switched during the event.</p>
</div>
<div class="structure-card">
<i class="fas fa-flag-checkered"></i>
<h3>Checkpoints</h3>
<p>Solve problems to receive hints, collaborate with teammates, and progress through five exciting checkpoints.</p>
</div>
<div class="structure-card">
<i class="fas fa-trophy"></i>
<h3>Victory</h3>
<p>The team with the highest points and fastest completion time wins the challenge!</p>
</div>
</div>
</section>
<section class="rules">
<h2><i class="fas fa-gavel"></i> Rules and Regulations</h2>
<ul>
<li>Maintain classroom presence at all times</li>
<li>Each member must solve at least one checkpoint challenge</li>
<li>Points awarded for successful checkpoint completion</li>
<li>Team switching allowed between roles</li>
<li>Fair play and collaboration is essential</li>
</ul>
</section>
<section class="registration-form">
<h2><i class="fas fa-edit"></i> Register Your Team</h2>
<form name="event-registration" netlify netlify-honeypot="bot-field" hidden>
<input type="text" name="teamName" />
<input type="text" name="member1" />
<input type="email" name="email1" />
<input type="text" name="member2" />
<input type="email" name="email2" />
<input type="text" name="member3" />
<input type="email" name="email3" />
<input type="text" name="member4" />
<input type="email" name="email4" />
</form>
<form id="registrationForm" name="event-registration" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
<input type="hidden" name="form-name" value="event-registration">
<p class="hidden">
<label>Don't fill this out if you're human: <input name="bot-field" /></label>
</p>
<div class="form-group">
<label for="teamName">Team Name</label>
<input type="text" id="teamName" name="teamName" required>
</div>
<div class="team-members">
<h3>Team Members</h3>
<div class="form-group">
<label for="member1">Member 1 (Team Leader)</label>
<input type="text" id="member1" name="member1" required>
<input type="email" id="email1" name="email1" placeholder="Email" required>
</div>
<div class="form-group">
<label for="member2">Member 2</label>
<input type="text" id="member2" name="member2" required>
<input type="email" id="email2" name="email2" placeholder="Email" required>
</div>
<div class="form-group">
<label for="member3">Member 3</label>
<input type="text" id="member3" name="member3" required>
<input type="email" id="email3" name="email3" placeholder="Email" required>
</div>
<div class="form-group">
<label for="member4">Member 4</label>
<input type="text" id="member4" name="member4" required>
<input type="email" id="email4" name="email4" placeholder="Email" required>
</div>
</div>
<button type="submit" class="submit-btn">Register Team</button>
</form>
<div id="successMessage" class="success-message" style="display: none;">
<p>Thank you for registering! We look forward to seeing you at the event.</p>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<p>© 2024 NST-SDC. All rights reserved.</p>
<p class="creator-credit">Crafted by <a href="https://github.com/mrgear111" target="_blank" class="creator-name">Daksh</a></p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>