Duvida no tamanho da caixa de textos | HTML e CSS: cabeçalho, footer e variáveis CSS

Eu gostaria de deixar os textos menores em comparação a imagem, pois eles estao muito grandes na pagina, em qual estrutura do codigo CSS devo mexer? Ela está assim: ! Insira aqui a descrição dessa imagem para ajudar na acessibilidade Eu gostaria que ficasse assim: Editei essa segunda imagem no photoshop para ficar do tamanho que eu gostaria, mas meu codigo mostra exatamente como na primeira imagem

@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; 
height: 100vh; 
background-color: #000000;
color: #F6F6F6; 
}

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

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

.apresentacao__conteudo__titulo { 
font-weight: 400;
font-size: 36px; 
font-family: 'Krona One', sans-serif; 
}

.apresentacao__conteudo__paragrafo {
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}

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

.apresentacao__conteudo__links__sociais { 
background-color: #22D4FD;
width: 280px;
text-align: center; 
border-radius: 16px; 
font-weight: 600; 
font-size: 24px;
padding: 21.5px 0; 
text-decoration: none; 
color: #000000;
font-family: 'Montserrat', sans-serif;
}

.destaque { 
font-weight: 400;
color: #22D4FD;
}

Olá Fernando, tudo certo? Espero que sim!

Bom, para mudar o tamanho dos elementos da página, você deverá analisar em qual parte do código html o elemento está. No caso do texto, ele se encontra dentro da classe apresentacao_conteudo_titulo, agora é só localizar em qual parte do código CSS essa classe é chamada. Perceba que existem algulmas tags nela, nós deveremos mudar o valor da tag font-size. Essa tag serve para definir o tamanho da fonte, atualmente está 36px, você pode tentar 30px ou o valor que achar mais adequado para o seu design.

.apresentacao__conteudo__titulo { 
  font-weight: 400;
  font-size: 30px; /* Valor reduzido */
  font-family: 'Krona One', sans-serif; 
}

Faça o mesmo para os parágrafos e outros elementos de texto que deseja ajustar, como na classe .apresentacao__conteudo__paragrafo e .apresentacao__conteudo__links__sociais.

Lembre-se de que, ao alterar o tamanho da fonte, pode ser necessário ajustar também as margens, o espaçamento entre elementos (gap) e o padding . Assim o tamanho a fonte estará proporcional comparado ao restante do layout, mantendo a harmonia dos elementos.

Depois de fazer essas alterações, recarregue sua página e veja se os textos estão do tamanho desejado. Se necessário, faça mais ajustes até que fique satisfeito com o resultado.

Abaixo deixo o código com algumas sugestões de alteração:

@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; 
height: 100vh; 
background-color: #000000;
color: #F6F6F6; 
}

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

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

.apresentacao__conteudo__titulo { 
font-weight: 400;
font-size: 25px; /*ALTERADO O TAMANHO*/
font-family: 'Krona One', sans-serif; 
}

.apresentacao__conteudo__paragrafo {
font-size: 16px; /*ALTERADO O TAMANHO*/
font-family: 'Montserrat', sans-serif;
}

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

.apresentacao__conteudo__links__sociais { 
background-color: #22D4FD;
width: 210px; /*ALTERADO O TAMANHO*/
text-align: center; 
border-radius: 16px; 
font-weight: 600; 
font-size: 16px; /*ALTERARADO O TAMANHO*/
padding: 10px 0; /*ALTERADO O TAMANHO*/
text-decoration: none; 
color: #000000;
font-family: 'Montserrat', sans-serif;
}

.destaque { 
font-weight: 400;
color: #22D4FD;
}

Espero ter ajudado!

Caso tenha mais alguma dúvida, fico à disposição.

Abraços e bons estudos!

Mergulhe em programação