-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (110 loc) · 5.97 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
<!DOCTYPE html>
<html>
<head>
<title>BrokeWise</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css">
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
</head>
<body>
<!--<header>
<nav class="navbar">
<div>
<img src="./images/piggy-bank.svg" alt="BrokeWise">
<a href="./main.html">BrokeWise</a>
</div>
<ul class="nav-links">
<li class="active"><a href="#"></a></li>
<li><a href="#about">About</a></li>
<li><a href="#features">Key Features</a></li>
<li><a href="#benefits">Why to use?</a></li>
</ul>
<div class="buttons">
<button class=" btn btn-red"><a href="./index.html">TRY NOW!</a></button>
</div>
</nav>
</header>-->
<div class="navbar">
<div class="navbar-title">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-piggy-bank" viewBox="0 0 16 16">
<path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z"/>
<path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z"/>
</svg>
<a class="active" href="#">Brokewise</a>
</div>
<div class="sections">
<a href="#about">About</a>
<a href="#features">Features</a>
<a href="#benefits">Benefits</a>
</div>
<button><a class="nav-btn" href="calculator.html">CALCULATORS</a></button>
</div>
<div class="animation">
<img src="./images/budget1.png" alt="Buget_Tracker" height="400px" width="400px">
<h1 class="tagline"> With BrokeWise
<br>
<span class="typing-animation"></span></h1>
</div>
<section id="about" class="about">
<div class="container">
<h2>About BrokeWise</h2>
<img src="./images/4a.png" alt="Buget_Tracker" height="200px" width="200px" >
<p>BrokeWise is a fun and interactive tool that helps you manage your finances like a superhero. With powerful features and an intuitive interface, you'll be in control of your budget in no time.</p>
<img src="./images/4b.png" alt="Buget_Tracker" height="200px" width="200px" >
</div>
</section>
<section id="features" class="features">
<div class="container">
<h1>Key Features</h1>
<div class="feature">
<img src="./images/2a.png" alt="Budget Icon">
<h3>Budget Planning</h3>
<p>Create and track your budget with ease. Set financial goals and stay on track.</p>
</div>
<div class="feature">
<img src="./images/3a.png" alt="Expense Icon">
<h3>Expense Tracking</h3>
<p>Effortlessly track your expenses and analyze your spending patterns.</p>
</div>
<div class="feature">
<img src="./images/1a.png" alt="Report Icon">
<h3>Detailed Reports</h3>
<p>Generate detailed reports to gain insights into your financial health.</p>
</div>
</div>
</section>
<section id="benefits" class="about">
<div class="container">
<h2>Benefits of Personal Finance Tracker</h2>
<img src="./images/credit.png" alt="Buget_Tracker" height="200px" width="200px" >
<p>Personal finance trackers simplify money management, budgeting, and tracking expenses. They offer real-time visibility into your financial health, help you set and achieve financial goals, provide insights for smarter spending, enable better savings, and aid in debt reduction. It promotes financial awareness, organization, and control.</p>
</div>
<div class="container1">
<div class="box">
<img src="./images/5d.png" alt="Finance Icon">
<p class="box-text">Simplifies money management</p>
</div>
<div class="box">
<img src="./images/5c.png" alt="Expense Icon">
<p class="box-text">Tracks expenses and income in real-time</p>
</div>
<div class="box">
<img src="./images/5a.png" alt="Budget Icon">
<p class="box-text">Helps create and stick to a budget</p>
</div>
<div class="box">
<img src="./images/5b.png" alt="Goals Icon">
<p class="box-text">Sets and tracks financial goals</p>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<p>© 2023 BrokeWise. All rights reserved.</p>
</div>
</footer>
</body>
</html>