Concluindo a estilização do Decodificador de Texto

Olá pessoas, hoje iremos concluir a estilização do nosso Decodificador de Texto, começando pelo output, no qual nosso usuário verá o texto encriptado e desencriptado. Para isso, colocamos uma margem de 2 rem no container, um espaçamento de 1 rem para que esse container possa se desgrudar da tela.

Depois disso, adicionamos uma cor de fundo branca e uma sombra, encerrando com um border-radius para deixar as pontas do container redondas. Indo para os textos presentes no container, colocamos ele no centro do container com o text-align, uma margin embaixo do texto de 1 rem e um peso de 400 pixels na fonte.

.container-general__output-area {
 margin: 2rem;
 padding: 1rem;
 background: #FFFFFF;
 border-radius: 1rem;
 box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08);
 color: #343A40;
}

.container-general__output-area__title-empty-area {
 text-align: center;
 margin-bottom: 1rem;
 font-weight: 400px;
}

Nossa tag de imagem está dentro de uma div para podermos trabalhar com ela no javascript. Primeiro devemos esconder a imagem com um display none para que, utilizando o javascript, trabalhemos com ela posteriormente.

.container-general__center-area {
 display: none;
}

Por fim, daremos uma estilização para o nosso rodapé. Começamos com um display flex para podermos centralizar a nossa div de informações no centro. Também colocamos um padding de 4 rem no rodapé.

.footer {
 display: flex;
 justify-content: center;
 padding: 4rem;
}

Após isso, temos a div com as informações no nosso rodapé, colocamos um display flex e um alinhamento dos elementos. Para concluir, colocamos uma margem direita e uma cor no nosso ícone e uma cor para o nosso link.

.footer__container-dev {
 display: flex;
 align-items: center;
}

.footer__container-dev__icon {
 margin-right: 0.5rem;
 color: #4C9971;
}

.footer__container-dev__link {
 color: #0A3871;
}

Agora concluímos a nossa estilização, antes de seguir para o javascript teremos uma introdução a responsividade em CSS e poderemos seguir para o mais legal, rsrs. Um abraço e até a proxima.

Blog: https://francileudo-frontend.blogspot.com/2022/10/concluindo-estilizacao-do-decodificador.html