index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="templateapi/main.css">
     <link rel="icon" type="image/x-icon" href="templateapi/assets/images/logo/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
     <style>
         .center-container {
             display: flex;
@@ -268,7 +269,7 @@
             </div>
         </section>
 
-        <section class="slider" id="slider">
+        <section id="slider">
             <div class="slide1r-container">
                 <div class="slide1r-wrapper">
                     <div class="slide1r-track" id="slide1rTrack">
@@ -456,7 +457,6 @@
                 </div>
             </div>
         </section>
-
         <section class="move-slider-ruby">
             <div class="move-slider-container">
                 <div class="move-slider-box-static">
@@ -539,8 +539,8 @@
                 </div>
             </div>
         </section>
+        <section>
 
-        <section class="practice-container-parent">
             <div class="practice-container">
                 <div class="practice-container-box">
                     <div class="practice-container-text-box">
@@ -638,6 +638,15 @@
                 </div>
         </section>
 
+        <section class="move-slider" style="display: none;">
+            <div class="container-slider">
+                <div class="container-slider-baby container-slider-1"></div>
+                <div class="container-slider-baby container-slider-2"></div>
+                <div class="container-slider-baby container-slider-3"></div>
+                <div class="container-slider-baby container-slider-4"></div>
+            </div>
+        </section>
+
         <section class="our-numbers">
             <div class="stats-grid">
                 <div class="stat-item">
@@ -671,11 +680,9 @@
                 </div>
             </div>
         </section>
-
         <section class="corces-s">
             <div class="corces"></div>
         </section>
-
         <footer class="footer">
             <div class="footer-container">
                 <div class="footer-section company-section">
@@ -776,12 +783,15 @@
                     </ul>
                 </div>
             </div>
+
             <div class="footer-bottom">
-                <p>
+                <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
-                    Copyright © 2025
+                    <p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
-                    <a href="https://kodepilot.in" target="_blank">KodePilot</a>
+                        Copyright © 2025 <a href="#" style="color: #120ee2;">KodePilot</a> - All
-                    - All rights reserved.
+                        rights
-                </p>
+                        reserved.
+                    </p>
+                </div>
             </div>
         </footer>
     </div>

main.css

@@ -1,7 +1,6 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
-     --section-margin: 60px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -43,9 +42,8 @@
      border-bottom: 1px solid #eee;
      position: fixed;
      width: 100%;
-     top: 0;
+     height: 56px;
-     height: 60px;
+     z-index: 9999;
-     z-index: 20;
  }
 
  .logo {
@@ -80,7 +78,7 @@
  }
 
  .buttons button {
-     margin-left: 15px;
+     margin-left: 2px;
      padding: 8px 15px;
      border: none;
      border-radius: 20px;
@@ -93,7 +91,7 @@
 
  .business {
      background: #FFD700;
-     color: #030101;
+       color: #030101;
  }
 
  .login {
@@ -103,9 +101,8 @@
 
  .hero {
      text-align: start;
-     margin: var(--section-margin);
+     padding: 50px 20px;
-     padding-top: 11px;
+     line-height: 20px;
-     line-height: 37px;
  }
 
  .hero h1 {
@@ -134,7 +131,6 @@
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
-     margin-top: 50px;
  }
 
  .cards_box {
@@ -167,10 +163,8 @@
 
  .card small {
      display: block;
-     margin-top: -2px;
+     margin-top: 10px;
      font-weight: normal;
-     max-width: 142px;
-     line-height: 23px;
  }
 
  .green {
@@ -182,16 +176,16 @@
  }
 
  .orange {
-     background:#9bc9ff ;
+     background: #fec192;
-     background-image: url('assets/images/unlockcarrer/mentorship.png');
+     background-image: url('assets/images/unlockcarrer/jobs.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
 
  .blue {
-     background:#fec192;
+     background: #9bc9ff;
-     background-image: url('assets/images/unlockcarrer/jobs.png');
+     background-image: url('assets/images/unlockcarrer/mentorship.png');
      background-size: 115px;
      background-repeat: no-repeat;
      background-position: bottom right;
@@ -223,7 +217,7 @@
  }
 
  .users {
-     margin: var(--section-margin);
+     padding: 0px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -320,7 +314,7 @@
  }
 
  .mnc {
-     margin: var(--section-margin);
+     padding: 40px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -385,10 +379,8 @@
  }
 
  .our-numbers {
-     display: flex;
+     max-width: var(--course-max-width);
-     justify-content: center;
+     margin: 50px auto 50px auto;
-     align-items: center;
-     margin: var(--section-margin);
  }
 
  .our-numbers h2 {
@@ -402,16 +394,15 @@
  .stats-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
-     min-width: var(--course-max-width);
      gap: 20px;
      justify-items: center;
      align-items: stretch;
-     min-width: var(--course-max-width);
  }
 
  .stat-item {
      background: HSL(0, 0%, 96.5%);
      text-align: center;
+     padding: 20px 10px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
@@ -496,7 +487,7 @@
 
  .subtitle {
      color: #6b7280;
-     line-height: 22px;
+     line-height: 0px;
  }
 
  .arrow-icon {
@@ -511,7 +502,7 @@
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
-     max-width: var(--course-max-width);
+     min-width: 100px;
  }
 
  .card-add {
@@ -560,17 +551,6 @@
      color: #1f2937;
  }
 
- .slider {
-     margin: var(--section-margin);
-     display: flex;
-     justify-content: center;
-     align-items: center;
- }
-
- .opportunity-section {
-     margin: var(--section-margin);
- }
-
  .hover-slider {
      display: none;
      padding: 0 0 50px 0;
@@ -592,10 +572,12 @@
  }
 
  .slide1r-container {
+     margin: 0 auto;
      max-width: var(--course-max-width-small);
      width: 100%;
      position: relative;
      border-radius: 20px;
+     padding: 25px;
      font-family: 'Arial', sans-serif;
  }
 
@@ -697,7 +679,7 @@
      font-size: 20px;
      color: #333;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-     z-index: 1;
+     z-index: 10;
  }
 
  .nav-button:hover {
@@ -809,25 +791,6 @@
      color: #ffffff;
  }
 
- .footer-bottom {
-     border-top: 1px solid rgba(255, 255, 255, 0.2);
-     margin-top: 20px;
-     padding: 15px 0;
-     text-align: center;
-     font-size: 14px;
-     color: #ccc;
- }
-
- .footer-bottom a {
-     color: #fff;
-     text-decoration: none;
-     font-weight: 600;
- }
-
- .footer-bottom a:hover {
-     text-decoration: underline;
- }
-
  .company-section {
      grid-column: 1;
  }
@@ -965,6 +928,32 @@
      opacity: 0.9;
  }
 
+ .footer-bottom {
+     border-top: 1px solid #475569;
+     margin-top: 40px;
+     padding-top: 20px;
+     font-size: 12px;
+     color: #94a3b8;
+     text-align: left;
+     background: white;
+ }
+
+ .footer-bottom-links {
+     display: flex;
+     flex-wrap: wrap;
+     gap: 20px;
+     margin-top: 10px;
+ }
+
+ .footer-bottom-links a {
+     color: #94a3b8;
+     text-decoration: none;
+ }
+
+ .footer-bottom-links a:hover {
+     color: white;
+ }
+
  .hiring-badge {
      background-color: #10b981;
      color: white;
@@ -976,14 +965,15 @@
  }
 
  .move-slider-ruby {
-     width: auto;
+     width: 100%;
      overflow: hidden;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
-     margin: var(--section-margin);
+     margin-top: 76px;
+     padding-bottom: 40px;
  }
 
  .move-slider-box-static {
@@ -991,6 +981,7 @@
      height: 350px;
      min-width: 350px;
      border-radius: 10px;
+     padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -1145,10 +1136,8 @@
  }
 
  .card-simple {
-     margin: var(--section-margin);
+     max-width: var(--course-max-width);
-     display: flex;
+     margin: 70px auto 70px auto;
-     justify-content: center;
-     align-items: center;
  }
 
  .card-easy {
@@ -1156,7 +1145,7 @@
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
-     max-width: var(--course-max-width);
+     margin: 20px;
  }
 
  .card-easy-left {
@@ -1383,6 +1372,9 @@
 
  }
 
+
+
+
  .practice-cards-container * {
      margin: 0;
      padding: 0;
@@ -1399,8 +1391,11 @@
      align-items: flex-start;
  }
 
- .practice-container-parent {
+ .practice-container {
-     margin: var(--section-margin);
+     max-width: 1200px;
+     width: 100%;
+     margin: 0 auto;
+     padding: 0 20px;
  }
 
  .practice-container-box {
@@ -1450,6 +1445,7 @@
  }
 
  .practice-cards-wrapper {
+     margin: 30px 0;
      display: flex;
      height: 380px;
      border-radius: 12px;
@@ -1546,6 +1542,7 @@
      justify-content: center;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
+     padding: 20px;
      background: transparent;
      flex-shrink: 0;
  }
@@ -1652,10 +1649,10 @@
  }
 
  .practice-cta-btn {
-     padding: 10px;
      margin-top: 16px;
      background-color: #111827;
      color: white;
+     padding: 10px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
@@ -1691,27 +1688,6 @@
      transform: translateY(-2px);
  }
 
- .mobile-slide-menu {
-     position: fixed;
-     top: 0;
-     right: -100%;
-     width: 300px;
-     height: 100vh;
-     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 242, 247, 0.9));
-     backdrop-filter: blur(20px);
-     border-left: 1px solid rgba(255, 255, 255, 0.3);
-     z-index: 99;
-     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-     box-shadow: -20px 0 40px rgba(0, 0, 0, 0.15);
-     display: flex;
-     flex-direction: column;
-     padding: 80px 0 40px 0;
-     display: none;
- }
-
- .mobile-slide-menu.active {
-     right: 0;
- }
 
  .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
      opacity: 1;
@@ -1774,10 +1750,19 @@
  }
 
  @media (max-width: 1024px) {
-     .stat-item {
+     .stats-grid {
-         min-height: 100px;
+         grid-template-columns: repeat(3, 1fr);
+         gap: 15px;
      }
 
+     .stat-item {
+         min-height: 100px;
+         padding: 15px 8px;
+     }
+
+     .our-numbers {
+         padding: 40px 20px;
+     }
 
      .our-numbers h2 {
          font-size: 2rem;
@@ -1785,7 +1770,6 @@
      }
 
      .stats-grid {
-         min-width: var(--course-max-width);
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
@@ -1796,6 +1780,7 @@
 
      .stat-item {
          min-height: 110px;
+         padding: 20px;
      }
 
      .mnc h2 {
@@ -1811,21 +1796,19 @@
  }
 
  @media (max-width: 768px) {
-     .practice-container-parent {
+     .practice-container {
          display: none;
      }
 
-     .stats-grid {
-         min-width: 90%;
-     }
-
      .mnc-box {
          display: flex;
          align-items: center;
          max-width: 90%;
+         padding: 20px;
      }
 
      .slide1r-container {
+         padding: 20px;
          width: 90%;
      }
 
@@ -1835,18 +1818,12 @@
      }
 
      .container {
+         padding: 20px;
          width: 90%;
      }
 
      .move-slider-container {
-         width: 90%;
+         padding: 20px;
-     }
-
-     .move-slider-ruby {
-         width: auto;
-     }
-
-     .card-simple {
          width: 90%;
      }
 
@@ -1856,7 +1833,8 @@
      }
 
      .move-slider-box-static {
-         min-width: 100%;
+         padding: 20px;
+         min-width: 90%;
      }
 
      .card-simple {
@@ -1921,6 +1899,10 @@
          max-height: 100%;
      }
 
+     .our-numbers {
+         margin: 0 auto 0 auto;
+     }
+
      .corces-s {
          margin: 0px 0;
      }
@@ -1930,7 +1912,7 @@
      }
 
      .logo {
-         margin-left: 15px;
+         margin-left: 8px;
      }
 
      .slide1r-container {
@@ -2020,7 +2002,6 @@
 
  @media (max-width: 480px) {
      .stats-grid {
-         max-width: 90%;
          grid-template-columns: 1fr;
          gap: 25px;
      }
@@ -2051,152 +2032,6 @@
      .next-btn {
          right: -15px;
      }
-
-     .card-add {
-         width: 95%;
-         height: 100%;
-         max-width: 100%;
-         min-height: 280px;
-     }
-
-     .cards_box {
-         margin-top: 28px;
-     }
-
-     .buttons {
-         display: none !important;
-     }
-
-     .mobile-hamburger {
-         display: flex !important;
-         flex-direction: column;
-         cursor: pointer;
-         padding: 10px;
-         padding-right: 15px;
-     }
-
-     .mobile-hamburger:hover {
-         transform: scale(1.05);
-         background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1));
-     }
-
-     .hamburger-line {
-         width: 26px;
-         height: 3px;
-         background: linear-gradient(135deg, #667eea, #764ba2);
-         margin: 3px 0;
-         border-radius: 3px;
-         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-         box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
-     }
-
-     .mobile-hamburger.active .hamburger-line:nth-child(1) {
-         transform: rotate(45deg) translate(6px, 6px);
-         background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-     }
-
-     .mobile-hamburger.active .hamburger-line:nth-child(2) {
-         opacity: 0;
-         transform: translateX(20px);
-     }
-
-     .mobile-hamburger.active .hamburger-line:nth-child(3) {
-         transform: rotate(-45deg) translate(8px, -8px);
-         background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-     }
-
-     .mobile-menu-overlay {
-         position: fixed;
-         top: 0;
-         left: 0;
-         width: 100vw;
-         height: 100vh;
-         background: rgba(0, 0, 0, 0.6);
-         backdrop-filter: blur(8px);
-         z-index: 20;
-         opacity: 0;
-         visibility: hidden;
-         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-     }
-
-     .mobile-menu-overlay.active {
-         opacity: 1;
-         visibility: visible;
-     }
-
-     .mobile-menu-item {
-         padding: 20px 40px;
-         border: none;
-         background: none;
-         font-size: 18px;
-         font-weight: 600;
-         color: #2d3748;
-         cursor: pointer;
-         text-align: left;
-         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-         border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-         position: relative;
-         overflow: hidden;
-         opacity: 0;
-         transform: translateX(30px);
-     }
-
-     .mobile-slide-menu {
-         display: flex;
-     }
-
-     .mobile-menu-item::before {
-         content: '';
-         position: absolute;
-         top: 0;
-         left: -100%;
-         width: 100%;
-         height: 100%;
-         background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-     }
-
-     .mobile-menu-item:hover::before {
-         left: 0;
-     }
-
-     .mobile-menu-item:hover {
-         color: #667eea;
-         transform: translateX(15px);
-     }
-
-     .mobile-menu-item:active {
-         transform: translateX(15px) scale(0.98);
-     }
-
-     .menu-close-btn {
-         position: absolute;
-         top: 20px;
-         right: 20px;
-         width: 40px;
-         height: 40px;
-         border: none;
-         background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
-         backdrop-filter: blur(10px);
-         border-radius: 50%;
-         color: #718096;
-         font-size: 24px;
-         cursor: pointer;
-         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-         display: flex;
-         align-items: center;
-         justify-content: center;
-     }
-
-     .menu-close-btn:hover {
-         background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
-         transform: rotate(90deg) scale(1.1);
-         color: #ff6b6b;
-     }
-
-     .mobile-hamburger {
-         display: none;
-     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -6,7 +6,6 @@ function goToApplay() {
     window.location.href = "/apply/";
 }
 
-
 function getInTouch() {
     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");
 }
@@ -318,12 +317,12 @@ function renderCourses(allCourses) {
             track.appendChild(courseDiv);
         });
 
-
+        // Button scrolling
         const scrollAmount = 300;
         prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
         nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
 
-
+        // Touch swipe
         let startX = 0;
         let isDragging = false;
 
@@ -433,6 +432,7 @@ setInterval(() => {
     }, 500);
 }, 5000);
 
+
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll(".footer a").forEach(link => {
         link.setAttribute("href", "/apply");
@@ -442,164 +442,3 @@ document.addEventListener("DOMContentLoaded", () => {
         link.setAttribute("href", "/apply");
     });
 });
-
-
-class ModernMobileMenu {
-    constructor() {
-        this.buttonsContainer = document.querySelector('.buttons');
-        this.hamburger = null;
-        this.mobileMenu = null;
-        this.overlay = null;
-        this.isMenuOpen = false;
-
-        this.init();
-    }
-
-    init() {
-        this.createMobileMenu();
-        this.bindEvents();
-        this.checkScreenSize();
-
-
-        window.addEventListener('resize', () => this.checkScreenSize());
-    }
-    createMobileMenu() {
-
-        this.hamburger = document.createElement('div');
-        this.hamburger.className = 'mobile-hamburger';
-        this.hamburger.innerHTML = `
-            <div class="hamburger-line"></div>
-            <div class="hamburger-line"></div>
-            <div class="hamburger-line"></div>
-        `;
-
-
-        this.overlay = document.createElement('div');
-        this.overlay.className = 'mobile-menu-overlay';
-
-
-        this.mobileMenu = document.createElement('div');
-        this.mobileMenu.className = 'mobile-slide-menu';
-
-
-        const originalButtons = this.buttonsContainer.querySelectorAll('button');
-
-
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'menu-close-btn';
-        closeBtn.innerHTML = '&times;';
-        this.mobileMenu.appendChild(closeBtn);
-
-
-        originalButtons.forEach(btn => {
-            const mobileBtn = document.createElement('button');
-            mobileBtn.className = 'mobile-menu-item';
-            mobileBtn.textContent = btn.textContent;
-            mobileBtn.onclick = () => {
-                btn.click();
-                this.closeMenu();
-            };
-            this.mobileMenu.appendChild(mobileBtn);
-        });
-
-
-        this.buttonsContainer.parentNode.insertBefore(this.hamburger, this.buttonsContainer.nextSibling);
-        document.body.appendChild(this.overlay);
-        document.body.appendChild(this.mobileMenu);
-    }
-
-    bindEvents() {
-        this.hamburger.addEventListener('click', () => this.toggleMenu());
-        this.overlay.addEventListener('click', () => this.closeMenu());
-        this.mobileMenu.querySelector('.menu-close-btn').addEventListener('click', () => this.closeMenu());
-
-
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape' && this.isMenuOpen) {
-                this.closeMenu();
-            }
-        });
-    }
-
-    toggleMenu() {
-        this.isMenuOpen ? this.closeMenu() : this.openMenu();
-    }
-
-    openMenu() {
-        this.isMenuOpen = true;
-        this.hamburger.classList.add('active');
-        this.overlay.classList.add('active');
-        this.mobileMenu.classList.add('active');
-        document.body.style.overflow = 'hidden';
-
-
-        const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
-        items.forEach((item, index) => {
-            setTimeout(() => {
-                item.style.opacity = '1';
-                item.style.transform = 'translateX(0)';
-            }, (index + 1) * 100);
-        });
-    }
-
-    closeMenu() {
-        this.isMenuOpen = false;
-        this.hamburger.classList.remove('active');
-        this.overlay.classList.remove('active');
-        this.mobileMenu.classList.remove('active');
-        document.body.style.overflow = '';
-
-
-        const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
-        items.forEach(item => {
-            item.style.opacity = '0';
-            item.style.transform = 'translateX(30px)';
-        });
-    }
-
-    checkScreenSize() {
-        if (window.innerWidth <= 480) {
-            this.hamburger.style.display = 'flex';
-        } else {
-            this.hamburger.style.display = 'none';
-            this.closeMenu();
-        }
-    }
-
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => new ModernMobileMenu());
-} else {
-    new ModernMobileMenu();
-}
-
-document.addEventListener("DOMContentLoaded", () => {
-    const counters = document.querySelectorAll(".stat-number");
-
-    const animateCounter = (el, target) => {
-        let current = 0;
-        const step = Math.ceil(target / 50);
-        const interval = setInterval(() => {
-            current += step;
-            if (current >= target) {
-                current = target;
-                clearInterval(interval);
-            }
-            el.innerHTML = current + "<span class='highlight'>+</span>";
-        }, 20);
-    };
-
-    const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const el = entry.target;
-                const finalNumber = parseInt(el.textContent);
-                animateCounter(el, finalNumber);
-                observer.unobserve(el);
-            }
-        });
-    }, { threshold: 0.3 });
-
-    counters.forEach(counter => observer.observe(counter));
-});