Webleb - UI Elements - Teams Page

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

JS

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

Teams Page - Futuristic Design

Recommended

Orange Black Web Site

Blur login form

Animated Login Form

HTML

CSS

JS

Recommended

Orange Black Web Site

Blur login form

Animated Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS