O intuito deste projeto foi construir um menu de navegação animado somente com HTML + CSS puro onde eu pudesse praticar e reforçar os conhecimentos em importação de ícones utilizando o Font Awesome e boas práticas para uma arquitetura CSS robusta e escalável indepedente de ser um pequeno projeto.
- A fim de otimizar tempo escrevendo códigos recorrentes optei por usar a pseudo-classe: root para pré-determinar cores utilizadas no background e no :hover
- Para organizar os elementos e deixá-los mais fluidos utilizei as propriedades flex-box. Fazendo uso dessas propriedades foi possível centralizar a div que compunha o menu assim como os itens distribuídos além de atribuir espaço entre os mesmos.
- Utilizando CSS animation (transform, transition) e a pseudo-classe :hover foi possível criar o efeito sobre os ícones ao passar o mouse.
- Por fim, fiz uso de Media queries para especificar possíveis condições em dispositivos específicos nas dimensões estipuladas (visando principalmente smartphones) para que o layout não seja afetado.
The goal of this project was to build an animated navigation menu only with pure HTML + CSS where I could practice and reinforce the knowledge of importing icons using Font Awesome and good practices for a robust and scalable CSS architecture, regardless of being a small project.
- In order to optimize time writing recurrent codes I chose to use the pseudo-class: root to pre-determine colors used in the background and :hover
- To organize the elements and make them more fluid I used the flex-box properties. Using these properties, it was possible to centralize the div that made up the menu, as well as the distributed items, in addition to assigning space between them.
- Using CSS animation (transform, transition) and the pseudo-class :hover it was possible to create the effect on the icons when hovering the mouse.
- Finally, I made use of Media queries to specify possible conditions on specific devices in the stipulated dimensions (mainly targeting smartphones) so that the layout is not affected.