├── src ├── main.js └── css │ ├── index.css │ ├── base.css │ ├── form.css │ └── credit-card.css ├── .github └── project.png ├── public ├── cc-default.svg ├── cc-chip.svg ├── cc-mastercard.svg ├── cc-bg-visa.svg ├── cc-icon.svg ├── cc-visa.svg ├── cc-bg.svg └── logo.svg ├── .vscode ├── extensions.json └── settings.json ├── package.json ├── .gitignore ├── README.md └── index.html /src/main.js: -------------------------------------------------------------------------------- 1 | import "./css/index.css" 2 | -------------------------------------------------------------------------------- /.github/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rocketseat-education/explorer-lab-01/HEAD/.github/project.png -------------------------------------------------------------------------------- /public/cc-default.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "PKief.material-icon-theme", 4 | "rocketseat.theme-omni", 5 | "esbenp.prettier-vscode", 6 | ] 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "projeto-base", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "vite": "^3.1.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | !.vscode/settings.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /public/cc-chip.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /public/cc-mastercard.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/css/index.css: -------------------------------------------------------------------------------- 1 | @import "base.css"; 2 | @import "credit-card.css"; 3 | @import "form.css"; 4 | 5 | @media (max-width: 420px) { 6 | :root { 7 | font-size: 50%; 8 | } 9 | 10 | body { 11 | background: #202024; 12 | } 13 | 14 | #app { 15 | background: none; 16 | border: none; 17 | } 18 | 19 | .cc-bg svg { 20 | width: 100%; 21 | height: auto; 22 | } 23 | } 24 | 25 | @media (min-width: 780px) { 26 | #app { 27 | grid-template-areas: 28 | "A B" 29 | "C B"; 30 | 31 | width: fit-content; 32 | max-width: fit-content; 33 | padding-inline: 4.8rem; 34 | 35 | grid-template-columns: 0.8fr 1fr; 36 | } 37 | 38 | #app header { 39 | grid-area: A; 40 | } 41 | 42 | #app section.cc { 43 | grid-area: B; 44 | align-self: center; 45 | } 46 | 47 | #app form { 48 | grid-area: C; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 62.5%; 9 | 10 | font-family: Inter, sans-serif; 11 | color: rgba(255, 255, 255, 0.87); 12 | 13 | font-synthesis: none; 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | -webkit-text-size-adjust: 100%; 18 | } 19 | 20 | body { 21 | font-size: 1.6rem; 22 | background: #121214; 23 | 24 | display: flex; 25 | place-items: center; 26 | 27 | min-height: 100vh; 28 | } 29 | 30 | .flex { 31 | display: flex; 32 | } 33 | 34 | #app { 35 | display: grid; 36 | justify-content: center; 37 | gap: 3.2rem; 38 | 39 | width: 90%; 40 | max-width: 42rem; 41 | margin: 0 auto; 42 | 43 | padding: 2.8rem 6rem 4rem; 44 | background: #202024; 45 | border: 0.1rem solid #323238; 46 | border-radius: 0.6rem; 47 | } 48 | 49 | #app header { 50 | display: flex; 51 | align-items: center; 52 | } 53 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // editor 3 | "editor.wordWrap": "on", 4 | "editor.fontSize": 18, 5 | "editor.lineHeight": 30, 6 | "editor.tabSize": 2, 7 | "editor.bracketPairColorization.enabled": true, 8 | "editor.guides.bracketPairs": true, 9 | "editor.minimap.enabled": false, 10 | "editor.formatOnSave": true, 11 | "editor.formatOnPaste": true, 12 | 13 | // explorer 14 | "explorer.compactFolders": false, 15 | 16 | // workbench 17 | "workbench.editor.enablePreview": false, 18 | "workbench.iconTheme": "material-icon-theme", 19 | "workbench.colorTheme": "Omni", 20 | 21 | // prettier 22 | "editor.defaultFormatter": "esbenp.prettier-vscode", 23 | "prettier.enable": true, 24 | "prettier.singleQuote": false, 25 | "prettier.tabWidth": 2, 26 | "prettier.semi": false, 27 | 28 | // terminal 29 | "terminal.integrated.fontSize": 16, 30 | "terminal.integrated.profiles.windows": { 31 | "Git Bash": { 32 | "source": "Git Bash" 33 | } 34 | }, 35 | "terminal.integrated.defaultProfile.windows": "Git Bash", 36 | "window.zoomLevel": 0 37 | } 38 | -------------------------------------------------------------------------------- /src/css/form.css: -------------------------------------------------------------------------------- 1 | /* form */ 2 | form { 3 | max-width: 36rem; 4 | display: grid; 5 | gap: 1.6rem; 6 | } 7 | 8 | form .input-wrapper { 9 | display: grid; 10 | gap: 0.6rem; 11 | } 12 | 13 | form label { 14 | font-weight: 600; 15 | font-size: 1.2rem; 16 | line-height: 1.5rem; 17 | letter-spacing: 0.01px; 18 | text-transform: uppercase; 19 | color: #e1e1e6; 20 | } 21 | 22 | form input { 23 | background: #121214; 24 | border: 1px solid #323238; 25 | border-radius: 6px; 26 | height: 41px; 27 | padding-inline: 1.2rem; 28 | 29 | width: 100%; 30 | 31 | color: white; 32 | text-transform: uppercase; 33 | } 34 | 35 | form .flex { 36 | gap: 1.4rem; 37 | } 38 | 39 | form .flex .input-wrapper { 40 | flex: 1; 41 | } 42 | 43 | form button { 44 | margin-top: 1.6rem; 45 | 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | padding: 1.6rem 0; 50 | 51 | background: #42d3ff; 52 | border-radius: 0.6rem; 53 | 54 | cursor: pointer; 55 | 56 | border: none; 57 | 58 | font-weight: 700; 59 | font-size: 1.4rem; 60 | line-height: 1.7rem; 61 | color: #121212; 62 | 63 | transition: filter 0.3s; 64 | } 65 | 66 | form button:hover { 67 | filter: brightness(1.1); 68 | } 69 | -------------------------------------------------------------------------------- /src/css/credit-card.css: -------------------------------------------------------------------------------- 1 | /* CC */ 2 | .cc { 3 | background: no-repeat center/cover; 4 | background-image: url("/cc-bg.svg"); 5 | width: 36rem; 6 | height: 23rem; 7 | padding: 2rem; 8 | 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: space-between; 12 | } 13 | 14 | .cc-logo { 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; 18 | } 19 | 20 | .cc-info { 21 | display: grid; 22 | gap: 1.4rem; 23 | } 24 | 25 | .cc-number { 26 | font-size: 2.4rem; 27 | font-weight: bold; 28 | line-height: 2.9rem; 29 | letter-spacing: 0.04em; 30 | 31 | color: #e8e8e8; 32 | text-shadow: 0 0.12rem 0.32rem rgb(23 23 23 / 40%); 33 | } 34 | 35 | .cc-holder, 36 | .cc-expiration, 37 | .cc-security { 38 | display: grid; 39 | gap: 0.4rem; 40 | } 41 | 42 | .cc .label { 43 | font-size: 1rem; 44 | line-height: 1.2rem; 45 | } 46 | 47 | .cc .value { 48 | font-size: 1.4rem; 49 | font-weight: bold; 50 | color: #ffffff; 51 | text-shadow: 0 0.25rem 0.25rem rgb(22 22 22 / 16%); 52 | text-transform: uppercase; 53 | } 54 | 55 | .cc-extra { 56 | display: flex; 57 | justify-content: space-between; 58 | align-items: center; 59 | } 60 | 61 | .cc, 62 | .cc-logo, 63 | .cc-number { 64 | position: relative; 65 | } 66 | 67 | .cc-bg { 68 | position: absolute; 69 | inset: 0; 70 | z-index: 0; 71 | } 72 | -------------------------------------------------------------------------------- /public/cc-bg-visa.svg: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Explorer Lab #01

