# Descrição
O projeto de referência apresentou uma página simples com o menu fixo ao topo e elementos comuns em páginas de produtos, como boxes descrevendo as principais caraterísticas e outros descrevendo preços.
Busquei criar um visual limpo e moderno, o menu fixo ao topo está presente, porém só completamente exibido quando o usuário executa a rolagem da página para baixo. Inicialmente apenas dois botões são exibidos, alinhados às extremidades superiores-horizontais, carregam a função de abrir/fechar os menus laterais. Essa ocultação da espaço a imagem de fundo (que poderia ser uma slide) e ao texto centralizado.
Escolhi desenvolver o projeto utilizando álbuns e singles da cantora e compositora norte-americana Billie Eilish. A escolha se deve ao estilo da cantora, que abusa no uso de cores chamativas em suas roupas e video clipes, combinando as tonalidades de background e foreground. No projeto, repliquei o estilo com o uso de cores como o amarelo, laranja e o violeta, com os componentes combinando suas cores de fundo com a seção onde estão inseridos, contrastando com o preto e branco utilizado para textos e sombras. Quando focados os elementos realizam animações e são “iluminados”, tanto para melhorar o contraste entre texto/fundo quanto para dar foco ao conteúdo atual.
# Capturas de tela
# Estória de usuário
- Minha página deve conter um elemento header com o id=”header”
- Posso ver uma imagem com o id=”header-img”. Uma logo poderia ser aplicada neste componente
- Dentro do elemento header posso ver uma elemento nav com o id=”nav-bar”
- Devem haver pelo menos três links dentro do nav, cada um com a class=”nav-link”
- A página deve rolar a seção representada pelo link quando este for clicado
- Deve haver um vídeo incorporado com o id=”video”
- Minha Landing Page deve possuir um formulário com o id=”form”
- Dentro do formulário, deve haver um input com o id=”email” onde seja possível inserir apenas e-mails
- O input de e-mail deve possuir um placeholder que permita ao usuário identificar facilmente o campo
- O input de email deve usar a validação do HTML5 para confirmar se o texto inserido é um endereço de e-mail válido
- Dentro do formulário, deve haver um botão de enviar com o id=“submit”
- enviado
- O menu de navegação deve estar sempre posicionado no topo do viewport
- Minha página deve possuir pelo menos uma media query
- Menus que podem ser abertos com clique em botões ou usando a navegação com Tab
- Seções do tamanho em altura/largura do viewport
- Animações de entrada durante o rolamento da página
- Ícones utilizando o Material Design Icons
# Aprendizados principais
- Propriedades de animações utilizando @keyframes
- Captura de elementos pai usando event.target.closest
- Seletores de estado :active e :focus-within
- Usar datasets para criar ativadores para outros elementos com JavaScript
- Hack para arredondamento de bordas sem que o objeto fique em formato de elipse (distorcido) usando border-radius: 99999999px
# Dificuldades
- A utilização do mélanding-page eval implica em riscos de segurança, pois o mesmo permite que qualquer expressão JavaScript seja executada no Front-End. Para tornar o seu uso mais seguro, a sua chamada foi encapsulada em um teste condicional utilizando expressões regulares, para testar se a expressão possui apenas dígitos numéricos, ponto, parentes e operadores aritméticos.