From 6b8f7e616ba25b654cbea3396fd045d83a525f96 Mon Sep 17 00:00:00 2001 From: "dhanush.s" Date: Sat, 27 Sep 2025 02:48:56 +0530 Subject: [PATCH] fix: mobile --- index.html | 207 ++++++++----- main.css | 863 +++++++++++++++++++++++++++-------------------------- main.js | 93 +++--- 3 files changed, 627 insertions(+), 536 deletions(-) diff --git a/index.html b/index.html index 8d9070b..70a46b7 100644 --- a/index.html +++ b/index.html @@ -161,10 +161,8 @@
-
+ Log in
@@ -178,11 +176,56 @@ by your dream company.

- + + +
Internships
Gain Practical Experience
@@ -475,7 +518,8 @@ "

- "The Kodepilot curriculum is laser-focused on job placement. I mastered the required skills and secured my position at GBL with confidence." + "The Kodepilot curriculum is laser-focused on job placement. I mastered the required + skills and secured my position at GBL with confidence."

@@ -496,7 +540,8 @@ "

- "After taking the QA and DevOps courses, Kodepilot made me ready for the global stage. I was immediately placed with a top-tier company: Accenture." + "After taking the QA and DevOps courses, Kodepilot made me ready for the global stage. I + was immediately placed with a top-tier company: Accenture."

@@ -516,7 +561,8 @@ "

- "Kodepilot's training in AWS and DevOps was the key to my career breakthrough. I went from learning the skills to successfully landing a role at Infosys." + "Kodepilot's training in AWS and DevOps was the key to my career breakthrough. I went + from learning the skills to successfully landing a role at Infosys."

@@ -536,77 +582,79 @@
-

Practice Coding & Ace Hiring Assessments

-

Level up your coding skills by practicing the hiring assessments of your - dream companies & ace your placement game!

- -
- -
-
-
-
💻
-

Coding Practice

-

Level up your coding skills by practicing the hiring Questions.

-
400+ Questions
-
- Start Now ➤ -
-
- Coding Practice -
+
+
+

Practice Coding & Ace Hiring Assessments

+

Level up your coding skills by practicing the hiring assessments of + your + dream companies & ace your placement game!

- - -
-
-
-
📋
-

Interview Preparation

-

Crack Top companies in just 5 days with unbelivable learning

-
20+ Companies
+
+
+
+
+
💻
+

Coding Practice

+

Level up your coding skills by practicing the hiring Questions.

+
400+ Questions
+
+ Start Now ➤
- Start Now ➤ -
-
- Coding Practice -
-
- - -
-
-
-
📂
-

Projects

-

Projects epitomize perfect synergy for success.

-
15+ Projects
+
+ Coding Practice
- Start Now ➤
-
- Coding Practice -
-
- -
-
-
-
📝
-

Skill Based Assessments

-

Assess your skills and get ahead of the curve.

-
2000+ Questions
+ +
+
+
+
📋
+

Interview Preparation

+

Crack Top companies in just 5 days with unbelivable learning

+
20+ Companies
+
+ Start Now ➤ +
+
+ Coding Practice
- Start Now ➤
-
- Coding Practice + + +
+
+
+
📂
+

Projects

+

Projects epitomize perfect synergy for success.

+
15+ Projects
+
+ Start Now ➤ +
+
+ Coding Practice +
+
+ + +
+
+
+
📝
+

Skill Based Assessments

+

Assess your skills and get ahead of the curve.

+
2000+ Questions
+
+ Start Now ➤ +
+
+ Coding Practice +
-
@@ -619,7 +667,8 @@

The Future of Your Career Starts Now. Learn, Grow, Achieve

-

Stop waiting for opportunity—create it. Dive into our extensive library to level up your expertise and unlock your next big career move.

+

Stop waiting for opportunity—create it. Dive into our extensive library to level up your + expertise and unlock your next big career move.

✓50+ Courses
✓Certificate
@@ -676,8 +725,8 @@
- -

Built with ❤ in India for the world

+ +

Built with ❤ in India for the world

Stay Connected

