<!DOCTYPE html>
Génesis Mundi - Biblioteca Cósmica Interactiva
<!-- Fuentes -->
<br> :root {<br> --bg: #0a001f;<br> --text: #e0e0ff;<br> --accent: #00d4ff; /* Cian neón */<br> --accent-glow: rgba(0, 212, 255, 0.6);<br> --card: rgba(20, 20, 60, 0.7);<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>/* Scroll suave para toda la página */ html { scroll-behavior: smooth; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background: linear-gradient(to bottom, var(--bg), #1a0033); color: var(--text); min-height: 100vh; background-attachment: fixed; /* Efecto parallax simple en el fondo */ line-height: 1.6; overflow-x: hidden; } /* --- HEADER & NAV --- */ header { background: rgba(10, 0, 31, 0.85); /* Un poco más oscuro para legibilidad */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 1000; padding: 1rem 5%; border-bottom: 1px solid rgba(0, 212, 255, 0.1); } nav ul { display: flex; justify-content: center; list-style: none; gap: 2.5rem; flex-wrap: wrap; } nav a { color: var(--text); text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: 500; font-size: 0.9rem; letter-spacing: 1px; transition: all 0.3s ease; position: relative; } /* Efecto de línea debajo al pasar el mouse */ nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--accent); transition: width 0.3s ease; } nav a:hover { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); } nav a:hover::after { width: 100%; } /* --- HERO SECTION --- */ .hero { text-align: center; padding: 10rem 5% 8rem; background: url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&q=80') center/cover no-repeat; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,0,31,0.5), var(--bg)); z-index: 1; } .hero-content { position: relative; z-index: 2; animation: entradaSuave 1.2s ease-out forwards; } .hero h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 700; color: var(--accent); text-shadow: 0 0 30px var(--accent-glow); margin-bottom: 1rem; line-height: 1.1; } .hero p { font-size: clamp(1rem, 2vw, 1.4rem); max-width: 700px; margin: 0 auto; opacity: 0.9; } /* Animación de entrada */ @keyframes entradaSuave { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* --- MAIN CONTENT --- */ main { padding: 4rem 5%; max-width: 1400px; margin: 0 auto; } section { margin-bottom: 8rem; scroll-margin-top: 100px; /* Para que el header no tape el título al hacer scroll */ } h2 { font-family: 'Orbitron', sans-serif; color: #fff; text-align: center; font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 3rem; text-shadow: 0 0 10px rgba(255,255,255,0.3); position: relative; display: inline-block; left: 50%; transform: translateX(-50%); } h2::after { content: ''; display: block; width: 60px; height: 3px; background: var(--accent); margin: 10px auto 0; box-shadow: 0 0 10px var(--accent); } .contenido { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; } /* --- TARJETAS (ARTICLES) --- */ article { background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 16px; padding: 2.5rem 2rem; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote sutil */ position: relative; overflow: hidden; } article::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } article:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.4); } article:hover::before { transform: scaleX(1); } article h3 { color: var(--accent); margin-bottom: 1rem; font-size: 1.5rem; font-family: 'Orbitron', sans-serif; } /* --- COMUNIDAD & BOTÓN --- */ .comunidad { text-align: center; background: linear-gradient(135deg, rgba(20,20,60,0.8), rgba(10,0,31,0.9)); padding: 6rem 2rem; border-radius: 24px; border: 1px solid rgba(0, 212, 255, 0.15); position: relative; overflow: hidden; } /* Botón mejorado con clase CSS */ .btn-cosmico { display: inline-block; margin-top: 2rem; padding: 1rem 2.5rem; font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; text-decoration: none; color: var(--accent); background: transparent; border: 2px solid var(--accent); border-radius: 50px; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; } .btn-cosmico:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 30px var(--accent-glow); transform: scale(1.05); } /* --- FOOTER --- */ footer { text-align: center; padding: 4rem 2rem; background: rgba(0,0,0,0.8); font-size: 0.9rem; border-top: 1px solid rgba(0, 212, 255, 0.1); color: rgba(224, 224, 255, 0.6); } footer span { color: var(--accent); } /* --- MEDIA QUERIES (MÓVIL) --- */ @media (max-width: 768px) { nav ul { gap: 1.5rem; flex-directi </code></pre></div> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vkz4tunpsl4ai601goi.jpeg" alt=" "/></p>
Top comments (0)