Page Équipes - Design futuriste

1,380 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 December 2025

Modèle HTML de site web de portfolio holographique

23 February 2026

Jeu Unity WebGL Swordfight intégré

14 June 2025

Un code de Metehan

HTML

CSS

* {
  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;
  }
}

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();