forked from mariamar95/jan-hackathon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (112 loc) · 6.71 KB
/
index.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
<!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" aria-label="Go to Home Page">Home</a></li>
<li><a href="calculator.html" class="hvr-underline-from-left nav-link" aria-label="Go to Calculator Page">Calculator</a></li>
<li><a href="tips.html" class="hvr-underline-from-left nav-link" aria-label="Go to Tips Page">Tips</a></li>
<li><a href="about.html" class="hvr-underline-from-left nav-link" aria-label="Go to About Page">About</a></li>
<li><a href="team.html" class="hvr-underline-from-left nav-link" aria-label="Go to Team Page">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">
<h4 class="col 4 s6 title">Welcome to the Bucket Budget Application</h4>
<p class="grid-example col s7">Welcome to the Bucket Budget revolution - a proven way that you can
take
control of your Finances! Quickly and easily manage your finances by dividing income
proportionally into designated
accounts, or "buckets". Distribute income between up to five budget accounts (eg. Expenses,
Emergencies, Investment,
Learning and Fun accounts.
</p>
<img src="assets/imgs/home-hero-image.png" class="col s5" alt="image of piggybank with two people">
</div>
<a href="about.html" class="btn-blue btn-large">See More</a>
</div>
</div>
<div class="divider"></div>
<h4 class="col 4 s6 title center-align">The Bucket Method</h4>
<h5 class="col 4 s6 title center-align">Monthly Income: €1000</h5>
<img src="assets/imgs/buckets.png" class="col s5 center-align bucketimg" width="600" alt="image of buckets representing the bucket method">
<div class="container">
<div class="card-panel white lighten-5 z-depth-1 shadow">
<p class="col 4 s4">The Steps could not be easier, use our finance calculator to input your incoming
finance and
your outgoings and distribute your income into the designated buckets. With this information plan
for your future
and save for those rainy days now. Visualise your financial status in our handy personal chart and
learn tips from
our tips page on how to improve your saving. And that's not all you can find more resources for
money management in
our Team page, so explore our site and learn more about money management, you know it makes sense!
</p>
<a href="calculator.html" class="btn-blue btn-large center-align">Calculate</a>
</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>
<!--FontAwsesome-->
<script src="https://kit.fontawesome.com/1ded58b453.js" crossorigin="anonymous"></script>
</body>
</html>