Merge pull request 'test' (#35) from test into main

Reviewed-on: #35

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;
@@ -184,51 +185,6 @@
                             <strong class="descContainer"> Just Went Kodepilot!</strong>
                         </span>
                     </button>
-                    <style>
-                        .nameContainer,
-                        .descContainer {
-                            transition: opacity 0.5s;
-                        }
-
-                        .fade-out {
-                            opacity: 0;
-                        }
-
-                        .fade-in {
-                            opacity: 1;
-                        }
-                    </style>
-                    <script>
-                        const data = [
-                            { name: "Ben", text: "Just Went HCL!" },
-                            { name: "Rakul", text: "Just Went Accenture!" },
-                            { name: "Anjali", text: "Joined a Ebmpapst!" },
-                            { name: "Sneha", text: "joined a Infosys!" },
-                            { name: "Amit", text: "Just Went JBL!" },
-                            { name: "Vikram", text: "Just Went UST!" },
-                            { name: "Priya", text: "Just Went Serviceplaingroup!" }
-                        ];
-                        let index1 = 0;
-                        const nameEl1 = document.querySelector(".nameContainer");
-                        const descEl1 = document.querySelector(".descContainer");
-                        setInterval(() => {
-                            nameEl1.classList.add("fade-out");
-                            descEl1.classList.add("fade-out");
-                            setTimeout(() => {
-                                index1 = (index1 + 1) % data.length;
-                                nameEl1.textContent = data[index1].name;
-                                descEl1.textContent = " " + data[index1].text;
-                                nameEl1.classList.remove("fade-out");
-                                descEl1.classList.remove("fade-out");
-                                nameEl1.classList.add("fade-in");
-                                descEl1.classList.add("fade-in");
-                                setTimeout(() => {
-                                    nameEl1.classList.remove("fade-in");
-                                    descEl1.classList.remove("fade-in");
-                                }, 500);
-                            }, 500);
-                        }, 5000);
-                    </script>
                 </div>
                 <div class="cards">
                     <div class="card green">Internships<br><small>Gain Practical Experience</small></div>
@@ -316,7 +272,7 @@
             <div class="slide1r-container">
                 <div class="slide1r-wrapper">
                     <div class="slide1r-track" id="slide1rTrack">
-                        <!-- Slide 1 -->
+
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
@@ -338,7 +294,7 @@
                             </div>
                         </div>
 
-                        <!-- Slide 2 -->
+
                         <div class="slide1">
                             <div class="slide1-box">
                                 <div class="image-container">
@@ -583,7 +539,7 @@
             </div>
         </section>
         <section>
-            <!-- <div class="practice-cards-container"> -->
+
             <div class="practice-container">
                 <div class="practice-container-box">
                     <div class="practice-container-text-box">
@@ -609,7 +565,7 @@
                             </div>
                         </div>
 
-                        <!-- Interview Preparation Card -->
+
                         <div class="practice-card">
                             <div class="practice-card-content">
                                 <div>
@@ -626,7 +582,7 @@
                             </div>
                         </div>
 
-                        <!-- Projects Card -->
+
                         <div class="practice-card">
                             <div class="practice-card-content">
                                 <div>
@@ -643,7 +599,7 @@
                             </div>
                         </div>
 
-                        <!-- Skill Based Assessments Card -->
+
                         <div class="practice-card">
                             <div class="practice-card-content">
                                 <div>
@@ -662,11 +618,8 @@
                     </div>
                 </div>
             </div>
-
         </section>
 
-
-
         <section class="card-simple">
             <div class="card-easy">
                 <div class="card-easy-left">
@@ -733,11 +686,11 @@
             <div class="footer-container">
                 <div class="footer-section company-section">
                     <div class="logo" style="text-align: left; margin-left: 0; padding-left: 0;">KodePilot</div>
-                    <p class="tagline">Built with <span class="heart">❤</span>  in India for the world</p>
+                    <p class="tagline">Built with <span class="heart">❤</span> in India for the world</p>
                     <div class="contact-info">
                         <h4>Stay Connected</h4>
 
-                        <!-- <div style="margin-bottom: 20px; line-height: 23px;"> -->
+
                         <div style="margin-bottom: 20px; line-height: 23px; margin-left: -27px;">
 
                             <div class="contact-item">

main.css

@@ -3,6 +3,30 @@
      --course-max-width-small: 1000px;
  }
 
