💻 Web Site Pedido de Namoro 💻

Clique Aqui para ir ao Site

📝 Descrição

Um projeto web interativo e criativo para fazer um pedido de namoro de forma única e especial. O projeto conta com duas telas principais: uma para o pedido inicial e outra para uma apresentação romântica após o "SIM".

🛠️ Tecnologias Utilizadas

• HTML5
• CSS3
• JavaScript
• Fontes do Google Fonts:
  • Shantell Sans
  • Noto Serif
  • Playfair Display
  • Noto Sans

🎨 Características

Primeira Tela

• Interface limpa e atraente com fundo personalizado
• Título animado "Quer Namorar Comigo..?"
• Dois botões interativos:
  • Botão "SIM" - Leva para a segunda tela
  • Botão "NAO" - Se move aleatoriamente quando o mouse passa por cima (impossível clicar)
• GIF decorativo
• Rodapé com créditos

Segunda Tela

• Banner com imagem de capa personalizada
• Seções animadas com efeitos de scroll
• Espaços para fotos do casal
• Textos personalizáveis para declaração
• Player de música com 3 opções de músicas românticas:
  • Hungria - Atmosfera
  • Caio Luccas - Close Friends ft. L7NNON & Teto
  • Grupo Revelação - Essência Da Paixão

💅 Estilização

• Design responsivo para diferentes tamanhos de tela
• Gradientes e animações nos botões
• Scrollbar personalizada com cores temáticas
• Efeitos de hover e transições suaves
• Fontes estilizadas para diferentes seções

📱 Responsividade

• Layout adaptativo para dispositivos móveis
• Ajustes específicos para iOS
• Organização flexível dos elementos

🚀 Como Usar

1. Clone o repositório
2. Personalize as imagens na pasta src/img/
3. Modifique os textos no arquivo HTML da segunda tela
4. Personalize as músicas na pasta Segunda tela/src/Audio/
5. Ajuste o título com o nome da pessoa especial

📁 Estrutura do Projeto

Projeto - Love v1/

├── index.html                 # Página inicial com o pedido de namoro
├── README.md                  # Documentação do projeto
├── src/
│   ├── css/
│   │   └── style.css         # Estilos da página inicial
│   ├── img/
│   │   ├── fundo.jpg         # Imagem de fundo da página inicial
│   │   ├── gif.gif           # GIF decorativo
│   │   └── icon.png          # Ícone do site
│   └── js/
│       └── script.js         # JavaScript da página inicial
└── Segunda tela/             # Pasta com a segunda página após o "SIM"
    ├── index.html            # Página de apresentação romântica
    └── src/
        ├── Audio/            # Pasta para músicas
        │   ├── Hungria - Atmosfera.mp3
        │   ├── Caio-Luccas-Close-Friends-ft.-L7NNON_-Teto.mp3
        │   └── Grupo Revelação - Essência Da Paixão.mp3
        ├── css/
        │   ├── style.css     # Estilos da segunda página
        │   └── animate-on-scroll.css  # Animações de scroll
        ├── img/
        │   ├── banner.jpg    # Imagem de capa
        │   ├── icon.png      # Ícone da segunda página
        │   └── Icon-Troca-Por-Foto.png  # Placeholder para fotos do casal
        └── js/
            ├── script.js     # JavaScript da segunda página
            └── animate-on-scroll.js  # Script de animações

Para começar a usar o projeto:

1. Crie todas as pastas e arquivos conforme a estrutura acima
2. Substitua as imagens em src/img/ e Segunda tela/src/img/ por suas próprias imagens
3. Personalize as músicas na pasta Segunda tela/src/Audio/
4. Modifique os textos nos arquivos HTML para personalizar sua mensagem
5. Ajuste os estilos CSS conforme necessário

Lembre-se de manter a mesma estrutura de pastas para garantir que todos os links e referências funcionem corretamente.

🔗 Links

• GitHub
• LinkedIn
• Instagram

---

Desenvolvido com ❤️ por Bruno Henrique

---

💝 Feito com amor para momentos especiais 💝