🗺 Agência de Viagens

Projeto de estudo de uma página web fictícia de uma agência de viagens.

Requisitos mínimos do projeto

• A página deve ter no mínimo três seções, chamadas TripMe, MeetUs, Advice ou MinhaViagem, NosEncontre, Conselhos.
• Ter um banner dentro do <main>.
  • Banner composto por uma imagem de um lugar interessante para se visitar e um texto escrito em cima da imagem.
• Deve existir uma navegação mínima <nav>.
• Alterar a aparência dos links utilizando a pseudo-classe hover.
• Nas seções deve ter um link para voltar ao "Home" ou ao <nav>

Desenvolvimento

• Fiz a página responsiva, seguindo o design Mobile-first.
• Além de utilizar tags semânticas, apliquei os recursos necessários para melhorar a acessibilidade, ajustando o esquema de cores e aplicando os atributos title e de aria.
• Usei váriaveis CSS.
• Para a versão mobile fiz o menu dinâmico e no Javascript:
  • Adicionei ao button um evento addEventListener de click para abrir/fechar o menu, alterar os atributos das tags e a estilização dos elementos.
  • Adicionei um evento de click aos links do menu, para que ao clicar em um deles o menu seja fechado.
  • Estava tendo problemas com o menu ao redimencionar a página, mudar de menu hambúrguer para barra de navegação. Para resolver isso, adicinei um evento para que as alterações sejam aplicadas ao menu quando redimencionar a página. Fiz o evento utilizando matchMedia,addEventListenere change.
• Ao invés de adicionar um link em cada seção para voltar ao topo da página, adicionei um link no canto inferior da página, o qual só aparece depois de rolar a página pelo menos 120px para baixo e acima dessa posição o link é ocultado novamente. Para fazer isso, adicionei ao window um evento de scroll.
• Para organizar melhor o projeto, os códigos CSS e JS foram divididos em diferentes arquivos.
  • No CSS, importei os arquivos no style.css usando @import.
  • Para habilitar a importação/exportação dos arquivos JS, adicionei o atributo type="module" no HTML e importei os arquivos no script.js usando importação nomeada.

• Os ícones utilizados foram criados por heisenberg_jr - Flaticon.