Este site foi criado com o objetivo de testar a funcionalidade de pop-ups. Ele foi desenvolvido utilizando apenas HTML, CSS e JavaScript Vanilla, sem a importação de qualquer biblioteca externa.
Ele está hospedado em: https://tgentil.github.io/teste-pop-up/
O site possui a seguinte estrutura:
- Navbar: Uma barra de navegação com links para as seções do site, incluindo um link de teste para abrir o pop-up.
- Seções: As seções do site incluem "Home", "Sobre" e um rodapé com informações de contato.
- Pop-up: Ao clicar no link de teste na barra de navegação, um pop-up é exibido. O pop-up contém uma barra lateral com opções de menu e uma área de conteúdo que exibe diferentes seções conforme selecionado no menu lateral.
- HTML
- CSS
- JavaScript (Vanilla JS)
- HTML: O código HTML define a estrutura do site, incluindo a navegação, as seções e o pop-up.
- CSS: O arquivo CSS contém estilos personalizados para o site, incluindo o layout, cores, fontes e posicionamento dos elementos.
- JavaScript: O arquivo JavaScript adiciona interatividade ao site, controlando o comportamento do pop-up e a exibição das seções correspondentes.
- Clone este repositório em sua máquina local ou acesse https://tgentil.github.io/teste-pop-up/ para visualizar o site.
- Navegue pelas diferentes seções clicando nos links do menu de navegação.
- Para testar o pop-up, clique no link "Teste" e selecione uma opção no menu lateral.
Este site foi criado de forma simples e minimalista, utilizando apenas recursos básicos de HTML, CSS e JavaScript. O objetivo principal é aprender a utilizar a funcionalidade de pop-ups e fornecer um exemplo básico de implementação.
Sinta-se à vontade para modificar o código, adicionar estilos personalizados ou expandir as funcionalidades do site de acordo com suas necessidades.
Importante: Certifique-se de manter todos os arquivos (HTML, CSS, JavaScript) na mesma pasta e também verifique se os caminhos dos arquivos estão corretamente referenciados no código HTML.
- Thiago da Silveira Gentil