Webleb - UI Elements - A Code by Maxi-Digital, 404 erreur page, Pro

HTML

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a1a;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    cursor: none;
}

.container {
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Bougie */
.candle-container {
    position: relative;
    width: 200px;
    height: 400px;
    margin: 0 auto 2rem;
    filter: drop-shadow(0 0 10px rgba(255,100,0,0.3));
}

.candle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 200px;
    background: linear-gradient(90deg, #fff0e6 0%, #ffffff 100%);
    border-radius: 2px;
    animation: melt 20s infinite linear;
}

.wax-drips {
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 20px;
}

.wax-drips::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 8px;
    height: 15px;
    background: #fff0e6;
    border-radius: 0 0 4px 4px;
    animation: drip 8s infinite;
}

/* Flamme */
.flame {
    position: absolute;
    width: 25px;
    height: 80px;
    background: linear-gradient(180deg, #ffaa00 0%, #ff4400 100%);
    border-radius: 50% 50% 35% 35%;
    filter: blur(2px);
    transform-origin: bottom center;
}

.glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 50% 50%, rgba(255,100,0,0.3) 0%, transparent 60%);
}

/* Fumée */
.smoke {
    position: absolute;
    width: 10px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0;
}

/* Texte */
.error-code {
    font-size: 8rem;
    background: linear-gradient(45deg, #ff6b00, #ff0000, #ffaa00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 1rem 0;
    text-shadow: 0 0 20px rgba(255,100,0,0.5);
}

.error-message {
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.home-link {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

/* Animations */
@keyframes melt {
    0%, 100% { height: 200px; }
    50% { height: 190px; }
}

@keyframes drip {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

/* 404.css */
.candle-container {
    position: relative;
    width: 200px;
    height: 400px;
    margin: 0 auto 2rem;
}

/* Position corrigée de la flamme */
.flame {
    position: absolute;
    top: -90px; /* Ajustement de la position verticale */
    left: 50%;
    width: 25px;
    height: 80px;
    transform: translateX(-50%) scale(0.9);
    z-index: 2;
}

/* Animation améliorée de la bougie */
.candle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 200px;
    background: linear-gradient(90deg, #fff0e6 0%, #ffffff 100%);
    border-radius: 2px;
    animation: 
        melt 20s ease-in-out infinite,
        candle-flicker 2s ease-in-out infinite;
}

/* Nouvelle animation de vacillement */
@keyframes candle-flicker {
    0%, 100% { transform: translateX(-50%) rotate(0.5deg); }
    50% { transform: translateX(-50%) rotate(-0.5deg); }
}

/* Gouttes de cire réalistes */
.wax-drip {
    position: absolute;
    bottom: -5px;
    width: 100%;
    animation: drip 8s infinite;
}

@keyframes drip {
    0% { 
        height: 0;
        opacity: 0;
        background: #fff0e6;
    }
    30% { 
        height: 15px;
        opacity: 1;
    }
    100% { 
        height: 0;
        opacity: 0;
    }
}

JS

document.addEventListener('DOMContentLoaded', () => {
    const flame = document.querySelector('.flame');
    const candle = document.querySelector('.candle');
    const smoke = document.querySelector('.smoke');
    const fireSound = document.getElementById('fireSound');
    let mouseX = 0, mouseY = 0;

// Gestion audio
    document.body.addEventListener('click', () => {
        fireSound.play().catch(() => {});
    }, { once: true });

// Interaction souris
    document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
        const rect = candle.getBoundingClientRect();
        const tilt = (e.clientX - rect.left - rect.width/2) * 0.1;
        flame.style.transform = `translateX(-50%) rotate(${tilt}deg)`;
    });

// Particules
    function createParticles() {
        const particles = 30;
        for(let i = 0; i < particles; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            Object.assign(particle.style, {
                left: `${Math.random() * 100}%`,
                width: `${Math.random() * 3}px`,
                height: particle.style.width,
                animationDuration: `${Math.random() * 3 + 2}s`,
                background: `rgba(255,${100 + Math.random()*155},0,${Math.random()*0.5})`
            });
            document.body.appendChild(particle);
        }
    }

// Animation bougie
    function animateFlame() {
        flame.style.height = `${80 + Math.random() * 5}px`;
        flame.style.transform = `translateX(-50%) rotate(${Math.random() * 4 - 2}deg)`;
        
        // Fumée
        if(Math.random() < 0.1) {
            smoke.style.left = `${50 + Math.random() * 10 - 5}%`;
            smoke.style.opacity = 0.4;
            smoke.style.animation = 'smoke-float 4s forwards';
            setTimeout(() => smoke.style.opacity = 0, 4000);
        }
        
        requestAnimationFrame(animateFlame);
    }

// Événements
    flame.addEventListener('mouseover', () => {
        fireSound.loop = true;
        fireSound.play();
    });

flame.addEventListener('mouseout', () => {
        fireSound.pause();
    });

// Initialisation
    createParticles();
    animateFlame();
});

// Particules suivies
document.addEventListener('mousemove', (e) => {
    const particles = document.querySelectorAll('.particle');
    particles.forEach(particle => {
        const dx = e.clientX - parseFloat(particle.style.left);
        const dy = e.clientY - parseFloat(particle.style.top);
        particle.style.transform = `translate(${dx * 0.05}px, ${dy * 0.05}px)`;
    });
});
     
// 404.js (corrections)
document.addEventListener('DOMContentLoaded', () => {
    // Ajustement dynamique de la flamme
    const adjustFlamePosition = () => {
        const candle = document.querySelector('.candle');
        const flame = document.querySelector('.flame');
        const candleHeight = candle.offsetHeight;
        flame.style.top = `-${candleHeight * 0.45}px`;
    };

A Code by Maxi-Digital, 404 erreur page, Pro

Recommended

Infinite Tags Scroll

watch or clock

Rompe Cabeza Arequipa

HTML

CSS

JS

Recommended

Infinite Tags Scroll

watch or clock

Rompe Cabeza Arequipa

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS