Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Style.css nao carrega no gitpage

Olá, Subi o site https://ledumor.github.io/Alurabook/, mas nao está carregando o CSS. Localmente funciona normal, fiz um teste mudando o nome do arquivo css e gerou o mesmo erro ou seja, o problema é nome ou endereço do css, mas nao consigo encontrar o ponto certo.

https://github.com/ledumor/Alurabook

Podem me ajudar?

2 respostas
solução!

Oi, Luis Eduardo, tudo bem?

O problema que você está enfrentando ocorre, pois os caminhos dos arquivos CSS linkados no arquivo principal de estilos "styles.css" e no arquivo "index.html" estão incorretos. Por conta disso, o navegador não encontra os estilos e não aplica nenhuma das estilizações que você fez.

Levando em consideração a organização dos arquivos nas pastas, você precisa alterar o caminho dos arquivos de estilo no documento "styles.css", de modo que eles fiquem escritos da seguinte maneira:

@import url("./header.css");
@import url("./banner.css");
@import url("./carrosel.css");
@import url("./contato.css");
@import url("./topicos.css");
@import url("./rodape.css");

Essa alteração se faz necessário, pois os arquivos estão em uma mesma pasta, portanto, o ./ adicionado antes do nome do arquivo faz essa indicação, de que os arquivos estão no mesmo diretório em que o arquivo "styles.css" está localizado.

No caso do arquivo "index.html" precisamos alterar as referências de caminho nas tags <link> que guardam os estilos do arquivo "reset.css" e "styles.css" para que também sejam referenciados como partindo do mesmo diretório que o arquivo "index.html". Ficaria assim:

<link rel="stylesheet" href="./assets/reset.css">
<link rel="stylesheet" href="./assets/styles.css">

Precisamos também fazer uma modificação de caminho na tag <img>que mostra as estrelas. Isso pode ser feito no arquivo "index.html" na propriedade src acrescentando um ponto (.) antes da barra do caminho, como mostro no código abaixo:

<scan class="estrleas"> 
    <img src="./image/Star 1.svg" alt="desenho de uma estrela amarela"> 
    <img src="./image/Star 1.svg" alt="desenho de uma estrela amarela"> 
    <img src="./image/Star 1.svg" alt="desenho de uma estrela amarela"> 
    <img src="./image/Star 1.svg" alt="desenho de uma estrela amarela"> 
    <img src="./image/Star 1.svg" alt="desenho de uma estrela amarela"> 
</scan>

Com estas modificações o arquivo deve trazer as estilizações que foram feitas no seu projeto.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Funcionou! obrigado