Un código de Metehan

Abrir en el editor Publica tu código

Recomendado

14 February 2025

Botón de modo oscuro y modo nocturno

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>

Un código de Metehan

Recomendado

Un código de Pedro_bugica