xd

31 nisleyjulieth19

.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
    background:linear-gradient(135deg,#7c3aed,#2563eb,#06b6d4);
    background-size:400% 400%;
    animation:fondo 10s ease infinite;
}

@keyframes fondo{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.hero h1{
    font-size:4rem;
    margin-bottom:20px;
}

.hero p{
    max-width:800px;
    font-size:1.3rem;
}

.btn{
    margin-top:30px;
    padding:15px 35px;
    border-radius:50px;
    background:white;
    color:#2563eb;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn:hover{
    transform:scale(1.08);
}

.seccion{
    max-width:1200px;
    margin:auto;
    padding:100px 25px;
    opacity:0;
    transform:translateY(50px);
    transition:1s;
}

.seccion.visible{
    opacity:1;
    transform:translateY(0);
}

.tarjeta{
    display:flex;
    flex-wrap:wrap;
    gap:40px;
    align-items:center;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    border-radius:30px;
    padding:35px;
    border:1px solid rgba(255,255,255,.1);
}

.foto{
    flex:0 0 350px;
}

.foto img{
    width:100%;
    border-radius:25px;
    border:4px solid rgba(255,255,255,.15);
    transition:.5s;
}

.foto img:hover{
    transform:scale(1.05);
}

.contenido{
    flex:1;
}

.contenido h2{
    font-size:2.7rem;
    margin-bottom:20px;
    color:#60a5fa;
}

.contenido p{
    line-height:1.9;
    margin-bottom:18px;
}

.titulo{
    text-align:center;
    font-size:2rem;
    margin:60px 0 30px;
    color:#60a5fa;
}

.timeline{
    border-left:4px solid #60a5fa;
    padding-left:25px;
}

.evento{
    margin-bottom:30px;
}

.gustos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
    margin-top:25px;
}

.gusto{
    background:#1e293b;
    padding:18px;
    border-radius:15px;
    text-align:center;
    transition:.3s;
}

.gusto:hover{
    transform:translateY(-5px);
}

footer{
    text-align:center;
    padding:60px 20px;
    background:#020617;
}

@media(max-width:768px){
    .hero h1{
        font-size:2.8rem;
    }

.tarjeta{
        text-align:center;
    }

.foto{
        flex:100%;
    }

.contenido h2{
        font-size:2rem;
    }
}
</style>
</head>

<body>

<section class="hero">
    <h1>Biografías</h1>
    <p>
        Dos historias únicas llenas de experiencias, aprendizajes, sueños y metas.
    </p>
    <a href="#nisley" class="btn">Comenzar</a>
</section>

<div class="contenido">
<h2>Nisley Julieth Rey Becerra</h2>

<p>
Nisley Julieth Rey Becerra nació el 19 de noviembre de 2010 en Cúcuta, Norte de Santander, Colombia.
A los tres años se mudó a Villa del Rosario, lugar donde pasó gran parte de su infancia.
</p>

<p>
Desde pequeña se caracterizó por ser una niña tranquila, callada y muy observadora.
Le costaba expresar lo que sentía y muchas veces prefería permanecer en silencio.
</p>

<p>
Uno de los momentos más difíciles de su infancia ocurrió cuando tenía cinco años,
debido al fallecimiento de su abuelo, una pérdida que marcó profundamente su vida.
</p>

<p>
Con el paso del tiempo descubrió en el dibujo una forma de expresar sus emociones,
ideas y pensamientos, convirtiéndose en una de sus mayores pasiones.
</p>

<p>
Hoy continúa creciendo, superando inseguridades y desarrollando su creatividad.
</p>
</div>
</div>
</section>

<div class="contenido">
<h2>Stefany</h2>

<p>
Mi nombre es Stefany y nací el 15 de diciembre.
Desde pequeña he sido una persona observadora, curiosa y con muchas ganas de aprender.
</p>

<p>
Con el tiempo me convertí en una persona más seria y reservada.
No suelo demostrar fácilmente mis emociones, pero valoro profundamente a quienes forman parte de mi vida.
</p>

<p>
Una persona muy importante para mí es mi mejor amiga, con quien he compartido momentos inolvidables.
</p>

<p>
Entre mis gustos destacan las series, mangas, cómics, animes y la música.
También disfruto las aventuras y las actividades físicas.
</p>

<p>
Uno de mis mayores sueños es convertirme en una persona reconocida por sus logros
y alcanzar todas las metas que me proponga.
</p>
</div>
</div>
</section>

<footer>
<h2>Dos historias, dos caminos</h2>
<p>
Aunque sus personalidades son diferentes, ambas comparten el deseo de crecer y construir su futuro.
</p>
</footer>

secciones.forEach(sec=>observer.observe(sec));
</script>

</body>
</html>lace with your HTML Code 
(Leave empty if not needed) -->

CSS

xd

Recommended