CSS Art: June - 14 de Junho Dia Mundial do Doador de Sangue
Tags: frontendchallenge, devchallenge, css, frontend
Published: 2024-06-05 12:54:05

_This is a submission for [Frontend Challenge v24.04.17](https://dev.to/challenges/frontend-2024-05-29), CSS Art: June._

## Inspiração
Aproveitando o tema livre para escolher algo que represente o mês de junho, podendo ser um lugar, lembrança ou até mesmo uma data, eu resolvi aproveitar para colocar esse tema em pauta que é tão importante e ajuda a salva milhões de vida por ano, que é o de doar sangue, e nada melhor do que aproveitar para falar e exaltar a todos os que se propõem a doar um pouco do que tem, para salvar vidas em todo mundo, não podia deixar passar essa data, que inclusive é a mesma do meu aniversário, e com isso tenho muito orgulho do movimento e apoio a todos que doam ;) 

## Demo 

{% codepen https://codepen.io/hmontarroyos/pen/RwmVejM %}

##  Inspiração
Pensando no dia mundial do doador de sangue, eu pensei em enfatizar o órgão responsável por fazer todo o bombeamento de sangue no nosso corpo, o mais importante para termos vida ou um dos mais, a partir dae achei interessante que fosse feito usando inteiramente o css.
 Para isso eu utilizei das _pseudo-classes_ **before** e **after** para criar as formas e para a animação trabalhei muito com os **transforms** dentro dos meus **keyframes** para criar toda essa animação de parecer que o coração está pulsando, alternando no seu tamanho de tempo em tempos e deixando com um time de infinite, para ser constante. 

Feito essa parte que seria talvez a mais chamativa queria dar uma mensagem de conscientização, mas que não fosse apenas uma mensagem, mas algo funcional sem precisar ser uma aplicação grande seguindo o conceito se _SPA_, para isso adicionei um button e estilizei ele para que ficasse com a paleta que escolhi usando algumas fontes gratuitas no [google fonts](https://fonts.google.com/), com o link de redirecionar para a página do [Hemorio](https://www.hemorio.rj.gov.br/) que é uma instituição localizada aqui no estado do Rio de Janeiro no Brasil, que recolhe doação de sangue para o banco de sangue daqui. 

Para o background achei interessante colocar uma imagem de fundo em vetor, que representa bem a mensagem da doação ser algo mundial e que independente de cor, gênero, religião entre outros, somos todos iguais, e isso só mostra que devemos nos unir em prol de salvar inúmeras vidas.

Além disso, queria colocar uma mensagem final e para isso nada melhor que a frase: 

_"Doe sangue, salve vidas. Seja a esperança hoje!"_

E para combinar com essa frase animei usando o **animation**, para dar aquela impressão que tinha alguém digitando, além disso, achei interessante controlar essa animação com **JavaScript** para que pudesse aumentar ou diminuir o time da animação, para isso criei uma função que acessa o meu seletor ali na minha DOM e com o **setTimeout** define um time de animação. 

Achei também para que não ficar um vazio a aplicação ficaria bacana com um Header bem sutil, e para isso eu fiz usando novamente os **keyframes** para alterar as cores da nossa paleta imitando uma artéria. 

É isso galera espero que curtam, e lembre-se não só dia 14 de junho, mas todos os dias que quiserem os postos de cada cidade ficam sempre buscando novos doadores.
Grande abraço a todos e espero que curtam, todo o código segue livre no [CodePen](https://codepen.io/hmontarroyos/pen/RwmVejM?editors=1010).