https://github.com/ninja1375/nota-virtual-de-1-real

Nota Virtual de 1 Real feito com HTML, CSS e JavaScript
https://github.com/ninja1375/nota-virtual-de-1-real

css html money

Last synced: about 1 month ago
JSON representation

Nota Virtual de 1 Real feito com HTML, CSS e JavaScript

• Host: GitHub
• URL: https://github.com/ninja1375/nota-virtual-de-1-real
• Owner: Ninja1375
• Created: 2024-11-10T22:28:40.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-01-05T03:03:47.000Z (5 months ago)
• Last Synced: 2025-03-29T08:51:09.128Z (2 months ago)
• Topics: css, html, money
• Language: CSS
• Homepage: https://ninja1375.github.io/Nota-Virtual-de-1-Real/
• Size: 118 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
**Veja o projeto ao vivo:**

**[Nota Virtual de 1 Real](https://ninja1375.github.io/Nota-Virtual-de-1-Real/)**

Este projeto consiste em uma representação virtual de uma nota de um real utilizando HTML, CSS e JavaScript. O objetivo é criar uma cédula fictícia e estilizada, mantendo um aspecto visual que remeta a uma cédula de dinheiro real, mas com um design exclusivo e criado para fins educacionais. 

A nota possui detalhes de layout e texturas, como um rosto central e elementos textuais, como "Banco Central do Brasil", o valor nominal "1 REAL", e uma indicação clara de que é para uso educacional.

## Componentes do Projeto

**Estrutura HTML:** A estrutura HTML é simples e define os principais elementos da cédula, incluindo:

O contêiner principal (.nota), que representa a nota em si.

Elementos textuais, como "Banco Central do Brasil", o valor "1 REAL" à esquerda e à direita, e detalhes adicionais como a indicação de fins educacionais e um número de série fictício.

**Estilos em CSS:**

***Cores e Gradientes:*** A nota tem uma base com gradiente verde, semelhante à cor da cédula original de um real, usando gradientes lineares para dar profundidade e textura.

***Textos e Elementos Visuais:*** A frase "Banco Central do Brasil" está posicionada na parte superior esquerda para simular o layout de uma nota real.

Números grandes "1" são colocados tanto no lado esquerdo quanto no direito para indicar o valor da cédula.

***Rosto Central:*** Um elemento .rosto foi adicionado para imitar o busto clássico da cédula real, utilizando uma imagem de um rosto com detalhes elegantes e bem definidos. Esse rosto é implementado como uma imagem de fundo, centralizada e estilizada com sombras internas, o que cria profundidade e destaque, dando a sensação de um relevo típico de cédulas.

***Texturas e Padrões:*** Um padrão decorativo foi adicionado na lateral esquerda da nota para enriquecer o visual e aumentar a autenticidade. Esse padrão é criado usando um gradiente repetido que imita texturas de segurança encontradas em cédulas reais.

***Elementos Decorativos:*** Pequenas sombras e gradientes circulares simulam selos e outras marcações decorativas comuns em cédulas.

***Texto Adicional para Fins Educacionais:*** No rodapé da nota, foi adicionado o texto "Para fins educacionais" para deixar claro que este projeto é uma simulação e que não possui valor monetário. Esse aviso é essencial para reforçar o propósito educacional do projeto.

**Lógica JavaScript**

***Animações:*** Animação sutil para simular o brilho na superfície da nota.

***Zoom e Movimento:*** Funcionalidade de zoom ou de movimento ao passar o cursor, permitindo uma visualização detalhada dos elementos.

***Informações Interativas:*** Ao clicar em diferentes partes da nota, modais são exibidos com descrições sobre cada elemento da cédula, como o significado dos símbolos, números e etc.

## Propósito e Aplicação

**Estudantes e Entusiastas de Design Web:** Que desejam praticar criação de interfaces visuais complexas usando HTML, CSS e JavaScript.

**Ambientes Educacionais:** Onde o projeto pode ser utilizado para ensinar princípios de design, identidade visual e características de cédulas, bem como práticas de criação de interfaces responsivas e interativas.

**Portfólios de Programação e Design:** O projeto pode ser incluído como um exemplo de criatividade e domínio de estilização com CSS, mostrando a capacidade de criar componentes complexos e detalhados.

## Conclusão 

Esta representação de uma cédula de um real demonstra o poder das tecnologias de front-end, especialmente CSS e JavaScript para criar designs detalhados e estilizados que simulam elementos do mundo real. Com a combinação de gradientes, sombras, e texturas, o projeto se aproxima de uma cédula de dinheiro, mas mantém a simplicidade e clareza de ser um item virtual criado para educação.

## Tecnologias Utilizadas

  

## Apoie-me: