mirror of
https://github.com/codeninjasuk/hack-o-lantern.git
synced 2024-11-26 01:17:52 -05:00
166 lines
7.2 KiB
HTML
166 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Code Ninjas Langley | Hack-o-Lantern 2023</title>
|
||
|
|
<meta name="description" content="Hack-o-Lantern Hack-a-thon charity fundaiser for Great Ormond Street Hospital Charity (UK)">
|
||
|
|
<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=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/assets/style.css">
|
||
|
|
<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" />
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
fontFamily: {
|
||
|
|
'Montserrat': ['Montserrat'],
|
||
|
|
'Noto-Sans': ['"Noto Sans"'],
|
||
|
|
'Comforter-Brush': ['"Comforter Brush"']
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
|
||
|
|
<body class="font-Noto-Sans">
|
||
|
|
|
||
|
|
<!-- <div class="background-image"></div> -->
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="w-full bg-[url('assets/img/cn-background.png')] bg-cover bg-bottom">
|
||
|
|
<div class="w-full min-h-screen md:w-1/2 bg-gradient-to-b from-gray-900/90 to-gray-900/95 p-5 flex">
|
||
|
|
<!-- <img src="/assets/img/logo.png" width="200" class="mx-auto" alt=""> -->
|
||
|
|
<div class="w-full text-center my-auto">
|
||
|
|
<!-- .font-Comforter-Brush -->
|
||
|
|
|
||
|
|
<!-- <h1 class="font-bold text-5xl text-amber-500 mb-10 md:text-right"></h1> -->
|
||
|
|
<!-- <h6 class="font-Montserrat font-bold uppercase text-2xl md:text-3xl lg:text-4xl mb-14 md:-mr-20 text-white md:text-right">Coming <span class="text-white/70 md:-mr-20">soon</span></h6> -->
|
||
|
|
<h4 class="uppercase mb-5 text-amber-500 font-bold text-lg"><a href="https://codeninjaslangley.co.uk">Code Ninjas Langley</a></h4>
|
||
|
|
<img src="/assets/img/logo.png" width="300" class="mx-auto mb-10" alt="Hack-o-lantern Banner">
|
||
|
|
|
||
|
|
<!-- Count down -->
|
||
|
|
<div class="w-full text-left flex mb-5">
|
||
|
|
<!-- md:place-content-end -->
|
||
|
|
<ul class="w-full flex place-content-center gap-5 mx-auto text-gray-50">
|
||
|
|
<li>
|
||
|
|
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-lg lg:text-2xl h-16 lg:h-16 w-16 lg:w-16" id="cdD">00</div>
|
||
|
|
<p class="text-center text-xs mt-2">Days</p>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-lg lg:text-2xl h-16 lg:h-16 w-16 lg:w-16" id="cdH">00</div>
|
||
|
|
<p class="text-center text-xs mt-2">Hours</p>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-lg lg:text-2xl h-16 lg:h-16 w-16 lg:w-16" id="cdM">00</div>
|
||
|
|
<p class="text-center text-xs mt-2">Minutes</p>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<div class="font-bold text-white rounded-full border-dotted border-gray-700 border-4 flex items-center justify-center text-lg lg:text-2xl h-16 lg:h-16 w-16 lg:w-16" id="cdS">00</div>
|
||
|
|
<p class="text-center text-xs mt-2">Seconds</p>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content -->
|
||
|
|
<h6 class="text-gray-50 font-bold text-lg">JOIN THE FUN, SUPPORT A CAUSE! </h6>
|
||
|
|
<p class="text-base mb-10 text-gray-200 md:text-right" style="text-align: justify;">
|
||
|
|
</br>Get ready for an exciting coding adventure at our <b>Hack-o-lantern Hack-a-thon.</b> </br></br> A game-building contest like no other! A hackathon is where young tech enthusiasts become Code Ninjas, creating innovative games that challenge their creativity and skills. This year, we're teaming up with Great Ormond Street Hospital Charity (UK) to fund critical research, treatments, and healthcare services for children.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="m-3">
|
||
|
|
<a href="https://tiltify.com/+code-ninjas-langley/code-ninjas-langley-hackathon-game-jam" class="btn btn-orange">Donate to GOSH</a>
|
||
|
|
<a href="https://showcase.codeninjaslangley.co.uk/hack-o-lantern" class="btn btn-blue">Learn More</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Social media -->
|
||
|
|
<div class="w-full text-center flex">
|
||
|
|
<ul class="w-full flex text-center place-content-center mt-5 gap-10 mx-auto text-gray-500">
|
||
|
|
<li>
|
||
|
|
<a href="https://www.facebook.com/CodeNinjasLangley" target="_blank" class="text-lg hover:text-amber-500">
|
||
|
|
<i class="fab fa-facebook-f"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://codeninjaslangley.co.uk" target="_blank" class="text-lg hover:text-amber-500">
|
||
|
|
<i class="fa fa-globe"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://www.youtube.com/channel/UC_TJJk5_k-uc40hqWIViOAQ" target="_blank" class="text-lg hover:text-amber-500">
|
||
|
|
<i class="fab fa-youtube"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<a href="https://www.instagram.com/codeninjaslangley" target="_blank" class="text-lg hover:text-amber-500">
|
||
|
|
<i class="fab fa-instagram"></i>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Change the value of countDownEndDate to the day you want to end the count down
|
||
|
|
var countDownEndDate = "October 28, 2023 10:00:00";
|
||
|
|
|
||
|
|
var endDate = new Date(countDownEndDate).getTime();
|
||
|
|
|
||
|
|
var x = setInterval(function() {
|
||
|
|
|
||
|
|
var timeNow = new Date().getTime();
|
||
|
|
|
||
|
|
var timeLeft = endDate - timeNow;
|
||
|
|
|
||
|
|
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
|
||
|
|
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||
|
|
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
|
||
|
|
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
|
||
|
|
|
||
|
|
if(days < 10) {
|
||
|
|
days = "0" + days;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(hours < 10) {
|
||
|
|
hours = "0" + hours;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(minutes < 10) {
|
||
|
|
minutes = "0" + minutes;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(seconds < 10) {
|
||
|
|
seconds = "0" + seconds;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (timeLeft > 0) {
|
||
|
|
document.getElementById("cdD").innerHTML = days;
|
||
|
|
document.getElementById("cdH").innerHTML = hours;
|
||
|
|
document.getElementById("cdM").innerHTML = minutes;
|
||
|
|
document.getElementById("cdS").innerHTML = seconds;
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|