WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Page Équipes - Design futuriste
685
alejandrokundrah
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 June 2025
Calculateur de taxes Robux
2 February 2024
Cartes de réseaux sociaux CSS
17 May 2025
social moderne
HTML
Copy
Our Futuristic Team
Meet Our Team
Luna
Creative Director
Kai
AI Engineer
Nova
UX Architect
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: 'Orbitron', sans-serif; background: #0d0d0d; color: #fff; overflow: hidden; } canvas#bgCanvas { position: fixed; top: 0; left: 0; z-index: 0; } .container { position: relative; z-index: 10; padding: 4rem; text-align: center; } .title { font-size: 3rem; color: #0ff; margin-bottom: 2rem; text-shadow: 0 0 10px #0ff; } .card-grid { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .team-card { background: rgba(0, 0, 0, 0.7); border: 2px solid #0ff; padding: 2rem; width: 220px; border-radius: 15px; perspective: 1000px; box-shadow: 0 0 20px #0ff, 0 0 30px #00f; transition: transform 0.2s; cursor: pointer; transform-style: preserve-3d; } .team-card:hover { animation: pulse 1s infinite alternate; } .team-card img { width: 100px; border-radius: 50%; border: 3px solid #0ff; margin-bottom: 1rem; } .team-card h2 { font-size: 1.2rem; margin: 0.5rem 0; } .team-card p { color: #aaa; font-size: 0.9rem; } @keyframes pulse { from { box-shadow: 0 0 10px #0ff; } to { box-shadow: 0 0 20px #0ff, 0 0 30px #0f0; } }
JS
Copy
const cards = document.querySelectorAll('.team-card'); // 3D Tilt effect cards.forEach(card => { card.addEventListener('mousemove', e => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 10; const rotateY = (centerX - x) / 10; card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); card.addEventListener('mouseleave', () => { card.style.transform = `rotateX(0deg) rotateY(0deg)`; }); }); // Particles background const canvas = document.getElementById("bgCanvas"); const ctx = canvas.getContext("2d"); let particlesArray; canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function(){ canvas.width = window.innerWidth; canvas.height = window.innerHeight; init(); }); function Particle(){ this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 2 + 0.5; this.speedX = Math.random() * 1 - 0.5; this.speedY = Math.random() * 1 - 0.5; this.color = '#0ff'; this.update = function(){ this.x += this.speedX; this.y += this.speedY; if(this.x < 0 || this.x > canvas.width) this.speedX *= -1; if(this.y < 0 || this.y > canvas.height) this.speedY *= -1; } this.draw = function(){ ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function init(){ particlesArray = []; for(let i = 0; i < 100; i++){ particlesArray.push(new Particle()); } } function animate(){ ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < particlesArray.length; i++){ particlesArray[i].update(); particlesArray[i].draw(); } requestAnimationFrame(animate); } init(); animate();