Un código de Metehan

1,990 Metehan

Abrir en el editor Publica tu código

Recomendado

19 November 2025

Formulario de registro HTML animado con estilo CSS

12 January 2025

Un código de Mikeykun

2 February 2026

Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webleb - UI Elements - 3D Website</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        dark: '#1e1b4b',
                        accent: '#a78bfa'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
        }
        
        .perspective {
            perspective: 1000px;
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        .glowing-border {
            border: 2px solid rgba(167, 139, 250, 0.4);
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), inset 0 0 15px rgba(167, 139, 250, 0.2);
        }
        
        .hover-3d {
            transition: all 0.4s ease;
            transform-style: preserve-3d;
        }
        
        .hover-3d:hover {
            transform: translateZ(20px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        }
        
        @keyframes float {
            0% { transform: translateY(0px) rotate(-5deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0px) rotate(-5deg); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .tab-link.active {
            border-bottom: 3px solid #8b5cf6;
            color: #8b5cf6;
            font-weight: 600;
        }
        
        .cube {
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(-35deg);
            width: 150px;
            height: 150px;
        }
        
        .cube-face {
            position: absolute;
            width: 150px;
            height: 150px;
            background: rgba(139, 92, 246, 0.15);
            border: 2px solid rgba(167, 139, 250, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: rgba(255, 255, 255, 0.8);
            box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.3);
        }
        
        .cube-face-front  { transform: translateZ(75px); }
        .cube-face-back   { transform: rotateY(180deg) translateZ(75px); }
        .cube-face-right  { transform: rotateY(90deg) translateZ(75px); }
        .cube-face-left   { transform: rotateY(-90deg) translateZ(75px); }
        .cube-face-top    { transform: rotateX(90deg) translateZ(75px); }
        .cube-face-bottom { transform: rotateX(-90deg) translateZ(75px); }
        
        .glowing-text {
            text-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
        }
        
        .code-block {
            background: rgba(15, 23, 42, 0.7);
            border-left: 4px solid #8b5cf6;
            font-family: 'Fira Code', monospace;
        }
        
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
        
        .mobile-menu.open {
            max-height: 500px;
        }
        
        @media (min-width: 1024px) {
            .desktop-menu {
                display: flex !important;
            }
        }
    </style>
</head>
<body class="text-gray-100">
    
    <header class="fixed top-0 left-0 w-full z-50">
        <div class="px-4 py-3 backdrop-blur-md bg-primary/10">
            <div class="flex justify-between items-center">
                
                <a href="#" class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-cube text-accent"></i>
                    <span class="glowing-text">WEBLEB</span>
                </a>
                
                
                <nav class="hidden desktop-menu lg:flex items-center space-x-8">
                    <a href="#" class="hover:text-accent transition-colors">Home</a>
                    <a href="#" class="hover:text-accent transition-colors">Editor</a>
                    <a href="#" class="hover:text-accent transition-colors">Login</a>
                    <a href="#" class="bg-secondary hover:bg-purple-500 px-4 py-1 rounded-full transition-colors">Pro</a>
                    
                    
                    <div class="ml-4 relative group">
                        <button class="flex items-center gap-2 hover:text-accent">
                            <img src="https://www.web-leb.com/assets/img/gb.gif" alt="English" class="w-6 h-4 rounded">
                            English
                            <i class="fa-solid fa-caret-down text-xs"></i>
                        </button>
                        <div class="absolute top-full right-0 mt-2 w-48 rounded-lg bg-dark border border-accent/50 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-1 group-hover:translate-y-0">
                            <div class="py-2">
                                <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                                    <img src="https://www.web-leb.com/assets/img/fr.gif" alt="French" class="w-6 h-4 rounded">
                                    Français
                                </a>
                                <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                                    <img src="https://www.web-leb.com/assets/img/es.gif" alt="Spanish" class="w-6 h-4 rounded">
                                    Español
                                </a>
                                <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                                    <img src="https://www.web-leb.com/assets/img/pt.gif" alt="Portuguese" class="w-6 h-4 rounded">
                                    Português
                                </a>
                                
                            </div>
                        </div>
                    </div>
                </nav>
                
                
                <button id="mobileMenuButton" class="lg:hidden p-2 text-gray-300 hover:text-accent">
                    <i class="fa-solid fa-bars text-2xl"></i>
                </button>
            </div>
            
            
            <div id="mobileMenu" class="mobile-menu lg:hidden mt-3">
                <div class="pt-2 pb-4 border-t border-gray-700">
                    <a href="#" class="block py-2 px-4 rounded hover:bg-primary/20">Home</a>
                    <a href="#" class="block py-2 px-4 rounded hover:bg-primary/20">Editor</a>
                    <a href="#" class="block py-2 px-4 rounded hover:bg-primary/20">Login</a>
                    <a href="#" class="block py-2 px-4 rounded hover:bg-primary/20 bg-secondary">Pro</a>
                    
                    <div class="mt-4 pt-4 border-t border-gray-700">
                        <h4 class="px-4 text-gray-400 mb-2">Language</h4>
                        <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                            <img src="https://www.web-leb.com/assets/img/gb.gif" alt="English" class="w-6 h-4 rounded">
                            English
                        </a>
                        <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                            <img src="https://www.web-leb.com/assets/img/fr.gif" alt="French" class="w-6 h-4 rounded">
                            Français
                        </a>
                        <a href="#" class="flex items-center gap-2 px-4 py-2 hover:bg-primary/20">
                            <img src="https://www.web-leb.com/assets/img/es.gif" alt="Spanish" class="w-6 h-4 rounded">
                            Español
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

<main class="pt-32 pb-20 px-4 max-w-6xl mx-auto">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            
            <div class="perspective">
                <div class="floating">
                    <div class="cube mx-auto">
                        <div class="cube-face cube-face-front">
                            <i class="fa-solid fa-cube"></i>
                        </div>
                        <div class="cube-face cube-face-back">
                            <i class="fa-brands fa-css3-alt"></i>
                        </div>
                        <div class="cube-face cube-face-right">
                            <i class="fa-brands fa-html5"></i>
                        </div>
                        <div class="cube-face cube-face-left">
                            <i class="fa-brands fa-js"></i>
                        </div>
                        <div class="cube-face cube-face-top">
                            <i class="fa-solid fa-play"></i>
                        </div>
                        <div class="cube-face cube-face-bottom">
                            <i class="fa-solid fa-diamond"></i>
                        </div>
                    </div>
                </div>
                
                
                <div class="mt-12 text-center">
                    <h3 class="text-xl mb-3 text-accent">3D Website Experience</h3>
                    <div class="flex justify-center gap-4">
                        <button id="rotateX" class="hover-3d px-4 py-2 rounded-lg glowing-border hover:bg-primary/20">
                            Rotate X
                        </button>
                        <button id="rotateY" class="hover-3d px-4 py-2 rounded-lg glowing-border hover:bg-primary/20">
                            Rotate Y
                        </button>
                        <button id="resetCube" class="hover-3d px-4 py-2 rounded-lg glowing-border hover:bg-primary/20">
                            Reset
                        </button>
                    </div>
                </div>
            </div>
            
            
            <div class="hover-3d bg-dark/50 backdrop-blur-sm rounded-2xl p-8 glowing-border">
                <h1 class="text-3xl md:text-4xl font-bold mb-6 text-white">
                    Creating Immersive <span class="text-accent">3D Web</span> Experiences
                </h1>
                
                
                <div class="flex border-b border-gray-700 mb-6">
                    <a href="#" class="tab-link py-3 px-4 font-medium active" data-tab="html">HTML</a>
                    <a href="#" class="tab-link py-3 px-4 font-medium" data-tab="css">CSS</a>
                    <a href="#" class="tab-link py-3 px-4 font-medium" data-tab="js">JavaScript</a>
                </div>
                
                
                <div class="tab-content active" id="html-content">
                    <pre class="code-block p-4 rounded-lg overflow-auto">

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face right">Right</div>
  <div class="face left">Left</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>
                    </pre>
                </div>
                
                <div class="tab-content" id="css-content">
                    <pre class="code-block p-4 rounded-lg overflow-auto">
/* 3D Cube Styles */
.cube {
  transform-style: preserve-3d;
  transform: rotateX(-15deg) rotateY(-35deg);
}

.cube-face {
  position: absolute;
  width: 150px;
  height: 150px;
  background: rgba(139, 92, 246, 0.15);
  border: 2px solid rgba(167, 139, 250, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
                    </pre>
                </div>
                
                <div class="tab-content" id="js-content">
                    <pre class="code-block p-4 rounded-lg overflow-auto">
// Cube Rotation Controls
const cube = document.querySelector('.cube');
const rotateXBtn = document.getElementById('rotateX');
const rotateYBtn = document.getElementById('rotateY');
const resetBtn = document.getElementById('resetCube');

rotateXBtn.addEventListener('click', () => {
  cube.style.transform += 'rotateX(45deg)';
});

rotateYBtn.addEventListener('click', () => {
  cube.style.transform += 'rotateY(45deg)';
});

resetBtn.addEventListener('click', () => {
  cube.style.transform = 'rotateX(-15deg) rotateY(-35deg)';
});
                    </pre>
                </div>
                
                
                <div class="mt-8">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                            <i class="fa-solid fa-code text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">Front-end Developer</h3>
                            <p class="text-gray-400">5+ years of experience</p>
                        </div>
                    </div>
                    
                    <p class="text-gray-300 leading-relaxed">
                        I'm a passionate front-end developer specializing in creating 3D web experiences. 
                        With over 5 years of experience in the industry, I've worked with startups and 
                        established companies to bring their digital visions to life.
                    </p>
                    
                    <div class="mt-6 flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">WebGL</span>
                        <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">Three.js</span>
                        <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">React</span>
                        <span class="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm">3D Animation</span>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="mt-20 grid md:grid-cols-3 gap-6">
            <div class="hover-3d p-6 rounded-xl bg-gradient-to-br from-primary/15 to-secondary/10 glowing-border">
                <div class="text-4xl font-bold text-accent mb-2">500+</div>
                <div class="text-gray-300">Projects Completed</div>
            </div>
            <div class="hover-3d p-6 rounded-xl bg-gradient-to-br from-primary/15 to-secondary/10 glowing-border">
                <div class="text-4xl font-bold text-accent mb-2">2M+</div>
                <div class="text-gray-300">Lines of Code</div>
            </div>
            <div class="hover-3d p-6 rounded-xl bg-gradient-to-br from-primary/15 to-secondary/10 glowing-border">
                <div class="text-4xl font-bold text-accent mb-2">97%</div>
                <div class="text-gray-300">Client Satisfaction</div>
            </div>
        </div>
    </main>

<footer class="bg-dark/80 backdrop-blur-sm border-t border-gray-800 mt-20">
        <div class="max-w-6xl mx-auto px-4 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center gap-6">
                <div class="text-center md:text-left">
                    <p class="text-gray-400">
                        Copyright © Webleb 2025. All rights reserved.
                    </p>
                </div>
                
                <div class="flex flex-wrap justify-center gap-4 md:gap-8">
                    <a href="#" class="hover:text-accent transition-colors">About</a>
                    <a href="#" class="hover:text-accent transition-colors">Contact Us</a>
                    <a href="#" class="hover:text-accent transition-colors">Terms Of Use</a>
                    <a href="#" class="hover:text-accent transition-colors">Privacy Policy</a>
                    <a href="#" class="hover:text-accent transition-colors">Cookies Policy</a>
                </div>
                
                <div class="flex space-x-4">
                    <a href="#" class="hover:text-accent transition-colors text-xl">
                        <i class="fa-brands fa-twitter"></i>
                    </a>
                    <a href="#" class="hover:text-accent transition-colors text-xl">
                        <i class="fa-brands fa-github"></i>
                    </a>
                    <a href="#" class="hover:text-accent transition-colors text-xl">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                    <a href="#" class="hover:text-accent transition-colors text-xl">
                        <i class="fa-brands fa-dribbble"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

CSS