0

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;

}

7
  • Ese diseño es muy bueno y se puede crear solamente con CSS y HTML. Pero primero intenta hacer algo y agrega lo que intentaste; te ayudaremos con la dificultad, mas no para hacerte la tarea. Commented el 4 nov. 2022 a las 2:36
  • Ya tengo un avance, lo cree con 3 div y un contenedor. Lo que no sé cómo hacer es el efecto donde aparece y desaparece la caja de la derecha y cómo hacerlo fijo y que pueda tener scroll. No quiero que me lo solucionen, con que me puedan orientar es suficiente, gracias por responder. Commented el 4 nov. 2022 a las 2:48
  • El tema aqui en este sitio es que, hay que poner lo minimo intento que se haya trabajado para poder tener una nocion del trabajo y econtrar el problema para asi recibir ayuda. Si no hay un codigo de muestra, de nada sirve. Commented el 4 nov. 2022 a las 2:56
  • Voy a ver el codigo y echarte un respiro en unos momentos Commented el 4 nov. 2022 a las 2:56
  • Si no te es molestia, agrega lo que ya hiciste, y en base a eso te completo el diseño Commented el 4 nov. 2022 a las 2:59

2 respuestas 2

0

Te dejo un ejemplo de cómo podría ser, espero te sirva

    .contenedor{
        display: flex;
        align-items: center;
     }
.izquierda{
    width: 220px;
    height: 400px;
    background-color: rebeccapurple;
    border: 1px solid #092971;
    border-radius: 4px;
    box-shadow: 0 0 3px 2px black;
    z-index: 10;
}

.derecha{
    width: 220px;
    height: 384px;
    background-color: #44124f;
    border: 1px solid #092971;
    border-radius: 0 4px 4px 0;
    box-shadow: 3px 1px 3px 2px black;
    border-left: 0;
    z-index: 1;
      
   
}

.animacion-derecha{
    animation-name: animacion;
    animation-duration: 1.5s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-in-out;

}

.animacion-izquierda .content{
    opacity:0;
}
.noscroll{
    overflow: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.noscroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.derecha .content{
    opacity:0;
    margin: 0 20px;
    
}
.animacion-opacity{
    animation-name: opacidad;
    animation-duration: 0.5s;
    animation-delay:1.3s;
    animation-fill-mode:forwards;
    animation-timing-function:ease-in-out;
}

@keyframes animacion{
    0%{
        width:220px
    }
    14%{
        width:0
    }

    100%{
        width: 220px;
     }
}
@keyframes opacidad{
    0%{
        opacity:0
    }

    100%{
        opacity: 1;
     }
}
<div class="contenedor">
<div class="izquierda">
    <button onclick="window.location.reload()">Refrescar</button>
</div>
<div class="derecha animacion-izquierda animacion-derecha noscroll">
    <div class="content animacion-opacity ">
        <h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>

</div>
</div>

1
  • Muchas gracias Yussef, era justo lo que necesitaba. Gracias por la ayuda. Commented el 4 nov. 2022 a las 20:09
0

Para este tipo de pagina sin scroll en el HTML y body, es necesario agregarle un overflow: hidden (esto hace que no haya scroll en la pagina en si):

html, body {
    overflow: hidden
}

Si .principal es el div que se desea que sea scroll, entonces debe ser de la siguiente manera:

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

El codigo del diseño original es el siguiente:

.home-tab-page {
  overflow: auto;
  width: 600px;
  height: 100%;
  margin-left: 250px;
  background-color: #1c1e1f;
}

Y esto es un extra que te comparto; para que no se vea la barra de scroll:

.principal::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 0;
    display: none;
}

.principal::-webkit-scrollbar-button:increment, ::-webkit-scrollbar-button {
    display: none;
}

.principal::-webkit-scrollbar-track {
    background-color: transparent;
}

Se puede agregar universalmente para que no se vea la barra en todal la pagina. Pero como este diseño no va al caso, no esta demas saber.

*::-webkit-scrollbar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.