codeninjasuk/dojo
1
0
Fork 0
mirror of https://github.com/codeninjasuk/dojo.git synced 2024-11-22 07:27:50 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
dojo/index.html
elvistony 90187b5808 Added Showcase Games
2023-11-02 22:02:51 +00:00

225 lines
No EOL
12 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Ninjas | Langley Dojo</title>
<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">
<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">
</head>
<body class="" style="background-color: #0c0517;">
<!-- bg-black -->
<div class="title mt-5 text-center justify-center items-center" style="text-align:-webkit-center;">
<img src="/img/logo-cn.png" class="justify-center" width="200" alt="">
<h2 class="text-white text-lg">Welcome to Code Ninjas Langley!</h2>
</div>
<!-- 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">
<!-- <div class="w-3/5 px-2">
<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">
</div> -->
<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>
<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>
<div class="w-3/5 px-2">
<img class="options"
data-href="https://arcade.makecode.com/"
src="/img/options/dojo-makecode-arcade.png"
loading="lazy">
</div>
<!-- <div class="w-3/5 px-2">
<img class="options" data-href="https://padlet.com/codeninjaslangleybrkuk/hackathon-2023-x1k1wkxnk5gdvlbo" src="/img/options/hack-o-lantern-submit.png" loading="lazy">
</div> -->
<div class="w-3/5 px-2">
<img class="options"
data-href="https://makecode.microbit.org/"
src="/img/options/dojo-makecode-microbit.png"
loading="lazy">
</div>
<div class="w-3/5 px-2">
<img class="options"
data-href="https://forms.codeninjas.com/gamejamuk"
src="/img/options/dojo-gamejam.png"
loading="lazy">
</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>
<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>
</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">
<!-- <div class="w-3/5 px-2">
<img class="options"
data-href="https://scratch.mit.edu/projects/911710531/"
src="/img/options/hack-o-lantern-jr.png"
loading="lazy">
</div> -->
<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>
<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>
</div>
</div>
</div>
</div>
</main>
<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>
<script src="js/carousel.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink