forked from mariamar95/jan-hackathon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
146 lines (135 loc) · 8.26 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./assets/imgs/favicon_io/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/imgs/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/imgs/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/imgs/favicon_io/favicon-16x16.png">
<link rel="manifest" href="./assets/imgs/favicon_io/site.webmanifest">
<title>Bucket Calculator - Home</title>
<!-- Materialize - Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Materialize icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Document CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="fa-solid fa-bars"></i></a>
<a href="index.html" class="title brand-logo">Bucket Calculator</a>
<ul class="right hide-on-med-and-down">
<li><a href="index.html" class="hvr-underline-from-left nav-link">Home</a></li>
<li><a href="calculator.html" class="hvr-underline-from-left nav-link">Calculator</a></li>
<li><a href="tips.html" class="hvr-underline-from-left nav-link">Tips</a></li>
<li><a href="about.html" class="hvr-underline-from-left nav-link">About</a></li>
<li><a href="team.html" class="hvr-underline-from-left nav-link">Team</a></li>
</ul>
</div>
</nav>
<!--mobile-side-nav-->
<ul id="slide-out" class="sidenav">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="calculator.html" class="nav-link">Calculator</a></li>
<li><a href="tips.html" class="nav-link">Tips</a></li>
<li><a href="about.html" class="nav-link">About</a></li>
<li><a href="team.html" class="nav-link">Team</a></li>
</ul>
</header>
<main>
<div class="container">
<div class="card-panel grey lighten-5 z-depth-1 shadow">
<div class="row">
<h2 class="col 13 s7 title">Learn More About the Five Bucket Money Management Method</h2>
<img src="assets/imgs/tips-piggybank.png" class="col s5 responsive-img" alt="image of piggybank">
</div>
</div>
</div>
<div class="divider"></div>
<div class="container">
<h3 class="col 15 s14 title center-align">Try the 5 Bucket Method:</h3>
<div class="row">
<div class="col 25 s12">
<p>No matter who you are, you can do better in regards to saving your money. Whether you have a good
job or you are struggling to get by, the Bucket
Method may help you take more control over your saving behaviour. The concept in a nutshell is
you evaluate how much you have, and how much you need to spend and separate these amounts into
set categories. The Categories are:</p>
<h4 class="title">Expenses Bucket <img src="assets/imgs/expenses.png" alt="icon expenses" width="32"
height="32"></h4>
<p>The first bucket is a necessity bucket. This is what you need to pay for your
living expenses day to day, your rent, food cost,
travel costs, electricity and gas and TV subscription. Each month put 60 percent of your total
earnings into this bucket.
</p>
<h4 class="title">Emergency Bucket <img src="assets/imgs/emmergency.png" alt="icon emergency"
width="32" height="32"></h4>
<p>The second bucket is an emergency bucket. This money will only be used in an emergency. You
cannot predict when you will have an
emergency but you can be prepared if one should happen. You will put 10 Percent of your monthly
income in this bucket.
</p>
<h4 class="title">Investment Bucket <img src="assets/imgs/investment.png" alt="icon investment"
width="32" height="32"></h4>
<p>The third bucket is an investment bucket. This money will be used to make more money, it can be
used for investments, shares or any scheme
where their is a potential to increase your invested amount. You will put 10 Percent of your
monthly income in this bucket.
</p>
<h4 class="title">Learning Bucket <img src="assets/imgs/learning.png" alt="icon learning" width="32"
height="32"></h4>
<p>The fourth bucket is a learning bucket. This money will be used to invest in yourself. You can
use it to develop skills or use
opportunities that will lead to a higher income down the road. You will put 10 Percent of your
monthly income in this bucket.
</p>
<h4 class="title">Fun Bucket <img src="assets/imgs/fun.png" alt="icon fun" width="32" height="32">
</h4>
<p>The fourth bucket is a fun bucket. This money will be used for fun activities, it can't all be
work related and this is your chance
to let loose. This is guilt free money, as you have already used the rest of your money wisely.
You will put 10 Percent of your monthly income in this bucket.
</p>
<br>
<a href="calculator.html" class="btn-blue btn-large">Go to the 5 Bucket Calculator</a>
</div>
</div>
<div class="divider"></div>
</div>
</main>
<footer class="page-footer indigo lighten-4">
<div class="container">
<div class="row">
<div class="col">
<h2 class="title">Disclaimer <i class="fa-solid fa-triangle-exclamation"></i></h2>
<p class="grey-text text-darken-4">This Project was created for <a class="black-text"
href="https://hackathon.codeinstitute.net/hackathon/26/" title="link to hackathon's page"
target="_blank">January's Hackathon</a>. It should not be taken as actual financial
advice. If you would like to learn more about financial advice such as how to find a financial
adviser, what to consider before you see one and how a financial adviser
can be helpful, click <a target="_blank" class="black-text"
href="https://www.citizensadvice.org.uk/debt-and-money/getting-financial-advice/"
title="this link takes you to citizens advice page where you can learn more about getting financial advice">here to read more</a>.
</p>
</div>
</div>
</div>
<div class="footer-copyright grey-text text-darken-3">
<div class="container">
© 2023 Copyright - Savvy Savers (January Hackathon Team10)
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Materialize - Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="assets/scripts/script.js"></script>
<!--FontAwesome-->
<script src="https://kit.fontawesome.com/1ded58b453.js" crossorigin="anonymous"></script>
</body>
</html>