Added Christmas Activity tiles

This commit is contained in:
elvistony 2023-12-14 12:06:30 +00:00
parent ecd1a2879a
commit 35169f6e8e
4 changed files with 34 additions and 1 deletions

View file

@ -21,4 +21,25 @@
.is-selected{ .is-selected{
opacity: 1 !important; opacity: 1 !important;
}
.add-button{
position: absolute;
bottom: 15px;
left: 15px;
background: gray;
padding: 5px;
border-radius: 50%;
height: 45px;
width: 45px;
color: white;
text-align: center;
font-size: 20px;
font-weight: 800;
transition: 0.4s ease;
}
.add-button:hover{
background-color: lightgray;
color: gray;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

View file

@ -19,6 +19,8 @@
<div class="title mt-5 text-center justify-center items-center" style="text-align:-webkit-center;"> <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=""> <img src="/img/logo-cn.png" class="justify-center" width="200" alt="">
<h2 class="text-white text-lg">Welcome to Code Ninjas Langley!</h2> <h2 class="text-white text-lg">Welcome to Code Ninjas Langley!</h2>
<h3 class="text-gray-400 text-center text-lg text-1xl font-bold">🎄MERRY CHRISTMAS🎄</h3>
</div> </div>
<!-- min-h-screen --> <!-- min-h-screen -->
<main class="text-white flex items-center justify-center" x-data="carouselFilter()"> <main class="text-white flex items-center justify-center" x-data="carouselFilter()">
@ -87,6 +89,14 @@
<div class="w-3/5 px-2"> <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"> <img class="options" data-href="https://bit.ly/hackolantern2023code" src="/img/options/hack-o-lantern-with-code.png" loading="lazy">
</div> --> </div> -->
<!-- Christmas Special START-->
<div class="w-3/5 px-2">
<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">
</div>
<!-- Christmas Special END-->
<div class="w-3/5 px-2"> <div class="w-3/5 px-2">
<img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy"> <img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy">
</div> </div>
@ -223,9 +233,11 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</main> </main>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfu0DuGfp3A529dCs1FU1kJAcHA9DkVgpHLRUe6DDjH_4WeKg/viewform" class="add-button" target="_blank">+</a>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <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="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<script src="js/carousel.js"></script> <script src="js/carousel.js"></script>