Segue a baixo o meu codigo, não consigo de maniera nehuma colocar o rodape no local correto!
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,600;1,600&display=swap');
*{
margin: 0;
padding: 0;
}/* Zerando as margens e os paddings de todos os elementos */
body{
/*height: 100vh; Define a altura do corpo para 100% da altura da viewport */
box-sizing: border-box; /* Inclui bordas e padding na largura e altura totais dos elementos */
background-color: black;
color:white;
}
.cabecalho{
padding: 2% 0% 0% 15%;/* Padding interno do cabeçalho */
}
.cabecalho__menu{
display: flex; /* Usando Flexbox para layout */
gap: 80px; /* Espaçamento de 80px entre os links do menu */
}
.cabecalho__menu__link{
font-family: "Montserrat", sans-serif; /* Fonte personalizada para os links do menu */
font-size: 24px; /* Tamanho da fonte dos links do menu */
font-weight: 600; /* Peso da fonte dos links do menu */
color: #22D4FD; /* Cor azul para os links do menu */
text-decoration: none; /* Remove o sublinhado dos links do menu */
}
.apresentacao{
padding: 5% 15%; /* Padding interno da seção de apresentação */
display: flex; /* Usando Flexbox para layout */
align-items: center; /* Centraliza os itens verticalmente */
justify-content: space-between; /* Espaça os itens igualmente com espaço ao redor */
}
.apresentacao__conteudo{
width: 615px; /* Largura fixa para o conteúdo de apresentação */
display: flex; /* Usando Flexbox para o conteúdo de apresentação */
flex-direction: column; /* Alinha os itens em coluna */
gap: 40px; /* Espaçamento de 40px entre os itens */
}
.apresentacao__conteudo__titulo{
font-size: 36px; /* Tamanho da fonte do título */
font-family:"krona one", sans-serif; /* Fonte personalizada para o título */
}
.titulo-destaque{ /* Classe para destacar parte do título */
color:#22D4FD;
}
.apresentacao__conteudo__texto{
font-size: 24px; /* Tamanho da fonte do texto */
font-family:"Montserrat", sans-serif; /*fonte personalizada para o texto */
font-weight: 400; /* Peso da fonte do texto */
text-align: justify; /* Justifica o texto */
}
.apresentacao__links{
display: flex; /* Usando Flexbox para os links */
flex-direction: column; /* Alinha os itens em coluna */
align-items: center; /* Centraliza os itens horizontalmente */
justify-content: space-between; /* Espaça os links igualmente com espaço ao redor */
gap: 32px; /* Espaçamento de 32px entre os links */
}
.apresentacao__links__subtitulo{
font-family:"krono One", sans-serif; /* Fonte personalizada para o subtítulo */
font-weight: 400; /* Peso da fonte do subtítulo */
font-size: 24px; /* Tamanho da fonte do subtítulo */
}
.apresentacao__links__link{
/*background-color: #22D4FD; Cor de fundo dos links */
display: flex; /* Usando Flexbox para os links */
justify-content: center; /* Centraliza os itens horizontalmente */
gap: 16px; /* Espaçamento entre o ícone e o texto dos links */
border: 2px solid #22D4FD; /* Borda azul dos links */
width: 378px;
text-align: center; /* Centraliza o texto dentro dos links */
border-radius: 8px; /* Bordas arredondadas */
font-size: 24px; /* Tamanho da fonte dos links */
font-weight: 600; /* Peso da fonte dos links */
padding: 21.5px 0; /* Padding vertical para os links */
text-decoration: none; /* Remove o sublinhado dos links */
color: white; /* Cor do texto dos links */
font-family:"Montserrat", sans-serif; /* Fonte personalizada para os links */
}
.apresentacao__links__link:hover{
background-color: #272727;
}
.rodape{
padding: 24px; /* Padding interno do rodapé */
color: #000000;
background-color: #22D4FD;
text-align: center; /* Centraliza o texto do rodapé */
font-family: "Montserrat", sans-serif; /* Fonte personalizada para o rodapé */
font-size: 24px; /* Tamanho da fonte do rodapé */
font-weight: 400; /* Peso da fonte do rodapé */
}