Projeto Pessoal site de dispositivos de audio!

Link da Demo do site : Audiophile

Tecnologias Utilizadas

Descrição

Projeto desenvolvido com o objetivo de treinar os meus conhecimentos em HTML, CSS, e JavaScript, e também para servir de portfólio, demonstrando minhas habilidades na criação de uma página.

Criação e Prototipo

Toda a parte de Design foi feita por mim, busca de referências, escolha de imagens, escolha de cores, tipografia, layout, etc. Segue um pequeno vídeo mostrando a prancheta do Figma.

HTML e CSS

O HTML foi feito todo na base semântica, sempre deixando bem limpo e organizado.

O CSS foi dividido por páginas e com alguns arquivos globais para melhor organização, foi criado o arquivo somente com as variáveis de cores e tamanhos de fonte, também arquivos com estilos usados em todo o site.

O Site está totalmente responsivo, para todos os tipos de dispositivos, tudo feito com um bom uso de flexbox e Grid Layout. Seguem abaixo vídeos do site em dispositivos móveis.

             

JavaScript

Foi usado JavaScript puro para criar 3 funcionalidades do site: o menu mobile (Hambúrguer), o menu acordeom na página de perguntas, e o carrossel de imagens na página de produtos.

Foi minha primeira vez fazendo a funcionalidade de carrossel, e foi bem interessante intender seu funcionamento.