2023-10-12 07:46:57 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2023-10-13 05:22:19 -04:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Code Ninjas | Langley Dojo</title>
|
2023-10-13 09:17:14 -04:00
|
|
|
|
2023-10-13 05:22:19 -04:00
|
|
|
<meta name="description" content="Code Ninjas Langley | Landing Page">
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
|
|
|
|
|
<link rel="stylesheet" href="/css/styles.css">
|
2023-10-13 05:23:22 -04:00
|
|
|
<link rel="icon" type="image/png" href="https://impact.codeninjas.com/favicon.ico">
|
|
|
|
|
<link rel="shortcut icon" href="https://impact.codeninjas.com/favicon.ico" type="image/x-icon">
|
2023-12-01 11:20:56 -05:00
|
|
|
<link rel="stylesheet" href="/css/snow.css">
|
2023-10-12 07:46:57 -04:00
|
|
|
</head>
|
2023-12-01 11:20:56 -05:00
|
|
|
<body class="" style="background-color: #17202A;">
|
2024-02-22 10:46:29 -05:00
|
|
|
<!-- <div class="snow"></div> -->
|
2023-10-13 05:22:19 -04:00
|
|
|
<!-- bg-black -->
|
|
|
|
|
<div class="title mt-5 text-center justify-center items-center" style="text-align:-webkit-center;">
|
2023-10-28 01:00:13 -04:00
|
|
|
<img src="/img/logo-cn.png" class="justify-center" width="200" alt="">
|
2023-10-13 05:22:19 -04:00
|
|
|
<h2 class="text-white text-lg">Welcome to Code Ninjas Langley!</h2>
|
2024-02-22 10:46:29 -05:00
|
|
|
<!-- <h3 class="text-gray-400 text-center text-lg text-1xl font-bold">🌟Happy New Year!🌟</h3> -->
|
2023-12-14 07:06:30 -05:00
|
|
|
|
2023-10-12 07:46:57 -04:00
|
|
|
</div>
|
2023-10-13 05:22:19 -04:00
|
|
|
<!-- min-h-screen -->
|
|
|
|
|
<main class="text-white flex items-center justify-center" x-data="carouselFilter()">
|
|
|
|
|
<div class="container grid grid-cols-1">
|
|
|
|
|
<div class="flex py-12 justify-center">
|
|
|
|
|
<a class="px-2 text-lg uppercase font-bold tracking-widest hover:text-white" :class="{ 'text-gray-800': active != 0 }" href="#" @click.prevent="changeActive(0)">CREATE</a>
|
|
|
|
|
<a class="px-2 text-lg uppercase font-bold tracking-widest hover:text-white" :class="{ 'text-gray-700': active != 1 }" href="#" @click.prevent="changeActive(1)">JUNIOR</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row-start-2 col-start-1"
|
|
|
|
|
x-show="active == 0"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform scale-90"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave="transition ease-in duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform scale-90"
|
|
|
|
|
>
|
|
|
|
|
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
|
|
|
|
<!-- <div class="col-start-1 row-start-1 relative z-20 flex items-center justify-center pointer-events-none">
|
|
|
|
|
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 0"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Create</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 1"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Avocado</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 2"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Mango</h1>
|
|
|
|
|
<h1 class="absolute text-5xl uppercase font-black tracking-widest"
|
|
|
|
|
x-show="active == 3"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform translate-y-12"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave="transition ease-out duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform translate-y-0"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform -translate-y-12"
|
|
|
|
|
>Orange</h1>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="carousel col-start-1 row-start-1" x-ref="carousel">
|
2023-10-28 01:11:50 -04:00
|
|
|
|
2023-11-02 16:03:28 -04:00
|
|
|
<!-- <div class="w-3/5 px-2">
|
2023-10-28 01:00:13 -04:00
|
|
|
<img class="options" data-href="https://bit.ly/hackolantern2023" src="/img/options/hack-o-lantern.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://bit.ly/hackolantern2023code" src="/img/options/hack-o-lantern-with-code.png" loading="lazy">
|
2023-11-02 16:03:28 -04:00
|
|
|
</div> -->
|
2023-12-14 07:06:30 -05:00
|
|
|
<!-- Christmas Special START-->
|
2023-12-30 06:59:45 -05:00
|
|
|
<!-- <div class="w-3/5 px-2">
|
2023-12-14 07:06:30 -05:00
|
|
|
<img class="options" data-href="https://arcade.makecode.com/#tutorial:https://github.com/Code-Ninjas-Home-Office/Code-Ninjas-Tutorials/santa" src="/img/options/christmas-game-B.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://arcade.makecode.com/S94382-28155-37808-09441" src="/img/options/christmas-game-A.png" loading="lazy">
|
2023-12-30 06:59:45 -05:00
|
|
|
</div> -->
|
2023-12-14 07:06:30 -05:00
|
|
|
<!-- Christmas Special END-->
|
2023-10-13 05:22:19 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options" data-href="https://dojo.code.ninja/welcome/cn-langley-brk-uk/" src="/img/options/create-gdp.png" loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://codeninjaslangley.co.uk/gdp/functions.html"
|
|
|
|
|
src="/img/options/create-gdp-docs.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-10-14 02:58:55 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://studio.code.org/s/aquatic/reset"
|
|
|
|
|
src="/img/options/dojo-code-voyage-aquatic.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-10-13 05:22:19 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://arcade.makecode.com/"
|
2023-10-13 09:17:14 -04:00
|
|
|
src="/img/options/dojo-makecode-arcade.png"
|
2023-10-13 05:22:19 -04:00
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-11-02 16:03:28 -04:00
|
|
|
<!-- <div class="w-3/5 px-2">
|
2023-10-28 01:11:50 -04:00
|
|
|
<img class="options" data-href="https://padlet.com/codeninjaslangleybrkuk/hackathon-2023-x1k1wkxnk5gdvlbo" src="/img/options/hack-o-lantern-submit.png" loading="lazy">
|
2023-11-02 16:03:28 -04:00
|
|
|
</div> -->
|
2023-10-13 05:22:19 -04:00
|
|
|
<div class="w-3/5 px-2">
|
2023-10-13 09:17:14 -04:00
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://makecode.microbit.org/"
|
|
|
|
|
src="/img/options/dojo-makecode-microbit.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-11-18 02:12:21 -05:00
|
|
|
<!-- <div class="w-3/5 px-2">
|
2023-10-13 05:22:19 -04:00
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://forms.codeninjas.com/gamejamuk"
|
|
|
|
|
src="/img/options/dojo-gamejam.png"
|
|
|
|
|
loading="lazy">
|
2023-11-18 02:12:21 -05:00
|
|
|
</div> -->
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://leaderboard.codeninjaslangley.co.uk"
|
|
|
|
|
src="/img/options/dojo-leaderboard.png"
|
|
|
|
|
loading="lazy">
|
2023-11-02 16:03:28 -04:00
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://mindmakers.cc/hourofcode/maps.html?lang=en"
|
|
|
|
|
src="/img/options/create-mindmakers.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://codecombat.com/play/dungeon?hour_of_code=true"
|
|
|
|
|
src="/img/options/create-codecombat-kithgard.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://codecombat.com/play/hoc-2018"
|
|
|
|
|
src="/img/options/create-codecombat-hoc.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://codecombat.com/play/goblins-hoc?hour_of_code=true"
|
|
|
|
|
src="/img/options/create-codecombat-goblinhoc.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-11-02 18:02:51 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://games.codeninjaslangley.co.uk"
|
|
|
|
|
src="/img/options/dojo-showcase.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-10-13 05:22:19 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row-start-2 col-start-1"
|
|
|
|
|
x-show="active == 1"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0 transform scale-90"
|
|
|
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave="transition ease-in duration-300"
|
|
|
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
|
|
|
x-transition:leave-end="opacity-0 transform scale-90"
|
|
|
|
|
>
|
|
|
|
|
<div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
|
|
|
|
|
<div class="carousel col-start-1 row-start-1" x-ref="carousel">
|
2023-11-02 16:03:28 -04:00
|
|
|
<!-- <div class="w-3/5 px-2">
|
2023-10-28 01:00:13 -04:00
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://scratch.mit.edu/projects/911710531/"
|
|
|
|
|
src="/img/options/hack-o-lantern-jr.png"
|
|
|
|
|
loading="lazy">
|
2023-11-02 16:03:28 -04:00
|
|
|
</div> -->
|
2023-10-13 05:22:19 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://scratch.mit.edu/"
|
|
|
|
|
src="/img/options/jr-scratch.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://www.roomrecess.com/games/DragonDrop/play.html"
|
|
|
|
|
src="/img/options/jr-dragon-drop.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://www.bbc.co.uk/bitesize/topics/zf2f9j6/articles/z3c6tfr"
|
|
|
|
|
src="/img/options/jr-dance-mat-typing.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://thisissand.com/"
|
|
|
|
|
src="/img/options/jr-thisissand.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-11-02 16:03:28 -04:00
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://draw.tate.org.uk/"
|
|
|
|
|
src="/img/options/jr-tate-draw.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-3/5 px-2">
|
|
|
|
|
<img class="options"
|
|
|
|
|
data-href="https://www.tate.org.uk/games/tate-paint/index.html"
|
|
|
|
|
src="/img/options/jr-tate-paint.png"
|
|
|
|
|
loading="lazy">
|
|
|
|
|
</div>
|
2023-10-13 05:22:19 -04:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-12-14 07:06:30 -05:00
|
|
|
|
2023-10-13 05:22:19 -04:00
|
|
|
</div>
|
2023-12-14 07:06:30 -05:00
|
|
|
|
2023-10-13 05:22:19 -04:00
|
|
|
</main>
|
2023-12-14 07:06:30 -05:00
|
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfu0DuGfp3A529dCs1FU1kJAcHA9DkVgpHLRUe6DDjH_4WeKg/viewform" class="add-button" target="_blank">+</a>
|
2023-10-13 05:22:19 -04:00
|
|
|
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
|
2023-11-02 16:03:28 -04:00
|
|
|
<script src="js/carousel.js"></script>
|
2023-10-12 07:46:57 -04:00
|
|
|
</body>
|
2024-01-04 10:42:04 -05:00
|
|
|
</html>
|
