Skip to content

Uma aplicação web romântica e criativa desenvolvida especialmente para ocasiões especiais como o Dia dos Namorados. Feita com HTML, CSS e JavaScript puro, essa página interativa é perfeita para quem quer surpreender a pessoa amada com um pedido de namoro único e divertido. 💖

Notifications You must be signed in to change notification settings

IBrunooDev/WebSite-Namoro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

💻 Web Site Pedido de Namoro 💻

Clique Aqui para ir ao Site

image

📝 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


Desenvolvido com ❤️ por Bruno Henrique


💝 Feito com amor para momentos especiais 💝

About

Uma aplicação web romântica e criativa desenvolvida especialmente para ocasiões especiais como o Dia dos Namorados. Feita com HTML, CSS e JavaScript puro, essa página interativa é perfeita para quem quer surpreender a pessoa amada com um pedido de namoro único e divertido. 💖

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published