https://github.com/tgentil/teste-pop-up

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.
https://github.com/tgentil/teste-pop-up

css html html-css-javascript javascript-vanilla js pop-up popup

Last synced: 7 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/tgentil/teste-pop-up
• Owner: Tgentil
• Created: 2023-05-18T13:22:23.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-05-26T12:05:42.000Z (over 2 years ago)
• Last Synced: 2025-03-20T08:43:32.330Z (7 months ago)
• Topics: css, html, html-css-javascript, javascript-vanilla, js, pop-up, popup
• Language: HTML
• Homepage: https://tgentil.github.io/teste-pop-up/
• Size: 51.8 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Site de Teste de Pop-ups

 [![GitHub](https://img.shields.io/badge/Visit-My%20Profile-0891B2?style=flat-square&logo=github)](https://github.com/Tgentil)

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/](https://tgentil.github.io/teste-pop-up/)

## Estrutura do Site

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.

## Tecnologias utilizadas

- HTML

- CSS

- JavaScript (Vanilla JS)

## Arquivos do Site

- **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.

## Como usar

1. Clone este repositório em sua máquina local ou acesse [https://tgentil.github.io/teste-pop-up/](https://tgentil.github.io/teste-pop-up/) para visualizar o site.

2. Navegue pelas diferentes seções clicando nos links do menu de navegação.

3. Para testar o pop-up, clique no link "Teste" e selecione uma opção no menu lateral.

## Observações

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.

---

## Autor

* Thiago da Silveira Gentil