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

[Dúvida] como faço pra meu projeto pegar

deixarei links e prints do github e do vercel

9 respostas

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

inclusive nas minhas tentativas que deram errado, criei varios commits que n consigo apagar, vou deixar o link do meu dashboard do vercel

https://vercel.com/dashboard

Oi, Yuri, tudo bem?

O problema que você está enfrentando acontece por conta dos caminhos que você passou ao realizar a adição das imagens e do estilo CSS. No seu GitHub, você adicionou todos os arquivos em um mesmo nível, ou seja, todos estão em uma mesma pasta, mas no momento de referenciar as imagens e estilos no arquivo "index.html", você adicionou o caminho como se os elementos estivessem em pastas diferentes, contudo essas pastas não existem no GitHub e no momento em que o "Vercel" tenta buscar as imagens e estilos nos caminhos que você identificou no arquivo HTML ele não encontra e apenas é mostrado na tela o conteúdo escrito sem nenhuma formatação ou imagem.

Por exemplo, ao criar o link de estilos você adicionou <link rel="stylesheet" href="./styles/style.css">, mas a pasta "styles" não existe e o arquivo "style.css" está na mesma pasta que o arquivo "index.html". Dessa forma o link deveria ser escrito assim: <link rel="stylesheet" href="style.css">

Podemos corrigir isso reescrevendo os caminhos no arquivo "index.html" para que todos estejam em um mesmo nível. Ficaria assim:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Escola Aliança Esportiva</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_menu_link" href="index.html">Home</a>
            <a class="cabecalho_menu_link" href="about.html">Sobre a escola</a>
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo"><strong>Desenvolva técnicas e habilidades de futebol no seu
                    filho,<span> FAZENDO PARTE DO NOSSO TIME !!!</span></strong></h1>
            <p class="apresentacao__conteudo__texto"> Nosso time é composto por profissionais qualificados e dedicados,
                que vão trabalhar com exêlencia para propocionar a melhor experiencia do ensino tático e técnico do
                futebol.<span>VENHA FAZER PARTE DESSE TIME VOCÊ TAMBÉM !!!</span></p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse nossas redes:</h2>
                <a class="apresentacao__links__link" href="https://instagram.com/escolaliancaesportiva/">
                    <img src="instagram-g3aa936d4a_1280.png" width="32px" height="32px">
                    Instagram
                </a>
                <a class="apresentacao__links__link" href="https://whats.link/aliancaesportivaesc">
                    <img src="./assets2/whatsapp-logo-1.png" width="32px" height="32px">
                    Whatsapp
                </a>
            </div>
        </section>
        <img class="imagem_principal" src="./assets/escudooo.jpg" alt="logo da escola">
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Yuri Menezes.</p>
    </footer>

</body>
</html>

Da mesma forma que foi feito para todo o arquivo "index.html", é preciso fazer também com o arquivo "about.html" referenciando corretamente as imagens e estilos lembrando=-se de verificar se estão em pastas diferentes do arquivo "about.html" ou na mesma pasta.

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!

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

Olá Rodrigo tudo bem por aqui, e por ai? Então eu fiz o que vc pediu ai encima e o projeto ficou da seguinte formaInsira aqui a descrição dessa imagem para ajudar na acessibilidade

<link rel="stylesheet" href="style.css">

foi exatamente assim que coloquei e ficou dessa forma acima, tanto a primeira quanto segunda pagina

Uma maneira de o projeto "pegar" é retirar tudo das pastas e colocar num indice só , mas para isso você precisa linkar novamente as imagens e a referencia so style. Aqui rodou certinho após tirar tudo das pastas

solução!

Oi, Yuri, tudo bem?

Pelo que percebi ao analisar o link do Vercel que você compartilhou, o resultado está apresentando todos os estilos CSS que você criou além de todas as imagens e ícones. Reforço o que o colega Rodrigo falou no comentário acima, sempre é importante revisar o caminho dos arquivos que estamos criando para não haver problemas relacionados aos estilos, imagens ou outros elementos.

Espero que dê tudo certo. Abraço e bons estudos!