448 lines
28 KiB
HTML
448 lines
28 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Investment Advice</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Navbar</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<header class="navbar">
|
|
<a href="#" class="navbar__logo" aria-label="FinTech Platform Homepage">
|
|
<span class="navbar__logo-icon" aria-hidden="true"></span>
|
|
<span class="navbar__logo-text">FinTrack</span>
|
|
</a>
|
|
|
|
<nav class="navbar__nav-wrapper">
|
|
<ul class="navbar__nav-links">
|
|
<li><a href="#dashboard" class="active">Dashboard</a></li>
|
|
<li><a href="#accounts">Accounts</a></li>
|
|
<li><a href="#expenses">Expenses</a></li>
|
|
<li><a href="#savings">Savings</a></li>
|
|
<li><a href="#advice">Advice</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="navbar__actions">
|
|
<a href="#connect" class="navbar__button">Connect Account</a>
|
|
<div class="navbar__user-profile" aria-haspopup="true" aria-expanded="false" tabindex="0" role="button">
|
|
<span class="navbar__user-avatar" aria-label="User Avatar">JD</span>
|
|
<span class="navbar__user-name">John Doe</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="navbar__hamburger" aria-label="Toggle navigation menu">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</header>
|
|
<main style="padding: 2rem; max-width: 1200px; margin: 20px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
|
<h1>Welcome to FinTrack</h1>
|
|
<p>This is placeholder content for your main dashboard area.</p>
|
|
<p>Your financial overview, expense tracking, savings forecast, and AI-driven investment advice will appear here after connecting your accounts.</p>
|
|
<div style="height: 800px; background-color: #f9f9f9; border: 1px dashed #ccc; margin-top: 20px; display: flex; justify-content: center; align-items: center; color: #888;">
|
|
Wireframe Placeholder for Dashboard Content
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Simple JavaScript for hamburger menu toggle (for demonstration)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const hamburger = document.querySelector('.navbar__hamburger');
|
|
const navLinks = document.querySelector('.navbar__nav-links');
|
|
|
|
hamburger.addEventListener('click', () => {
|
|
navLinks.classList.toggle('active');
|
|
hamburger.setAttribute('aria-expanded', navLinks.classList.contains('active'));
|
|
});
|
|
|
|
// Close nav when a link is clicked (on mobile)
|
|
navLinks.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
if (navLinks.classList.contains('active')) {
|
|
navLinks.classList.remove('active');
|
|
hamburger.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<section class="advice-header">
|
|
<div class="container">
|
|
<h1>AI-Driven Financial Insights</h1>
|
|
<p>Unlock personalized investment advice and strategic recommendations based on your linked accounts, expenses, and savings goals.</p>
|
|
<a href="#get-advice" class="button primary-button">Get My Personalized Advice</a>
|
|
</div>
|
|
</section>
|
|
<section id="recommendation-card-section" style="padding: 4rem 1rem; background-color: #f8f8f8; font-family: Arial, sans-serif; text-align: center;">
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
<h2 style="font-size: 2.5rem; color: #333; margin-bottom: 1rem;">Your AI-Powered Financial Recommendations</h2>
|
|
<p style="font-size: 1.1rem; color: #666; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto;">
|
|
Based on your linked accounts and investment goals, our AI has generated personalized advice to help you grow your wealth.
|
|
</p>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
|
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
|
<div>
|
|
<h3 style="font-size: 1.6rem; color: #007bff; margin-bottom: 1rem;">Diversify Your Portfolio</h3>
|
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
|
Consider allocating a portion of your funds to diversified ETFs to mitigate risk and capture broad market growth. Our analysis suggests specific sectors.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
|
Explore Details
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
|
<div>
|
|
<h3 style="font-size: 1.6rem; color: #28a745; margin-bottom: 1rem;">Optimize Your Savings Rate</h3>
|
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
|
Your current savings rate could be optimized for faster goal achievement. We recommend adjusting your monthly contributions to reach milestones sooner.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
|
Adjust Plan
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
|
<div>
|
|
<h3 style="font-size: 1.6rem; color: #ffc107; margin-bottom: 1rem;">Consider Alternative Investments</h3>
|
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
|
Based on your risk tolerance, explore opportunities in real estate crowdfunding or peer-to-peer lending for potentially higher returns.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #ffc107; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
|
<div>
|
|
<h3 style="font-size: 1.6rem; color: #17a2b8; margin-bottom: 1rem;">Rebalance Your Holdings</h3>
|
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
|
Your portfolio may have drifted from its target asset allocation. We suggest rebalancing to maintain your desired risk-reward profile.
|
|
</p>
|
|
</div>
|
|
<div style="margin-top: 1.5rem;">
|
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #17a2b8; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
|
Review Now
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portfolio Performance</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="portfolio-performance-section" aria-labelledby="portfolio-performance-heading">
|
|
<h2 id="portfolio-performance-heading">Portfolio Performance</h2>
|
|
|
|
<div class="chart-controls">
|
|
<div class="time-range-buttons" role="group" aria-label="Select time range for chart">
|
|
<button type="button" class="active">1D</button>
|
|
<button type="button">1W</button>
|
|
<button type="button">1M</button>
|
|
<button type="button">3M</button>
|
|
<button type="button">1Y</button>
|
|
<button type="button">All</button>
|
|
</div>
|
|
<div class="view-selector">
|
|
<label for="chart-view-select" class="sr-only">Select chart view type</label>
|
|
<select id="chart-view-select" aria-label="Chart view type">
|
|
<option value="value">Portfolio Value</option>
|
|
<option value="gain-loss">Daily Gain/Loss</option>
|
|
<option value="allocation">Asset Allocation</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container" role="img" aria-label="Interactive chart showing portfolio performance over time">
|
|
<p class="chart-placeholder-text">Placeholder for interactive performance chart (e.g., Line Chart with D3.js or Chart.js)</p>
|
|
<!-- A real chart library (e.g., Chart.js, D3.js, Highcharts) would render here -->
|
|
<!-- Example: <canvas id="performanceChart"></canvas> or <svg id="performanceSVG"></svg> -->
|
|
</div>
|
|
|
|
<div class="key-metrics">
|
|
<div class="metric-card">
|
|
<p class="metric-label">Current Value</p>
|
|
<p class="metric-value">$52,345.67</p>
|
|
<p class="metric-change positive">+1.23% ($634.50)</p>
|
|
</div>
|
|
<div class="metric-card">
|
|
<p class="metric-label">Total Gain/Loss</p>
|
|
<p class="metric-value positive">+$7,890.12</p>
|
|
<p class="metric-change positive">+17.75% (All Time)</p>
|
|
</div>
|
|
<div class="metric-card">
|
|
<p class="metric-label">Today's Change</p>
|
|
<p class="metric-value negative">-$123.45</p>
|
|
<p class="metric-change negative">-0.24%</p>
|
|
</div>
|
|
<div class="metric-card">
|
|
<p class="metric-label">Annualized Return</p>
|
|
<p class="metric-value positive">8.50%</p>
|
|
<p class="metric-change neutral">(Estimated)</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="risk-profile-assessment" class="py-12 bg-gray-50">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-3xl font-extrabold text-gray-900 text-center mb-6">Your Risk Profile Assessment</h2>
|
|
<p class="text-lg text-gray-700 text-center mb-10">
|
|
Understand your investment comfort level to help us tailor personalized advice. Your responses will guide our AI in recommending suitable investment strategies.
|
|
</p>
|
|
|
|
<form class="space-y-8 bg-white p-8 rounded-lg shadow-xl">
|
|
|
|
<!-- Question 1: Investment Horizon -->
|
|
<fieldset class="border-b border-gray-200 pb-8">
|
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 1 of 5: Investment Horizon</legend>
|
|
<p class="text-gray-700 mb-4">How long do you plan to invest your money before needing to withdraw it?</p>
|
|
<div class="mt-4 space-y-4">
|
|
<div class="flex items-center">
|
|
<input id="horizon-short" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="horizon-short" class="ml-3 block text-base font-medium text-gray-700">Less than 3 years (Short-term)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="horizon-medium" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="horizon-medium" class="ml-3 block text-base font-medium text-gray-700">3-7 years (Medium-term)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="horizon-long" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="horizon-long" class="ml-3 block text-base font-medium text-gray-700">More than 7 years (Long-term)</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Question 2: Risk Tolerance for Loss -->
|
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 2 of 5: Risk Tolerance</legend>
|
|
<p class="text-gray-700 mb-4">How would you react if your investment portfolio lost 20% of its value in a short period?</p>
|
|
<div class="mt-4 space-y-4">
|
|
<div class="flex items-center">
|
|
<input id="loss-panic" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="loss-panic" class="ml-3 block text-base font-medium text-gray-700">Panic and sell immediately</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="loss-worry" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="loss-worry" class="ml-3 block text-base font-medium text-gray-700">Worried, but would wait for recovery</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="loss-buy" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="loss-buy" class="ml-3 block text-base font-medium text-gray-700">See it as a buying opportunity</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Question 3: Financial Goals -->
|
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 3 of 5: Financial Goals</legend>
|
|
<p class="text-gray-700 mb-4">Which of the following best describes your primary financial goal?</p>
|
|
<div class="mt-4 space-y-4">
|
|
<div class="flex items-center">
|
|
<input id="goal-preserve" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="goal-preserve" class="ml-3 block text-base font-medium text-gray-700">Capital preservation (low risk, low return)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="goal-growth" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="goal-growth" class="ml-3 block text-base font-medium text-gray-700">Balanced growth (moderate risk, moderate return)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="goal-aggressive" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="goal-aggressive" class="ml-3 block text-base font-medium text-gray-700">Aggressive growth (high risk, high return potential)</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Question 4: Investment Knowledge -->
|
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 4 of 5: Investment Knowledge</legend>
|
|
<p class="text-gray-700 mb-4">How would you describe your current knowledge of investment products and markets?</p>
|
|
<select id="investment-knowledge" name="investment_knowledge" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
|
<option value="">Please select...</option>
|
|
<option value="beginner">Beginner (Little to no knowledge)</option>
|
|
<option value="intermediate">Intermediate (Understand basic concepts)</option>
|
|
<option value="advanced">Advanced (Familiar with complex instruments)</option>
|
|
<option value="expert">Expert (Professionally involved)</option>
|
|
</select>
|
|
</fieldset>
|
|
|
|
<!-- Question 5: Income Stability -->
|
|
<fieldset class="pb-8 pt-8">
|
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 5 of 5: Income Stability</legend>
|
|
<p class="text-gray-700 mb-4">How stable is your current income and financial situation?</p>
|
|
<div class="mt-4 space-y-4">
|
|
<div class="flex items-center">
|
|
<input id="income-unstable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="income-unstable" class="ml-3 block text-base font-medium text-gray-700">Very unstable (Income fluctuates significantly)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="income-moderate" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="income-moderate" class="ml-3 block text-base font-medium text-gray-700">Moderately stable (Some fluctuations, but manageable)</label>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input id="income-stable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
|
<label for="income-stable" class="ml-3 block text-base font-medium text-gray-700">Very stable (Consistent income, secure employment)</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="pt-8 flex justify-end">
|
|
<button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-lg font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
|
Get My Risk Profile
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<section id="educational-resources" aria-labelledby="educational-resources-heading">
|
|
<div class="container">
|
|
<h2 id="educational-resources-heading">Empower Your Financial Journey with Knowledge</h2>
|
|
<p class="section-description">Dive into our comprehensive library of guides, articles, and insights designed to help you understand personal finance, investment strategies, and market trends.</p>
|
|
|
|
<nav class="resource-categories" aria-label="Educational Resource Categories">
|
|
<ul>
|
|
<li><a href="#category-investing" class="category-link active">Investing Basics</a></li>
|
|
<li><a href="#category-savings" class="category-link">Savings & Budgeting</a></li>
|
|
<li><a href="#category-debt" class="category-link">Debt Management</a></li>
|
|
<li><a href="#category-ai" class="category-link">AI & Future Finance</a></li>
|
|
<li><a href="#category-glossary" class="category-link">Financial Glossary</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="resources-grid">
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
|
|
</div>
|
|
<h3>Understanding Investment Risks</h3>
|
|
<p>Learn about different types of investment risks and how to manage them effectively for a balanced portfolio.</p>
|
|
<a href="#read-more-risk" class="read-more-link">Read More</a>
|
|
</article>
|
|
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
|
|
</div>
|
|
<h3>Beginner's Guide to Stock Market</h3>
|
|
<p>Start your journey into the stock market with this essential guide covering basics, terms, and first steps.</p>
|
|
<a href="#read-more-stocks" class="read-more-link">Read More</a>
|
|
</article>
|
|
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-piggy-bank"><path d="M16 10a4 4 0 0 0-4-4V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a4 4 0 0 0 4-4v-4zm-4 4h0"></path></svg>
|
|
</div>
|
|
<h3>Building Your Emergency Fund</h3>
|
|
<p>Discover practical steps to build and maintain a robust emergency fund for financial security.</p>
|
|
<a href="#read-more-emergency" class="read-more-link">Read More</a>
|
|
</article>
|
|
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
|
|
</div>
|
|
<h3>How AI Boosts Your Portfolio</h3>
|
|
<p>Explore how artificial intelligence can analyze data and provide personalized investment advice.</p>
|
|
<a href="#read-more-ai" class="read-more-link">Read More</a>
|
|
</article>
|
|
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
|
|
</div>
|
|
<h3>Debt Management Strategies</h3>
|
|
<p>Practical strategies to tackle debt, improve your credit score, and achieve financial freedom.</p>
|
|
<a href="#read-more-debt" class="read-more-link">Read More</a>
|
|
</article>
|
|
|
|
<article class="resource-card">
|
|
<div class="resource-image-placeholder">
|
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
|
|
</div>
|
|
<h3>The Power of Compound Interest</h3>
|
|
<p>Unpack the magic of compound interest and how it can significantly grow your wealth over time.</p>
|
|
<a href="#read-more-compound" class="read-more-link">Read More</a>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="call-to-action">
|
|
<p>Can't find what you're looking for? <a href="#contact-us">Suggest a topic</a> or <a href="#faqs">visit our FAQs</a>.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer class="site-footer">
|
|
<div class="footer-container">
|
|
<div class="footer-column footer-branding">
|
|
<a href="#" class="footer-logo">YourCompany</a>
|
|
<p class="footer-tagline">Empowering your financial future with smart insights.</p>
|
|
<div class="social-links">
|
|
<a href="#" aria-label="Link to Facebook"><span class="social-icon-placeholder">FB</span></a>
|
|
<a href="#" aria-label="Link to Twitter"><span class="social-icon-placeholder">TW</span></a>
|
|
<a href="#" aria-label="Link to LinkedIn"><span class="social-icon-placeholder">LI</span></a>
|
|
<a href="#" aria-label="Link to Instagram"><span class="social-icon-placeholder">IG</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="footer-column footer-nav">
|
|
<h3>Product</h3>
|
|
<ul>
|
|
<li><a href="#">Link Accounts</a></li>
|
|
<li><a href="#">Track Expenses</a></li>
|
|
<li><a href="#">Forecast Savings</a></li>
|
|
<li><a href="#">Investment Advice</a></li>
|
|
<li><a href="#">Security</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class="footer-column footer-nav">
|
|
<h3>Company</h3>
|
|
<ul>
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
<li><a href="#">Blog</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
<li><a href="#">Press Kit</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class="footer-column footer-nav">
|
|
<h3>Support & Legal</h3>
|
|
<ul>
|
|
<li><a href="#">FAQ</a></li>
|
|
<li><a href="#">Help Center</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Plaid & Data</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="footer-bottom-bar">
|
|
<p class="copyright-text">© 2023 YourCompany. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |