Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Aportacion

Buen día equipo les comparto mi idea de esta seccion:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <style>
        /* Estilos generales */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .encabezado {
            padding: 20px;
            background-color: #333;
            color: white;
        }

        .header__menu {
            display: flex;
            justify-content: center;
        }

        .header__menu a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }

        .presentacion {
            display: flex;
            align-items: center;
            padding: 20px;
            gap: 20px; /* Ajuste del espacio entre la imagen y el contenido */
        }

        .presentacion img {
            max-width: 100%;
            height: auto;
        }

        .contenido {
            max-width: 600px;
        }

        /* Media Queries */
        @media (max-width: 1200px) {
            .presentacion {
                flex-direction: column-reverse; /* Imagen sobre el texto */
            }
        }

        @media (max-width: 1023px) {
            .presentacion {
                flex-direction: column; /* Cambiar disposición a columna */
            }
        }

        @media (max-width: 700px) {
            .encabezado {
                padding: 15px; /* Ajuste del padding en el encabezado para pantallas pequeñas */
            }
            
            .header__menu {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>

    <header class="encabezado">
        <nav class="header__menu">
            <a href="#inicio">Inicio</a>
            <a href="#sobre-mi">Sobre mí</a>
        </nav>
    </header>

    <section class="presentacion">
        <img src="tu-imagen.jpg" alt="Imagen de presentación">
        <div class="contenido">
            <h1>Bienvenido a mi Portafolio</h1>
            <p>Este es un espacio donde muestro mis proyectos y habilidades.</p>
        </div>
    </section>

</body>
</html>

Saludos.

1 respuesta

¡Hola Marcoantonio, espero que estés bien!

Veo que estás trabajando en ajustar el diseño para pantallas más pequeñas en tu proyecto de portafolio. Para resolver tu desafío, aquí tienes algunas sugerencias:

  1. Ajustar el espacio entre la imagen y el texto: Puedes utilizar la propiedad "gap" en la clase ".presentacion" para crear un espacio adecuado entre la imagen y el contenido. Por ejemplo:

    .presentacion {
        gap: 20px; /* Ajuste del espacio entre la imagen y el contenido */
    }
    
  2. Cambiar la disposición de los elementos en pantallas más pequeñas: Implementa una media query en CSS para que la disposición de los elementos cambie a una columna cuando la pantalla sea menor que 1023px. Por ejemplo:

    @media (max-width: 1023px) {
        .presentacion {
            flex-direction: column; /* Cambiar disposición a columna */
        }
    }
    
  3. Cambiar el orden de los elementos en la clase ".presentacion": Utiliza la propiedad "flex-direction" en una media query para invertir el orden de los elementos cuando la pantalla sea inferior a 1200px de ancho. Por ejemplo:

    @media (max-width: 1200px) {
        .presentacion {
            flex-direction: column-reverse; /* Invertir el orden de los elementos */
        }
    }
    
  4. Ajustar el encabezado para pantallas más pequeñas: Cambia el "padding" de la clase ".encabezado" en CSS para que esté más centrado y con un espacio adecuado en la parte superior de la pantalla. Por ejemplo:

    @media (max-width: 700px) {
        .encabezado {
            padding: 15px; /* Ajuste del padding en el encabezado para pantallas pequeñas */
        }
    }
    
  5. Centrar elementos del menú en pantallas más pequeñas: Verifica si la propiedad "display: flex" ya está aplicada y agrega "justify-content: center" para alinear los elementos centralmente. Por ejemplo:

    .header__menu {
        display: flex;
        justify-content: center; /* Alinear elementos centralmente */
    }
    

Espero que estas sugerencias te ayuden a resolver tus desafíos de diseño responsivo. ¡Mucho ánimo con tu proyecto!

Espero haber ayudado y buenos estudios!