variables de color y texto | Alura Latam - Cursos online de tecnologia

variables de color y texto

hice los cambios propuestos en clases pero finalmente no mtoma ningun color y queda en blanco todo lo que debería tener color, que puede ser?

:root{ --color-primario:#5f5d9c; --color-secundario:#6196a6; --color-terciario: #a4ce95; --color-hover: #272727; --fuente-motserrat: "Montserrat", serif; --fuente-krona: "Krona One", serif; }

*{ padding:0; margin:0; }

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

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

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

.header_menu_link{ font-family: var(--fuente-motserrat); font-size: 24px; font-weight: 600; color:var(--color-terciario); text-decoration: none;

}

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

.presentation{ display: flex; align-items: center; padding: 5% 15%; justify-content: space-between; }

.presentacion_contenido{ width: 615px; display:flex; flex-direction: column; gap: 10px; }

.presentacion_contenido_titulo{ font-family: var(--fuente-krona); font-size: 36px; }

.presentacion_contenido_texto{ font-family: var(--fuente-motserrat); font-size: 24px; }

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

.Presentacion_enlace_subtitulo{ font-family: var(--fuente-krona); font-size: 24px; font-weight: 400;

}

.presentacion_enlaces_link{ width: 378px; text-align: center; padding: 21.5px 0; border-radius: 8px; font-family: var(--fuente-motserrat); font-size: 24px; font-weight: 600; text-decoration: none; color: var(--color-secundario); font-family: var(--fuente-motserrat); border: 2px solid var(--color-terciario); display: flex; justify-content: center; gap: 10px; }

.presentacion_enlaces_link:hover{

background-color: var(--color-hover);

}

.footer{ background-color: var(--color-terciario) ; padding: 5px; color: var(--color-primario); text-align: center; font-family: var(--fuente-motserrat); font-size: 24px; font-weight: 400; }

Hola Marcelo, espero que estés bien

Parece que has hecho un buen trabajo definiendo las variables de color y aplicándolas en tu CSS. Sin embargo, si no se están mostrando los colores como esperas, aquí hay algunas cosas que puedes verificar:

Compatibilidad del Navegador: Asegúrate de que estás usando un navegador que soporte las variables CSS. La mayoría de los navegadores modernos lo hacen, pero si estás usando una versión muy antigua, podría ser un problema.
Errores Tipográficos: Revisa que no haya errores tipográficos en los nombres de las variables. Por ejemplo, asegúrate de que estás usando var(--color-primario) y no algo como var(--color-primaria).
Especificidad: Verifica si hay alguna otra regla CSS que esté sobrescribiendo tus estilos. Puedes usar las herramientas de desarrollo del navegador (como el Inspector de Elementos en Chrome) para ver qué estilos se están aplicando.
Archivo CSS Cargado Correctamente: Asegúrate de que el archivo CSS está siendo cargado correctamente en tu HTML. Puedes verificar esto viendo si otros estilos CSS se aplican como esperas.
Errores en el HTML: Asegúrate de que el HTML está estructurado correctamente y que las clases utilizadas en el CSS coinciden con las del HTML.

Por ejemplo, si tienes algo como esto en tu HTML:

<body>
    <div class="header">
        <div class="header_menu">
            <a href="#" class="header_menu_link">Inicio</a>
        </div>
    </div>
</body>

Asegúrate de que las clases en el CSS coincidan exactamente con las clases en el HTML.

Espero que alguna de estas sugerencias te ayude a resolver el problema. ¡Bons estudios!