Bug no projeto!

Olá Diego!

Entendo que você está enfrentando um problema com o seu projeto de HTML e CSS. Bugs podem ser frustrantes, mas não se preocupe, estamos aqui para te ajudar a encontrar uma solução!

Mas é necessário fornecer mais detalhes sobre o seu código para melhor norteamos você, poderia enviar o seu HTML, CSS e uma foto do erro que está enfrentando, desta forma vamos poder lhe ajudar de forma mais assertiva sem você precisar, recriar o seu projeto.

Fico no aguardo e a disposição!

Sucesso ✨

Um grande abraço e até mais!

boa tarde, segue aqui... o footer está ao lado da foto, e ele estava correto até eu adicionar a segunda pagina... agora as duas paginas estão com erro no footer eu ja tentei inclusive copiar o style 5 inteiro e recolocar sobre este e continua com o mesmo erro obrigado

*{
     margin: 0;
     padding:0;
 }

 body {        
     box-sizing:border-box;
     background-color:#f6f6f6;
     color: #000000;
 }
}
.titulo-destaque{
 color: #22D4FD;
}
 .cabecalho {
    
 } 

 .cabecalho__menu {
     display: flex;
     gap: 80px;
 }
 .cabecalho__menu__link {
     text-decoration: none;
     font-family: 'montserrat',sans-serif;
     font-size: 24px;
     font-weight: 600;
     color:#22D4FD
     
 }
 .apresentacao {
     padding:5% 15%;
     display:flex;
     align-items :center;
     justify-content : space-between;
     }
  
  
 .apresentacao__conteudo { 
     width: 615px;
     display: flex;
     flex-direction: column;
     gap: 40px;
 }

 .titulo-destaque {
     color: #22D4FD;
 }
 .apresentacao__conteudo__titulo {
     padding: 30px 0px;
     font-size:37px;
     font-family: 'Krona One', sans-serif;
 }

 .apresentacao__conteudo__texto {
     font-size: 24px;
     font-family: 'Montserrat',sans-serif;
 }
  
   
 .apresentacao__links {
     padding: 40px 5px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     gap: 32px;

 }
 .apresentacao__subtitulo {
 font-family: 'Krona One';
 align-items: center;
 font-style: sans serif;
 font-weight: 400;
 font-size: 24px;
 line-height: 40px
 }

 .apresentacao__links__link {
     /* background-color: #22D4FD; */
     display: flex;
     justify-content: center;
     gap: 16px;
     Width: 378px;
     text-align: center;
     border-radius: 8px;
     border:2px solid #22D4FD;
     font-size: 24px;
     font-weight: 600px;
     Padding: 16px;
     text-decoration: none;
     Color:#000000;
     font-family:'Montserrat',sans-serif ;
     ; } 
     
    a:hover {
     background-color: #daf3fd;
    }
   .apresentacao__links__link {
     
       
     background-color: #f6f6f6;
   }

     .icone {
         width: 32px;
         height: 32px;
         flex-shrink: 0;
     }

     .dimencoes__foto {
             width: 400.705px;
             height: 532px;
             flex-shrink: 0;
             border-radius: 16px;
             width : 466px;
             height: 526px;
             flex-shrink: 0;
             border-radius: 16px;
             border: 3px solid #22D4FD;
           
     }
         
.rodapé {
 color:#f6f6f6;
 background-color: #000000;
 font-family: Montserrat;
 font-size: 24px;
 font-weight: 400;
 line-height: 36px;
 letter-spacing: 0em;
 text-align: center;
 
}

Olá Diego!

Seu código css está funcional, obtive o seguinte resultado com o mesmo, reparando algum errinho ou outro como os das chaves, e uma class vazia, segue a foto (Meu monitor é um pouco menor, e imagem não vai mostrar o cabeçalho)

Sendo assim o erro no seu código se encontra no seu html, verifique se todas as tags foram fechadas corretamente, o footer se encontra junto da sua imagem.

Verifique se o seu html se encontra desta forma:

<img class="dimencoes__foto" src="imagem.png" alt="Foto da Joana Santos programando">
    </main>
    <footer class="rodapé">
        <p>Desenvolvido por Alura.</p>
    </footer>
</body>

Caso o erro persista peço que me envie o seu html completo, desta foram consigo lhe ajudar de forma totalmente assertiva e continuamos com a sua apredizagem.

Espero ter ajudado e em caso de persistência do erro fico no aguardo.

Sucesso ✨

Um grande abraço e até mais!

