E aí, Gabriel, beleza? A parada é que tu quer aplicar um estilo específico na âncora "Sobre mim" na página "Home", mas não na página "Sobre mim", certo?
Pra fazer isso, uma maneira é utilizar classes ou IDs diferentes para as âncoras em cada página e, em seguida, estilizar essas classes ou IDs de forma diferente no CSS.
Primeiro, no teu HTML, dá um jeito de identificar de forma única as âncoras. Algo assim:
<!-- Página Home -->
<a class="ancora-home" href="#sobre-mim">Sobre mim</a>
<!-- Página Sobre Mim -->
<a class="ancora-sobre-mim" href="#sobre-mim">Sobre mim</a>
Nesse exemplo, eu adicionei classes diferentes ("ancora-home" e "ancora-sobre-mim") para as âncoras em cada página. O href="#sobre-mim"
é o identificador que leva para a seção "Sobre mim".
Agora, no teu CSS, tu pode estilizar essas classes de forma diferente:
/* Estilos para a âncora "Sobre mim" na página Home */
.ancora-home {
color: blue; /* Define a cor que tu quer */
font-weight: bold; /* Ou outros estilos de texto específicos */
}
/* Estilos para a âncora "Sobre mim" na página Sobre Mim */
.ancora-sobre-mim {
color: red; /* Outra cor, por exemplo */
font-weight: normal; /* Estilos diferentes */
}
Dessa forma, tu pode aplicar estilos diferentes às âncoras "Sobre mim" em cada página, mantendo a mesma estrutura HTML. Quando tu quiser alterar o estilo na página "Home", mexe na classe .ancora-home
, e na página "Sobre Mim", mexe na classe .ancora-sobre-mim
.
Espero que isso te ajude a resolver o problema! Se tiver mais dúvidas ou precisar de mais ajuda, é só falar.