html-css PROJETO CORDEL

[raphael-vi]

Por alguma razão as imagens do meu projeto cordel não carregam, eles carregam no meu Live Server, mas quando abro o index por si só as imagens não carregam. Também não carregam no mozilla, eu uso o edge. O problema não para aí. As fontes também não carregam, seja por @font-face ou por @import, nenhum dos dois funciona, da um help aí alguem.

https://raphael-vi.github.io/html-css/desafios/desafio011/index.html

eu fiz como tema do meu escritor favorito. As imagens são JPG

[BenjamimCS]

Na hora de apontar ao diretório, por exemplo img/bg você está apontando para o diretório raíz, onde, caso esteja no PC Windows (C:) ou / no Linux e caso esteja remoto é pro diretório inicial do repositório.

O Guanabara em certa parte do curso alerto que a forma de apontar os diretórios é no formato de diretórios Linux (Unix-like pra ser mais exato).

Colocando a barra / vai ao inicio (ao raíz) como eu já disse. Para apontar ao atual usa o ponto e a barra (./) - notei que você também colocou o nome da sua pasta, não precisa. Como você aponta no arquivo CSS que tá na pasta estilo é só usar o ../ que já indica o diretório anterior, uma pasta atrás do atual. Recomendo dá uma olhada sobre depois, mas isso já é necessário pra você entender como apontar os seus arquivos.

Guanabara tem um curso de Linux que recomendo, hoje quase tudo que é Web é Linux então saber um pouco ajuda bastante.

EDIT: fiz uns testes aqui e a posição do @font-face tá dando o problema das fontes não tarem carregando com exceção da IBM Plex Mono. Coloque abaixo @font-face e verá a segunda fonte importada carregando normalmente. O mais engraçado é que só afeta outras fontes e a IBM Plex Mono carrega normalmente porém com um peso maior por mais que você tenha a importado com peso de 100.

[raphael-vi]

Uau, muito obrigado MESMO. Eu sempre me perguntei pq ele usava os pontinhos sendo que só dando uma barra o vsc ja indicava um caminho pra mim. Quanto a fonte, obrigado de novo, eu coloquei abaixo e removia font face, deixei somente @import e funcionou perfeitamente dessa vez. Como é bom ver tudo funcionando, agora dá pra terminar. MUITO OBRIGADO MESMO

[BenjamimCS]

Uau, muito obrigado MESMO. Eu sempre me perguntei pq ele usava os pontinhos sendo que só dando uma barra o vsc ja indicava um caminho pra mim. Quanto a fonte, obrigado de novo, eu coloquei abaixo e removia font face, deixei somente @import e funcionou perfeitamente dessa vez. Como é bom ver tudo funcionando, agora dá pra terminar. MUITO OBRIGADO MESMO

Kkk, disponha. Provavelmente você abriu a pasta onde tá o index.html como a pasta de trabalho no VSCode dando a entender aquele diretório como raiz por isso a barra (/) funcionava. Abs. Sucesso.

[Solynhoo]

Pior que eu também tenho esses problemas no Github Pages porque ele hospeda a página num caminho e não num subdominio, eu recomendaria para quem quiser evitar esse problema para páginas mais complexas, hospedar o seu site na Vercel, pois ela hospeda o seu site num subdominio, ao contrario do Github Pages, por exemplo: curso.solyn.vercel.app e também pois mais a frente quando estiverem a aprender React ou Vue, essa plataforma é muito útil para hospedagem de sites que utilizam essas Frameworks e já vai dar para aprender os básicos sobre essa plataforma

A Vercel também dá "deploy" em páginas HTML muito rapido, demorá apenas uns 3 segundos e a sua página já está na web

Espero ter ajudado e boa sorte para todos! 😁

[BenjamimCS]

O Vercel serve a partir de um diretório do projeto (/public/) e o gh pages apartir do projeto (/), é isso? Porque gh pages também hospeda em um subdomínio. Não entendi exatamente a diferença.

Mas já agradeço a recomendação da plataforma!

[Solynhoo]

O Vercel serve a partir de um diretório do projeto (/public/) e o gh pages apartir do projeto (/), é isso? Porque gh pages também hospeda em um subdomínio. Não entendi exatamente a diferença.

Mas já agradeço a recomendação da plataforma!

Opá!

Cara, a Vercel serve da mesma maneira que o GH Pages, só tem essa vantagem que é hospedado por um subdominio, por exemplo se eu tiver um repo com o nome Curso e o hospedar pela vercel, o URL seria https://curso.solyn.vercel.app, mas agora se for pelo GH Pages, ele seria https://solynhoo.github.io/Curso, e isso pode causar muitos problemas como esse sitado no Issue, essa é a diferença que eu quis especificar

Espero ter explicado de forma correta :)

[BenjamimCS]

Poh papo reto! Ah barra (/) seria direto pro root.

Só uma errata que no Vercel o projeto está na raiz do site; enquanto no gh pages está em um subdiretorório.

Curioso já que todos os "repositórios" com esse recurso estão em uma mesma URL... 👀 hehe