index.html

@@ -162,9 +162,10 @@
             <div class="logo">KodePilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
             <div class="buttons">
+                <!-- <a href="/login">Log in</a> -->
                 <button class="login_first" onclick="goToLogin()">Login</button>
-                <button class="business" onclick="getInTouch('https://wa.me/+919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21')">Let's Talk</button>
+                <button class="business" onclick="getInTouch()">Let's Talk</button>
-                <button class="login" onclick="getInZoho()">Request a call</button>
+                <button class="login" onclick="goToApplay()">Request a call</button>
             </div>
         </header>
 
@@ -186,12 +187,12 @@
                     </button>
                 </div>
                 <div class="cards">
-                        <div class="card green" onclick="getInZoho()">Internships<br><small>Gain Practical Experience</small></div>
+                    <div class="card green">Internships<br><small>Gain Practical Experience</small></div>
-                        <div class="card orange" onclick="getInZoho()">Mentorships<br><small>Guidance From Top Mentors</small></div>
+                    <div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
-                        <div class="card blue" onclick="getInZoho()">Jobs<br><small>Explore Diverse Careers</small></div>
+                    <div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
-                        <div class="card purple" onclick="getInZoho()">Practice<br><small>Refine Skills Daily</small></div>
+                    <div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
-                        <div class="card yellow" onclick="getInZoho()">Competitions<br><small>Battle For Excellence</small></div>
+                    <div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
-                        <div class="card pink" onclick="getInZoho()">More<br><small>Explore More Options</small></div>
+                    <div class="card pink">More<br><small>Explore More Options</small></div>
                 </div>
             </div>
         </section>
@@ -274,7 +275,7 @@
 
                         <div class="slide1">
                             <div class="slide1-box">
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
@@ -293,6 +294,7 @@
                             </div>
                         </div>
 
+
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
@@ -304,7 +306,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -324,7 +326,7 @@
                                             a successful performance report graph.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -344,7 +346,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>QA & Testing</h4>
@@ -365,7 +367,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
@@ -387,7 +389,7 @@
                                         </p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
                                     <div class="image-overlay">
                                         <h4>Cybersecurity</h4>
@@ -408,7 +410,7 @@
                                             split view showing the finished product on a mobile phone.</p>
                                     </div>
                                 </div>
-                                <div class="image-container image-container1">
+                                <div class="image-container">
                                     <img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
                                     <div class="image-overlay">
                                         <h4>Cloud & DevOps</h4>
@@ -437,20 +439,20 @@
                 </div>
 
                 <div class="cards-grid">
-                        <div class="card-add card-quizzes" 
+                    <div class="card-add  card-quizzes">
-                            onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20would%20like%20to%20know%20more%20about%20the%20Quizzes%20opportunities%20you%20provide.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
                     </div>
-                        <div class="card-add card-hackathons" 
+
-                            onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20came%20across%20the%20Hackathons%20section%20on%20your%20website.%20Could%20you%20share%20more%20information%20about%20upcoming%20Hackathons%20and%20how%20to%20participate%3F%20Thanks!')">
+                    <div class="card-add  card-hackathons">
                     </div>
-                         <div class="card-add card-scholarships" 
+
-                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99m%20interested%20in%20learning%20more%20about%20the%20Scholarships%20you%20offer.%20Could%20you%20please%20provide%20the%20details%3F%20Thanks!')">
+                    <div class="card-add  card-scholarships">
                     </div>
-                         <div class="card-add card-conferences" 
+
-                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99d%20like%20to%20know%20more%20about%20the%20Conferences%20mentioned%20on%20your%20website.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
+                    <div class="card-add  card-conferences">
+                    </div>
+
+                    <div class="card-add  card-festivals">
                     </div>
-                         <div class="card-add card-festivals" 
-                         onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20saw%20the%20Tech%20Fest%20section%20on%20your%20website%20and%20I%E2%80%99m%20interested%20in%20participating.%20Could%20you%20please%20provide%20more%20information%3F%20Thanks!')">
                 </div>
             </div>
         </section>
@@ -492,29 +494,6 @@
                         </div>
                     </div>
 
-                    <div class="move-slider-box">
-                        <div class="slide-content">
-                            <p class="slide-text-cot">
-                                "
-                            </p>
-                            <p class="slide-text">
-                                "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."
-                            </p>
-                            <div class="slide-logo-box">
-                                <div class="profile-box">
-                                    <img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
-                                        class="slide-logo">
-                                    <div class="profile-info">
-                                        <p class="slide-name">koushik</p>
-                                        <p class="slide-role">Network Engineer</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
                     <div class="move-slider-box">
                         <div class="slide-content">
                             <p class="slide-text-cot">
