Haga lo que hicimos en aula | HTML y CSS: trabajando con responsividad y publicación de proyectos | Alura Latam

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
--color-primario: #000000;
--color-secundario: #F6F6F6;
--color-terciario: #22D4FD;
--color-hover: #272727;
--fuente-montserrat: "Montserrat", sans-serif;
--fuente-krona: "Krona One", sans-serif;
}

{
padding: 0;
margin: 0;
}

body {
background-color: var(--color-primario);
color: var(--color-secundario);
box-sizing: border-box;
}

.header {
padding: 2% 0% 0% 15%;
}

.header__menu {
display: flex;
gap: 80px;
}

.header__menu__link {
font-family: var(--fuente-montserrat);
font-size: 1.5rem;
font-weight: 600;
color: var(--color-terciario);
text-decoration: none;
}

.presentacion {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6% 15%;
gap: 82px;

}

.presentacion__contenido {
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}

.presentacion__contenido__titulo {
font-size: 2.25rem;
font-family: var(--fuente-krona);

}

.titulo-destacado {
color: var(--color-terciario);
}

.presentacion__contenido__texto {
font-size: 1.5rem;
font-family: var(--fuente-montserrat);

}

.presentacion__enlaces {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
gap: 32px;
}

.presentacion__enlaces_link {
width: 50%;
text-align: center;
padding: 21.5px 0;
border-radius: 8px;

font-family: var(--fuente-montserrat);
font-size: 1.5rem;
font-weight: 600;
text-decoration: none;
color: var(--color-secundario);
border: 2px solid var(--color-terciario);
display: flex;
justify-content: center;
gap: 10px;

}

.presentacion__enlaces__subtitulo {
font-size: 1.5rem;
font-family: var(--fuente-krona);
font-weight: 400;
}

.presentacion__enlaces_link:hover {
background-color: var(--color-hover);
}

.presentacion__imagen {
width: 50%;
}

.footer {

background-color: var(--color-terciario);
padding: 1.5rem;
color: var(--color-primario);
text-align: center;
font-family: var(--fuente-montserrat);
font-size: 1.5rem;
font-weight: 400;

}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Hola Estudiante, espero que estés bien

Veo que estás trabajando en la responsividad de tu proyecto. Aquí tienes algunas sugerencias para abordar los puntos mencionados:

Imágenes Responsivas: Asegúrate de que las imágenes tengan la clase presentacion__imagen aplicada en tu HTML. En el CSS, ya has definido el ancho como 50%, lo cual es correcto. Verifica que esta clase esté correctamente aplicada a las imágenes en el HTML.
Ajuste de Diseño para Dispositivos: Usa la herramienta de "Inspeccionar" del navegador para simular diferentes tamaños de pantalla. Puedes añadir media queries en tu CSS para ajustar márgenes y rellenos. Por ejemplo:
```
@media (max-width: 720px) {
    .header {
        padding: 2% 5%;
    }
    .presentacion {
        flex-direction: column;
        padding: 6% 5%;
    }
}
```
Responsividad del Texto: Para la clase .presentacion__contenido, ya has definido el ancho como 50%. Asegúrate de que no haya estilos en conflicto que puedan estar afectando este comportamiento.
Enlaces de Navegación: Cambia el ancho de .presentacion__enlaces_link a un valor relativo, como ya has hecho. Asegúrate de que el diseño se vea bien en diferentes tamaños de pantalla. Puedes ajustar el padding o el gap si es necesario.
```
@media (max-width: 720px) {
    .presentacion__enlaces {
        flex-direction: column;
        gap: 16px;
    }
    .presentacion__enlaces_link {
        width: 80%;
    }
}
```

Prueba estos ajustes y verifica cómo se comporta el diseño en diferentes dispositivos. Espero que esto te ayude a mejorar la responsividad de tu proyecto. ¡Espero haber ayudado y buenos estudios!