Veja o projeto no GitHub

? Estrutura do Projeto

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

? Como usar este projeto

1. Baixe ou clone o repositório:

   git clone https://github.com/yourusername/simple_interface.git

1. Navegue até o diretório do projeto:

   cd payment_app_interface

1. Abra o arquivo index.html em seu navegador para visualizar a interface do aplicativo de pagamento.

? Principais conceitos e recursos

1. Estrutura HTML:

   • Navegação na barra lateral: usando nav e ul para uma barra lateral simples.
   • Seções de conteúdo principal:
     • Exibição de equilíbrio com um cartão estilizado.
     • Formulário de pagamento com campos de entrada e um botão de envio.
     • Lista de transações usando elementos ul e li.

2. Estilo CSS:

   • Flexbox Layout: usado para barra lateral e alinhamento do conteúdo principal.
   • Esquemas de cores: cores distintas para barra lateral, botões e tipos de transação (receita x despesa).
   • Efeitos de foco: feedback interativo para botões e links da barra lateral.
   • Design responsivo: barra lateral de largura fixa com conteúdo principal flexível.

3. Habilidades intermediárias praticadas:

   • Layouts complexos com barra lateral e múltiplas seções.
   • Estilo do formulário para entrada do usuário.
   • Design de UI consistente com seções distintas e elementos interativos.