टीम पेज - भविष्यवादी डिजाइन

अनुशंसित

9 September 2024

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

टीम पेज - भविष्यवादी डिजाइन

अनुशंसित

इलेक्ट्रिक बटन

एक होम पेज सेनारिग करें

लॉगिन फॉर्म

HTML

CSS

JS

अनुशंसित

इलेक्ट्रिक बटन

एक होम पेज सेनारिग करें

लॉगिन फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS