Veja rodando clicando aqui
- Uma div contendo duas classes, planet e planetTerra
- Um h2 para o titulo
- Uma div contendo a classe container
- Dentro dela uma div contendo a classe loader e um span vazio
- e outra div contendo a classe terra
- Primeiro importei a fonte Poppins do Google Font que pode ser pego aqui
- Fiz o básico do CSS tirando padrões dos navegadores com o * (Utilizado para estilizar todos os elementos)
- Em body utilizei display flex para concentrar todos os elementos na vertical da página
- Na classe Container fiz o mesmo procedimento do body, apenas utilizei "width: min-content" para ocupar a largura minima do elemento e fazer assim um efeito legal de zoom
- Para fazer o loader utilizei animation e :before e :after
- Na classe terra utilizei o background url para buscar a imagem no diretório, determinar o tamanho da "Terra" e criar um efeito giratório com background-postion com keyframe
