index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Vancouver Students' Hackathon</title>
		<link rel="stylesheet" href="/css/main.css" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-night.min.css"
			rel="stylesheet"
		/>
		<link rel="icon" type="image/x-icon" href="/assets/images/icons/favicon.ico" />
		<script
			src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
			crossorigin="anonymous"
		></script>
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
			integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		/>
		<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	</head>

	<body>
		<noscript>
			<div id="noscript-container">
				<p style="margin-left: 10px">Please enable JavaScript; this website will not work properly without it.</p>
			</div>
		</noscript>

		<script>
			AOS.init();
		</script>

		<div id="nav-placeholder"></div>
		<script src="/js/navbar.js"></script>

		<div class="container-fluid">
			<!-- Start of Header -->
			<div class="row justify-content-center align-items-center" id="header">
				<div class="text-center">
					<h1 id="header-title" class="display-1 text-center">vsHacks</h1>
					<h4 id="main-description">For Students, By Students</h4>
					<p id="header-date"><i class="fa-solid fa-calendar-day"></i> August 2024</p>
				</div>
			</div>
			<script src="/js/scramble.js"></script>
			<!-- End of Header -->

			<!-- Start of Details Section -->
			<div>
				<h1 class="vshacks-sectionheader">About vsHacks</h1>

				<div class="container-sm d-flex flex-column" style="margin-top: 2.5rem">
					<div class="card text-white vshacks-infocard" data-aos="fade-right">
						<div class="row g-4 expand-on-hover">
							<div class="col d-flex align-items-center justify-content-center" style="margin-left: 10px">
								<img
									src="/assets/images/illustrations/undraw_people.svg"
									class="img-fluid rounded-start d-none d-sm-block"
									alt="Drawing of people"
									style="margin-right: 2rem; max-width: 14rem"
								/>
								<div class="card-body">
									<h5 class="display-6 card-title">Meet New People</h5>
									<p class="card-text">
										At vsHacks, you will have the unique opportunity to work with like-minded students from all across
										the Greater Vancouver area. Build a team of up to four people and start hacking!
									</p>
								</div>
							</div>
						</div>
					</div>

					<div class="card text-white align-self-end vshacks-infocard" data-aos="fade-left">
						<div class="row g-5 expand-on-hover">
							<div class="col d-flex align-items-center justify-content-center" style="margin-left: 10px">
								<img
									src="/assets/images/illustrations/undraw_knowledge.svg"
									class="img-fluid rounded-start d-none d-sm-block"
									alt="Drawing of people"
									style="margin-right: 2rem; max-width: 14rem"
								/>

								<div class="card-body">
									<h5 class="display-6 card-title">Learn New Things</h5>
									<p class="card-text">
										Regardless of your skill level, we're certain that you'll learn something new at vsHacks from our
										experienced mentors. From web development to Discord bots, our workshops have something for
										everyone. Check out our <a class="link-light" href="/schedule">schedule</a> for further details.
									</p>
								</div>
							</div>
						</div>
					</div>

					<div class="card text-white vshacks-infocard" data-aos="fade-right">
						<div class="row g-4 expand-on-hover">
							<div class="col d-flex align-items-center justify-content-center" style="margin-left: 10px">
								<img
									src="/assets/images/illustrations/undraw_deliveries.svg"
									class="img-fluid rounded-start d-none d-sm-block"
									alt="Drawing of people"
									style="margin-right: 2rem; max-width: 14rem"
								/>

								<div class="card-body">
									<h5 class="display-6 card-title">Win Awesome Prizes</h5>
									<p class="card-text">
										Thanks to our <a class="link-light" href="#sponsors">sponsors</a>, we're excited to offer
										amazing software prizes for all participants!.
									</p>
								</div>
							</div>
						</div>
					</div>

					<div class="card text-white align-self-end vshacks-infocard" data-aos="fade-left">
						<div class="row g-4 expand-on-hover">
							<div class="col d-flex align-items-center justify-content-center" style="margin-left: 10px">
								<img
									src="/assets/images/illustrations/undraw_movie_night.svg"
									class="img-fluid rounded-startd-none d-none d-sm-block"
									alt="Drawing of people"
									style="margin-right: 2rem; max-width: 14rem"
								/>

								<div class="card-body">
									<h5 class="display-6 card-title">Have Fun</h5>
									<p class="card-text">
										Though our main focus is programming, we hope that you'll also have fun while doing so. To this end,
										we will be hosting several events and games outside of programming. Activities will range from games
										of Jackbox, to a Minecraft lockout competition!
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- End of Details Section -->

			<div class="container-sm vshacks-section" style="max-width: 40rem">
				<h1 id="" class="vshacks-sectionheader">Register Now!</h1>
				<div class="text-center mb-3">
					<p><i>To participate, you must join both the discord and register for the competition.</i></p>
				</div>
				<div>
					<div class="d-flex justify-content-center">
						<a href="https://discord.com/invite/CQsyzqTvsD" class="btn btn-outline-info mr-3">Join the Discord</a>
						<p>&nbsp &nbsp &nbsp</p>
						<a href="https://vshacks2024.devpost.com/" class="btn btn-outline-warning ml-2">Register Here</a>
					</div>
				</div>
			</div>

			<!-- Start of Sponsors Sections -->
			<div class="container-fluid vshacks-section">
				<h1 id="sponsors" class="vshacks-sectionheader">Sponsors</h1>
				<div class="container text-center" style="max-width: 50rem">

					<div class="row aligh-items-center">
						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://artofproblemsolving.com/" data-aos="zoom-in">
									<img
											width="400"
											class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
											src="/assets/images/sponsors/aops.png"
									/>
								</a>
							</div>
						</div>

						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://1password.com/" data-aos="zoom-in">
									<img
											width="400"
											class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
											src="/assets/images/sponsors/1password.png"
									/>
								</a>
							</div>
						</div>
					</div>

					<div class="row align-items-center">
						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://www.interviewcake.com/" data-aos="zoom-in">
									<img
											width="400"
											class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
											src="/assets/images/sponsors/cake.svg"
									/>
								</a>
							</div>
						</div>

						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://gen.xyz/" data-aos="zoom-in">
									<img
											width="400"
											class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
											src="/assets/images/sponsors/xyz.svg"
									/>
								</a>
							</div>
						</div>
						<div class="row align-items-center">
							<div class="col-sm">
								<div data-aos="zoom-in">
									<a href="https://www.panago.com/" data-aos="zoom-in">
										<img
												width="400"
												class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
												src="/assets/images/sponsors/panago.png"
										/>
									</a>
								</div>
							</div>
							<div class="col-sm">
								<div data-aos="zoom-in">
									<a href="https://www.stevespokebar.ca/" data-aos="zoom-in">
										<img
												width="240"
												class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
												src="/assets/images/sponsors/SPB%20Logo.png"
										/>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>

				<h1 id="past-sponsors" class="vshacks-sectionheader">Past Sponsors</h1>

				<!-- Start of Sponsor Grid -->

				<div class="container text-center" style="max-width: 50rem">
					<div class="row align-items-center">
						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://replit.com/~">
									<img
										width="400"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/replit.png"
									/>
								</a>
							</div>
						</div>

						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://www.taskade.com/">
									<img
										width="400"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/taskade.png"
									/>
								</a>
							</div>
						</div>
					</div>

					<div class="row align-items-center">
						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://www.echo3d.co/" data-aos="zoom-in">
									<img
										width="400"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/echo3d.png"
									/>
								</a>
							</div>
						</div>

						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://pixelpad.io" data-aos="zoom-in">
									<img
										width="400"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/pixelpad.svg"
									/>
								</a>
							</div>
						</div>
					</div>

					<div class="row align-items-center">
						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://www.roboca.org/" data-aos="zoom-in">
									<img
										width="400"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/cyrc.png"
									/>
								</a>
							</div>
						</div>

						<div class="col-sm">
							<div data-aos="zoom-in">
								<a href="https://www.freegeekvancouver.org/" data-aos="zoom-in">
									<img
										width="220"
										class="img-fluid mx-auto d-block vshacks-sponsor expand-on-hover"
										src="/assets/images/sponsors/freegeek.png"
									/>
								</a>
							</div>
						</div>
					</div>
				</div>
				<!-- End of Sponsor Grid -->

				<div class="container" style="max-width: 40rem; color: white !important">
					<div class="alert alert-info text-light">
						<h4 class="alert-heading"><i class="fa-solid fa-handshake-angle"></i> Want to become a sponsor?</h4>
						<p>
							If your company or organization is interested in sponsoring vsHacks, please get in touch through email:
							<a href="mailto:contact@vshacks.tech" style="color: #967af4">contact@vshacks.tech</a>.
						</p>

						For further details, refer to our
						<a href="/assets/documents/sponsorship.pdf" style="color: #967af4">sponsorship package</a>.
					</div>
				</div>
			</div>
			<!-- End of Sponsors Section -->
		</div>

		<!-- Start of FAQ Section -->
		<div class="container-sm vshacks-section" style="max-width: 40rem">
			<h1 id="faq" class="vshacks-sectionheader">Frequently Asked Questions</h1>
			<div class="accordion" id="faq-accordion">
				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-what-is-a-hackathon">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-what-is-a-hackathon"
							aria-expanded="false"
							aria-controls="faq-body-what-is-a-hackathon"
						>
							Q. What even is a hackathon?
						</button>
					</h2>
					<div
						id="faq-body-what-is-a-hackathon"
						class="accordion-collapse collapse"
						aria-labelledby="faq-header-what-is-a-hackathon"
					>
						<div class="accordion-body">
							A hackathon is a competition where programmers and graphic designers come together to create a project
							from scratch. During a hackathon, there will also be other fun activities and educational workshops. At
							the end of the hackathon, teams will present their project, and there will be prizes!
						</div>
					</div>
				</div>

				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-no-programming-friends">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-no-programming-friends"
							aria-expanded="false"
							aria-controls="faq-body-no-programming-friends"
						>
							Q. What if I don't have any friends that program to form a team with?
						</button>
					</h2>
					<div
						id="faq-body-no-programming-friends"
						class="accordion-collapse collapse"
						aria-labelledby="faq-header-no-programming-friends"
					>
						<div class="accordion-body">
							You can also invite friends who are passionate about design, marketing, presenting, etc., as those are
							valuable skills at a hackathon as well! We can also help you find a team, where you can meet new people
							and make new friends!
						</div>
					</div>
				</div>

				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-languages">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-languages"
							aria-expanded="false"
							aria-controls="faq-body-languages"
						>
							Q. What languages and tools am I allowed to use?
						</button>
					</h2>
					<div id="faq-body-languages" class="accordion-collapse collapse" aria-labelledby="faq-header-languages">
						<div class="accordion-body">
							You can use any language and any tool that your want - Python, HTML, Unity, even Scratch is allowed!
						</div>
					</div>
				</div>

				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-other-schools">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-other-schools"
							aria-expanded="false"
							aria-controls="faq-body-other-schools"
						>
							Q. If I don't attend any of the hosting schools, can I still join?
						</button>
					</h2>
					<div
						id="faq-body-other-schools"
						class="accordion-collapse collapse"
						aria-labelledby="faq-header-other-schools"
					>
						<div class="accordion-body">YES! Just make sure to enter your school name during registration.</div>
					</div>
				</div>

				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-experience">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-experience"
							aria-expanded="false"
							aria-controls="faq-body-experience"
						>
							Q. I am a beginner at coding, can I still participate?
						</button>
					</h2>
					<div id="faq-body-experience" class="accordion-collapse collapse" aria-labelledby="faq-header-experience">
						<div class="accordion-body">
							YES! There are lots of mentors and workshops to get your started with your programming journey. Teaming up
							with experienced friends also help! Some prizes are also given out to the people who have improved the
							most!
						</div>
					</div>
				</div>

				<div class="accordion-item vshacks-faq">
					<h2 class="accordion-header" id="faq-header-start-before">
						<button
							class="accordion-button collapsed vshacks-faqbutton"
							type="button"
							data-bs-toggle="collapse"
							data-bs-target="#faq-body-start-before"
							aria-expanded="false"
							aria-controls="faq-body-start-before"
						>
							Q. Am I allowed to start a project before the opening?
						</button>
					</h2>
					<div id="faq-body-start-before" class="accordion-collapse collapse" aria-labelledby="faq-header-start-before">
						<div class="accordion-body">
							No. Participants are strictly forbidden to start the project before the official opening. You may,
							however, come up with an idea beforehand. However, if we find that you have started before the
							competition, your eligibility for prizes will be terminated.
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- End of FAQ Section -->

		<div id="footer-placeholder"></div>
		<script src="/js/footer.js"></script>
	</body>
</html>

<!-- Hello from Git Workshop! -->