WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Teams Page - Futuristic Design
1290
alejandrokundrah
Open In Editor
Video
Publish Your Code
0
Recommended
20 February 2026
Web Designer Portfolio HTML CSS Template
20 June 2025
Apple Liquid Glass HTML CSS Effect
13 January 2024
Tic Tac Toe Game
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();