bade secion fix

index.html

@@ -504,6 +504,10 @@ <h4 class="about__feature-title"><span class="text-gradient">
 
             </div>
 
+             <section class="badge-container">
+        <!-- No need to add badge elements here -->
+    </section>
+
             <!-- HIGHLIGHT 5 -->
 
             <div class="feature__container  animated-section">

script.js

@@ -216,4 +216,68 @@ function toggleHighlight() {
 }
 
 // Add event listener to the "Learn More" link
-highlightMoreLink.addEventListener("click", toggleHighlight);
+highlightMoreLink.addEventListener("click", toggleHighlight);
+
+
+
+
+// Badges
+
+const badgeContainer = document.querySelector('.badge-container');
+const badgeRadius = 50; // Half of badge width/height
+const badgeCount = 16; // Number of badge images
+
+const badgePositions = [];
+
+window.addEventListener('scroll', () => {
+    const scrollDistance = window.scrollY;
+
+    for (let i = 0; i < badgeCount; i++) {
+        const badge = document.querySelector(`.badge-${i}`);
+        const badgeTop = badge.getBoundingClientRect().top;
+
+        if (badgeTop - scrollDistance < window.innerHeight - 100) {
+            // Calculate badge position as before
+            let isOverlapping = false;
+            let randomX, randomY;
+
+            do {
+                isOverlapping = false;
+                randomX = Math.random() * (window.innerWidth - badgeRadius * 2);
+                randomY = Math.random() * (window.innerHeight - badgeRadius * 2);
+
+                for (const position of badgePositions) {
+                    const dx = randomX - position.x;
+                    const dy = randomY - position.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+
+                    if (distance < badgeRadius * 2 + i * 10) {
+                        isOverlapping = true;
+                        break;
+                    }
+                }
+            } while (isOverlapping);
+
+            badgePositions.push({ x: randomX, y: randomY });
+
+            const randomRotate = Math.random() * 360;
+            const randomScale = 0.5 + Math.random();
+            const randomZ = i + 1;
+
+            badge.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${randomRotate}deg) scale(${randomScale}) translateZ(${randomZ}px)`;
+
+            // Fade in the badge
+            badge.style.opacity = 1;
+        }
+    }
+});
+
+// Dynamically create and add badge images to the container
+for (let i = 0; i < badgeCount; i++) {
+    const badge = document.createElement('img');
+    badge.src = `/img/badge/badge-${i}.png`; // Set the image source
+    badge.alt = `Badge ${i}`;
+    badge.className = `badge badge-${i}`;
+    badgeContainer.appendChild(badge);
+    badge.style.opacity = 0; // Initially hide badges
+}

styles.css

@@ -1296,3 +1296,30 @@ ul {
   border-top: solid .75px #ccc;
   margin: 2rem auto;
 }
+
+/* Badge Section */
+
+
+.badge-container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f0f0f0; /* Background color for the section */
+  overflow: hidden;
+}
+
+.badge {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background-color: #3498db; /* Badge color */
+  border-radius: 5px;
+  opacity: 1;
+  pointer-events: none; /* Prevent badges from blocking clicks */
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Minimal shadow */
+
+}
+
+/* Add additional styling as needed */
+/* Animation */