fix: image_fixed

index.html

@@ -8,7 +8,6 @@
     <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;
@@ -269,7 +268,7 @@
             </div>
         </section>
 
-        <section id="slider">
+        <section class="slider" id="slider">
             <div class="slide1r-container">
                 <div class="slide1r-wrapper">
                     <div class="slide1r-track" id="slide1rTrack">
@@ -457,6 +456,7 @@
                 </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,15 +638,6 @@
                 </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">
@@ -680,9 +671,11 @@
                 </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">
@@ -783,15 +776,12 @@
                     </ul>
                 </div>
             </div>
-
             <div class="footer-bottom">
-                <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
+                <p>
-                    <p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
+                    Copyright © 2025
-                        Copyright © 2025 <a href="#" style="color: #120ee2;">KodePilot</a> - All
+                    <a href="https://kodepilot.in" target="_blank">KodePilot</a>
-                        rights
+                    - All rights reserved.
-                        reserved.
+                </p>
-                    </p>
-                </div>
             </div>
         </footer>
     </div>

main.css

@@ -1,6 +1,7 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
+     --section-margin: 60px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -42,8 +43,9 @@
      border-bottom: 1px solid #eee;
      position: fixed;
      width: 100%;
-     height: 56px;
+     top: 0;
-     z-index: 9999;
+     height: 60px;
+     z-index: 20;
  }
 
  .logo {
@@ -78,7 +80,7 @@
  }
 
  .buttons button {
-     margin-left: 2px;
+     margin-left: 15px;
      padding: 8px 15px;
      border: none;
      border-radius: 20px;
@@ -91,7 +93,7 @@
 
  .business {
      background: #FFD700;
-       color: #030101;
+     color: #030101;
  }
 
  .login {
@@ -101,8 +103,9 @@
 
  .hero {
      text-align: start;
-     padding: 50px 20px;
+     margin: var(--section-margin);
-     line-height: 20px;
+     padding-top: 11px;
+     line-height: 37px;
  }
 
  .hero h1 {
@@ -131,6 +134,7 @@
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
+     margin-top: 50px;
  }
 
  .cards_box {
@@ -163,8 +167,10 @@
 
  .card small {
      display: block;
-     margin-top: 10px;
+     margin-top: -2px;
      font-weight: normal;
+     max-width: 142px;
+     line-height: 23px;
  }
 
  .green {
@@ -176,16 +182,16 @@
  }
 
  .orange {
-     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;
  }
 
  .blue {
-     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;
@@ -217,7 +223,7 @@
  }
 
  .users {
-     padding: 0px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -314,7 +320,7 @@
  }
 
  .mnc {
-     padding: 40px 20px;
+     margin: var(--section-margin);
      display: flex;
      justify-content: center;
      align-items: center;
@@ -379,8 +385,10 @@
  }
 
  .our-numbers {
-     max-width: var(--course-max-width);
+     display: flex;
-     margin: 50px auto 50px auto;
+     justify-content: center;
+     align-items: center;
+     margin: var(--section-margin);
  }
 
  .our-numbers h2 {
@@ -394,15 +402,16 @@
  .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;
@@ -487,7 +496,7 @@
 
  .subtitle {
      color: #6b7280;
-     line-height: 0px;
+     line-height: 22px;
  }
 
  .arrow-icon {
@@ -502,7 +511,7 @@
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
-     min-width: 100px;
+     max-width: var(--course-max-width);
  }
 
  .card-add {
@@ -551,6 +560,17 @@
      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;
@@ -572,12 +592,10 @@
  }
 
  .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;
  }
 
@@ -679,7 +697,7 @@
      font-size: 20px;
      color: #333;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-     z-index: 10;
+     z-index: 1;
  }
 
  .nav-button:hover {
@@ -791,6 +809,25 @@
      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;
  }
@@ -928,32 +965,6 @@
      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;
@@ -965,15 +976,14 @@
  }
 
  .move-slider-ruby {
-     width: 100%;
+     width: auto;
      overflow: hidden;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
-     margin-top: 76px;
+     margin: var(--section-margin);
-     padding-bottom: 40px;
  }
 
  .move-slider-box-static {
@@ -981,7 +991,6 @@
      height: 350px;
      min-width: 350px;
      border-radius: 10px;
-     padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -1136,8 +1145,10 @@
  }
 
  .card-simple {
-     max-width: var(--course-max-width);
+     margin: var(--section-margin);
-     margin: 70px auto 70px auto;
+     display: flex;
+     justify-content: center;
+     align-items: center;
  }
 
  .card-easy {
@@ -1145,7 +1156,7 @@
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
-     margin: 20px;
+     max-width: var(--course-max-width);
  }
 
  .card-easy-left {
@@ -1372,9 +1383,6 @@
 
  }
 
-
-
-
  .practice-cards-container * {
      margin: 0;
      padding: 0;
@@ -1391,11 +1399,8 @@
      align-items: flex-start;
  }
 
- .practice-container {
+ .practice-container-parent {
-     max-width: 1200px;
+     margin: var(--section-margin);
-     width: 100%;
-     margin: 0 auto;
-     padding: 0 20px;
  }
 
  .practice-container-box {
@@ -1445,7 +1450,6 @@
  }
 
  .practice-cards-wrapper {
-     margin: 30px 0;
      display: flex;
      height: 380px;
      border-radius: 12px;
@@ -1542,7 +1546,6 @@
      justify-content: center;
      transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
-     padding: 20px;
      background: transparent;
      flex-shrink: 0;
  }
@@ -1649,10 +1652,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;
@@ -1688,6 +1691,27 @@
      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;
@@ -1750,19 +1774,10 @@
  }
 
  @media (max-width: 1024px) {
-     .stats-grid {
-         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;
@@ -1770,6 +1785,7 @@
      }
 
      .stats-grid {
+         min-width: var(--course-max-width);
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
@@ -1780,7 +1796,6 @@
 
      .stat-item {
          min-height: 110px;
-         padding: 20px;
      }
 
      .mnc h2 {
@@ -1796,19 +1811,21 @@
  }
 
  @media (max-width: 768px) {
-     .practice-container {
+     .practice-container-parent {
          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%;
      }
 
@@ -1818,12 +1835,18 @@
      }
 
      .container {
-         padding: 20px;
          width: 90%;
      }
 
      .move-slider-container {
-         padding: 20px;
+         width: 90%;
+     }
+
+     .move-slider-ruby {
+         width: auto;
+     }
+
+     .card-simple {
          width: 90%;
      }
 
@@ -1833,8 +1856,7 @@
      }
 
      .move-slider-box-static {
-         padding: 20px;
+         min-width: 100%;
-         min-width: 90%;
      }
 
      .card-simple {
@@ -1899,10 +1921,6 @@
          max-height: 100%;
      }
 
-     .our-numbers {
-         margin: 0 auto 0 auto;
-     }
-
      .corces-s {
          margin: 0px 0;
      }
@@ -1912,7 +1930,7 @@
      }
 
      .logo {
-         margin-left: 8px;
+         margin-left: 15px;
      }
 
      .slide1r-container {
@@ -2002,6 +2020,7 @@
 
  @media (max-width: 480px) {
      .stats-grid {
+         max-width: 90%;
          grid-template-columns: 1fr;
          gap: 25px;
      }
@@ -2032,6 +2051,152 @@
      .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,6 +6,7 @@ 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");
 }
@@ -317,12 +318,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;
 
@@ -432,7 +433,6 @@ setInterval(() => {
     }, 500);
 }, 5000);
 
-
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll(".footer a").forEach(link => {
         link.setAttribute("href", "/apply");
@@ -442,3 +442,164 @@ 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));
+});