+ @media (max-width: 1360px) {
+     :root {
+         --course-max-width: 1000px;
+         --course-max-width-small: 800px;
+     }
+ }
+
+ @media (max-width: 1000px) {
+     :root {
+         --course-max-width: 800px;
+         --course-max-width-small: 600px;
+     }
+ }
+
+ @media (max-width: 680px) {
+     .search {
+         display: none;
+     }
+
+     .hero p {
+         width: 400px;
+     }
+ }
+
  body {
      margin: 0;
      font-family: Arial, sans-serif;
@@ -422,71 +446,13 @@
      width: 100%;
  }
 
- @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;
-         margin-bottom: 40px;
-     }
-
-     .stats-grid {
-         grid-template-columns: repeat(2, 1fr);
-         gap: 30px;
-     }
-
-     .stat-number {
-         font-size: 2.5rem;
-     }
-
-     .stat-item {
-         min-height: 110px;
-         padding: 20px;
-     }
- }
-
- @media (max-width: 480px) {
-     .stats-grid {
-         grid-template-columns: 1fr;
-         gap: 25px;
-     }
-
-     .stat-number {
-         font-size: 2.2rem;
-     }
- }
-
- @keyframes fadeInUp {
-     from {
-         opacity: 0;
-         transform: translateY(30px);
-     }
-
-     to {
-         opacity: 1;
-         transform: translateY(0);
-     }
- }
-
  .stat-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
  }
 
- /* when visible */
+
  .stat-item.visible {
      opacity: 1;
      transform: translateY(0);
@@ -665,7 +631,7 @@
      transform: scale(1.05);
  }
 
- /* Image overlays */
+
  .image-overlay {
      position: absolute;
      bottom: 0;
@@ -773,90 +739,6 @@
      transform: scale(1.1);
  }
 
- @media (max-width: 768px) {
-     .slide1r-container {
-         padding: 20px;
-     }
-
-     .slide1-box {
-         flex-direction: column;
-         gap: 15px;
-         height: auto;
-     }
-
-     .image-container {
-         height: 250px;
-     }
-
-     .nav-button {
-         display: none;
-         width: 50px;
-         height: 50px;
-         font-size: 18px;
-     }
-
-     .prev-btn {
-         left: -20px;
-     }
-
-     .next-btn {
-         right: -20px;
-     }
-
-     .image-overlay {
-         padding: 15px;
-     }
-
-     .image-overlay h4 {
-         font-size: 15px;
-     }
-
-     .image-overlay p {
-         font-size: 12px;
-     }
-
-     .practice-container {
-         display: none;
-     }
-
-     .course-section {
-         max-width: 90%;
-     }
-
-     .corces {
-         display: flex;
-         flex-direction: column;
-         align-items: center;
-         justify-content: flex-start;
-         width: 90%;
-     }
- }
-
- @media (max-width: 480px) {
-     .slide1-box {
-         gap: 12px;
-         padding: 5px;
-     }
-
-     .image-container {
-         height: 200px;
-     }
-
-     .nav-button {
-         width: 45px;
-         height: 45px;
-         font-size: 16px;
-     }
-
-     .prev-btn {
-         left: -15px;
-     }
-
-     .next-btn {
-         right: -15px;
-     }
- }
-
  @keyframes fadeIn {
      to {
          opacity: 1;
@@ -1081,27 +963,6 @@
      margin-left: 5px;
  }
 
- @media (max-width: 768px) {
-     .footer-container {
-         grid-template-columns: 1fr;
-         gap: 30px;
-     }
-
-     .newsletter-form {
-         flex-direction: column;
-     }
-
-     .newsletter-form input,
-     .newsletter-form button {
-         border-radius: 6px;
-         margin-bottom: 10px;
-     }
-
-     .action-buttons {
-         flex-direction: column;
-     }
- }
-
  .move-slider-ruby {
      width: 100%;
      overflow: hidden;
@@ -1510,37 +1371,9 @@
 
  }
 
- @media (max-width: 1360px) {
-     :root {
-         --course-max-width: 1000px;
-         --course-max-width-small: 800px;
-     }
- }
 
- @media (max-width: 1000px) {
-     :root {
-         --course-max-width: 800px;
-         --course-max-width-small: 600px;
-     }
 
-     .mnc h2 {
-         display: none;
-     }
- }
 
- @media (max-width: 680px) {
-     .search {
-         display: none;
-     }
-
-     .hero p {
-         width: 400px;
-     }
- }
-
- /*----------------------------------------------------------------------------------------------------------------------*/
-
- /* Practice Cards Component CSS - Unique class names to prevent conflicts */
  .practice-cards-container * {
      margin: 0;
      padding: 0;
@@ -1751,7 +1584,7 @@
      color: white;
  }
 
- /* Icon animation on hover */
+
  .practice-cards-wrapper:hover .practice-card:hover .practice-card-icon {
      transform: scale(1.05) rotate(3deg);
  }
@@ -1803,7 +1636,7 @@
      transition: transform 0.5s ease;
  }
 
- /* Text animation on hover */
+
  .practice-cards-wrapper:hover .practice-card:hover h3 {
      transform: translateY(-2px);
  }
@@ -1854,13 +1687,13 @@
      transform: translateY(-2px);
  }
 
- /* Show CTA button only on hovered card */
+
  .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
      opacity: 1;
      transform: translateY(0);
  }
 
- /* Subtle overlay effect */
+
  .practice-card::after {
      content: '';
      position: absolute;
@@ -1878,10 +1711,10 @@
      opacity: 1;
  }
 
- /* REMOVED: Default expanded state for first card */
- /* Now all cards start equal and only expand on hover */
 
- /* Show SVG and CTA button only on hover */
+
+
+
  .practice-cards-wrapper .practice-card .practice-card-svg {
      width: 0;
      opacity: 0;
@@ -1902,7 +1735,59 @@
      transform: translateY(0);
  }
 
- /* Mobile responsiveness */
+ .nameContainer,
+ .descContainer {
+     transition: opacity 0.5s;
+ }
+
+ .fade-out {
+     opacity: 0;
+ }
+
+ .fade-in {
+     opacity: 1;
+ }
+
+ @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;
+         margin-bottom: 40px;
+     }
+
+     .stats-grid {
+         grid-template-columns: repeat(2, 1fr);
+         gap: 30px;
+     }
+
+     .stat-number {
+         font-size: 2.5rem;
+     }
+
+     .stat-item {
+         min-height: 110px;
+         padding: 20px;
+     }
+
+     .mnc h2 {
+         display: none;
+     }
+ }
+
+
  @media (max-width: 992px) {
      .practice-cards-container {
          display: none;
@@ -2026,6 +1911,136 @@
      }
 
      .logo {
-         margin-left: 14px;
+         margin-left: 8px;
+     }
+
+     .slide1r-container {
+         padding: 20px;
+     }
+
+     .slide1-box {
+         flex-direction: column;
+         gap: 15px;
+         height: auto;
+     }
+
+     .image-container {
+         height: 250px;
+     }
+
+     .nav-button {
+         display: none;
+         width: 50px;
+         height: 50px;
+         font-size: 18px;
+     }
+
+     .prev-btn {
+         left: -20px;
+     }
+
+     .next-btn {
+         right: -20px;
+     }
+
+     .image-overlay {
+         padding: 15px;
+     }
+
+     .image-overlay h4 {
+         font-size: 15px;
+     }
+
+     .image-overlay p {
+         font-size: 12px;
+     }
+
+     .practice-container {
+         display: none;
+     }
+
+     .course-section {
+         max-width: 90%;
+     }
+
+     .corces {
+         display: flex;
+         flex-direction: column;
+         align-items: center;
+         justify-content: flex-start;
+         width: 90%;
+     }
+
+     .card-festivals {
+         display: none;
+     }
+
+     .move-slider-ruby {
+         margin-top: 25px;
+     }
+
+     .footer-container {
+         grid-template-columns: 1fr;
+         gap: 30px;
+     }
+
+     .newsletter-form {
+         flex-direction: column;
+     }
+
+     .newsletter-form input,
+     .newsletter-form button {
+         border-radius: 6px;
+         margin-bottom: 10px;
+     }
+
+     .action-buttons {
+         flex-direction: column;
+     }
+ }
+
+ @media (max-width: 480px) {
+     .stats-grid {
+         grid-template-columns: 1fr;
+         gap: 25px;
+     }
+
+     .stat-number {
+         font-size: 2.2rem;
+     }
+
+     .slide1-box {
+         gap: 12px;
+         padding: 5px;
+     }
+
+     .image-container {
+         height: 200px;
+     }
+
+     .nav-button {
+         width: 45px;
+         height: 45px;
+         font-size: 16px;
+     }
+
+     .prev-btn {
+         left: -15px;
+     }
+
+     .next-btn {
+         right: -15px;
+     }
+ }
+
+ @keyframes fadeInUp {
+     from {
+         opacity: 0;
+         transform: translateY(30px);
+     }
+
+     to {
+         opacity: 1;
+         transform: translateY(0);
      }
  }