2 | 3 |

4 | Evento exclusivo e gratuito, promovido pela Rocketseat para ensino de tecnologias WEB. 5 |

6 | 7 |

8 | Tecnologias | 9 | Projeto | 10 | Layout | 11 | Licença 12 |

13 | 14 |

15 | License 16 |

17 | 18 |
19 | 20 |

21 | rocketpay 22 |

23 | 24 | ## 🚀 Tecnologias 25 | 26 | Esse projeto foi desenvolvido com as seguintes tecnologias: 27 | 28 | - HTML e CSS 29 | - JavaScript e JSON 30 | - [Node e NPM](https://nodejs.org/) 31 | - [Vite](https://vitejs.dev/) 32 | - [iMask](https://imask.js.org) 33 | 34 | ## 💻 Projeto 35 | 36 | O Rocketpay é um componente que simula o formulário de preenchimento de cartão de crédito, onde é possível adicionar máscara aos inputs e atualizar elementos HTML via DOM. 37 | 38 | ## 🔖 Layout 39 | 40 | Você pode visualizar o layout do projeto através [DESSE LINK](https://www.figma.com/file/gpqavL469k0pPUGOmAQEM9/Explorer-Lab-%2301/duplicate). É necessário ter conta no [Figma](https://figma.com) para acessá-lo. 41 | 42 | ## :memo: Licença 43 | 44 | Esse projeto está sob a licença MIT. 45 | 46 | --- 47 | 48 | Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/rocketseat) 49 | 50 | 51 | 52 |
53 |
54 | 55 |

56 | 57 | banner 58 | 59 |

60 | 61 | 62 | -------------------------------------------------------------------------------- /public/cc-icon.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /public/cc-visa.svg: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /public/cc-bg.svg: -------------------------------------------------------------------------------- 1 | 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Rocketpay 11 | 12 | 16 | 17 | 18 |

19 |

20 |

21 |

22 | 23 |

24 |

25 | 102 |

103 | 104 |

105 |

106 |

111 |

112 | 113 |

114 |

1234 5678 9012 3456

115 | 116 |

117 |

Nome do titular

118 |

FULANO DA SILVA

119 |

120 | 121 |

122 |

123 |

Expiração

124 |

02/32

125 |

126 |

127 |

CVC

128 |

123

129 |

130 |

131 |

132 |

133 |

134 | 135 | 160 |

161 | 162 | 163 | 164 | 165 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 6 | --------------------------------------------------------------------------------