diff --git a/index.html b/index.html index 8fe9ab7..d14fed0 100644 --- a/index.html +++ b/index.html @@ -492,6 +492,29 @@ +
+ " +
++ "The KodePilot curriculum gave me hands-on experience with networking and security. I + gained practical + skills and secured my position in network engineering with confidence." +
+koushik
+Network Engineer
+diff --git a/main.css b/main.css index 77a8715..a8ac310 100644 --- a/main.css +++ b/main.css @@ -182,7 +182,7 @@ } .orange { - background:#9bc9ff ; + background: #9bc9ff; background-image: url('assets/images/unlockcarrer/mentorship.png'); background-size: 115px; background-repeat: no-repeat; @@ -190,7 +190,7 @@ } .blue { - background:#fec192; + background: #fec192; background-image: url('assets/images/unlockcarrer/jobs.png'); background-size: 115px; background-repeat: no-repeat; @@ -1023,18 +1023,7 @@ .move-slider-animation-box { display: flex; gap: 20px; - animation: scroll 20s linear infinite; - } - - @keyframes scroll { - from { - transform: translateX(0); - } - - to { - transform: translateX(-50%); - } - + will-change: transform; } .move-slider-box { @@ -1046,7 +1035,7 @@ background: #fff; border-radius: 12px; padding: 20px; - min-width: 350px; + min-width: 200px; } .move-slider-box .slide-content>*:not(.slide-text) { @@ -1056,6 +1045,11 @@ .move-slider-box:hover .slide-content>*:not(.slide-text) { opacity: 0; pointer-events: none; + transition-delay: 0s; + } + + .move-slider-box .slide-content>*:not(.slide-text) { + transition: opacity 0.3s ease 1s; } .move-slider-box .slide-text { @@ -1065,9 +1059,10 @@ } .move-slider-box:hover .slide-text { - transform: translateY(100px) scale(1.1); + transform: translateY(80px) scale(1.1); } + .slide-content { display: flex; flex-direction: column; @@ -1849,7 +1844,6 @@ .move-slider-animation-box { margin-top: 393px; - margin-right: 0px; } .move-slider-box-static { diff --git a/main.js b/main.js index 0b9e155..7779ea6 100644 --- a/main.js +++ b/main.js @@ -578,4 +578,31 @@ document.addEventListener("DOMContentLoaded", () => { }, { threshold: 0.3 }); counters.forEach(counter => observer.observe(counter)); +}); + + +document.addEventListener("DOMContentLoaded", () => { + const track = document.querySelector(".move-slider-animation-box"); + const container = document.querySelector(".container"); + let speed = 1; + let pos = 0; + + function animate() { + pos -= speed; + track.style.transform = `translateX(${pos}px)`; + + const firstChild = track.firstElementChild; + const firstRect = firstChild.getBoundingClientRect(); + const containerRect = container.getBoundingClientRect(); + + if (firstRect.right <= containerRect.left) { + track.appendChild(firstChild); + pos += firstChild.offsetWidth + 20; + track.style.transform = `translateX(${pos}px)`; + } + + requestAnimationFrame(animate); + } + + animate(); }); \ No newline at end of file