Skip to content

Commit

Permalink
Adicionando página de imposto de renda.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafaelpuc15
rafaelpuc15 authored Jun 30, 2024
1 parent f28ec49 commit 2e58a01
Show file tree
Hide file tree
Showing 4 changed files with 407 additions and 0 deletions.
77 changes: 77 additions & 0 deletions codigo/Imposto de Renda/ImpostoDeRenda.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
.container {
margin-top: 25px;
}

.navbar {
border-bottom: 1px solid;
}

.nav-item {
padding-left: 30px;
}

#container-inputs {
margin-top: 30px;
width: 30%;
}

#container-inputs > input {
width: 100%;
margin-bottom: 15px;
}

.col {
margin: 0 15px;
text-align: justify;
}

.container-contact {
display: flex;
justify-content: space-around;
}

.title-section {
font-size: 30px;
}

.text-title {
font-size: 24px;
}

.accordion-body {
text-align: justify;
}

.button {
background-color: rgb(199, 199, 199);
border: 1px solid;
border-radius: 5px;
width: 90px;
height: 40px;
}

#container-footer {
margin-top: 25px;
padding: 15px;
border-top: 1px solid;
}

#container-footer > a {
text-decoration: none;
padding-left: 15px;
color: black;
}

@media screen and (max-width: 991px) {
#container-inputs {
margin-top: 30px;
width: 50%;
}
}

@media screen and (max-width: 575px) {
#container-inputs {
margin-top: 30px;
width: 70%;
}
}
263 changes: 263 additions & 0 deletions codigo/Imposto de Renda/ImpostoDeRenda.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!doctype html>
<html lang="pt-br">

<head>
<title>Cálculo do Imposto de Renda</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<link rel="stylesheet" href="./ImpostoDeRenda.css">
<link rel="shortcut icon" href="./logo-g7.png" type="image/x-icon">

<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
</head>

<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light bb-1">
<div class="container-fluid">
<img src="./logo-g7.png" alt="logo-g7" width="40px" height="auto">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Página Inicial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#container-perguntas">Perguntas Frequentes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container" id="container-inputs">
<h1 class="title-section">Cálculo do Imposto de Renda</h1>

<label for="rendaBruta">Renda Bruta</label>
<input type="text" id="rendaBruta" name="rendaBruta" required>
<label for="descontos">Descontos</label>
<input type="text" id="descontos" name="descontos" required>
<label for="dependentes">Dependentes</label>
<input type="text" id="dependentes" name="dependentes" required>
<label for="outrasDeducoes">Outras Deduções</label>
<input type="text" id="outrasDeducoes" name="outrasDeducoes" required>
<label for="impostoRetido">Imposto Redito da Fonte</label>
<input type="text" id="impostoRetido" name="impostoRetido" required>
<label for="outrosRendimentos">Outros Rendimentos</label>
<input type="text" id="outrosRendimentos" name="outrosRendimentos" required>

<button onclick="calcularImposto()" class="button">Calcular</button>

<div id="resultado"></div>
<div id="error"></div>

</div>

<div class="container">
<h1 class="title-section">Deduções</h1>
<div class="row">
<div class="col-sm-12 col-md-6">
<h1 class="text-title">Despesas Médicas</h1>
<p class="text-body">Cuide da sua saúde financeira enquanto investe na sua saúde pessoal. As despesas médicas
são dedutíveis, permitindo que você economize enquanto prioriza o bem-estar de você e de sua família.</p>
</div>
<div class="col-sm-12 col-md-6 ">
<h1 class="text-title">Despesas com Educação</h1>
<p class="text-body">Investir em educação é investir no futuro. Com as despesas com educação dedutíveis, você
pode garantir o crescimento intelectual de seus dependentes ou até mesmo o seu próprio, ao mesmo tempo em
que reduz sua carga tributária.</p>
</div>
<div class="col-sm-12 col-md-6 ">
<h1 class="text-title">Contribução Previdenciária</h1>
<p class="text-body"> Proteja seu futuro enquanto economiza no presente. As contribuições previdenciárias são
dedutíveis, proporcionando tranquilidade financeira para os anos que virão.</p>
</div>
<div class="col-sm-12 col-md-6 ">
<h1 class="text-title">Despesas com Educação</h1>
<p class="text-body">Educação é a chave para o progresso. Com as despesas com educação dedutíveis, você pode
investir em cursos, livros e demais recursos educacionais, impulsionando seu desenvolvimento pessoal e
profissional.</p>
</div>
<div class="col-sm-12 col-md-6 ">
<h1 class="text-title">Doações</h1>
<p class="text-body">Faça a diferença enquanto economiza em impostos. Suas doações beneficiam causas
importantes e, ao mesmo tempo, são dedutíveis, permitindo que você contribua para um mundo melhor enquanto
reduz sua carga tributária.</p>
</div>
</div>
</div>

<div class="container">
<h1 class="title-section">Tabela de Alíquotas</h1>
<table class="table">
<tbody>
<tr>
<th scope="row">Faixa de Renda</th>
<td></td>
<td></td>
<td>Alíquotas</td>
</tr>
<tr>
<th scope="row">Até R$10.000</th>
<td></td>
<td></td>
<td>10%</td>
</tr>
<tr>
<th scope="row">De R$10.001 a R$20.000</th>
<td></td>
<td></td>
<td>15%</td>
</tr>
<tr>
<th scope="row">De R$20.001 a R$30.000</th>
<td></td>
<td></td>
<td>20%</td>
</tr>
<tr>
<th scope="row">Acima de R$30.000</th>
<td></td>
<td></td>
<td>25%</td>
</tr>

</tbody>
</table>
</div>

<div class="container" id="container-perguntas">
<h1 class="title-section">Perguntas Frequentes</h1>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">

<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Como calcular Imposto de Renda
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
O cálculo do Imposto de Renda leva em consideração uma série de fatores, incluindo sua renda total,
despesas dedutíveis e eventuais ganhos de capital. Você pode calcular seu imposto de renda utilizando
programas de declaração disponíveis online ou consultando um contador especializado para garantir precisão
e conformidade com a legislação vigente.
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Quem precisa declarar o Imposto de Renda
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
A obrigatoriedade de declarar o Imposto de Renda varia de acordo com a faixa de renda e outros critérios
estabelecidos pela Receita Federal. Em geral, devem declarar aqueles que tiveram rendimentos tributáveis
acima de um determinado limite anual, assim como aqueles com determinados tipos de bens e investimentos.
Consulte o site da Receita Federal ou um profissional contábil para determinar se você se enquadra nessa
obrigatoriedade.
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Como preencher a declaração do Imposto de Renda
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
O preenchimento da declaração do Imposto de Renda pode parecer complicado, mas com as orientações
corretas, é possível fazê-lo de forma eficiente. Primeiramente, reúna todos os documentos necessários,
como informes de rendimentos, comprovantes de despesas e investimentos. Em seguida, utilize um programa de
declaração ou siga as orientações fornecidas pela Receita Federal para preencher cada seção com precisão.
Se tiver dúvidas, consulte um contador especializado.
</div>
</div>
</div>

<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
Como pagar o Imposto de Renda
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
O pagamento do Imposto de Renda pode ser feito de várias maneiras, incluindo débito automático, boleto
bancário ou transferência eletrônica. O valor a ser pago é calculado com base na declaração que você
submeteu, considerando eventuais impostos devidos e descontos. Certifique-se de pagar dentro do prazo
estabelecido pela Receita Federal para evitar multas e juros. Se precisar de ajuda para entender o
processo de pagamento, consulte um profissional contábil ou entre em contato com a Receita Federal para
obter orientação.
</div>
</div>
</div>

</div>
</div>

<!-- SEÇÃO DE CONTATO (NÃO USAR POR AGORA)
<div class="container" id="container-contact">
<h1>Informações de Contato</h1>
<div class="container-contact">
<div class="contact">
<h6>Telefone</h6>
<span>123-456-7890</span>
</div>
<div class="contact">
<h6>Email</h6>
<span>[email protected]</span>
</div>
<div class="contact">
<h6>Endereço</h6>
<span>123 Main St, City, State</span>
</div>
</div>
</div> -->

</main>
<footer>
<div class="container-fluid" id="container-footer">
<a href="#">Politica de Privacidade</a>
<a href="#">Termos de Uso</a>
</div>
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"></script>
</body>

<script src="./ImpostoDeRenda.js"></script>

</html>
Loading

0 comments on commit 2e58a01

Please sign in to comment.