forked from ayush-that/FinVeda
-
Notifications
You must be signed in to change notification settings - Fork 0
/
substainability.html
191 lines (165 loc) · 7 KB
/
substainability.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="substainability.css">
<title>FinVeda - Sustainability in Finance</title>
</head>
<body>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<script>
// Store the mouse coordinates
const coords = { x: 0, y: 0 };
// Select all circles (you can add more circles to HTML as needed)
const circles = document.querySelectorAll(".circle");
// Customize the colors for the circles (optional)
const colors = ["#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d", "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d", "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060", "#680060", "#60005f", "#48005f", "#3d005e"];
// Initialize circle positions
circles.forEach((circle, index) => {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length]; // Assign colors
});
// Update mouse coordinates on move
window.addEventListener("mousemove", (e) => {
coords.x = e.clientX;
coords.y = e.clientY;
});
// Animation loop for circles
function animateCircles() {
let x = coords.x;
let y = coords.y;
circles.forEach((circle, index) => {
circle.style.left = `${x - 12}px`; // Offset for center alignment
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${(circles.length - index) / circles.length})`; // Shrink effect
circle.x = x;
circle.y = y;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});
requestAnimationFrame(animateCircles);
}
// Start animation
animateCircles();
</script>
<!-- Header -->
<header class="header">
<h1>FinVeda - Sustainability in Finance</h1>
<p>Exploring the intersection of finance and sustainability.</p>
</header>
<!-- Navbar -->
<div class="navbar-area">
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="./index.html">Home 🏡</a></li>
<li class="nav-item"><a href="./about.html">About Us 📖</a></li>
<li class="nav-item"><a href="./trends.html">Trends 📈</a></li>
<li class="nav-item"><a href="./blog.html">Blogs 📰</a></li>
<li class="nav-item"><a href="./sustainability.html">Sustainability ♻️</a></li>
<li class="nav-item"><a href="./contact.html">Contact 📞</a></li>
</ul>
</nav>
</div>
<!-- Main Content -->
<main class="main-content">
<!-- Introduction Section -->
<section class="intro hover-effect">
<h2>What is Sustainability in Finance?</h2>
<p>Sustainability in finance refers to integrating environmental, social, and governance (ESG) factors into
financial decision-making to support long-term economic growth while minimizing environmental impact.
</p>
</section>
<!-- Importance Section -->
<section class="importance hover-effect">
<h2>Importance of Sustainable Finance</h2>
<ul>
<li>Promotes responsible investing</li>
<li>Supports green technologies and initiatives</li>
<li>Encourages ethical business practices</li>
<li>Mitigates risks associated with climate change</li>
</ul>
</section>
<!-- Strategies Section -->
<section class="strategies hover-effect">
<h2>Strategies for Implementing Sustainability in Finance</h2>
<div class="strategy">
<h3>1. Green Bonds</h3>
<p>Investing in bonds specifically earmarked to fund projects that have positive environmental impacts.
</p>
</div>
<div class="strategy">
<h3>2. ESG Integration</h3>
<p>Incorporating ESG factors into investment analysis and decision-making processes.</p>
</div>
<div class="strategy">
<h3>3. Impact Investing</h3>
<p>Investing with the intention to generate positive, measurable social and environmental impact
alongside a financial return.</p>
</div>
</section>
<!-- Case Studies Section -->
<section class="case-studies hover-effect">
<h2>Case Studies in Sustainable Finance</h2>
<div class="case-study">
<h3>Tesla, Inc.</h3>
<p>Tesla has revolutionized the automobile industry by focusing on electric vehicles, reducing carbon
emissions, and promoting sustainable energy solutions.</p>
</div>
<div class="case-study">
<h3>Unilever</h3>
<p>Unilever has integrated sustainability into its business model by committing to reduce its
environmental footprint and increase its positive social impact.</p>
</div>
</section>
<!-- Statistics Section -->
<section class="statistics hover-effect">
<h2>Statistics on Sustainability in Finance</h2>
<ul>
<li>76% of global investors are interested in sustainable investment opportunities.</li>
<li>$30 trillion is expected to be invested in sustainable assets by 2030.</li>
<li>Companies with high ESG ratings often outperform their peers in financial performance.</li>
</ul>
</section>
<!-- Resources Section -->
<section class="resources hover-effect">
<h2>Resources for Further Reading</h2>
<ol>
<li><a href="https://www.unepfi.org/" target="_blank">UN Environment Programme Finance Initiative</a>
</li>
<li><a href="https://www.sasb.org/" target="_blank">Sustainability Accounting Standards Board</a></li>
<li><a href="https://www.globalreporting.org/" target="_blank">Global Reporting Initiative</a></li>
</ol>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<p>© 2024 FinVeda. All rights are reserved.</p>
</footer>
</body>
</html>