mirror of
https://github.com/codeninjasuk/hack-o-lantern.git
synced 2024-11-25 08:58:00 -05:00
Initial Push
This commit is contained in:
elvistony
parent
4ef40f97f1
commit
3aa6a54002
6 changed files with 210 additions and 0 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2022 Fyrestrap
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
BIN
assets/img/cn-background.png
Normal file
BIN
assets/img/cn-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
assets/img/leaves.jpg
Normal file
BIN
assets/img/leaves.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
BIN
assets/img/logo.png
Normal file
BIN
assets/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
23
assets/style.css
Normal file
23
assets/style.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.btn{
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
opacity: 0.8;
|
||||
transition: 0.5s ease;
|
||||
margin: 5px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-orange{
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.btn-blue{
|
||||
background: deepskyblue;
|
||||
}
|
||||
166
index.html
Normal file
166
index.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!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>
|
||||
Loading…
Reference in a new issue