├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Controle de despesas 8 | 9 | 10 |

Controle de despesas

11 | 12 |
13 |

Saldo atual

14 | 15 |

R$ 0.00

16 | 17 |
18 |
19 |

Receitas

20 |

+ R$0.00

21 |
22 | 23 |
24 |

Despesas

25 |

- R$0.00

26 |
27 |
28 | 29 |

Transações

30 | 31 | 36 | 37 |

Adicionar transação

38 | 39 |
40 |
41 | 42 | 43 |
44 | 45 |
46 | 49 | 50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | :root { 4 | --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | background-color: #f7f7f7; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | min-height: 100vh; 18 | margin: 0; 19 | font-family: 'Lato', sans-serif; 20 | } 21 | 22 | .container { 23 | margin: 30px auto; 24 | width: 350px; 25 | } 26 | 27 | h1 { 28 | letter-spacing: 1px; 29 | margin: 0; 30 | color: #2e75cc; 31 | } 32 | 33 | h3 { 34 | border-bottom: 1px solid #bbb; 35 | padding-bottom: 10px; 36 | margin: 40px 0 10px; 37 | } 38 | 39 | h4 { 40 | margin: 0; 41 | text-transform: uppercase; 42 | } 43 | 44 | .inc-exp-container { 45 | background-color: #fff; 46 | box-shadow: var(--box-shadow); 47 | padding: 20px; 48 | display: flex; 49 | justify-content: space-between; 50 | margin: 20px 0; 51 | } 52 | 53 | .inc-exp-container > div { 54 | flex: 1; 55 | text-align: center; 56 | } 57 | 58 | .inc-exp-container > div:first-of-type { 59 | border-right: 1px solid #dedede; 60 | } 61 | 62 | .money { 63 | font-size: 20px; 64 | letter-spacing: 1px; 65 | margin: 5px 0; 66 | } 67 | 68 | .money.plus { 69 | color: #2ecc71; 70 | } 71 | 72 | .money.minus { 73 | color: #c0392b; 74 | } 75 | 76 | label { 77 | display: inline-block; 78 | margin: 10px 0; 79 | } 80 | 81 | input[type='text'], 82 | input[type='number'] { 83 | border: 1px solid #dedede; 84 | border-radius: 2px; 85 | display: block; 86 | font-size: 16px; 87 | padding: 10px; 88 | width: 100%; 89 | } 90 | 91 | .btn { 92 | cursor: pointer; 93 | background-color: #9c88ff; 94 | box-shadow: var(--box-shadow); 95 | color: #fff; 96 | border: 0; 97 | display: block; 98 | font-size: 16px; 99 | margin: 10px 0 30px; 100 | padding: 10px; 101 | width: 100%; 102 | } 103 | 104 | .btn:focus, 105 | .delete-btn:focus { 106 | outline: 0; 107 | } 108 | 109 | .transactions { 110 | list-style-type: none; 111 | padding: 0; 112 | margin-bottom: 40px; 113 | } 114 | 115 | .transactions li { 116 | background-color: #fff; 117 | box-shadow: var(--box-shadow); 118 | color: #333; 119 | display: flex; 120 | justify-content: space-between; 121 | position: relative; 122 | padding: 10px; 123 | margin: 10px 0; 124 | } 125 | 126 | .transactions li.plus { 127 | border-right: 5px solid #2ecc71; 128 | } 129 | 130 | .transactions li.minus { 131 | border-right: 5px solid #c0392b; 132 | } 133 | 134 | .delete-btn { 135 | cursor: pointer; 136 | background-color: #e74c3c; 137 | border: 0; 138 | color: #fff; 139 | font-size: 20px; 140 | line-height: 20px; 141 | padding: 2px 5px; 142 | position: absolute; 143 | top: 50%; 144 | left: 0; 145 | transform: translate(-100%, -50%); 146 | opacity: 0; 147 | transition: opacity 0.3s ease; 148 | } 149 | 150 | .transactions li:hover .delete-btn { 151 | opacity: 1; 152 | } 153 | --------------------------------------------------------------------------------