Próxima parada: Estilizar a seção de input do usuário

Começando pela class container-general__data-entry colocando um alinhamento de texto para o centro, isso vai centralizar tudo que estiver dentro da seção. Após isso, vamos para a classe container-general__input-area colocamos uma largura de 330px e uma altura de 228px no text-area. adicionamos uma margem de 5rem no topo, uma cor mais azul, aumentamos a fonte do texto para 2rem. O fundo deixamos como none e por fim, adicionamos um peso de 200px a nossa fonte e retiramos a borda do text-area.

.container-general__data-entry{
 text-align: center;
}

.container-general__input-area {
 width: 330px;
 height: 328px;
 margin-top: 5rem;
 color: #0A3871;
 font-size: 2rem;
 background: none;
 font-weight: 200px;
 border: none;
}

Agora, vamos estilizar a área informativa que fica embaixo do input com um display do tipo flex, para deixar o ícone e a frase uma ao lado da outra, após isso alinhamos ambos e fechamos com uma margem esquerda de 1rem. No ícone, aumentamos o tamanho em 1.4rem e uma cor #4C9971. Por fim, deixamos o tamanho da fonte da frase em 0.8rem e colocamos a cor #343A40.

.container-general__information-area {
 display: flex;
 align-items: center;
 margin-left: 1rem;
}

.container-general__information-area__icon {
 font-size: 1.4rem;
 color: #4C9971;
}

.container-general__information-area__text {
 font-size: 0.8rem;
 color: #343A40;
}

No próximo artigo estilizaremos os botões e adicionaremos uma animação para mudar a cor ao passar o mouse por cima, bem como a estilização da saída de dados. Repare que estamos perto de concluir a nossa estilização para podermos ir para o nosso JavaScript, um abraço e até a próxima.

https://francileudo-frontend.blogspot.com/2022/09/proxima-parada-estilizar-secao-de-input.html