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

Haciendo lo que hicimos

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

    --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% 10%;

}

.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;
    padding: 6% 10%;
    justify-content: space-between;
}

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

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

.titulo-destaque {
    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__subtitulo {
    font-family: va(--fuente-krona);
    font-size: 1.5rem;
    font-weight: 400;
}

.presentacion__enlaces__link {
    width: 378px;
    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__link:hover{
    background-color: var(--color-primario);
}

.footer {
    background-color: var(--color-terciario);
    padding: 1.5rem;
    color: var(--color-primario);
    font-family: var(--fuente-montserrat);
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
}
1 respuesta

Hola Thais, espero que estés bien

¡Espero que estés bien! Parece que estás trabajando en un proyecto de responsividad y tienes que convertir las unidades de font-size de píxeles a rem en tu archivo CSS. Esto es una gran práctica para hacer que tu sitio web sea más accesible y adaptable a diferentes configuraciones de usuario.

He notado que en tu código CSS actual, tienes varios tamaños de fuente definidos en píxeles. Aquí te muestro cómo podrías convertir algunos de ellos a rem:

  1. .header__menu__link tiene font-size: 1.5rem;. Si ya está en rem, no necesitas hacer cambios aquí.

  2. .presentacion__contenido__titulo tiene font-size: 2.25rem;. De nuevo, ya está en rem, así que está bien.

  3. .presentacion__contenido__texto tiene font-size: 1.5rem;, que también está correcto.

  4. .presentacion__enlaces__subtitulo tiene font-size: 1.5rem;, lo cual está bien.

  5. .presentacion__enlaces__link tiene font-size: 1.5rem;, que está correcto.

  6. .footer tiene font-size: 1.5rem;, lo cual está bien.

Parece que ya has hecho un buen trabajo al usar rem en tu CSS. Sin embargo, asegúrate de que todos los elementos de texto que requieren responsividad estén usando rem en lugar de px. Si encuentras alguna instancia de px que no he mencionado, simplemente divide el valor en píxeles por 16 para convertirlo a rem. Por ejemplo, si encuentras font-size: 32px;, lo convertirías a font-size: 2rem; (32 / 16 = 2).

Después de hacer estos ajustes, prueba la responsividad de tu sitio cambiando el tamaño de la fuente en las configuraciones del navegador para asegurarte de que todo se vea bien en diferentes tamaños.

Espero que esto te ayude y te deseo mucho éxito en tus estudios y proyectos. ¡Bons estudios!