Estilizando nosso header e construindo uma animação simples para o Título

Agora que temos o nosso reset CSS adicionado ao projeto vamos começar a estilizar a página. Primeiro iremos até a nossa tag body, do nosso reset, para adicionar a fonte de forma geral ao projeto, bem como uma cor de fundo para a página inteira.

body {
  line-height: 1;
  background: #F3F5FC;
font-family: 'Inter', sans-serif;
}

Inicialmente iremos utilizar a nossa classe para chamar a tag de header que está no HTML, nesse caso usaremos um ponto antes da escrita do nome da classe, ele vai dizer ao CSS que se trata de uma classe.

Dentro das chaves vamos colocar o alinhamento do texto para esquerda, deixar o display do nosso cabeçalho em flex, para que o ícone e o título fiquem um ao lado do outro, precisamos de um alinhamento horizontal para eles, por isso usaremos o aling-itens, para quando crescermos o nosso ícone e o título, eles ficarem alinhados. Por fim, colocaremos dois atributos para a nossa animação, a duração de 3 segundos e o nome dela, para construirmos daqui a pouco.

.c-header {
 text-align: left;
 display: flex;
 align-items: center;
 animation-duration: 3s;
 animation-name: slip;
}

Agora vamos estilizar o ícone e o título, no ícone adicionaremos um espaçamento na esquerda para desprender ele da tela, aumentaremos a fonte e colocaremos uma cor a ele. No título, vamos colocar a mesma cor e aumentar a fonte na metade da que colocamos no ícone.

.c-header__icon {
 margin-left: 1rem;
 font-size: 4rem;
 color:#4C9971;
}

.c-header__title-app {
 color:#4C9971;
 font-size: 2rem;
}

Agora, para concluir, vamos criar um keyframe com o nome da nossa animação de título, dentro dela separamos os atributos em duas partes, como nosso ícone vai estar no inicio (from) e onde ele vai durante os três segundos (to). 

Nesse caso colocamos uma margem esquerda inicial para menos 20% voltando para 0% no final. Com isso, nosso ícone e título ficaram escondidos e irão deslizar para a direita durante os 3 segundos. 

@keyframes slip {
 from {
margin-left: -20%;
 }

 to {
margin-left: 0%;
 }
}

Para concluir, você pode testar outras formas de animar o ícone e o título, um abraço e até a próxima.

<< https://francileudo-frontend.blogspot.com/2022/09/estilizando-nosso-header-e-construindo.html >>