Skip to main content
4 de 4
se añadieron 231 caracteres en el cuerpo

Crear un DIV estático o fijo que tenga scroll y efecto de aparecer y desaparecer

introducir la descripción de la imagen aquíestoy tratando de crear mi primer portafolio y encontré uno que me gustó y lo quiero recrear.

Me gustaría que me orientaran con qué tecnología sería más fácil y sencillo recrearlo y sobre todo, cómo puedo hacer para que aparezca y desaparezca el DIV con la información y que además sea estático y tenga scroll.

Hasta el momento he tratado de usar unicamente HTML y CSS. No sé si sea suficiente.

Les dejo la página para que vean a lo que merefiero y espero sea clara mi duda. Saludos.

Quiero recrear este sitio

Esto es lo que tengo:

<body>
<div class="container">
    <div class="lateral">
        <h1 class="title-menu">JAZ</h1>
        <nav class="navbar">
            <a href="#" class="selected">about me</a>
            <a href="#">my works</a>
            <a href="#">contact</a>
            <a href="#">resume</a>
        </nav>
    </div>
    <div class="mayor">
        <img src="img/animasfit.jpg" class="photo"alt="Javier Animas Photo">
        <div class="texto-img">
            <h1>Javier Animas</h1>                
        </div>
        <div class="centrado">
            <p class="dev">Front-End Developer</p>
        </div>
        <div>
            <nav >
                <a href="#"class="redes">FB</a>
                <a href="#"class="redes">In</a>
                <a href="#"class="redes">IG</a>
            </nav>
        </div>
        
        
    </div>
    <div class="principal">
        <div class="textos">
            <h1 class="titulos">about me</h1>

            <h4>35 años <span>/</span> México <span>/</span> Freelance</h4>
        <div id="mensajes">
           <p class="descripcion">
            Prolific, full stack web developer with a passion for metrics and beating former "best-yets." Prototyped 25 new product features per year for Flexor, Inc. Decreased rework by 22% and costs by 15%. Consistently receive high user experience scores for all web development projects, including a 55% increase for Flexor, Inc. Passionate about building world class web applications. One of my sites received a 2020 Webby for Best Navigation and Structure.
           </p>
            
          </div>
        </div>
        
        
    </div>
</div>

Ya intenté con el overflow-y pero no tengo resultados

.principal {
background-color: var(--principal-gray);
margin-top: 2rem;
max-height: 90%;
height: auto;
overflow-y: auto;
padding: 2rem;

}