<!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 2024</title>
<meta name="description" content="LeafBox Technologies wishes you innovation and joy this holiday season. Modern IT solutions with a festive touch.">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-white: #ffffff;
--soft-green: #2d5f4f;
--light-green: #4a8870;
--gold: #d4af37;
--light-gold: #f0e68c;
--text-dark: #2c3e50;
--text-light: #6c757d;
--bg-light: #f8f9fa;
--dark-bg: #1a1a1a;
--dark-text: #e0e0e0;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--text-dark);
background: var(--primary-white);
overflow-x: hidden;
transition: background 0.3s ease, color 0.3s ease;
}
body.dark-mode {
background: var(--dark-bg);
color: var(--dark-text);
}
body.dark-mode .hero {
background: linear-gradient(135deg, #1a3a2e 0%, #1a1a1a 100%);
}
body.dark-mode .section {
background: var(--dark-bg);
}
body.dark-mode .service-card,
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
background: #2a2a2a;
border-color: #3a3a3a;
color: var(--dark-text);
}
body.dark-mode .footer {
background: #0f0f0f;
}
/* Snowfall Canvas */
#snowfall {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Theme Toggle */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: var(--primary-white);
border: 2px solid var(--soft-green);
border-radius: 50px;
padding: 10px 20px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--soft-green);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.theme-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
body.dark-mode .theme-toggle {
background: #2a2a2a;
border-color: var(--light-green);
color: var(--light-green);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
position: relative;
z-index: 2;
}
.logo-container {
position: relative;
margin-bottom: 2rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.logo {
width: 120px;
height: 120px;
background: var(--soft-green);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: 700;
color: white;
box-shadow: 0 10px 30px rgba(45, 95, 79, 0.3);
position: relative;
}
.santa-hat {
position: absolute;
top: -25px;
right: -15px;
font-size: 40px;
animation: wiggle 2s ease-in-out infinite;
}
@keyframes wiggle {
0%,
100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
.hero h1 {
font-size: 3rem;
font-weight: 700;
color: var(--soft-green);
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
body.dark-mode .hero h1 {
color: var(--light-green);
}
.hero p {
font-size: 1.3rem;
color: var(--text-light);
max-width: 600px;
animation: fadeInUp 1s ease 0.2s backwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.countdown {
margin-top: 2rem;
padding: 1.5rem 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
animation: fadeInUp 1s ease 0.4s backwards;
}
body.dark-mode .countdown {
background: #2a2a2a;
}
.countdown-title {
font-size: 1rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.countdown-timer {
display: flex;
gap: 2rem;
justify-content: center;
}
.countdown-item {
text-align: center;
}
.countdown-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--gold);
display: block;
}
.countdown-label {
font-size: 0.9rem;
color: var(--text-light);
text-transform: uppercase;
}
/* Section Styles */
.section {
padding: 5rem 2rem;
position: relative;
z-index: 2;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--soft-green);
margin-bottom: 1rem;
}
body.dark-mode .section-title {
color: var(--light-green);
}
.section-subtitle {
font-size: 1.1rem;
color: var(--text-light);
max-width: 700px;
margin: 0 auto;
}
/* About Section */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-text {
padding: 2rem;
border-left: 4px solid var(--gold);
background: var(--bg-light);
border-radius: 10px;
}
body.dark-mode .about-text {
background: #2a2a2a;
}
.about-text h3 {
color: var(--soft-green);
margin-bottom: 1rem;
font-size: 1.5rem;
}
body.dark-mode .about-text h3 {
color: var(--light-green);
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.stat-card {
text-align: center;
padding: 1.5rem;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
}
body.dark-mode .stat-card {
background: #2a2a2a;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--gold);
display: block;
}
.stat-label {
color: var(--text-light);
font-size: 0.9rem;
}
/* Services Section */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.service-card {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
text-align: center;
border: 2px solid transparent;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(45, 95, 79, 0.15);
border-color: var(--gold);
}
.service-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: inline-block;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.service-card h3 {
font-size: 1.5rem;
color: var(--soft-green);
margin-bottom: 1rem;
}
body.dark-mode .service-card h3 {
color: var(--light-green);
}
.service-card p {
color: var(--text-light);
line-height: 1.8;
}
/* Contact Section */
.contact-content {
max-width: 800px;
margin: 0 auto;
}
.greeting-message {
text-align: center;
font-size: 1.8rem;
color: var(--soft-green);
margin-bottom: 3rem;
font-weight: 600;
padding: 2rem;
background: linear-gradient(135deg, #e8f5e9 0%, #fff9e6 100%);
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
body.dark-mode .greeting-message {
background: linear-gradient(135deg, #1a3a2e 0%, #2a2a1a 100%);
color: var(--light-green);
}
.contact-form {
display: grid;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.contact-form label {
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--soft-green);
}
body.dark-mode .contact-form label {
color: var(--light-green);
}
.contact-form input,
.contact-form textarea {
padding: 1rem;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--gold);
}
.contact-form textarea {
min-height: 150px;
resize: vertical;
}
.submit-btn {
background: var(--soft-green);
color: white;
border: none;
padding: 1.2rem 3rem;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(45, 95, 79, 0.3);
}
.submit-btn:hover {
background: var(--light-green);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 95, 79, 0.4);
}
/* Footer */
.footer {
background: var(--bg-light);
padding: 3rem 2rem;
text-align: center;
position: relative;
z-index: 2;
}
.footer-lights {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.light {
width: 20px;
height: 20px;
border-radius: 50%;
animation: glow 1.5s ease-in-out infinite;
}
.light:nth-child(1) {
background: #ff6b6b;
animation-delay: 0s;
}
.light:nth-child(2) {
background: #4ecdc4;
animation-delay: 0.3s;
}
.light:nth-child(3) {
background: #ffe66d;
animation-delay: 0.6s;
}
.light:nth-child(4) {
background: #95e1d3;
animation-delay: 0.9s;
}
.light:nth-child(5) {
background: #f38181;
animation-delay: 1.2s;
}
@keyframes glow {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.8);
}
}
.footer p {
color: var(--text-light);
margin-bottom: 0.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1.1rem;
}
.countdown-timer {
gap: 1rem;
}
.countdown-value {
font-size: 2rem;
}
.about-content {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
.greeting-message {
font-size: 1.3rem;
padding: 1.5rem;
}
.theme-toggle {
top: 10px;
right: 10px;
padding: 8px 15px;
font-size: 12px;
}
}
/* Custom Cursor Effect */
.cursor-sparkle {
position: fixed;
pointer-events: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold);
opacity: 0;
z-index: 9999;
animation: sparkle 1s ease-out forwards;
}
@keyframes sparkle {
0% {
opacity: 1;
transform: scale(0);
}
50% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
</style>
</head>
<body>
<canvas id="snowfall"></canvas>
<button class="theme-toggle" onclick="toggleTheme()">
<span id="theme-icon">🌙</span>
<span id="theme-text">Dark Mode</span>
</button>
<section class="hero">
<div class="logo-container">
<div class="logo">
LB
<span class="santa-hat">🎅</span>
</div>
</div>
<h1>Merry Christmas from LeafBox Technologies</h1>
<p>Innovation meets celebration this holiday season</p>
<div class="countdown">
<div class="countdown-title">Countdown to Christmas 🎄</div>
<div class="countdown-timer">
<div class="countdown-item">
<span class="countdown-value" id="days">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="hours">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-header">
<div class="section-icon">🌟</div>
<h2 class="section-title">About LeafBox Technologies</h2>
<p class="section-subtitle">Pioneering digital transformation with innovative IT solutions</p>
</div>
<div class="about-content">
<div class="about-text">
<h3>Our Mission</h3>
<p>At LeafBox Technologies, we believe in transforming businesses through cutting-edge technology solutions. Our team of experts delivers innovative, scalable, and secure IT services that drive growth and efficiency. This holiday season, we're grateful for the partnerships we've built and excited for the innovations ahead.</p>
</div>
<div class="about-stats">
<div class="stat-card">
<span class="stat-number">500+</span>
<span class="stat-label">Happy Clients</span>
</div>
<div class="stat-card">
<span class="stat-number">1000+</span>
<span class="stat-label">Projects Delivered</span>
</div>
<div class="stat-card">
<span class="stat-number">50+</span>
<span class="stat-label">Team Members</span>
</div>
<div class="stat-card">
<span class="stat-number">10+</span>
<span class="stat-label">Years Experience</span>
</div>
</div>
</div>
</div>
</section>
<section class="section" style="background: var(--bg-light);">
<div class="container">
<div class="section-header">
<div class="section-icon">🎁</div>
<h2 class="section-title">Our Services</h2>
<p class="section-subtitle">Exceptional IT solutions wrapped with care</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">🎁</div>
<h3>Cloud Solutions</h3>
<p>Scalable, secure, and reliable cloud infrastructure to power your business growth and digital transformation.</p>
</div>
<div class="service-card">
<div class="service-icon">⭐</div>
<h3>Web Development</h3>
<p>Beautiful, responsive websites and web applications built with modern technologies and best practices.</p>
</div>
<div class="service-card">
<div class="service-icon">❄️</div>
<h3>Cybersecurity</h3>
<p>Comprehensive security solutions to protect your digital assets and ensure business continuity.</p>
</div>
<div class="service-card">
<div class="service-icon">🎄</div>
<h3>IT Consulting</h3>
<p>Strategic technology guidance to align your IT infrastructure with business objectives.</p>
</div>
<div class="service-card">
<div class="service-icon">✨</div>
<h3>Mobile Apps</h3>
<p>Innovative mobile applications for iOS and Android that engage users and drive results.</p>
</div>
<div class="service-card">
<div class="service-icon">🔔</div>
<h3>24/7 Support</h3>
<p>Round-the-clock technical support to keep your systems running smoothly year-round.</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-header">
<div class="section-icon">💌</div>
<h2 class="section-title">Get in Touch</h2>
</div>
<div class="contact-content">
<div class="greeting-message">
✨ Wishing you innovation and joy this holiday season! ✨
</div>
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Holiday Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Greetings 🎄</button>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-lights">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</div>
<p><strong>LeafBox Technologies</strong></p>
<p>© 2024 LeafBox Technologies. All rights reserved.</p>
<p>🎄 Happy Holidays! 🎄</p>
</footer>
<script>
// Snowfall Animation
const canvas = document.getElementById('snowfall');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowflakes = [];
const maxSnowflakes = 100;
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 1;
this.speed = Math.random() * 1 + 0.5;
this.wind = Math.random() * 0.5 - 0.25;
}
update() {
this.y += this.speed;
this.x += this.wind;
if (this.y > canvas.height) {
this.y = 0;
this.x = Math.random() * canvas.width;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fill();
}
}
for (let i = 0; i < maxSnowflakes; 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;
});
// Countdown Timer
function updateCountdown() {
const christmas = new Date(new Date().getFullYear(), 11, 25);
const now = new Date();
if (now > christmas) {
christmas.setFullYear(christmas.getFullYear() + 1);
}
const diff = christmas - 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);
document.getElementById('days').textContent = String(days).padStart(2, '0');
document.getElementById('hours').textContent = String(hours).padStart(2, '0');
document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
// Theme Toggle
function toggleTheme() {
document.body.classList.toggle('dark-mode');
const icon = document.getElementById('theme-icon');
const text = document.getElementById('theme-text');
if (document.body.classList.contains('dark-mode')) {
icon.textContent = '☀️';
text.textContent = 'Light Mode';
} else {
icon.textContent = '🌙';
text.textContent = 'Dark Mode';
}
}
// Form Submission
function handleSubmit(e) {
e.preventDefault();
alert('🎄 Thank you for your holiday greetings! We\'ll be in touch soon. Happy Holidays! 🎁');
e.target.reset();
}
// Cursor Sparkle Effect
document.addEventListener('mousemove', (e) => {
if (Math.random() > 0.9) {
const sparkle = document.createElement('div');
sparkle.className = 'cursor-sparkle';
sparkle.style.left = e.pageX + 'px';
sparkle.style.top = e.pageY + 'px';
document.body.appendChild(sparkle);
setTimeout(() => sparkle.remove(), 1000);
}
});
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({behavior: 'smooth'});
}
});
});
</script>
</body>
</html>