@@ -697,11 +676,6 @@
             <div class="corces"></div>
         </section>
 
-        <div class="whatsapp-icon" onclick="WhatsgetInTouch()">
-             <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" />
-        </div>
-
-
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">

main.css

@@ -663,6 +663,10 @@
      transition: transform 0.3s ease;
  }
 
+ .image-container:hover .image-overlay {
+     transform: translateY(0);
+ }
+
  .image-overlay h4 {
      margin: 0 0 5px 0;
      font-size: 16px;
@@ -1023,7 +1027,18 @@
  .move-slider-animation-box {
      display: flex;
      gap: 20px;
-     will-change: transform;
+     animation: scroll 20s linear infinite;
+ }
+
+ @keyframes scroll {
+     from {
+         transform: translateX(0);
+     }
+
+     to {
+         transform: translateX(-50%);
+     }
+
  }
 
  .move-slider-box {
@@ -1035,7 +1050,7 @@
      background: #fff;
      border-radius: 12px;
      padding: 20px;
-     min-width: 200px;
+     min-width: 350px;
  }
 
  .move-slider-box .slide-content>*:not(.slide-text) {
@@ -1045,11 +1060,6 @@
  .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 {
@@ -1059,10 +1069,9 @@
  }
 
  .move-slider-box:hover .slide-text {
-     transform: translateY(80px) scale(1.1);
+     transform: translateY(100px) scale(1.1);
  }
 
-
  .slide-content {
      display: flex;
      flex-direction: column;
@@ -1099,7 +1108,6 @@
      gap: 12px;
  }
 
-
  .profile-info {
      display: flex;
      flex-direction: column;
@@ -1290,7 +1298,7 @@
  .course-category-title {
      font-size: 22px;
      font-weight: bold;
-     padding-left: 14px;
+     margin-bottom: 15px;
  }
 
  .course-slider {
@@ -1729,42 +1737,7 @@
  }
 
 
- .whatsapp-icon {
-     position: fixed;
-     bottom: 20px;
-     right: 20px;
-     width: 60px;
-     height: 60px;
-     cursor: pointer;
-     z-index: 1000;
-     border-radius: 50%;
-     overflow: hidden;
-     outline: greenyellow 1px solid;
-     transition: transform 0.2s;
-     display: flex;
-     align-items: center;
-     justify-content: center;
- }
 
- .whatsapp-icon::before {
-     content: "";
-     position: absolute;
-     inset: 0;
-     border-radius: 50%;
-     background: rgba(37, 211, 101, 0.209);
-     animation: pulse 2s infinite;
-     z-index: -1;
- }
-
- .whatsapp-icon img {
-     width: 80%;
-     height: auto;
-     object-fit: contain;
- }
-
- .whatsapp-icon:hover {
-     transform: scale(1.1);
- }
 
 
  .practice-cards-wrapper .practice-card .practice-card-svg {
@@ -1879,6 +1852,7 @@
 
      .move-slider-animation-box {
          margin-top: 393px;
+         margin-right: 0px;
      }
 
      .move-slider-box-static {
@@ -1959,6 +1933,10 @@
          margin-left: 15px;
      }
 
+     .slide1r-container {
+         padding: 20px;
+     }
+
      .slide1-box {
          flex-direction: column;
          gap: 15px;
@@ -2082,15 +2060,7 @@
      }
 
      .cards_box {
-         margin-top: 20px;
+         margin-top: 28px;
-     }
-
-     .slide1 {
-         min-height: 50%;
-     }
-
-     .image-container1 {
-         display: none !important;
      }
 
      .buttons {
@@ -2227,11 +2197,6 @@
      .mobile-hamburger {
          display: none;
      }
-
-     .hero_container {
-         padding-top: 0px;
-         margin-top: 0px;
-     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -7,128 +7,109 @@ function goToApplay() {
 }
 
 
-function getInTouch(vall) {
+function getInTouch() {
-    window.open(vall, "_blank");
+    window.open("https://wa.me/+919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21", "_blank");
 }
 
-
+(function () {
-function WhatsgetInTouch() {
+    if (window.Slide1rSliderLoaded) {
-    window.open(
+        return;
-        "https://wa.me/919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21",
-        "_blank"
-    );
     }
-
+    window.Slide1rSliderLoaded = true;
-function getInZoho() {
-    window.open("https://forms.zohopublic.in/krishnakode1/form/KodePilotRegistrationForm/formperma/A2L8xK6T13A9-s5Kxj8BqRTGsgmpKDHM0DDcZQWye5E");
-}
-
 
     class Slide1rSlider {
-    constructor({ trackId = 'slide1rTrack', prevId = 'prevBtn', nextId = 'nextBtn', autoPlayDuration = 5000, invert = true } = {}) {
+        constructor() {
-        this.trackId = trackId;
+            setTimeout(() => {
-        this.prevId = prevId;
+                this.initSlider();
-        this.nextId = nextId;
+            }, 100);
-        this.autoPlayDuration = autoPlayDuration;
-        this.invert = invert;
-        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.initSlider());
-        else this.initSlider();
         }
 
         initSlider() {
-        this.track = document.getElementById(this.trackId);
+            try {
-        if (!this.track) return console.warn('slide track not found:', this.trackId);
+                this.track = document.getElementById('slide1rTrack');
+                this.slides = document.querySelectorAll('.slide1');
+                this.prevBtn = document.getElementById('prevBtn');
+                this.nextBtn = document.getElementById('nextBtn');
 
-        this.originalSlides = Array.from(this.track.querySelectorAll('.slide1'));
+                if (!this.track || this.slides.length === 0) {
-        if (this.originalSlides.length === 0) return console.warn('no .slide1 found');
+                    console.warn("Slider DOM elements not found. Retrying...");
-
+                    setTimeout(() => this.initSlider(), 200);
-        this.prevBtn = document.getElementById(this.prevId);
+                    return;
-        this.nextBtn = document.getElementById(this.nextId);
-
-        this.setupStructure();
-        this.bindEvents();
-
-        this.currentIndex = 1;
-        this.updateSlider(false);
-        this.startAutoPlay();
                 }
 
-    setupStructure() {
+                this.currentIndex = 0;
-        this.track.style.display = 'flex';
-        this.track.style.transition = 'transform 0.5s ease';
-        this.track.querySelectorAll('.slide1').forEach(s => {
-            s.style.minWidth = '100%';
-            s.style.boxSizing = 'border-box';
-        });
-
-        const first = this.originalSlides[0].cloneNode(true);
-        const last = this.originalSlides[this.originalSlides.length - 1].cloneNode(true);
-
-        this.track.insertBefore(last, this.track.firstChild);
-        this.track.appendChild(first);
-
-        this.slides = Array.from(this.track.querySelectorAll('.slide1'));
                 this.totalSlides = this.slides.length;
+                this.autoPlayDuration = 5000;
+
+                this.init();
+            } catch (err) {
+                console.error("Slider initialization failed:", err);
+            }
         }
 
-    updateSlider(animate = true) {
+        init() {
-        this.track.style.transition = animate ? 'transform 0.5s ease' : 'none';
+            try {
-        this.track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
+                this.updateSlider();
+                this.bindEvents();
+                this.startAutoPlay();
+                this.bindKeyboardEvents();
+            } catch (err) {
+                console.error("Slider init error:", err);
+            }
+        }
+
+
+        updateSlider() {
+            try {
+                const translateX = -this.currentIndex * 100;
+                this.track.style.transform = `translateX(${translateX}%)`;
+
+            } catch (err) {
+                console.error("Error updating slider:", err);
+            }
         }
 
         nextSlide() {
-        if (this.invert) {
+            try {
-            this.currentIndex--;
+                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
-            this.updateSlider(true);
+                this.updateSlider();
-            if (this.currentIndex === 0) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = this.slides.length - 2;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        } else {
-            this.currentIndex++;
-            this.updateSlider(true);
-            if (this.currentIndex === this.slides.length - 1) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = 1;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        }
                 this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to next slide:", err);
+            }
         }
 
         prevSlide() {
-        if (this.invert) {
+            try {
-            this.currentIndex++;
+                this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
-            this.updateSlider(true);
+                this.updateSlider();
-            if (this.currentIndex === this.slides.length - 1) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = 1;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        } else {
-            this.currentIndex--;
-            this.updateSlider(true);
-            if (this.currentIndex === 0) {
-                setTimeout(() => {
-                    this.track.style.transition = 'none';
-                    this.currentIndex = this.slides.length - 2;
-                    this.updateSlider(false);
-                }, 500);
-            }
-        }
                 this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to previous slide:", err);
+            }
+        }
+
+        goToSlide(index) {
+            try {
+                this.currentIndex = index;
+                this.updateSlider();
+                this.restartAutoPlay();
+            } catch (err) {
+                console.error("Error going to slide:", err);
+            }
         }
 
         startAutoPlay() {
+            try {
                 this.stopAutoPlay();
-        this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDuration);
+
+                this.autoPlayInterval = setInterval(() => {
+                    this.nextSlide();
+                }, this.autoPlayDuration);
+
+            } catch (err) {
+                console.error("Error starting autoplay:", err);
+            }
         }
 
         stopAutoPlay() {
@@ -144,36 +125,79 @@ class Slide1rSlider {
         }
 
         bindEvents() {
-        if (this.nextBtn) this.nextBtn.addEventListener('click', () => this.nextSlide());
+            try {
-        if (this.prevBtn) this.prevBtn.addEventListener('click', () => this.prevSlide());
+                if (this.nextBtn) {
+                    this.nextBtn.addEventListener('click', () => this.nextSlide());
+                }
 
-        const container = this.track.closest('.slide1r-container') || this.track.parentElement;
+                if (this.prevBtn) {
+                    this.prevBtn.addEventListener('click', () => this.prevSlide());
+                }
+
+                const container = document.querySelector('.slide1r-container');
                 if (container) {
                     container.addEventListener('mouseenter', () => this.stopAutoPlay());
                     container.addEventListener('mouseleave', () => this.startAutoPlay());
                 }
 
-        let startX = 0, endX = 0;
+                let startX = 0;
-        this.track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; this.stopAutoPlay(); });
+                let endX = 0;
-        this.track.addEventListener('touchmove', (e) => { endX = e.touches[0].clientX; });
+
+                if (this.track) {
+                    this.track.addEventListener('touchstart', (e) => {
+                        startX = e.touches[0].clientX;
+                        this.stopAutoPlay();
+                    });
+
+                    this.track.addEventListener('touchmove', (e) => {
+                        endX = e.touches[0].clientX;
+                    });
+
                     this.track.addEventListener('touchend', () => {
-            const delta = startX - endX;
+                        const deltaX = startX - endX;
-            if (Math.abs(delta) > 50) {
+                        if (Math.abs(deltaX) > 50) {
-                if (delta > 0) this.nextSlide(); else this.prevSlide();
+                            if (deltaX > 0) {
+                                this.nextSlide();
+                            } else {
+                                this.prevSlide();
+                            }
                         }
                         this.startAutoPlay();
                     });
-
+                }
-        document.addEventListener('keydown', (e) => {
+            } catch (err) {
-            const containerEl = document.querySelector('.slide1r-container');
+                console.error("Error binding events:", err);
-            if (!containerEl) return;
-            if (e.key === 'ArrowLeft') this.prevSlide();
-            if (e.key === 'ArrowRight') this.nextSlide();
-        });
             }
         }
 
-new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
+        bindKeyboardEvents() {
+            const keyHandler = (e) => {
+                const container = document.querySelector('.slide1r-container');
+                if (container && this.isElementInViewport(container)) {
+                    if (e.key === 'ArrowLeft') {
+                        this.prevSlide();
+                    } else if (e.key === 'ArrowRight') {
+                        this.nextSlide();
+                    }
+                }
+            };
+
+            document.addEventListener('keydown', keyHandler);
+        }
+
+        isElementInViewport(el) {
+            const rect = el.getBoundingClientRect();
+            return (
+                rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+            );
+        }
+    }
+
+    new Slide1rSlider();
+})();
 
 const statItems = document.querySelectorAll('.stat-item');
 
@@ -287,7 +311,7 @@ function renderCourses(allCourses) {
               <div class="course-image" style="background-image: url(${course.image});"></div>
             </a>
             <div class="course-content">
-              <a href="/apply" class="course-name" target="_blank">${course.name}</a>
+              <a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
               <div class="course-description">${course.description}</div>
             </div>
         `;
@@ -579,35 +603,3 @@ document.addEventListener("DOMContentLoaded", () => {
 
     counters.forEach(counter => observer.observe(counter));
 });
-
-// i know it is a bad code but it works 😅
-document.addEventListener("DOMContentLoaded", () => {
-    const track = document.querySelector(".move-slider-animation-box");
-    const container = document.querySelector(".container");
-    let pos = 0;
-    const normalSpeed = 1;
-    let speed = 20;
-
-    function animate() {
-        pos -= speed;
-        track.style.transform = `translateX(${pos}px)`;
-
-        if (pos <= -100 && speed !== normalSpeed) {
-            speed = normalSpeed;
-        }
-
-        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();
-});