<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Epic User Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
overflow-x: hidden;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle 3s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.hero {
text-align: center;
padding: 60px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 30px;
border: 2px solid rgba(255, 255, 255, 0.2);
margin-bottom: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
color: white;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
h1 {
color: white;
font-size: 3em;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tagline {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2em;
margin-bottom: 30px;
}
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.stat-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 20px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeInUp 1s ease;
}
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.2s; }
.stat-card:nth-child(4) { animation-delay: 0.3s; }
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.stat-number {
font-size: 2.5em;
font-weight: bold;
color: white;
margin-bottom: 10px;
}
.stat-label {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
}
.section {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 40px;
margin-bottom: 30px;
animation: fadeInUp 1s ease;
}
.section h2 {
color: white;
font-size: 2em;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-content {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1em;
line-height: 1.8;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.badge {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 12px 24px;
border-radius: 25px;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.badge:hover {
transform: translateY(-5px);
}
.wave {
display: inline-block;
animation: wave 2s infinite;
transform-origin: 70% 70%;
}
@keyframes wave {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(14deg); }
20% { transform: rotate(-8deg); }
40% { transform: rotate(-4deg); }
50% { transform: rotate(10deg); }
}
.glow {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); }
50% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); }
}
@media (max-width: 768px) {
h1 { font-size: 2em; }
.stat-number { font-size: 2em; }
}
</style>
</head> <body>
Editor • Contributor • Knowledge Enthusiast
Hello! I'm a passionate contributor to this wiki, dedicated to creating and maintaining high-quality content. I believe in the power of collaborative knowledge and the importance of accurate, accessible information for everyone.
My focus areas include technology, science, and community building. I'm always happy to help new editors and discuss improvements to our articles!
• Expanding articles in the Technology category
• Improving documentation and guidelines
• Collaborating on community initiatives
• Mentoring new contributors
Feel free to leave a message on my talk page! I'm always open to discussions, suggestions, and collaborations. Let's make this wiki even better together!
<script>
// Create animated stars
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 3 + 's';
starsContainer.appendChild(star);
}
// Add particle effect on mouse move
document.addEventListener('mousemove', (e) => {
if (Math.random() > 0.95) {
const particle = document.createElement('div');
particle.style.position = 'fixed';
particle.style.left = e.clientX + 'px';
particle.style.top = e.clientY + 'px';
particle.style.width = '4px';
particle.style.height = '4px';
particle.style.background = 'white';
particle.style.borderRadius = '50%';
particle.style.pointerEvents = 'none';
particle.style.zIndex = '9999';
particle.style.animation = 'particleFade 1s ease-out forwards';
document.body.appendChild(particle);
setTimeout(() => particle.remove(), 1000);
}
});
// Add particle animation
const style = document.createElement('style');
style.textContent = `
@keyframes particleFade {
to {
transform: translateY(-30px);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body> </html>