Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá Matheus.
Seu projeto está ficando muito bom.
Agora é colocar a mão na massa e continuar seu desenvolvimento.
Converter sua pagina em uma pagina dinamica e muito mais.
Obrigado por compartilhar.
Bons estudos.
Para deixar o footer no final da pagina você pode colocar no body a propriedade display: flex, flex-direction: column e min-height: 100dvh. No footer a propriedade margin-top: auto. Dessa forma o footer sempre fica no final da pagina.
body{
min-height: 100dvh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
Olá, coloquei no meu projeto esse codigo e não mudou nada na pagina, pode me ajudar com uma solução?
Pode enviar seu código HTML e CSS para que eu possa analisar.
codigo em html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MeuPortfolio</title>
<link rel="stylesheet" href="./styles/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 mim</a>
<a class="cabecalho_menu_link" href="curriculo.html">Meu curriculo</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__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="apresentacao__conteudo__paragrafo">Olá! Sou Matheus Vinicius desenvolvedor de Front-end,esse e meu primeiro projeto junto com alura. Aprendendo criar um site do zero</p>
<div class="apresentacao__links">
<h2 class="apresentacao_links_subtitulo">Acesse minhas redes</h2>
<a class="apresentacao__links__navegacao" href="https://github.com/matheusvscampos">
<img src="./assets/github.png">
Github
</a>
<a class="apresentacao__links__navegacao" href="https://linkedin.com/in/matheussilveira">
<img src="./assets/linkedin.png">
Linkedin
</a>
<a class="apresentacao__links__navegacao" href="/https://instragram.com/vinicamppos">
<img src="./assets/instagram.png">
Instragram
</a>
</div>
</section>
<img class="apresentacao__imagem" src="./assets/imagem.png" alt="foto programando">
</main>
<footer class="rodape">
<p>Desenvolvido por Matheus junto com Alura</p>
</footer>
</body>
</html>
codigo em css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
:root {
--cor-primaria: #000000;
--cor-secundaria: #F6F6F6;
--cor-terciaria: #22D4FD;
--cor-hover: #272727;
--font-primaria:"Krona One", sans-serif;
--font-secundaria:"Montserrat", sans-serif;
}
/* reset css */
* {
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-terciaria);
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(--font-primaria);
}
.titulo-destaque {
color: var(--cor-terciaria);
}
.apresentacao__conteudo__paragrafo {
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(--font-primaria);
font-weight: 400;
font-size: 1.5rem;
}
.apresentacao__links__navegacao {
display: flex;
justify-content: center;
gap: 16px;
border:2px dashed var(--cor-terciaria);
width: 50%;
text-align: center;
border-radius: 8px;
font-weight: 600;
font-size: 1.5rem;
padding: 21.5px 0;
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--font-secundaria);
}
.apresentacao__links__link:hover {
background-color: var(--cor-hover);
}
.apresentacao__imagem {
width: 50%;
}
.rodape {
padding: 24px;
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
text-align: center;
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 400;
}
.apresentacao__conteudo__texto {
text-decoration: none;
color: var(--cor-terciaria);
}
@media (max-width:1200px) {
.cabecalho {
padding: 10%;
}
.cabecalho_menu {
justify-content: center;
}
.apresentacao {
flex-direction: column-reverse;
}
}
As mudanças surtiram efeito, porém a mudança não é sentida dependendo dos pixels lógicos da tela. Para telas menores não vai fazer diferença, já para telas maiores sim. Você consegue ver a diferença se diminuir o zoom da tela. Exemplo:
Em telas grandes: 
Em telas pequenas: 