💡 Sobre o projeto:

Já tenho uma relação bem íntima com idiomas desde 2018 quando decidi aprender inglês, basicamente os meus projetos sempre têm alguma relação com este assunto.

Inspirado por um post criado pelo meu amigo Gabriel Noah no seu projeto a Saga Linguística, decidi criar uma landing page básica, mas que tivesse os seguintes requisitos aprendidos no módulo 3 do curso de HTML5 e CSS3 do professor Guanabara.

• Imagens de fundo
• Efeito Parallax
• Tabelas responsivas

🛠 Tecnologias utilizadas:

• HTML 5
• CSS 3

🎨 Design

Visual

O conceito visual visa trazer uma sensação imersiva ao usuário, recriando o espaço e o nosso planeta para mostrar a diversidade linguística e cultural.

Uma das minhas decisões de design foi ocupar a tela inteira, proporcionando um momento de contemplação.

Cores

Utilizei uma paleta com 4 cores, sendo 2 cores básicas (preto e branco) para textos e 2 cores para destaques (azul-marinho e azul-claro) em títulos, links, botões e na tabela.

Cores utilizadas:

• #000000 (preto)
• #ffffff (branco)
• #2b3f5c (azul-marinho)
• #659bc3 (azul-claro)

Fonte

Como fonte destaque utilizei a Pacifico , o objetivo foi trazer a ideia de algo escrito a mão para reforçar a relação existente entre a escrita e o processo de aprender um idioma.

A segunda fonte utilizada foi a Inter para os textos, ela foi escolhida pela sua variedade de pesos e boa legibilidade.

📝 Coisas novas que aprendi:

Animação do planeta

A ideia inicial era apenas colocar uma imagem de um globo e criar uma animação de rotação.

Na minha cabeça era simples, passaram-se algumas horas de pesquisa, muitos testes e não consegui um resultado interessante.

Encontrei no YouTube um tutorial de animação aplicado exatamente na Terra, o resultado foi o suficiente para apaziguar minha teimosa mente.

Para assistir o tutorial clique aqui.

Alinhamento vertical

Este tutorial aqui do W3Schools me ajudou muito na questão de centralizar os textos e o botão na segunda imagem de fundo próxima do rodapé.

Camada de cor sobre a imagem de fundo

Um problema que me deparei foi que o texto na segunda imagem de fundo ficava com uma legibilidade horrível, para contornar essa situação fui atrás de uma solução para criar uma camada de cor semi transparente sobre ela.

Confira o tutorial aqui.

💻 Resultado:

Acesse a landing page pronta neste link aqui!

render.mp4

💬 Sugestões:

Fico aberto a sugestões de melhoria e ideias, caso você tenha alguma basta me enviar uma mensagem no LinkedIn.