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

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
--color-primaria: #000000;
--color-secundaria: #F6F6F6;
--color-terciaria: #22D4FD;
--color-hover: #272727;
--fuente-krona: 'Krona One', sans-serif;
--fuente-montserrat: 'Montserrat', sans-serif;
--texto-titulo: 2.25rem;
--texto-contenido: 1.5rem;
}

{
padding: 0;
margin:0;
}

body{
box-sizing: border-box;
background-color: var(--color-primaria);
color: var(--color-secundaria);
align-content: center;
}

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

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

.header__menu__link{
font-family: var(--fuente-montserrat);
font-size: var(--texto-contenido);
font-weight: 600;
color: var(--color-terciaria);
text-decoration: none;

}

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

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

}

.presentacion__contenido__titulo{
font-size: var(--texto-titulo);
font-family: var(--fuente-krona);
}

.titulo-destaque {
color: var(--color-terciaria); ;
}

.presentacion__contenido__texto{
font-size: var(--texto-contenido);
font-family: var(--fuente-montserrat);
}

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

.presentacion__enlaces__subtitulo{
font-family: var(--fuente-krona);
font-weight: 400;
font-size: var(--texto-contenido);
}
.presentacion__enlaces__link{
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid var(--color-terciaria);
width: 50%;
text-align: center;
border-radius: 8px;
font-size: 1.5rem;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--color-secundaria);
font-family: var(--fuente-montserrat);
cursor: pointer;
}

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

.presentacion__imagen{
width: 50%;
}

.footer{
color:var(--color-primaria);
background-color: var(--color-terciaria);
padding: 24px;
text-align: center;
font-family: var(--fuente-krona);
font-size: var(--texto-contenido);
font-weight: 400;
}

@media (max-width: 1200px) {
.header {
padding: 10%;
}

.header__menu {
    justify-content: center;
}

.presentacion{
    flex-direction: column-reverse;
}

}

Hola Jhon, espero que estés bien

Parece que estás trabajando en un proyecto de HTML y CSS, enfocándote en la responsividad y el uso de fuentes personalizadas. Tu código CSS muestra una buena organización y uso de variables CSS para colores y fuentes, lo cual es una excelente práctica para mantener la consistencia y facilitar los cambios futuros.

Aquí hay algunos puntos que podrías considerar para mejorar la responsividad y la estructura de tu proyecto:

Verifica los Puntos de Ruptura: Actualmente, tienes un punto de ruptura para pantallas de hasta 1200px. Dependiendo de tu diseño, podrías necesitar más puntos de ruptura para dispositivos más pequeños, como tablets y móviles. Por ejemplo, podrías añadir un media query para dispositivos de hasta 768px y otro para 480px.
Flexibilidad de Imágenes: Asegúrate de que las imágenes dentro de .presentacion__imagen sean responsivas. Puedes hacerlo añadiendo max-width: 100%; height: auto; para que las imágenes se ajusten al contenedor sin perder proporción.
Prueba en Diferentes Dispositivos: Siempre es una buena idea probar tu diseño en diferentes dispositivos y navegadores para asegurarte de que todo se vea y funcione como esperas.
Optimización de Espaciado: Observa el uso de gap y padding. Asegúrate de que estos valores sean adecuados para todos los tamaños de pantalla. En dispositivos más pequeños, podrías querer reducir estos valores para aprovechar mejor el espacio disponible.
Usa Herramientas de Desarrollo: Utiliza las herramientas de desarrollo de tu navegador para simular diferentes tamaños de pantalla y ajustar tu diseño en consecuencia.

Espero que estas sugerencias te sean útiles para avanzar en tu proyecto. ¡Espero haber ayudado y buenos estudios!