@@ -694,14 +743,14 @@
-
- Support Inquiries -
+
+ Support Inquiries +
support@kodepilot.com
-
+
@@ -772,7 +821,7 @@
  • Mentorship & Alumni
    • -
    +
    diff --git a/main.css b/main.css index 3243c9e..c02d0a2 100644 --- a/main.css +++ b/main.css @@ -201,6 +201,7 @@ .users_box { max-width: var(--course-max-width); + max-width: 90%; } .know-cards { @@ -293,6 +294,7 @@ justify-content: center; align-items: center; text-align: start; + max-width: 100%; } .mnc-box { @@ -430,9 +432,7 @@ min-height: 100px; padding: 15px 8px; } - } - @media (max-width: 768px) { .our-numbers { padding: 40px 20px; } @@ -493,7 +493,9 @@ } .container { - max-width: 1152px; + max-width: var(--course-max-width); + ; + width: 1152px; margin: 0 auto; } @@ -528,24 +530,17 @@ .cards-grid { display: grid; - grid-template-columns: 1fr; + grid-template-columns: repeat(5, 1fr); gap: 24px; - } - - @media (min-width: 768px) { - .cards-grid { - grid-template-columns: repeat(3, 1fr); - } - } - - @media (min-width: 1024px) { - .cards-grid { - grid-template-columns: repeat(5, 1fr); - } + flex-wrap: wrap; + justify-content: center; + align-items: center; + min-width: 100px; } .card-add { border-radius: 24px; + max-width: 130px; padding: 24px; position: relative; overflow: hidden; @@ -780,7 +775,6 @@ @media (max-width: 768px) { .slide1r-container { - margin: 15px; padding: 20px; } @@ -820,13 +814,25 @@ .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) { - .slide1r-container { - padding: 15px; - } - .slide1-box { gap: 12px; padding: 5px; @@ -881,11 +887,11 @@ } -.footer-section ul { - list-style: none; - padding-left: 0; - margin-left: 0; -} + .footer-section ul { + list-style: none; + padding-left: 0; + margin-left: 0; + } .footer-section ul li { margin-bottom: 12px; @@ -1410,22 +1416,6 @@ background-color: #1d4fa0; } - @media (max-width: 900px) { - .card-easy { - flex-direction: column; - width: 90%; - } - - .card-easy-right { - padding: 80px 50px; - } - - .card-easy-left img { - width: 90%; - max-height: 100%; - } - } - .corces-s { margin: 40px 0; } @@ -1541,440 +1531,475 @@ /*----------------------------------------------------------------------------------------------------------------------*/ -/* Practice Cards Component CSS - Unique class names to prevent conflicts */ + /* Practice Cards Component CSS - Unique class names to prevent conflicts */ + .practice-cards-container * { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', system-ui, sans-serif; + } + + .practice-cards-container { + background-color: #ffffff; + color: #1f2937; + padding: 40px 20px; + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .practice-container { + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 0 20px; + } + + .practice-container-box { + max-width: var(--course-max-width); + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + .practice-container-text-box { + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + padding: 0; + left: 0; + } -/* Practice Cards Component CSS - Unique class names to prevent conflicts */ -/* Practice Cards Component CSS - Unique class names to prevent conflicts */ -.practice-cards-container * { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Segoe UI', system-ui, sans-serif; -} + .practice-title { + font-size: 32px; + font-weight: 700; + margin-bottom: 12px; + color: #111827; + text-align: left; + width: 100%; + } -.practice-cards-container { - background-color: #ffffff; - color: #1f2937; - padding: 40px 20px; - display: flex; - flex-direction: column; - align-items: flex-start; -} + .practice-subtitle { + font-size: 18px; + color: #6b7280; + max-width: 700px; + line-height: 1.5; + text-align: left; + width: 100%; + } -.practice-container { - max-width: 1200px; - width: 100%; - margin: 0 auto; - padding: 0 20px; -} + .practice-cards-wrapper { + margin: 30px 0; + display: flex; + height: 380px; + border-radius: 12px; + overflow: hidden; + position: relative; + gap: 1px; + background-color: #d1d5db; + padding: 1px; + width: 100%; + } -.practice-title { - font-size: 32px; - font-weight: 700; - margin-bottom: 12px; - color: #111827; - text-align: left; - width: 100%; -} + .practice-card { + flex: 1; + display: flex; + transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); + cursor: pointer; + position: relative; + overflow: hidden; + transform-origin: center; + background-color: white; + border-radius: 0; + min-width: 80px; + } -.practice-subtitle { - font-size: 18px; - color: #6b7280; - max-width: 700px; - line-height: 1.5; - text-align: left; - width: 100%; -} + .practice-card:first-child { + border-radius: 11px 0 0 11px; + } -.practice-cards-wrapper { - margin: 30px 0; - display: flex; - height: 380px; - border-radius: 12px; - overflow: hidden; - position: relative; - gap: 1px; - background-color: #d1d5db; - padding: 1px; - width: 100%; -} + .practice-card:last-child { + border-radius: 0 11px 11px 0; + } -.practice-card { - flex: 1; - display: flex; - transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); - cursor: pointer; - position: relative; - overflow: hidden; - transform-origin: center; - background-color: white; - border-radius: 0; - min-width: 80px; -} + .practice-card-content { + flex: 1; + padding: 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: all 0.5s ease; + min-width: 280px; + z-index: 2; + position: relative; + } -.practice-card:first-child { - border-radius: 11px 0 0 11px; -} + .practice-card { + flex: 1; + transform: scale(1); + } -.practice-card:last-child { - border-radius: 0 11px 11px 0; -} + .practice-card .practice-card-svg { + width: 0; + opacity: 0; + } -.practice-card-content { - flex: 1; - padding: 24px; - display: flex; - flex-direction: column; - justify-content: space-between; - transition: all 0.5s ease; - min-width: 280px; - z-index: 2; - position: relative; -} + .practice-card .practice-cta-btn { + opacity: 0; + transform: translateY(15px); + } -/* Default state - first card expanded */ -.practice-card:first-child { - flex: 2.5; - z-index: 10; -} + .practice-cards-wrapper:hover .practice-card { + flex: 1; + transform: scale(0.98); + } -.practice-card:not(:first-child) { - flex: 1; -} + .practice-cards-wrapper:hover .practice-card:hover { + flex: 2.5; + transform: translateY(-6px) scale(1.01); + z-index: 10; + } -.practice-card .practice-card-svg { - width: 0; - opacity: 0; -} + .practice-card:nth-child(1):hover { + background-color: #89CFF0; + } -.practice-card .practice-cta-btn { - opacity: 0; - transform: translateY(15px); -} + .practice-card:nth-child(2):hover { + background-color: #FEB4CF; + } -/* Show SVG and CTA for first card by default */ -.practice-card:first-child .practice-card-svg { - width: 35%; - opacity: 1; -} + .practice-card:nth-child(3):hover { + background-color: #DFC5FE; + } -.practice-card:first-child .practice-cta-btn { - opacity: 1; - transform: translateY(0); -} + .practice-card:nth-child(4):hover { + background-color: #FFE186; + } -.practice-card:first-child .practice-card-icon { - transform: scale(1.05) rotate(3deg); -} + .practice-card-svg { + width: 0; + height: 10%; + bottom: 0px; + display: block; + align-items: center; + justify-content: center; + transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; + padding: 20px; + background: transparent; + flex-shrink: 0; + } -.practice-card:first-child h3 { - transform: translateY(-2px); -} -.practice-card:first-child p, -.practice-card:first-child .practice-meta-info, -.practice-card:first-child .practice-footer-text { - transform: translateY(-1px); -} + .practice-cards-wrapper:hover .practice-card:hover .practice-card-svg { + width: 35%; + opacity: 1; + } -/* Hover state - expand hovered card, shrink others */ -.practice-cards-wrapper .practice-card { - transform: scale(1); -} + .practice-card-icon { + width: 48px; + height: 48px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + margin-bottom: 16px; + transition: transform 0.5s ease; + } -.practice-cards-wrapper .practice-card:hover { - flex: 2.5; - z-index: 10; -} + .practice-card:nth-child(1) .practice-card-icon { + background-color: #1268f3; + color: white; + } -.practice-cards-wrapper .practice-card:not(:hover) { - flex: 1; -} + .practice-card:nth-child(2) .practice-card-icon { + background-color: #ef4444; + color: white; + } -/* Color changes for hover states */ -.practice-card:nth-child(1):hover { - background-color: #89CFF0; -} + .practice-card:nth-child(3) .practice-card-icon { + background-color: #8b5cf6; + color: white; + } -.practice-card:nth-child(2):hover { - background-color: #FEB4CF; -} + .practice-card:nth-child(4) .practice-card-icon { + background-color: #f59e0b; + color: white; + } -.practice-card:nth-child(3):hover { - background-color: #DFC5FE; -} + /* Icon animation on hover */ + .practice-cards-wrapper:hover .practice-card:hover .practice-card-icon { + transform: scale(1.05) rotate(3deg); + } -.practice-card:nth-child(4):hover { - background-color: #FFE186; -} + .practice-card h3 { + font-size: 20px; + font-weight: 600; + margin-bottom: 12px; + color: #111827; + transition: transform 0.5s ease; + } -/* SVG Container - UPDATED FOR IMAGES */ -.practice-card-svg { - width: 0; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); - opacity: 0; - padding: 20px; - background: transparent; - flex-shrink: 0; - overflow: hidden; /* Added to contain the image */ -} + .practice-card p { + font-size: 15px; + color: #6b7280; + line-height: 1.5; + margin-bottom: 16px; + transition: transform 0.5s ease; + } -/* Image styling - NEW RULES */ -.practice-card-svg img { - width: 500%; - height:1200%; - object-fit: contain; /* This will scale the image properly */ - max-width: 200%; - max-height: 200%; - border-radius: 8px; -} + .practice-meta-info { + display: flex; + align-items: center; + margin-bottom: 16px; + font-size: 14px; + color: #4b5563; + transition: transform 0.5s ease; + } -/* Show SVG only on hovered card and first card by default */ -.practice-card:hover .practice-card-svg { - width: 35%; - opacity: 1; -} + .practice-meta-logo { + width: 24px; + height: 24px; + background-color: #3b82f6; + border-radius: 4px; + margin-right: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 12px; + font-weight: bold; + } -.practice-card-icon { - width: 48px; - height: 48px; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - margin-bottom: 16px; - transition: transform 0.5s ease; -} + .practice-footer-text { + font-size: 14px; + font-weight: 600; + color: #374151; + margin-top: auto; + transition: transform 0.5s ease; + } -.practice-card:nth-child(1) .practice-card-icon { - background-color: #1268f3; - color: white; -} + /* Text animation on hover */ + .practice-cards-wrapper:hover .practice-card:hover h3 { + transform: translateY(-2px); + } -.practice-card:nth-child(2) .practice-card-icon { - background-color: #ef4444; - color: white; -} + .practice-cards-wrapper:hover .practice-card:hover p, + .practice-cards-wrapper:hover .practice-card:hover .practice-meta-info, + .practice-cards-wrapper:hover .practice-card:hover .practice-footer-text { + transform: translateY(-1px); + } -.practice-card:nth-child(3) .practice-card-icon { - background-color: #8b5cf6; - color: white; -} + .practice-cta-btn { + margin-top: 16px; + background-color: #111827; + color: white; + padding: 10px 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + text-decoration: none; + width: fit-content; + display: inline-flex; + align-items: center; + gap: 6px; + transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; + transform: translateY(15px); + position: relative; + overflow: hidden; + } -.practice-card:nth-child(4) .practice-card-icon { - background-color: #f59e0b; - color: white; -} + .practice-cta-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.8s; + } -/* Icon animation on hover */ -.practice-card:hover .practice-card-icon { - transform: scale(1.05) rotate(3deg); -} + .practice-cta-btn:hover::before { + left: 100%; + } -.practice-card h3 { - font-size: 20px; - font-weight: 600; - margin-bottom: 12px; - color: #111827; - transition: transform 0.5s ease; -} + .practice-cta-btn:hover { + background-color: #374151; + transform: translateY(-2px); + } -.practice-card p { - font-size: 15px; - color: #6b7280; - line-height: 1.5; - margin-bottom: 16px; - transition: transform 0.5s ease; -} + /* Show CTA button only on hovered card */ + .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn { + opacity: 1; + transform: translateY(0); + } -.practice-meta-info { - display: flex; - align-items: center; - margin-bottom: 16px; - font-size: 14px; - color: #4b5563; - transition: transform 0.5s ease; -} + /* Subtle overlay effect */ + .practice-card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); + opacity: 0; + transition: opacity 0.6s ease; + pointer-events: none; + } -.practice-meta-logo { - width: 24px; - height: 24px; - background-color: #3b82f6; - border-radius: 4px; - margin-right: 8px; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: 12px; - font-weight: bold; -} + .practice-card:hover::after { + opacity: 1; + } -.practice-footer-text { - font-size: 14px; - font-weight: 600; - color: #374151; - margin-top: auto; - transition: transform 0.5s ease; -} + /* REMOVED: Default expanded state for first card */ + /* Now all cards start equal and only expand on hover */ -/* Text animation on hover */ -.practice-card:hover h3 { - transform: translateY(-2px); -} + /* Show SVG and CTA button only on hover */ + .practice-cards-wrapper .practice-card .practice-card-svg { + width: 0; + opacity: 0; + } -.practice-card:hover p, -.practice-card:hover .practice-meta-info, -.practice-card:hover .practice-footer-text { - transform: translateY(-1px); -} + .practice-cards-wrapper .practice-card .practice-cta-btn { + opacity: 0; + transform: translateY(15px); + } -.practice-cta-btn { - margin-top: 16px; - background-color: #111827; - color: white; - padding: 10px 16px; - border-radius: 8px; - font-size: 14px; - font-weight: 600; - text-decoration: none; - width: fit-content; - display: inline-flex; - align-items: center; - gap: 6px; - transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); - opacity: 0; - transform: translateY(15px); - position: relative; - overflow: hidden; -} + .practice-cards-wrapper:hover .practice-card:hover .practice-card-svg { + width: 35%; + opacity: 1; + } -.practice-cta-btn::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.8s; -} + .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn { + opacity: 1; + transform: translateY(0); + } -.practice-cta-btn:hover::before { - left: 100%; -} + /* Mobile responsiveness */ + @media (max-width: 992px) { + .practice-cards-container { + display: none; + } + } -.practice-cta-btn:hover { - background-color: #374151; - transform: translateY(-2px); -} + @media (max-width: 768px) { + .practice-container { + display: none; + } -/* Show CTA button only on hovered card and first card by default */ -.practice-card:hover .practice-cta-btn { - opacity: 1; - transform: translateY(0); -} + .mnc-box { + display: flex; + align-items: center; + max-width: 90%; + padding: 20px; + } -/* Subtle overlay effect */ -.practice-card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); - opacity: 0; - transition: opacity 0.6s ease; - pointer-events: none; -} + .slide1r-container { + padding: 20px; + width: 90%; + } -.practice-card:hover::after { - opacity: 1; -} + .card-add { + height: auto; + width: 120px; + } -/* Mobile responsiveness */ -@media (max-width: 992px) { - .practice-cards-container { - align-items: flex-start; - padding: 30px 15px; - } - - .practice-cards-wrapper { - flex-direction: column; - height: auto; - border-radius: 12px; - gap: 0; - } + .container { + padding: 20px; + width: 90%; + } - .practice-card { - flex-direction: row; - height: 120px; - border-radius: 0 !important; - min-width: auto; - } + .move-slider-container { + padding: 20px; + width: 90%; + } - .practice-card:first-child { - border-radius: 12px 12px 0 0 !important; - height: 120px; - flex: 1; - } + .move-slider-animation-box { + margin-top: 393px; + margin-right: 0px; + } - .practice-card:last-child { - border-radius: 0 0 12px 12px !important; - } + .move-slider-box-static { + padding: 20px; + min-width: 90%; + } - .practice-card:hover { - height: 300px; - flex-direction: column; - } + .card-simple { + max-width: var(--course-max-width); + margin: 0px auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } - .practice-card:hover .practice-card-svg { - width: 100%; - height: 120px; - } + .crd { + width: 90%; + } - /* Mobile image styling */ - .practice-card:hover .practice-card-svg img { - object-fit: cover; /* Better fit for mobile */ - } + .hero h1 { + font-size: 30px; + width: 103%; + } - .practice-card-content { - min-width: auto; - padding: 20px; - } -} + .hero p { + font-size: 12px; + width: 90%; + } -@media (max-width: 768px) { - .practice-cards-container { - padding: 25px 10px; - } - - .practice-title { - font-size: 28px; - } - - .practice-subtitle { - font-size: 16px; - } -} + .cards-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + } -@media (max-width: 480px) { - .practice-cards-container { - padding: 20px 8px; - } - - .practice-title { - font-size: 24px; - } - - .practice-subtitle { - font-size: 14px; - } -} \ No newline at end of file + .card-easy-right h2 { + font-size: 1.3em; + margin: 0 0 0px 0; + } + + .features { + display: flex; + flex-wrap: wrap; + gap: 20px; + } + + .feature { + display: flex; + align-items: center; + font-size: 16px; + } + + .card-easy { + flex-direction: column; + width: 90%; + } + + .card-easy-right { + padding: 50px 50px; + } + + .card-easy-left img { + width: 90%; + max-height: 100%; + } + + .our-numbers { + margin: 0 auto 0 auto; + } + + .corces-s { + margin: 0px 0; + } + } \ No newline at end of file diff --git a/main.js b/main.js index f2eace4..db62a6c 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,5 @@ function goToApplay() { - window.location.href = "/applay/"; + window.location.href = "/apply/"; } function getInTouch() { @@ -422,56 +422,73 @@ function renderCourses(allCourses) { } }); - // If temp still has >= 4, push it if (temp.courses.length >= 4) { mergedSections.push(temp); } - // Render sections mergedSections.forEach(sectionData => { const section = document.createElement('div'); section.className = 'course-section'; section.innerHTML = ` -

    ${sectionData.category}

    -
    -
    - -
    - -
    -
    - `; +

    ${sectionData.category}

    +
    +
    + +
    + +
    +
    + `; const track = section.querySelector('.course-track'); + const prevBtn = section.querySelector('.prev-btn'); + const nextBtn = section.querySelector('.next-btn'); sectionData.courses.forEach(course => { const courseDiv = document.createElement('div'); courseDiv.className = 'course-card'; courseDiv.innerHTML = ` - -
    -     -
    - ${course.name} -
    ${course.description}
    -
    - `; + +
    +     +
    + ${course.name} +
    ${course.description}
    +
    + `; track.appendChild(courseDiv); }); - // Slider buttons - const prevBtn = section.querySelector('.prev-btn'); - const nextBtn = section.querySelector('.next-btn'); + // Button scrolling + const scrollAmount = 300; + prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' })); + nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' })); - prevBtn.addEventListener('click', () => { - track.scrollBy({ left: -300, behavior: 'smooth' }); + // Touch swipe + let startX = 0; + let isDragging = false; + + track.addEventListener('touchstart', e => { + startX = e.touches[0].clientX; + isDragging = true; }); - nextBtn.addEventListener('click', () => { - track.scrollBy({ left: 300, behavior: 'smooth' }); + + track.addEventListener('touchmove', e => { + if (!isDragging) return; + const x = e.touches[0].clientX; + const walk = (startX - x) * 10; + track.scrollLeft += walk; + startX = x; + }); + + + track.addEventListener('touchend', () => { + isDragging = false; }); container.appendChild(section); }); + } @@ -493,7 +510,7 @@ function stepScroll() { track.appendChild(first); track.style.transition = 'none'; track.style.transform = 'translateX(0)'; - void track.offsetWidth; // force reflow + void track.offsetWidth; track.style.transition = 'transform 0.5s ease'; track.removeEventListener('transitionend', handler); }); @@ -505,42 +522,42 @@ setInterval(stepScroll, 3000); /*--------------------------------------------------------*/ -document.addEventListener('DOMContentLoaded', function() { +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() { + card.addEventListener('click', function () { setActiveCard(this); }); }); - + // Optional: Add hover effect for desktop (complementary to click) cards.forEach(card => { - card.addEventListener('mouseenter', function() { + card.addEventListener('mouseenter', function () { // Only activate on hover if you want that behavior // setActiveCard(this); }); }); -}); \ No newline at end of file +});