Added Christmas Activity tiles

css/styles.css

@@ -21,4 +21,25 @@
 
 .is-selected{
     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;
 }

index.html

@@ -19,6 +19,8 @@
     <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>
+        <h3 class="text-gray-400 text-center text-lg text-1xl font-bold">🎄MERRY CHRISTMAS🎄</h3>
+
     </div>
     <!-- min-h-screen -->
     <main class="text-white flex items-center justify-center" x-data="carouselFilter()">
@@ -87,6 +89,14 @@
                 <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> -->
+                <!-- 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">
                   <img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy">
                 </div>
@@ -223,9 +233,11 @@
               </div>
             </div>
           </div>
-          
+
         </div>
+        
       </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://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
       <script src="js/carousel.js"></script>