PicPro

Projeto desenvolvido para o evento PicPro ministrado pelos instrutores da Kenzie Academy Brasil em parceria com o PicPay.

Ferramentas

1. Instalação do VS Code no Windows
2. Como utilizar o codepen e o VSCode

Checkpoints aulas

1. Aula 1: Introdução ao HTML e estruturação do projeto

2. Aula 2: Introdução ao CSS e estilização do projeto

3. Aula 3: Introdução ao JS

O projeto

Estrutura de arquivos

• README.md
• index.html
• /assets
  • /img
  • /css
    • style.css
  • /js
    • script.js

Fonte

• 'Poppins', sans-serif;

Cores

• Verde principal: #228664;
• Verde principal escuro: #1F6F54;
• Branco com transparência(borda cabeçalho): rgba(255, 255, 255, 0.4);
• Branco: #fff;
• Preto: #000;
• Preto com transparência(sombra e borda dos boxes): rgba(0, 0, 0, 0.15);
• Cinza claro(fundo de input): #F4F4F4
• Cinza claro 2(borda de input): #D2D2D2;

Sombra

• box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);

Layout

• PicPro Inicial;
• PicPro QR Code;
• PicPro Pix;
• PicPro Boleto;
• PicPro Cobrar;

Figma

• Layout - Figma;

Referências

• W3Schools referência HTML;
• W3Schools referência CSS;
• Google Fonts;
• Coolors;
• Paletton;
• W3Schools propriedades CSS no DOM;
• MDN lista de eventos;