Solucionado
Oi Vinicius! Tudo bem?
Eu entendo que você está passando por um problema com o estilo do projeto, onde infelizmente o footer do seu projeto ficou em uma posição não esperada, mas infelizmente com a quantidade de informações/códigos que você disponibilizou eu não consegui identificar onde pode estar o problema. Outro detalhe como eles estão em imagem dificulta ainda mais os testes.
Portanto, seria possível você fornecer mais informações, bem como um pouco mais do seu código?
Nesse caso eu gostaria que você me informasse o seguinte para que eu possa ajudar da melhor forma:
E de uma forma geral seria isso.
Para partilha de códigos eu recomendo o GitHub, caso você precise de ajuda para usá-lo, assista essa aula aqui, onde a instrutora Mônica Mazzochi Hillman ensina como exportar um projeto para o GitHub, sem precisar usar Git. Contudo, é importante lembrar que exportar um projeto para o GitHub sem utilizar o Git pode ser muito limitante, visto que em alguns casos projetos com muitos arquivos e com muitos megabytes de informação não são exportados completamente utilizando o método passado no link que disponibilizei, então pode ser que isso não funcione para o seu projeto tá.
E se você não tem uma conta no GitHub, aprenda a criar uma aqui.
No geral era isso tá.
<!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">
<link rel="stylesheet" href="style.css">
<title>Portfólio</title>
</head>
<body>
<header></header>
<main class="apresentaçao">
<section class="apresentaçao__conteudo">
<h1 class="apresentaçao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> com um Front-end de qualidade!</strong></h1>
<p class="apresentaçao__conteudo__paragrafo">Olá! Sou Vinicius Maciel, estudante de ADS (Analise e Desenvolvimento de Sistema) pela <strong> <a href="https://www.fiap.com.br/online/graduacao/tecnologo/analise-e-desenvolvimento-de-sistemas/">FIAP </strong></a> . Desenvolvedor Front-end com especialidade em <strong class="linguagem-1"> HTML, CSS </strong> e estudando a linguagem <strong class="linguagem-1"> JavaScript</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentaçao__links">
<h2 class="apresentaçao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentaçao__links__link" href="https://instagram.com/viniciusma__">
<img src="./assets/instagram.png" alt="Icone Instagram">
Instagram
</a>
<a class="apresentaçao__links__link" href="https://github.com/ViniciusMaciel011">
<img src="./assets/github.png" alt="Icone Github">
GitHub
</a>
<a class="apresentaçao__links__link" href="https://www.linkedin.com/in/vinicius-maciel-028719236/">
<img src="./assets/linkedin.png" alt="Icone linkedin">
Linkedin
</a>
</div>
</section>
<img src="./assets/Imagem (1).png" alt="Minha foto">
</main>
<footer class="rodape">
<p>Desenvolvido por Vinicius Maciel.</p>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
box-sizing: border-box;
background: #000000;
color:#F6F6F6;
}
.titulo-destaque {
color: #22D4FD;
}
.linguagem-1 {
color: #22D4FD;
}
.apresentaçao {
margin: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentaçao__conteudo {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
height: 482px;
}
.apresentaçao__conteudo__titulo {
font-size: 36px;
font-family: 'Krona One', sans-serif;
}
.apresentaçao__conteudo__paragrafo {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
}
.apresentaçao__links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentaçao__links__subtitulo {
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}
.apresentaçao__links__link {
/*background-color: #22D4FD ;*/
display: flex;
justify-content: center;
gap: 16px;
border: double;
width: 280px;
text-align: center;
border-radius: 16px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
}
.apresentaçao__links__link:hover {
padding: 5%;
background-color: #272727;
}
/*.rodape {
display: flex;
justify-content: center;
background-color: #22D4FD;
color: #000000;
background-color: #22D4FD;
padding: 24px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}*/
Oi Vinicius.
Já arrumei o problema, na verdade o que aconteceu foi que a seção que estava acima do <footer> estava com uma height de 482px, e por isso o rodapé ficou naquele lugar. Para resolver isso é só vim na classe apresentaçao__conteudo e arrumar o valor de 482px para auto, assim:
.apresentaçao__conteudo {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
height: auto; /* <-- Aqui */
}
Outro detalhe, se abrir a inspeção de elementos em telas maiores, o rodapé fica no meio da página, isso ocorre porque não tem conteúdo suficiente para empurrar ele para baixo em telas maiores. Para resolver isso eu vou deixar um código que literalmente fixa o rodapé no fundo da tela, mas ele pode "estragar" a visualização do site em telas menores, mas isso você vai ver nos próximos cursos.
Você pode usar ele ou não, a escolha é sua:
.rodape {
display: flex;
justify-content: center;
background-color: #22D4FD;
color: #000000;
background-color: #22D4FD;
padding: 24px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
/* position: fixed;
left: 0;
right: 0;
bottom: 0; */
/* Esse código acima é o que eu falei, eu comentei, mas se quiser ver ele funcionando só descomentar e salvar e recarregar a página no browser para ver o que ele faz, use se desejar, senão pode só apagar ou deixar assim mesmo. */
}
Em suma, era isso. Se precisar me chame. Ah e o repositório do link do Github está privado, tá só para avisar, eu usei o código que você enviou para resolver o problema tá. ;)
Abraços e bons estudos.
Obrigado! Ajudou muito