Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 3.32 KB

README.md

File metadata and controls

44 lines (34 loc) · 3.32 KB
Raw

MENU SPOTIFY

😎ESTE PROJETO EXEMPLIFICA UM MENU DE NAVEGAÇÃO INTERATIVO INSPIRADO NO DESIGN SIMPLES E FUNCIONAL DO SPOTIFY, USANDO HTML, CSS, E JAVASCRIPT.




DESCRIÇÃO:

Este projeto exemplifica um menu de navegação interativo inspirado no design simples e funcional do Spotify, usando HTML, CSS, e JavaScript. Ele oferece uma interface responsiva, que adapta a exibição do menu conforme o tamanho da tela, além de um visual atraente com efeitos de transição suave.

COMPONENTES PRINCIPAIS:

  1. Navegação:

    • O menu contém links importantes como Premium, Ajuda, Baixar, Inscrever-se, e Entrar.
    • O logotipo do Spotify é exibido no canto esquerdo, representando a identidade visual da interface.
    • No canto direito, há um ícone de menu que, ao ser clicado em dispositivos móveis, revela o menu completo.

  2. Responsividade:

    • Em telas maiores (desktop), os itens do menu são exibidos horizontalmente.
    • Em dispositivos menores (smartphones e tablets), o menu é acessado através de um ícone de menu "hambúrguer".
    • Ao clicar no ícone, o menu é exibido verticalmente, ocupando 60% da tela no lado direito, garantindo uma experiência amigável em dispositivos móveis.

  3. Estilo Visual:

    • O fundo usa uma combinação de gradiente linear em ângulo de 50 graus, com as cores predominantes em rosa e roxo (#f32854d0 e #7318f3), além de uma imagem de fundo (background.png) que é centralizada e ajustada para cobrir toda a tela.
    • O logotipo do Spotify (spotify.svg) é redimensionado para caber perfeitamente no espaço designado.
    • As cores principais do texto no menu são brancas, e os links ganham destaque com uma animação de mudança de cor para azul claro ao passar o mouse.

  4. Interatividade com JavaScript:

    • O JavaScript utilizado controla a funcionalidade do menu para dispositivos móveis. Quando o usuário clica no ícone de menu, o menu é exibido ou ocultado alternando a classe open.
    • O botão de menu também usa uma função de alternância (toggle) para abrir e fechar o menu suavemente, o que melhora a experiência de navegação.

  5. Em telas pequenas (menos de 770px):

    • O menu "hambúrguer" aparece no canto direito.
    • Ao ser clicado, o menu desliza da direita para a esquerda, ocupando parte da tela com um fundo semitransparente preto.
    • Os links se reorganizam verticalmente e aumentam de tamanho para facilitar a interação em dispositivos móveis.

NÃO SABE?

  • Entendemos que para manipular arquivos em HTML, CSS e outras linguagens relacionadas, é necessário possuir conhecimento nessas áreas. Para auxiliar nesse aprendizado, oferecemos cursos gratuitos disponíveis:

CREDITOS: