Login Button UI changed

Merge pull request 'test' (#35 ) from test into main
Reviewed-on: #35
2025-09-29 15:41:29 +05:30 · 2025-09-29 04:18:57 +00:00 · 2025-09-29 00:17:51 +05:30 · 2025-09-27 19:13:46 +05:30 · 2025-09-27 19:11:26 +05:30 · 2025-09-27 04:57:55 +05:30
3 changed files with 285 additions and 305 deletions
--- a/index.html
+++ b/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;
@ -162,7 +163,8 @@
            <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>
@ -184,51 +186,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 +273,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 +295,7 @@
                            </div>
                        </div>

-                        <!-- Slide 2 -->
+
                        <div class="slide1">
                            <div class="slide1-box">
                                <div class="image-container">
@ -583,7 +540,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 +566,7 @@
                            </div>
                        </div>

-                        <!-- Interview Preparation Card -->
+
                        <div class="practice-card">
                            <div class="practice-card-content">
                                <div>
@ -626,7 +583,7 @@
                            </div>
                        </div>

-                        <!-- Projects Card -->
+
                        <div class="practice-card">
                            <div class="practice-card-content">
                                <div>
@ -643,7 +600,7 @@
                            </div>
                        </div>

-                        <!-- Skill Based Assessments Card -->
+
                        <div class="practice-card">
                            <div class="practice-card-content">
                                <div>
@ -662,11 +619,8 @@
                    </div>
                </div>
            </div>
-
        </section>

-
-
        <section class="card-simple">
            <div class="card-easy">
                <div class="card-easy-left">
@ -733,11 +687,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">
--- a/main.css
+++ b/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;
@ -54,7 +78,7 @@
 }

 .buttons button {
-     margin-left: 10px;
+     margin-left: 2px;
     padding: 8px 15px;
     border: none;
     border-radius: 20px;
@ -66,11 +90,12 @@
 }

 .business {
-     background: #ffcc00;
+     background: #FFD700;
+       color: #030101;
 }

 .login {
-     background: #007bff;
+     background: #1E90FF;
     color: #fff;
 }

@ -422,71 +447,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 +632,7 @@
     transform: scale(1.05);
 }

- /* Image overlays */
+
 .image-overlay {
     position: absolute;
     bottom: 0;
@ -773,90 +740,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 +964,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 +1372,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;
@ -1699,7 +1533,7 @@
 }

 .practice-card-svg {
-    display: none !important;
+     display: none !important;
     width: 0;
     height: 60%;
     bottom: 0px;
@ -1751,7 +1585,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 +1637,7 @@
     transition: transform 0.5s ease;
 }

- /* Text animation on hover */
+
 .practice-cards-wrapper:hover .practice-card:hover h3 {
     transform: translateY(-2px);
 }
@ -1854,13 +1688,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 +1712,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 +1736,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;
@ -2020,4 +1906,142 @@
     .corces-s {
         margin: 0px 0;
     }
+
+     .buttons {
+         margin-right: 8px;
+     }
+
+     .logo {
+         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);
+     }
 }
--- a/main.js
+++ b/main.js
@ -1,3 +1,7 @@
+function goToLogin() {
+    window.location.href = "/login";
+}
+
 function goToApplay() {
    window.location.href = "/apply/";
 }
@ -194,31 +198,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 +376,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");
    });
 });
Author	SHA1	Message	Date
rajesh.n	3f4351d303	Login Button UI changed	2025-09-29 15:41:29 +05:30
dhanush.s	b37cad17d5	Merge pull request 'test' (#35 ) from test into main Reviewed-on: #35	2025-09-29 04:18:57 +00:00
dhanush.s	b6c3c68b3c	fix: footer and hover slider liks added	2025-09-29 00:17:51 +05:30
dhanush.s	5686b8c4a2	refactor: css	2025-09-27 19:13:46 +05:30
dhanush.s	a7bce5a100	refactor: !	2025-09-27 19:11:26 +05:30
dhanush.s	db88a9c35f	fix: nav fix	2025-09-27 04:57:55 +05:30
dhanush.s	32e6cd75a5	fix: nav fix	2025-09-27 04:53:34 +05:30
rajesh.n	5eb3a7918d	Merge pull request 'KodePilot name changed' (#33 ) from rajesh into main Reviewed-on: #33	2025-09-26 23:23:04 +00:00