Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

404: NOT_FOUND

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Repositório do GitHub e atividade Colocando o projeto no ar

por Julia Oriani de Jorge
| 26k xp | 10 posts

Quando tento abrir a página, aparece o erro 404. Não sei o que pode estar errado.

index.html:

Home Sobre mim

Primeira página da Julia!

Olá! Sou Julia Oriani, futura desenvolvedora Front-end. Colocando pequenas idéias e designs em prática!

Acesse minhas redes:

github GitHub instagram Instagram LinkedIn LinkedIn
foto da alura

Desenvolvido por Alura.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');

:root { --cor-primaria: #000000; --cor-secundaria: #F6F6F6; --cor-tercearia: #22D4FD; --cor-hover: #272727;

--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;

}

  • { margin:0; padding: 0; }

body { box-sizing:border-box; background-color:var(--cor-primaria); color:var(--cor-secundaria); }

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

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

.cabecalho__menu__link { font-family:var(--font-secundaria); font-size: 1.5rem; font-weight: 600; color:var(--cor-tercearia); text-decoration: none; }

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

.apresentacao__conteudo { width: 50%; display:flex; flex-direction:column; gap:40px; }

.apresentacao__conteudo__titulo { font-size: 2.25rem; font-family:var(--fonte-primaria); }

.titulo-destaque { color:var(--cor-tercearia); }

.apresentacao__conteudo__texto { font-size: 1.5rem; font-family:var(--font-secundaria); }

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

.apresentacao__links__subtitulo { font-family:var(--fonte-primaria); font-weight: 400; font-size: 1.5rem; }

.apresentacao__links__navegacao { display:flex; justify-content:center; gap: 16px; border: 2px solid var(--cor-tercearia); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color:var(--cor-tercearia); font-family:var(--font-secundaria); }

.apresentacao__links__link:hover { background-color:var(--cor-hover); }

.rodape { padding: 24px; color:var(--cor-primaria); background-color: var(--cor-tercearia); text-align: center; font-family: var(--font-secundaria); font-size: 1.5rem; font-weight: 400; }

.apresentacao__imagem { width: 50%; }

@media (max-width: 1200px) { .cabecalho { padding: 10%; } .cabecalho__menu { justify-content: center; } .apresentacao { flex-direction: column-reverse; padding: 5%; } .apresentacao__conteudo { width: auto; } }

https://portfolio-juliaoriani.vercel.app/

!(https://cdn1.gnarususercontent.com.br/1/1237899/3a91ea92-a43c-4cff-97df-1c4decb83bc7.png) !(https://cdn1.gnarususercontent.com.br/1/1237899/8600d4b6-a1a3-497e-af06-c81715712533.png)

8 respostas
por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

Oi, Julia

Talvez o problema seja porque o seu repositório do GitHub é privado.

Erro 404 é página não encontrada 404 not found

por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

Outro possível problema é que seu projeto está dentro de outra pasta Insira aqui a descrição dessa imagem para ajudar na acessibilidade

No vídeo da aula, Colocando o projeto no ar, é informado pela Rafaela, no minuto 3:25, para colocar os arquivos na Raiz do repositório (projeto)

por Julia Oriani de Jorge
| 26k xp | 10 posts

Oi! então, eu coloquei privado porque falaram pra fazer isso na aula..

Rafaela: Podemos deixar nosso repositório como público ou privado. O nosso vamos deixar privado, mas se quiserem deixar o seu público, vocês também conseguem.

E sobre a pasta, também tinha entendido que era portfolio..

Rafaela: Sempre deixarmos com letra minúscula e as palavras separadas por traços. No caso, fica "portfolio".

O acento eu coloquei depois quando achei que poderia estar fazendo diferença, mas o erro continuou.! Pasta portfolio

solução!
por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

Oi, Julia

É que tem uma pasta (portfólio) dentro do repositório "portfolio".

O certo é os arquivos estar na raiz do repositório "portfolio" Insira aqui a descrição dessa imagem para ajudar na acessibilidade

por Julia Oriani de Jorge
| 26k xp | 10 posts

Ah, entendi! Consertei o problema do erro 404, mas agora a página tá sem o CSS e imagens.

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

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

por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

Oi, Julia

Ok! Agora o repositório "portifolio3" tem acesso direto ao "index.html e "about.html"

As pastas [assets] e [styles], deveriam ter ficado, pois o "index.html e "about.html" usavam essas pastas como referência para carregar o CSS e imagens

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

<img class="apresentacao__links__link__img" src="./assets/instagram.png">
<img class="apresentacao__links__link__img" src="./assets/github.png">
<img class="apresentacao__links__link__img" src="./assets/linkedin.png">

<img class="apresentacao__imagem" src="./assets/imagem1.jpg" alt="foto da alura">

Uma opção, é alterar o "index.html e "about.html" e remover essas pastas

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

<img class="apresentacao__links__link__img" src="./instagram.png">
<img class="apresentacao__links__link__img" src="./github.png">
<img class="apresentacao__links__link__img" src="./linkedin.png">

<img class="apresentacao__imagem" src="./imagem1.jpg" alt="foto da alura">

Dica: Para usar o VS Code direto no GitHub, basta apertar a tecla. (ponto) do seu teclado

  Caso este post tenha lhe ajudado, marque-o como solução . Bons Estudos!  🤓
por Luis Dias
| 3338.2k xp | 3666 posts
Developer PHP (⌐■_■)

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

por Julia Oriani de Jorge
| 26k xp | 10 posts

Funcionou! Muito obrigada, Luis!