WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Página de Equipes - Design Futurista
679
alejandrokundrah
Abrir no Editor
Publique Seu Código
Recomendado
16 March 2024
23 June 2025
Um código de Mete
26 October 2024
Modelo de site de portfólio de desenvolvedor HTML CSS
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();