main.js

@@ -194,31 +194,6 @@ function getInTouch() {
     new Slide1rSlider();
 })();
 
-document.addEventListener("DOMContentLoaded", () => {
-    const track = document.querySelector(".move-slider-track");
-    const boxes = Array.from(track.children);
-
-    boxes.forEach(box => {
-        const clone = box.cloneNode(true);
-        track.appendChild(clone);
-    });
-
-    let position = 0;
-    const speed = 1;
-
-    function animate() {
-        position -= speed;
-        if (Math.abs(position) >= track.scrollWidth / 2) {
-            position = 0;
-        }
-        track.style.transform = `translateX(${position}px)`;
-        requestAnimationFrame(animate);
-    }
-
-    animate();
-});
-
-
 const statItems = document.querySelectorAll('.stat-item');
 
 const observer = new IntersectionObserver((entries) => {
@@ -397,46 +372,69 @@ function stepScroll() {
 
 setInterval(stepScroll, 3000);
 
-
-
-/*--------------------------------------------------------*/
-
 document.addEventListener('DOMContentLoaded', function () {
     const cards = document.querySelectorAll('.practice-card');
     let activeCard = document.querySelector('.practice-card.active');
     let lastActiveCard = activeCard;
 
-    // Function to set active card
     function setActiveCard(card) {
-        // Remove active class from all cards
         cards.forEach(c => {
             c.classList.remove('active');
         });
 
-        // Add active class to the specified card
         card.classList.add('active');
 
-        // Update last active card
         lastActiveCard = card;
     }
 
-    // Set first card as active by default if none is active
     if (!activeCard && cards.length > 0) {
         setActiveCard(cards[0]);
     }
 
-    // Add click event listeners (better for mobile and accessibility)
     cards.forEach(card => {
         card.addEventListener('click', function () {
             setActiveCard(this);
         });
     });
-
-    // Optional: Add hover effect for desktop (complementary to click)
-    cards.forEach(card => {
-        card.addEventListener('mouseenter', function () {
-            // Only activate on hover if you want that behavior
-            // setActiveCard(this);
-        });
-    });
 });
+
+const data = [
+    { name: "Ben", text: "Just Went HCL!" },
+    { name: "Rakul", text: "Just Went Accenture!" },
+    { name: "Anjali", text: "Joined a Ebmpapst!" },
+    { name: "Sneha", text: "joined a Infosys!" },
+    { name: "Amit", text: "Just Went JBL!" },
+    { name: "Vikram", text: "Just Went UST!" },
+    { name: "Priya", text: "Just Went Serviceplaingroup!" }
+];
+let index1 = 0;
+const nameEl1 = document.querySelector(".nameContainer");
+const descEl1 = document.querySelector(".descContainer");
+setInterval(() => {
+    nameEl1.classList.add("fade-out");
+    descEl1.classList.add("fade-out");
+    setTimeout(() => {
+        index1 = (index1 + 1) % data.length;
+        nameEl1.textContent = data[index1].name;
+        descEl1.textContent = " " + data[index1].text;
+        nameEl1.classList.remove("fade-out");
+        descEl1.classList.remove("fade-out");
+        nameEl1.classList.add("fade-in");
+        descEl1.classList.add("fade-in");
+        setTimeout(() => {
+            nameEl1.classList.remove("fade-in");
+            descEl1.classList.remove("fade-in");
+        }, 500);
+    }, 500);
+}, 5000);
+
+
+document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".footer a").forEach(link => {
+        link.setAttribute("href", "/apply");
+    });
+
+    document.querySelectorAll(".practice-container a").forEach(link => {
+        link.setAttribute("href", "/apply");
+    });
+});