boa noite! o erro persiste... eu não consigo tornar funcional... vou recomeçar do zero as aulas e fazer tudo outra vez... não sei se o erro estas no endereço dos arquivos, no VSC ou em algum codigo... mas ja tentei numeras coisas e nada acontece... vou deletar tudo... frustração é a palavra:-(

Olá Diego!

Fique tranquilo, seu projeto já está muito completo, é mais fácil reparar esse erro do que começar tudo novamente, além de que estamos aqui para lhe ajudar, neste caso peço que compartilhe o seu projeto completinho para que eu consiga lhe ajudar, para compartilhar seu código completo, você pode utilizar o github, ou o Google drive. Com o continuar dos cursos de HTML e CSS que você está estudando a Rafa e o Gui vão lhe ajudar a deixar seu site disponível para toda a internet, por hora você pode compartilhar seu projeto comigo pelo google drive.

Para isso basta você abrir o seu google drive no seguinte link:

• Google drive

Faça o login, normalmente caso necessário, depois você vai clicar em novo:

Logo depois você deve compartilhar a pasta onde está o seu projeto, contendo todos os seus arquivos:

Depois dessa tela, vai abrir o seu explorador de arquivo, selecione a sua pasta que vai subir para o seu drive, por fim você deve compartilhar o link dele comigo, deste modo:

1. Localize a sua pasta

2. Gere o link de compartilhar clicando nos Três pontinhos na pasta, depois em compartilhar e compartilhar novamente.

3. Por fim vamos gerar um link, se atente em deixar o arquivo público para que eu possa baixar ele:

Ao clicar em copiar link, este link ficara disponível na sua área de transferência, por fim basta dá um CTRL + V ou colar, com o botão direito do mause aqui no tópico e mandar para mim, deste modo vou conseguir lhe ajudar de forma mais assertiva, e assim você vai colocar seu portifólio que ta ficando muito bacana no ar.

Abraços e até mais! Fico no aguardo.

olá Victor boa tarde! eu acredito ter resolvido aqui, faltou apenas o alinhamento dos botões do cabeçalho, vou voltar as aulas pra assistir novamente e tentar arrumar, todavia vou disponibilizar aqui pra você minha pasta no github para que vc tenha acesso tbm a tudo o que estou fazendo... segue https://github.com/Decastrodiego1/pagina-HTML-CSS/tree/1a6404cf6c88b041ef5ce95665c46c75817405e7?search=1 muito obrigado por agora, estava me sentindo frustrado e graças a ajuda de vocês recuperei a força e vontade pra dar seguimento! um abraço

Oi Diego!

Que bacana, que você já conseguiu colocar no github muito bem!

Seu projeto ta ficando muito legal, percebi que você conseguiu reparar o footer, fico muito feliz Diego, faz parte do processo esses momentos de dificuldades e estamos aqui para lhe ajudar, mas você foi muito bem e conseguiu resolver, boa!

Para Alinhar o seu cabeçalho, basta colocar a seguinte class, lá no seu arquivo css:

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

Seu código completo, formatado, fica assim:

@import url("https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap");
* {
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  background-color: #f6f6f6;
  color: #000000;
  align-items: center;
  flex-direction: column;
}

.titulo-destaque {
  color: #22d4fd;
}

.cabecalho{
    padding: 2% 0% 0% 15%;
}
.cabecalho__menu {
  display: flex;
  gap: 80px;
}
.cabecalho__menu__link {
  text-decoration: none;
  font-family: "montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #22d4fd;
}
.apresentacao {
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.titulo-destaque {
  color: #22d4fd;
}
.apresentacao__conteudo__titulo {
  padding: 30px 0px;
  font-size: 37px;
  font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto {
  font-size: 24px;
  font-family: "Montserrat", sans-serif;
}

.apresentacao__links {
  padding: 40px 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.apresentacao__subtitulo {
  font-family: "Krona One";
  align-items: center;
  font-style: sans serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 40px;
}

.apresentacao__links__link {
  /* background-color: #22D4FD; */
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 378px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid #22d4fd;
  font-size: 24px;
  font-weight: 600px;
  padding: 16px;
  text-decoration: none;
  color: #000000;
  font-family: "Montserrat", sans-serif;
}

a:hover {
  background-color: #daf3fd;
}
.apresentacao__links__link {
  background-color: #f6f6f6;
}

.icone {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.dimencoes__foto {
  width: 400.705px;
  height: 532px;
  flex-shrink: 0;
  border-radius: 16px;
  width: 466px;
  height: 526px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 3px solid #22d4fd;
}

.rodapé {
  color: #f6f6f6;
  background-color: #000000;
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: center;
}

Diego, se precisar de ajuda, conte conosco. Boa sorte no seu projeto, você está no caminho certo.

Sucesso ✨

Um grande abraço e até mais!