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

Haga lo que hicimos en aula

@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;

}

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

.header__menu{
    justify-content: center;
}

.presentacion{
    flex-direction: column-reverse;
    padding: 5%;
}

.presentacion__contenido{
    width: auto;
}

}

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

1 respuesta

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en mejorar la responsividad de tu proyecto web. Vamos a abordar los puntos que mencionaste:

  1. Ajustando el espaciado para pantallas más pequeñas:

    • En el código CSS que compartiste, ya tienes una regla @media para pantallas menores a 1200px. Dentro de esta regla, estás ajustando el padding de la clase .presentacion a 5%. Esto debería ayudar a reducir el espacio lateral y hacer que el contenido no se vea tan apretado.
  2. Refinando el ancho del contenido:

    • Has cambiado el width de .presentacion__contenido a auto dentro de la misma regla @media. Esto permite que el contenido se adapte al nuevo padding aplicado. Si aún sientes que ocupa mucho espacio, podrías intentar ajustar el padding o el gap entre los elementos dentro de .presentacion__contenido.
  3. Evaluando el efecto de "width: auto":

    • El uso de width: auto debería permitir que el contenido se ajuste automáticamente al espacio disponible. Asegúrate de probar en diferentes tamaños de pantalla para verificar que el ajuste es adecuado.
  4. Creando una cuenta en GitHub y subiendo un proyecto:

    • Si aún no lo has hecho, ve a GitHub y sigue el proceso de registro. Una vez que tengas tu cuenta, puedes crear un nuevo repositorio y subir tus archivos de proyecto. Esto se hace generalmente usando Git en la línea de comandos o arrastrando los archivos directamente en la interfaz web de GitHub.

Espero que estas sugerencias te ayuden a mejorar la responsividad de tu proyecto. ¡Bons estudios!