diff --git a/projects/Floating_Hearts_Animation/css/style.css b/projects/Floating_Hearts_Animation/css/style.css
new file mode 100644
index 00000000..ef9f0617
--- /dev/null
+++ b/projects/Floating_Hearts_Animation/css/style.css
@@ -0,0 +1,57 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ background: radial-gradient(circle at top, #ffdde1, #ee9ca7);
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'Poppins', sans-serif;
+}
+
+h1 {
+ position: absolute;
+ top: 40%;
+ text-align: center;
+ font-size: 2.5rem;
+ color: #fff;
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ transition: transform 0.3s ease;
+}
+
+h1:hover {
+ transform: scale(1.05);
+}
+
+.heart {
+ position: absolute;
+ font-size: 24px;
+ color: #ff3e96;
+ animation: floatUp 3s ease-out forwards, spin 3s linear infinite;
+ pointer-events: none;
+}
+
+@keyframes floatUp {
+ 0% {
+ transform: translateY(0) scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-200px) scale(1.8);
+ opacity: 0;
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/projects/Floating_Hearts_Animation/index.html b/projects/Floating_Hearts_Animation/index.html
new file mode 100644
index 00000000..c8576a7e
--- /dev/null
+++ b/projects/Floating_Hearts_Animation/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ Floating Hearts Animation
+
+
+
+ Click Anywhere for ❤️ Magic!
+
+
+
diff --git a/projects/Floating_Hearts_Animation/js/script.js b/projects/Floating_Hearts_Animation/js/script.js
new file mode 100644
index 00000000..4c82c409
--- /dev/null
+++ b/projects/Floating_Hearts_Animation/js/script.js
@@ -0,0 +1,18 @@
+document.addEventListener('click', function (e) {
+ const heart = document.createElement('div');
+ heart.classList.add('heart');
+ heart.innerText = '❤️';
+ document.body.appendChild(heart);
+
+ const colors = ['#ff3e96', '#ff5f6d', '#ffb6c1', '#ff69b4', '#ff7eb3'];
+ heart.style.color = colors[Math.floor(Math.random() * colors.length)];
+ heart.style.left = e.pageX + 'px';
+ heart.style.top = e.pageY + 'px';
+ heart.style.fontSize = Math.random() * 20 + 20 + 'px';
+
+ heart.style.transform = `rotate(${Math.random() * 360}deg)`;
+
+ setTimeout(() => {
+ heart.remove();
+ }, 3000);
+});