forked from ayush-that/FinVeda
-
Notifications
You must be signed in to change notification settings - Fork 0
/
faq.html
252 lines (236 loc) · 10.2 KB
/
faq.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<style>
</style>
</head>
<body>
<div class="circle-container">
</div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="./assets/images/favicon2.png" type="image/png" />
<link rel="stylesheet" href="./assets/css/animate.css" />
<link rel="stylesheet" href="./assets/css/magnific-popup.css" />
<link rel="stylesheet" href="./assets/css/slick.css" />
<link rel="stylesheet" href="./assets/css/LineIcons.css" />
<link rel="stylesheet" href="./assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="./assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/css/default.css" />
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="./assets/css/quiz.css" />
<link rel="stylesheet" href="./assets/css/popup.css" />
<link rel="stylesheet" href="./assets/css/cookiepopup.css">
<link rel="stylesheet" href="./assets/css/preloader.css" />
<link rel="stylesheet" href="./assets/css/faq.css" />
<link rel="stylesheet" href="./assets/css/index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
emailjs.init({
publicKey: "o6kveYmOSDrs0l1Mg",
});
})();
</script>
<style>
body {
margin: 0;
color: black;
padding: 0;
overflow-y: auto; /* Enables vertical scrollbar */
height: 100vh; /* Set the height of the body */
font-family: 'Poppins', sans-serif; /* Use the specified font */
}
.circle-container {
position: relative;
/* Add other styles if needed */
}
.faq-answer {
display: none; /* Initially hide the answers */
margin-top: 10px; /* Space above the answer */
}
.faq-question {
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
text-align: left;
padding: 10px;
width: 100%;
}
.faq-icon {
margin-left: 10px;
}
.home-link {
display: inline-block;
transition: background-color 0.3s, transform 0.3s;
background-color: #4267B2;
color: #fff;
padding: 10px;
border-radius: 10px;
text-decoration: none; /* Ensure no underline */
position: fixed; /* Fixed position */
top: 20px; /* Adjust as needed */
left: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it's on top of other elements */
}
.home-link:hover {
background-color: #fff;
transform: scale(1.1);
border: 1px solid #2F4F7F;
}
.home-link:hover .fa-home {
color: #2F4F7F;
}
</style>
</head>
<body>
<a href="index.html" class="home-link">
<i class="fas fa-home" style="font-size: 30px;"></i>
</a>
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<!-- More circles... -->
</div>
<div id="progressBar"></div>
<!-- FAQ section -->
<header class="header-area">
<div class="navbar-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<section class="faq-section wow fadeIn" data-wow-duration="1s" data-wow-delay="0.3s">
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<button class="faq-question">
What is Finveda? <span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Finveda is a dynamic financial literacy app with Arthsathi AI chatbot, finance blogs, market trends, SIP calculator, and a quiz for effortless finance learning.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
What problem does Finveda solve? <span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>According to a survey by the OECD, only 38% of adults in India are financially literate. Finveda aims to solve this problem by providing a platform for financial literacy education.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
What services does Finveda offer? <span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>We offer expert written blogs on investment tips and strategies, and current economic trends, all crafted to keep you well-informed. With our SIP and PPF tools you'll discover the power of compounding and make informed decisions regarding your savings.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
How can I start using Finveda? <span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Simply sign up, and you'll have access to all our features, including personalized finance education and tools.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
Is Finveda free to use? <span class="faq-icon">+</span>
</button>
<div class="faq-answer">
<p>Yes, Finveda is free to use!</p>
</div>
</div>
</section>
<script src="/assets/js/faq.js"></script>
</div>
</div>
</div>
</div>
</header>
<script>
const faqButtons = document.querySelectorAll('.faq-question');
faqButtons.forEach(button => {
button.addEventListener('click', () => {
const answer = button.nextElementSibling;
const icon = button.querySelector('.faq-icon');
// Toggle the answer visibility
if (answer.style.display === 'block') {
answer.style.display = 'none';
icon.textContent = '+'; // Change icon back to +
} else {
answer.style.display = 'block';
icon.textContent = '-'; // Change icon to -
}
});
});
document.addEventListener('DOMContentLoaded', function () {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const question = item.querySelector('.faq-question');
const icon = question.querySelector('.faq-icon');
question.addEventListener('click', () => {
const answer = item.querySelector('.faq-answer');
const isActive = answer.classList.contains('show');
// Close all open answers
document.querySelectorAll('.faq-answer').forEach(answer => {
answer.classList.remove('show');
answer.style.maxHeight = '0'; // Hide immediately
answer.style.opacity = '0'; // Fade out
answer.style.padding = '0'; // Reduce padding
});
document.querySelectorAll('.faq-icon').forEach(icon => {
icon.textContent = '+'; // Reset all icons to "+"
});
// Toggle the clicked answer
if (!isActive) {
answer.style.display = 'block'; // Ensure display is block to apply transition
requestAnimationFrame(() => {
requestAnimationFrame(() => {
answer.classList.add('show'); // Add class for transition
answer.style.maxHeight = '1000px'; // Allow height to adjust to content
answer.style.opacity = '1'; // Fade in
answer.style.padding = '10px 20px'; // Restore padding
});
});
icon.textContent = '-';
} else {
icon.textContent = '+';
}
});
});
});
</script>
<script src="/assets/js/faq.js"></script>
</footer>
<a href="#" class="back-to-top"><i class="lni-chevron-up"></i></a>
<script src="./assets/js/subscribe.js"></script>
<script src="./assets/js/login.js"></script>
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/ajax-contact.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script src="https://mediafiles.botpress.cloud/5e160793-5606-4412-ba4c-337e416f14fe/webchat/config.js" defer></script>
<script src="assets/js/scrolling-nav.js"></script>
<script src="assets/js/main.js"></script>
<script defer src="./assets/js/arthsathi-style.js"></script>
<script>
document.getElementById("copyright-year").textContent = new Date().getFullYear();
</script>
</script>
</body>
</html>