index.html

@@ -163,8 +163,7 @@
             <div class="logo">KodePilot</div>
             <input type="text" class="search" placeholder="Search Opportunities">
             <div class="buttons">
-                <!-- <a href="/login">Log in</a> -->
+                <a href="/login">Log in</a>
-                <button class="login_first" onclick="goToLogin()">Login</button>
                 <button class="business" onclick="getInTouch()">Let's Talk</button>
                 <button class="login" onclick="goToApplay()">Request a call</button>
             </div>
@@ -269,7 +268,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">
@@ -457,7 +456,6 @@
                 </div>
             </div>
         </section>
-
         <section class="move-slider-ruby">
             <div class="move-slider-container">
                 <div class="move-slider-box-static">
@@ -540,8 +538,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">
@@ -639,6 +637,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">
@@ -672,11 +679,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">
@@ -779,9 +784,9 @@
             </div>
 
             <div class="footer-bottom">
-                <div>
+                <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 <a>KodePilot</a> - All
+                        Copyright © 2025 <a href="#" style="color: #120ee2;">KodePilot</a> - All
                         rights
                         reserved.
                     </p>

main.css

@@ -1,7 +1,6 @@
  :root {
      --course-max-width: 1200px;
      --course-max-width-small: 1000px;
-     --section-margin: 30px 20px;
  }
 
  @media (max-width: 1360px) {
@@ -43,8 +42,7 @@
      border-bottom: 1px solid #eee;
      position: fixed;
      width: 100%;
-     top: 0;
+     height: 56px;
-     height: 60px;
      z-index: 9999;
  }
 
@@ -92,20 +90,18 @@
  }
 
  .business {
-     background: #FFD700;
+     background: #ffcc00;
-     color: #030101;
  }
 
  .login {
-     background: #1E90FF;
+     background: #007bff;
      color: #fff;
  }
 
  .hero {
      text-align: start;
-     margin: var(--section-margin);
+     padding: 50px 20px;
      line-height: 20px;
-     padding-top: 11px;
  }
 
  .hero h1 {
@@ -134,7 +130,6 @@
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
-     margin-top: 50px;
  }
 
  .cards_box {
@@ -169,7 +164,6 @@
      display: block;
      margin-top: 10px;
      font-weight: normal;
-     max-width: 120px;
  }
 
  .green {
@@ -222,7 +216,7 @@
  }
 
  .users {
-     margin: var(--section-margin);
+     padding: 0px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -319,7 +313,7 @@
  }
 
  .mnc {
-     margin: var(--section-margin);
+     padding: 40px 20px;
      display: flex;
      justify-content: center;
      align-items: center;
@@ -384,10 +378,8 @@
  }
 
  .our-numbers {
-     width: 100%;
+     max-width: var(--course-max-width);
-     display: flex;
+     margin: 50px auto 50px auto;
-     justify-content: center;
-     align-items: center;
  }
 
  .our-numbers h2 {
@@ -399,19 +391,17 @@
  }
 
  .stats-grid {
-     margin: var(--section-margin);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
-     min-width: var(--course-max-width);
      gap: 20px;
      justify-items: center;
      align-items: stretch;
-     max-width: 90%;
  }
 
  .stat-item {
      background: HSL(0, 0%, 96.5%);
      text-align: center;
+     padding: 20px 10px;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
@@ -496,7 +486,7 @@
 
  .subtitle {
      color: #6b7280;
-     line-height: 22px;
+     line-height: 0px;
  }
 
  .arrow-icon {
@@ -560,17 +550,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 +571,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;
  }
 
@@ -983,14 +964,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 {
@@ -998,6 +980,7 @@
      height: 350px;
      min-width: 350px;
      border-radius: 10px;
+     padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
@@ -1152,10 +1135,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 {
@@ -1163,7 +1144,7 @@
      background-color: #F6F8FA;
      border-radius: 20px;
      overflow: hidden;
-     max-width: var(--course-max-width);
+     margin: 20px;
  }
 
  .card-easy-left {
@@ -1409,8 +1390,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 {
@@ -1557,6 +1541,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;
  }
@@ -1663,10 +1648,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;
@@ -1771,8 +1756,12 @@
 
      .stat-item {
          min-height: 100px;
+         padding: 15px 8px;
      }
 
+     .our-numbers {
+         padding: 40px 20px;
+     }
 
      .our-numbers h2 {
          font-size: 2rem;
@@ -1790,6 +1779,7 @@
 
      .stat-item {
          min-height: 110px;
+         padding: 20px;
      }
 
      .mnc h2 {
@@ -1805,7 +1795,7 @@
  }
 
  @media (max-width: 768px) {
-     .practice-container-parent {
+     .practice-container {
          display: none;
      }
 
@@ -1813,9 +1803,11 @@
          display: flex;
          align-items: center;
          max-width: 90%;
+         padding: 20px;
      }
 
      .slide1r-container {
+         padding: 20px;
          width: 90%;
      }
 
@@ -1825,28 +1817,23 @@
      }
 
      .container {
+         padding: 20px;
          width: 90%;
      }
 
      .move-slider-container {
+         padding: 20px;
          width: 90%;
      }
 
-     .move-slider-ruby {
-         width: auto;
-     }
-
-     .card-simple {
-         min-width: 90%;
-     }
-
      .move-slider-animation-box {
          margin-top: 393px;
          margin-right: 0px;
      }
 
      .move-slider-box-static {
-         min-width: 100%;
+         padding: 20px;
+         min-width: 90%;
      }
 
      .card-simple {
@@ -1911,6 +1898,10 @@
          max-height: 100%;
      }
 
+     .our-numbers {
+         margin: 0 auto 0 auto;
+     }
+
      .corces-s {
          margin: 0px 0;
      }
@@ -2010,7 +2001,6 @@
 
  @media (max-width: 480px) {
      .stats-grid {
-         max-width: 90%;
          grid-template-columns: 1fr;
          gap: 25px;
      }
@@ -2041,13 +2031,6 @@
      .next-btn {
          right: -15px;
      }
-
-     .card-add {
-         width: 95%;
-         height: 100%;
-         max-width: 100%;
-         min-height: 280px;
-     }
  }
 
  @keyframes fadeInUp {

main.js

@@ -1,7 +1,3 @@
-function goToLogin() {
-    window.location.href = "/login";
-}
-
 function goToApplay() {
     window.location.href = "/apply/";
 }
@@ -432,6 +428,7 @@ setInterval(() => {
     }, 500);
 }, 5000);
 
+
 document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll(".footer a").forEach(link => {
         link.setAttribute("href", "/apply");