<!DOCTYPE html>
Génesis Mundi - Biblioteca Cósmica Interactiva
<br>
:root {<br>
--bg: #0a001f;<br>
--text: #e0e0ff;<br>
--accent: #00d4ff;<br>
--accent-dark: #0099cc;<br>
--card: rgba(20, 20, 60, 0.7);<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code>* {
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;
line-height: 1.6;
}
header {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 100;
padding: 1rem 5%;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
gap: 2.5rem;
}
nav a {
color: var(--text);
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: var(--accent);
text-shadow: 0 0 10px var(--accent);
}
.hero {
text-align: center;
padding: 10rem 5% 7rem;
background: url('https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&q=80') center/cover no-repeat;
background-attachment: fixed;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(10, 0, 31, 0.65), rgba(10, 0, 31, 0.92));
z-index: 1;
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: clamp(3.8rem, 13vw, 10rem);
font-weight: 500;
color: var(--accent);
text-shadow:
0 0 20px rgba(0, 212, 255, 0.8),
0 0 40px rgba(0, 212, 255, 0.6),
0 0 80px rgba(0, 212, 255, 0.4),
0 0 140px rgba(0, 212, 255, 0.2);
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
position: relative;
z-index: 2;
animation: neon-pulse 7s ease-in-out infinite alternate;
}
.hero p {
font-size: clamp(1.3rem, 4.2vw, 1.7rem);
max-width: 780px;
margin: 0 auto;
line-height: 1.85;
opacity: 0.93;
position: relative;
z-index: 2;
}
@keyframes neon-pulse {
from {
text-shadow:
0 0 20px rgba(0, 212, 255, 0.8),
0 0 40px rgba(0, 212, 255, 0.6),
0 0 80px rgba(0, 212, 255, 0.4);
}
to {
text-shadow:
0 0 35px rgba(0, 212, 255, 1),
0 0 70px rgba(0, 212, 255, 0.8),
0 0 120px rgba(0, 212, 255, 0.5);
}
}
main {
padding: 4rem 5%;
max-width: 1400px;
margin: 0 auto;
}
section {
margin-bottom: 6rem;
}
h2 {
font-family: 'Orbitron', sans-serif;
color: var(--accent);
text-align: center;
font-size: 2.8rem;
margin-bottom: 2.5rem;
text-shadow: 0 0 15px rgba(0,212,255,0.4);
}
.contenido {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
article {
background: var(--card);
backdrop-filter: blur(8px);
border: 1px solid rgba(0,212,255,0.2);
border-radius: 16px;
padding: 2rem;
transition: all 0.4s ease;
}
article:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,212,255,0.15);
border-color: var(--accent);
}
article h3 {
color: var(--accent);
margin-bottom: 1rem;
font-size: 1.6rem;
}
.comunidad {
text-align: center;
background: rgba(20,20,60,0.6);
padding: 5rem 2rem;
border-radius: 24px;
border: 1px solid rgba(0,212,255,0.15);
}
footer {
text-align: center;
padding: 3rem;
background: rgba(0,0,0,0.6);
font-size: 0.95rem;
border-top: 1px solid rgba(0,212,255,0.1);
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 1.5rem;
}
.hero {
padding: 7rem 5% 5rem;
}
.hero h1 {
font-size: clamp(3.2rem, 12vw, 7rem);
margin-bottom: 1.2rem;
}
.hero p {
font-size: 1.3rem;
line-height: 1.8;
max-width: 90%;
}
}
</code></pre></div>
<p>
Génesis Mundi
Biblioteca Cósmica Interactiva — Explorando la sabiduría del universo a través del tiempo, la ciencia y el misterio.
<section class="contenido" id="conocimientos">
<h2>Conocimientos Cósmicos</h2>
<article>
<h3>Historia de la Humanidad</h3>
<p>Desde las primeras civilizaciones sumerias y mayas hasta los albores de la era espacial, recorremos los hitos que forjaron nuestra especie.</p>
</article>
<article>
<h3>Ciencia y Tecnología</h3>
<p>Los últimos avances en física cuántica, inteligencia artificial, exploración espacial y biotecnología, explicados de forma accesible y profunda.</p>
</article>
<article>
<h3>Filosofía y Espiritualidad</h3>
<p>Diálogos entre tradiciones ancestrales, misticismo moderno y pensamiento contemporáneo sobre el sentido del cosmos y nuestra existencia.</p>
</article>
<article>
<h3>Cosmogonías Comparadas</h3>
<p>Exploramos mitos de creación de todo el planeta: del Génesis bíblico al Popol Vuh, del Rigveda a las narrativas aborígenes australianas.</p>
</article>
</section>
<section class="comunidad" id="comunidad">
<h2>Únete a la Comunidad Cósmica</h2>
<p>Participa en foros, debates en vivo, grupos de estudio y eventos interactivos con expertos, investigadores y entusiastas del conocimiento universal.</p>
<p style="margin-top: 1.5rem;">
<a href="#" style="color:var(--accent); text-decoration:none; font-weight:bold; border:1px solid var(--accent); padding:0.8rem 1.8rem; border-radius:50px; transition:all 0.3s;">
Unirme ahora →
</a>
</p>
</section>
© 2025 Génesis Mundi - Biblioteca Cósmica Interactiva • Creado con curiosidad cósmica por David Berúmen Véliz
Top comments (0)