<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafBox Technologies - Merry Christmas 2025</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--neon-green: #00ff88;
--neon-gold: #ffd700;
--ice-blue: #00d4ff;
--deep-blue: #0a0e27;
--midnight: #050810;
}
body {
font-family: 'Exo 2', sans-serif;
background: linear-gradient(135deg, var(--midnight) 0%, var(--deep-blue) 100%);
color: #fff;
overflow-x: hidden;
transition: background 0.5s ease;
}
body.light-mode {
background: linear-gradient(135deg, #e8f4f8 0%, #ffffff 100%);
color: #1a1a2e;
}
canvas {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
}
.container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(0, 255, 136, 0.3);
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
font-weight: 900;
text-shadow: 0 0 20px var(--neon-green);
cursor: pointer;
transition: all 0.3s ease;
}
.logo:hover {
text-shadow: 0 0 30px var(--neon-green), 0 0 50px var(--neon-green);
transform: scale(1.05);
}
.nav-links {
display: flex;
gap: 30px;
list-style: none;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
position: relative;
}
body.light-mode .nav-links a {
color: #1a1a2e;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--neon-green), var(--ice-blue));
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.theme-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--neon-green);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Exo 2', sans-serif;
}
.theme-toggle:hover {
background: var(--neon-green);
color: var(--midnight);
box-shadow: 0 0 20px var(--neon-green);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
padding: 100px 0;
}
.hero-content {
z-index: 3;
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--neon-green), var(--ice-blue), var(--neon-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
0%,
100% {
filter: drop-shadow(0 0 10px var(--neon-green));
}
50% {
filter: drop-shadow(0 0 30px var(--ice-blue));
}
}
.hero p {
font-size: 1.2rem;
margin-bottom: 40px;
font-weight: 300;
opacity: 0.9;
}
.tree-container {
position: relative;
width: 300px;
height: 400px;
margin: 50px auto;
}
.tree-line {
position: absolute;
background: linear-gradient(180deg, var(--neon-green), var(--ice-blue));
width: 2px;
transform-origin: top;
animation: tree-grow 2s ease-out forwards;
box-shadow: 0 0 10px var(--neon-green);
}
@keyframes tree-grow {
from {
height: 0;
opacity: 0;
}
to {
height: 100%;
opacity: 1;
}
}
.ornament {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
animation: ornament-glow 2s ease-in-out infinite;
}
@keyframes ornament-glow {
0%,
100% {
box-shadow: 0 0 10px currentColor;
}
50% {
box-shadow: 0 0 25px currentColor, 0 0 40px currentColor;
}
}
.star {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 40px;
color: var(--neon-gold);
animation: star-rotate 4s linear infinite;
filter: drop-shadow(0 0 20px var(--neon-gold));
}
@keyframes star-rotate {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}
/* About Section */
.about {
padding: 100px 0;
position: relative;
}
.section-title {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
text-align: center;
margin-bottom: 60px;
text-shadow: 0 0 20px var(--ice-blue);
}
.timeline {
position: relative;
padding: 40px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--neon-green), var(--ice-blue));
box-shadow: 0 0 10px var(--neon-green);
}
.timeline-item {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
opacity: 0;
animation: fade-in-up 0.8s ease-out forwards;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-content {
width: 45%;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--neon-green);
border-radius: 10px;
position: relative;
backdrop-filter: blur(10px);
}
body.light-mode .timeline-content {
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--ice-blue);
}
.timeline-content::before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: var(--neon-gold);
border-radius: 50%;
top: 25px;
box-shadow: 0 0 20px var(--neon-gold);
}
.timeline-item:nth-child(odd) .timeline-content {
margin-right: auto;
}
.timeline-item:nth-child(odd) .timeline-content::before {
right: -58px;
}
.timeline-item:nth-child(even) .timeline-content {
margin-left: auto;
}
.timeline-item:nth-child(even) .timeline-content::before {
left: -58px;
}
.timeline-year {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
color: var(--neon-green);
margin-bottom: 10px;
}
/* Services Section */
.services {
padding: 100px 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 60px;
}
.service-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid transparent;
border-radius: 15px;
padding: 30px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
backdrop-filter: blur(10px);
}
body.light-mode .service-card {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.service-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--neon-green), var(--ice-blue), var(--neon-gold));
border-radius: 15px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.service-card:hover::before {
opacity: 1;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 255, 136, 0.3);
}
.service-icon {
font-size: 3rem;
margin-bottom: 20px;
display: inline-block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.service-card h3 {
font-family: 'Orbitron', sans-serif;
margin-bottom: 15px;
font-size: 1.3rem;
}
.service-card p {
font-weight: 300;
line-height: 1.6;
opacity: 0.8;
}
.service-details {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.service-card:hover .service-details {
max-height: 200px;
}
/* Greeting Section */
.greeting {
padding: 100px 0;
text-align: center;
position: relative;
}
.greeting-text {
font-size: 2rem;
font-family: 'Orbitron', sans-serif;
margin-bottom: 40px;
background: linear-gradient(45deg, var(--neon-green), var(--ice-blue), var(--neon-gold), var(--neon-green));
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 5s ease infinite;
}
@keyframes gradient-shift {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.contact-btn {
display: inline-block;
padding: 15px 40px;
background: transparent;
border: 2px solid var(--neon-green);
color: #fff;
font-family: 'Orbitron', sans-serif;
text-decoration: none;
border-radius: 30px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
body.light-mode .contact-btn {
color: #1a1a2e;
border-color: var(--ice-blue);
}
.contact-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--neon-green);
transition: all 0.5s ease;
transform: translate(-50%, -50%);
}
.contact-btn:hover::before {
width: 300px;
height: 300px;
}
.contact-btn:hover {
color: var(--midnight);
box-shadow: 0 0 30px var(--neon-green);
}
.contact-btn span {
position: relative;
z-index: 1;
}
/* Countdown */
.countdown {
margin-top: 60px;
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.countdown-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--ice-blue);
border-radius: 10px;
padding: 20px 30px;
min-width: 100px;
backdrop-filter: blur(10px);
}
body.light-mode .countdown-item {
background: rgba(255, 255, 255, 0.8);
}
.countdown-number {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
color: var(--neon-gold);
text-shadow: 0 0 20px var(--neon-gold);
}
.countdown-label {
font-size: 0.9rem;
opacity: 0.7;
margin-top: 5px;
}
/* Footer */
footer {
padding: 60px 0 30px;
border-top: 1px solid rgba(0, 255, 136, 0.3);
text-align: center;
}
.footer-content {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin-bottom: 40px;
}
.footer-section {
margin: 20px;
}
.footer-section h4 {
font-family: 'Orbitron', sans-serif;
margin-bottom: 15px;
color: var(--neon-green);
}
.footer-section a {
display: block;
color: #fff;
text-decoration: none;
margin: 8px 0;
opacity: 0.7;
transition: all 0.3s ease;
}
body.light-mode .footer-section a {
color: #1a1a2e;
}
.footer-section a:hover {
opacity: 1;
transform: translateX(5px);
}
.copyright {
opacity: 0.5;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.nav-links {
display: none;
}
.timeline::before {
left: 20px;
}
.timeline-content {
width: calc(100% - 60px);
margin-left: 60px !important;
}
.timeline-item:nth-child(even) .timeline-content::before {
left: -58px;
}
.greeting-text {
font-size: 1.5rem;
}
}
/* Easter Egg */
.easter-egg {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--neon-green);
color: var(--midnight);
padding: 15px 25px;
border-radius: 10px;
font-family: 'Orbitron', sans-serif;
transform: translateY(200px);
transition: transform 0.5s ease;
z-index: 1000;
box-shadow: 0 10px 30px rgba(0, 255, 136, 0.5);
}
.easter-egg.show {
transform: translateY(0);
}
</style>
</head>
<body>
<canvas id="snowCanvas"></canvas>
<div class="container">
<nav>
<div class="logo" onclick="easterEgg()">🍃 LeafBox</div>
<ul class="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
</nav>
<section id="hero" class="hero">
<div class="hero-content">
<h1>Merry Christmas from LeafBox Technologies</h1>
<p>Innovating into the Future</p>
<div class="tree-container" id="tree">
<div class="star">✦</div>
</div>
</div>
</section>
<section id="about" class="about">
<h2 class="section-title">Our Journey Through Innovation</h2>
<div class="timeline">
<div class="timeline-item" style="animation-delay: 0.2s;">
<div class="timeline-content">
<div class="timeline-year">2020</div>
<h3>Foundation</h3>
<p>LeafBox Technologies was born with a vision to revolutionize the tech landscape.</p>
</div>
</div>
<div class="timeline-item" style="animation-delay: 0.4s;">
<div class="timeline-content">
<div class="timeline-year">2022</div>
<h3>Global Expansion</h3>
<p>Opened offices in 5 countries, serving clients worldwide with cutting-edge solutions.</p>
</div>
</div>
<div class="timeline-item" style="animation-delay: 0.6s;">
<div class="timeline-content">
<div class="timeline-year">2024</div>
<h3>AI Integration</h3>
<p>Launched our proprietary AI platform, transforming how businesses operate.</p>
</div>
</div>
<div class="timeline-item" style="animation-delay: 0.8s;">
<div class="timeline-content">
<div class="timeline-year">2025</div>
<h3>Future Ready</h3>
<p>Leading the charge in quantum computing and sustainable technology.</p>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<h2 class="section-title">Our Services</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">🚀</div>
<h3>Cloud Solutions</h3>
<p>Scalable infrastructure for the modern enterprise</p>
<div class="service-details">
<p>Advanced cloud architecture, migration services, and 24/7 support for your growing business needs.</p>
</div>
</div>
<div class="service-card">
<div class="service-icon">🤖</div>
<h3>AI Development</h3>
<p>Intelligent systems that learn and adapt</p>
<div class="service-details">
<p>Custom machine learning models, natural language processing, and predictive analytics solutions.</p>
</div>
</div>
<div class="service-card">
<div class="service-icon">🔒</div>
<h3>Cybersecurity</h3>
<p>Protection for your digital assets</p>
<div class="service-details">
<p>Advanced threat detection, penetration testing, and comprehensive security audits.</p>
</div>
</div>
<div class="service-card">
<div class="service-icon">📱</div>
<h3>App Development</h3>
<p>Beautiful, functional mobile experiences</p>
<div class="service-details">
<p>Native and cross-platform applications with stunning UI/UX design.</p>
</div>
</div>
<div class="service-card">
<div class="service-icon">⚡</div>
<h3>IoT Solutions</h3>
<p>Connected devices, smarter outcomes</p>
<div class="service-details">
<p>End-to-end IoT implementation from sensors to cloud analytics.</p>
</div>
</div>
<div class="service-card">
<div class="service-icon">🎯</div>
<h3>Consulting</h3>
<p>Strategic guidance for digital transformation</p>
<div class="service-details">
<p>Expert advisory services to optimize your technology roadmap.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="greeting">
<p class="greeting-text">Wishing you innovation, joy, and success this holiday season</p>
<a href="mailto:hello@leafbox.tech" class="contact-btn">
<span>Get In Touch</span>
</a>
<div class="countdown" id="countdown">
<div class="countdown-item">
<div class="countdown-number" id="days">00</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="hours">00</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="minutes">00</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-item">
<div class="countdown-number" id="seconds">00</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<div class="footer-section">
<h4>Company</h4>
<a href="#about">About Us</a>
<a href="#services">Services</a>
<a href="#">Careers</a>
</div>
<div class="footer-section">
<h4>Resources</h4>
<a href="#">Blog</a>
<a href="#">Case Studies</a>
<a href="#">Documentation</a>
</div>
<div class="footer-section">
<h4>Connect</h4>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">GitHub</a>
</div>
</div>
<p class="copyright">© 2025 LeafBox Technologies. Where Technology Meets the Magic of Christmas.</p>
</footer>
</div>
<div class="easter-egg" id="easterEgg">
🎄 Ho Ho Code! Happy Holidays from the LeafBox Team! 🎅
</div>
<script>
// Snow Canvas Animation
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowflakes = [];
const colors = ['#00ff88', '#00d4ff', '#ffd700'];
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height - canvas.height;
this.size = Math.random() * 3 + 1;
this.speedY = Math.random() * 1 + 0.5;
this.speedX = Math.random() * 0.5 - 0.25;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.opacity = Math.random() * 0.5 + 0.3;
}
update() {
this.y += this.speedY;
this.x += this.speedX;
if (this.y > canvas.height) {
this.y = -10;
this.x = Math.random() * canvas.width;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.opacity;
ctx.fill();
ctx.globalAlpha = 1;
// Glow effect
ctx.shadowBlur = 10;
ctx.shadowColor = this.color;
ctx.fill();
ctx.shadowBlur = 0;
}
}
for (let i = 0; i < 100; i++) {
snowflakes.push(new Snowflake());
}
function animateSnow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach(flake => {
flake.update();
flake.draw();
});
requestAnimationFrame(animateSnow);
}
animateSnow();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Generate Christmas Tree
function generateTree() {
const tree = document.getElementById('tree');
const layers = 8;
const ornamentColors = ['#00ff88', '#00d4ff', '#ffd700', '#ff6ec7'];
for (let i = 0; i < layers; i++) {
const layerWidth = 40 + i * 30;
const branches = 5 + i * 2;
for (let j = 0; j < branches; j++) {
const line = document.createElement('div');
line.className = 'tree-line';
const angle = (j / branches) * 360;
const length = layerWidth;
line.style.height = length + 'px';
line.style.left = '50%';
line.style.top = (20 + i * 30) + 'px';
line.style.transform = `rotate(${angle}deg)`;
line.style.animationDelay = (i * 0.05 + j * 0.02) + 's';
tree.appendChild(line);
// Add ornaments
if (j % 2 === 0 && i > 1) {
const ornament = document.createElement('div');
ornament.className = 'ornament';
const color = ornamentColors[Math.floor(Math.random() * ornamentColors.length)];
ornament.style.backgroundColor = color;
const ox = Math.cos(angle * Math.PI / 180) * (length * 0.6);
const oy = Math.sin(angle * Math.PI / 180) * (length * 0.6);
ornament.style.left = `calc(50% + ${ox}px)`;
ornament.style.top = `calc(${20 + i * 30}px + ${oy}px)`;
ornament.style.color = color;
tree.appendChild(ornament);
}
}
}
}
// Toggle light/dark theme
function toggleTheme() {
document.body.classList.toggle('light-mode');
}
// Simple easter egg: show the message briefly
function easterEgg() {
const egg = document.getElementById('easterEgg');
egg.classList.add('show');
setTimeout(() => egg.classList.remove('show'), 3500);
}
// Countdown to next Christmas (Dec 25)
function updateCountdown() {
const now = new Date();
const year = now.getFullYear();
let target = new Date(year, 11, 25, 0, 0, 0); // Dec 25
if (now > target) target = new Date(year + 1, 11, 25, 0, 0, 0);
const diff = target - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const pad = n => String(n).padStart(2, '0');
document.getElementById('days').textContent = pad(days);
document.getElementById('hours').textContent = pad(hours);
document.getElementById('minutes').textContent = pad(minutes);
document.getElementById('seconds').textContent = pad(seconds);
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
generateTree();
updateCountdown();
setInterval(updateCountdown, 1000);
});
// Ensure canvas resizes responsively
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>