dhanush.s/kodepilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: dhanush.s:d6fd076fa8aa44a551691d82308b75451a78803a
Branches Tags
dhanush.s:main
dhanush.s:dhee
dhanush.s:test
dhanush.s:content
dhanush.s:rajesh
dhanush.s:reformate
dhanush.s:image
...
compare: dhanush.s:a53a95495815396876181221fc849cdce4f1865d
Branches Tags
dhanush.s:main
dhanush.s:dhee
dhanush.s:test
dhanush.s:content
dhanush.s:rajesh
dhanush.s:reformate
dhanush.s:image

9 Commits
d6fd076fa8 ... a53a954958

Author SHA1 Message Date
Abhishek-unni-2
a53a954958 content:fixit 2025-09-26 21:46:53 +00:00
koushik.m
66f96fb672 fix: content_updated 2025-09-27 03:10:51 +05:30
dhanush.s
b8964de1ad fix: ! 2025-09-27 03:06:48 +05:30
dhanush.s
8bacac0854 Merge pull request 'fix: image_updated' (#22) from image into main 
Reviewed-on: #22
 2025-09-26 21:33:13 +00:00
koushik.m
5d3b418602 fix: image_updated 2025-09-26 21:32:45 +00:00
rajesh.n
bf2ea5698a Merge pull request 'added phone num' (#23) from rajesh into main 
Reviewed-on: #23
 2025-09-26 21:31:45 +00:00
rajesh.n
6c25c410a4 added phone num 2025-09-27 03:00:30 +05:30
dhanush.s
6d6269925b fix: replace dev code 2025-09-27 02:51:04 +05:30
dhanush.s
6b8f7e616b fix: mobile 2025-09-27 02:48:56 +05:30
5 changed files with 817 additions and 706 deletions
Show Stats Expand all files Collapse all files

12
assets/images/hai1/user-icon.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 60.671 60.671" xml:space="preserve">
<g>
<g>
<ellipse style="fill:#010002;" cx="30.336" cy="12.097" rx="11.997" ry="12.097"/>
<path style="fill:#010002;" d="M35.64,30.079H25.031c-7.021,0-12.714,5.739-12.714,12.821v17.771h36.037V42.9
C48.354,35.818,42.661,30.079,35.64,30.079z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 594 B

BIN
assets/images/learn/learn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 301 KiB

138
index.html
View File

@ -7,7 +7,7 @@
<title>Kodepilot</title> <title>Kodepilot</title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="templateapi/main.css"> <link rel="stylesheet" href="templateapi/main.css">
<link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico"> <link rel="icon" type="image/x-icon" href="templateapi/assets/images/logo/favicon.ico">
<style> <style>
.center-container { .center-container {
display: flex; display: flex;
@ -161,10 +161,8 @@
<header class="navbar"> <header class="navbar">
<div class="logo">Kodepilot</div> <div class="logo">Kodepilot</div>
<input type="text" class="search" placeholder="Search Opportunities"> <input type="text" class="search" placeholder="Search Opportunities">
<nav>
<a href="/login">Log in</a>
</nav>
<div class="buttons"> <div class="buttons">
<a href="/login">Log in</a>
<button class="business" onclick="getInTouch()">Get in touch</button> <button class="business" onclick="getInTouch()">Get in touch</button>
<button class="login" onclick="goToApplay()">Apply</button> <button class="login" onclick="goToApplay()">Apply</button>
</div> </div>
@ -178,11 +176,59 @@
by by
your your
dream company.</p> dream company.</p>
<button class="button_blue_box"><img <button class="button_blue_box">
src="https://d8it4huxumps7.cloudfront.net/uploads/images/655edc8c1fab9_diamond_1.png?d=82x84" <img src="https://d8it4huxumps7.cloudfront.net/uploads/images/655edc8c1fab9_diamond_1.png?d=82x84"
width="41" height="42" alt="diamond" loading="lazy"><span><span width="41" height="42" alt="diamond" loading="lazy">
class="nameContainer">Aditya</span><strong> Just Went <span>
Kodepilot!</strong></span></button> <span class="nameContainer">Aditya</span>
<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);
}, 2000);
</script>
</div> </div>
<div class="cards"> <div class="cards">
<div class="card green">Internships<br><small>Gain Practical Experience</small></div> <div class="card green">Internships<br><small>Gain Practical Experience</small></div>
@ -274,7 +320,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/qa.jpg" alt="Business Meeting"> <img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
<div class="image-overlay"> <div class="image-overlay">
<h4>QA & Testing</h4> <h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -282,7 +328,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/hai12.jpg" alt="Architecture"> <img src="templateapi/assets/images/hai1/hai12.jpg" alt="Architecture">
<div class="image-overlay"> <div class="image-overlay">
<h4>Software Dev</h4> <h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a <p>A sleek image of a professional wireframe/design on a large monitor, with a
@ -296,7 +342,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/ai.jpg" alt="Analytics"> <img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
<div class="image-overlay"> <div class="image-overlay">
<h4>AI & Data</h4> <h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network <p>A stunning, large-scale data visualization or chart (like a complex network
@ -305,7 +351,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology"> <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay"> <div class="image-overlay">
<h4>Cybersecurity</h4> <h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with <p>A digital shield or lock icon overlaid on a dark, technical background with
@ -317,7 +363,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/qa.jpg" alt="Analytics"> <img src="templateapi/assets/images/hai1/qa.jpg" alt="Analytics">
<div class="image-overlay"> <div class="image-overlay">
<h4>QA & Testing</h4> <h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -325,7 +371,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology"> <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay"> <div class="image-overlay">
<h4>Cybersecurity</h4> <h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with <p>A digital shield or lock icon overlaid on a dark, technical background with
@ -337,7 +383,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/hai12.jpg" alt="Analytics"> <img src="templateapi/assets/images/hai1/hai12.jpg" alt="Analytics">
<div class="image-overlay"> <div class="image-overlay">
<h4>Software Dev</h4> <h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a <p>A sleek image of a professional wireframe/design on a large monitor, with a
@ -345,7 +391,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/qa.jpg" alt="Technology"> <img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
<div class="image-overlay"> <div class="image-overlay">
<h4>QA & Testing</h4> <h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and <p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -357,7 +403,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/ai.jpg" alt="Analytics"> <img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
<div class="image-overlay"> <div class="image-overlay">
<h4>AI & Data</h4> <h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network <p>A stunning, large-scale data visualization or chart (like a complex network
@ -366,7 +412,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/aws..jpg" alt="Technology"> <img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
<div class="image-overlay"> <div class="image-overlay">
<h4>Cloud & DevOps</h4> <h4>Cloud & DevOps</h4>
<p>An abstract, interconnected graphic of servers and data pipelines with subtle <p>An abstract, interconnected graphic of servers and data pipelines with subtle
@ -379,7 +425,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/ai.jpg" alt="Analytics"> <img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
<div class="image-overlay"> <div class="image-overlay">
<h4>AI & Data</h4> <h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network <p>A stunning, large-scale data visualization or chart (like a complex network
@ -388,7 +434,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology"> <img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay"> <div class="image-overlay">
<h4>Cybersecurity</h4> <h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with <p>A digital shield or lock icon overlaid on a dark, technical background with
@ -401,7 +447,7 @@
<div class="slide1"> <div class="slide1">
<div class="slide1-box"> <div class="slide1-box">
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/hai12.jpg" alt="Creativity"> <img src="templateapi/assets/images/hai1/hai12.jpg" alt="Creativity">
<div class="image-overlay"> <div class="image-overlay">
<h4>Software Dev</h4> <h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a <p>A sleek image of a professional wireframe/design on a large monitor, with a
@ -409,7 +455,7 @@
</div> </div>
</div> </div>
<div class="image-container"> <div class="image-container">
<img src="assets/images/hai1/aws..jpg" alt="Beach"> <img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
<div class="image-overlay"> <div class="image-overlay">
<h4>Cloud & DevOps</h4> <h4>Cloud & DevOps</h4>
<p>An abstract, interconnected graphic of servers and data pipelines with subtle <p>An abstract, interconnected graphic of servers and data pipelines with subtle
@ -475,11 +521,12 @@
" "
</p> </p>
<p class="slide-text"> <p class="slide-text">
"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."
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">Dhanush</p> <p class="slide-name">Dhanush</p>
@ -496,11 +543,12 @@
" "
</p> </p>
<p class="slide-text"> <p class="slide-text">
"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."
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">kevin</p> <p class="slide-name">kevin</p>
@ -516,11 +564,12 @@
" "
</p> </p>
<p class="slide-text"> <p class="slide-text">
"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."
</p> </p>
<div class="slide-logo-box"> <div class="slide-logo-box">
<div class="profile-box"> <div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb" <img src="assets/images/hai1/user-icon.svg"
alt="Client Logo" class="slide-logo"> alt="Client Logo" class="slide-logo">
<div class="profile-info"> <div class="profile-info">
<p class="slide-name">John Doe</p> <p class="slide-name">John Doe</p>
@ -536,12 +585,14 @@
<section> <section>
<!-- <div class="practice-cards-container"> --> <!-- <div class="practice-cards-container"> -->
<div class="practice-container"> <div class="practice-container">
<div class="practice-container-box">
<div class="practice-container-text-box">
<h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1> <h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
<p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of your <p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of
your
dream companies & ace your placement game!</p> dream companies & ace your placement game!</p>
</div>
<div class="practice-cards-wrapper"> <div class="practice-cards-wrapper">
<!-- Coding Practice Card -->
<div class="practice-card active"> <div class="practice-card active">
<div class="practice-card-content"> <div class="practice-card-content">
<div> <div>
@ -553,7 +604,8 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/codinghiringassesments/nope_1.png" alt="Coding Practice"> <img src="templateapi/assets/images/codinghiringassesments/nope_1.png"
alt="Coding Practice">
</div> </div>
</div> </div>
@ -569,7 +621,8 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/codinghiringassesments/nope_2.png" alt="Coding Practice"> <img src="templateapi/assets/images/codinghiringassesments/nope_2.png"
alt="Coding Practice">
</div> </div>
</div> </div>
@ -585,7 +638,8 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/codinghiringassesments/nope_3.webp" alt="Coding Practice"> <img src="templateapi/assets/images/codinghiringassesments/nope_3.webp"
alt="Coding Practice">
</div> </div>
</div> </div>
@ -601,12 +655,13 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
<div class="practice-card-svg"> <div class="practice-card-svg">
<img src="assets/images/codinghiringassesments/nope_4.webp" alt="Coding Practice"> <img src="templateapi/assets/images/codinghiringassesments/nope_4.webp"
alt="Coding Practice">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</section> </section>
@ -615,11 +670,12 @@
<section class="card-simple"> <section class="card-simple">
<div class="card-easy"> <div class="card-easy">
<div class="card-easy-left"> <div class="card-easy-left">
<img src="assets/images/learn/learn.png" alt="Student Image"> <img src="templateapi/assets/images/learn/learn.png" alt="Student Image">
</div> </div>
<div class="card-easy-right"> <div class="card-easy-right">
<h2>The Future of Your Career Starts Now. Learn, Grow, Achieve</h2> <h2>The Future of Your Career Starts Now. Learn, Grow, Achieve</h2>
<p>Stop waiting for opportunity—create it. Dive into our extensive library to level up your expertise and unlock your next big career move.</p> <p>Stop waiting for opportunity—create it. Dive into our extensive library to level up your
expertise and unlock your next big career move.</p>
<div class="features"> <div class="features">
<div class="feature"><span>✓</span>50+ Courses</div> <div class="feature"><span>✓</span>50+ Courses</div>
<div class="feature"><span>✓</span>Certificate</div> <div class="feature"><span>✓</span>Certificate</div>
@ -686,11 +742,11 @@
<div class="contact-item"> <div class="contact-item">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
sales@kodepilot.com careers@kodepilot.com
</div> </div>
<div class="contact-item"> <div class="contact-item">
<i class="fas fa-phone"></i> <i class="fas fa-phone"></i>
+91-9311777388 <span style="font-size: 12px;"> </span> +91 88707 60431<span style="font-size: 12px;"> </span>
</div> </div>
</div> </div>

372
main.css
View File

@ -144,7 +144,7 @@
.green { .green {
background: #9BE6C1; background: #9BE6C1;
background-image: url('assets/images/unlockcarrer/internship.png'); background-image: url('templateapi/assets/images/unlockcarrer/internship.png');
background-size: 115px; background-size: 115px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -152,7 +152,7 @@
.orange { .orange {
background: #fec192; background: #fec192;
background-image: url('assets/images/unlockcarrer/jobs.png'); background-image: url('templateapi/assets/images/unlockcarrer/jobs.png');
background-size: 115px; background-size: 115px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -160,7 +160,7 @@
.blue { .blue {
background: #9bc9ff; background: #9bc9ff;
background-image: url('assets/images/unlockcarrer/mentorship.png'); background-image: url('templateapi/assets/images/unlockcarrer/mentorship.png');
background-size: 115px; background-size: 115px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -169,7 +169,7 @@
.purple { .purple {
background: #c8bbff; background: #c8bbff;
background-image: url('assets/images/unlockcarrer/practice.png'); background-image: url('templateapi/assets/images/unlockcarrer/practice.png');
background-size: 120px; background-size: 120px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -177,7 +177,7 @@
.yellow { .yellow {
background: #ffdd80; background: #ffdd80;
background-image: url('assets/images/unlockcarrer/competitions.png'); background-image: url('templateapi/assets/images/unlockcarrer/competitions.png');
background-size: 115px; background-size: 115px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -185,7 +185,7 @@
.pink { .pink {
background: #ffb1cc; background: #ffb1cc;
background-image: url('assets/images/unlockcarrer/more.png'); background-image: url('templateapi/assets/images/unlockcarrer/more.png');
background-size: 115px; background-size: 115px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom right; background-position: bottom right;
@ -201,6 +201,7 @@
.users_box { .users_box {
max-width: var(--course-max-width); max-width: var(--course-max-width);
max-width: 90%;
} }
.know-cards { .know-cards {
@ -293,6 +294,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: start; text-align: start;
max-width: 100%;
} }
.mnc-box { .mnc-box {
@ -430,9 +432,7 @@
min-height: 100px; min-height: 100px;
padding: 15px 8px; padding: 15px 8px;
} }
}
@media (max-width: 768px) {
.our-numbers { .our-numbers {
padding: 40px 20px; padding: 40px 20px;
} }
@ -493,7 +493,9 @@
} }
.container { .container {
max-width: 1152px; max-width: var(--course-max-width);
;
width: 1152px;
margin: 0 auto; margin: 0 auto;
} }
@ -528,24 +530,17 @@
.cards-grid { .cards-grid {
display: grid; display: grid;
grid-template-columns: 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); grid-template-columns: repeat(5, 1fr);
} gap: 24px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
min-width: 100px;
} }
.card-add { .card-add {
border-radius: 24px; border-radius: 24px;
max-width: 130px;
padding: 24px; padding: 24px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -565,27 +560,27 @@
} }
.card-quizzes { .card-quizzes {
background: url('assets/images/seize/quizz.png') no-repeat center/cover; background: url('templateapi/assets/images/seize/quizz.png') no-repeat center/cover;
color: white; color: white;
} }
.card-hackathons { .card-hackathons {
background: url('assets/images/seize/hackathon.png') no-repeat center/cover; background: url('templateapi/assets/images/seize/hackathon.png') no-repeat center/cover;
color: white; color: white;
} }
.card-scholarships { .card-scholarships {
background: url('assets/images/seize/scholarships.png') no-repeat center/cover; background: url('templateapi/assets/images/seize/scholarships.png') no-repeat center/cover;
color: white; color: white;
} }
.card-conferences { .card-conferences {
background: url('assets/images/seize/conference.png') no-repeat center/cover; background: url('templateapi/assets/images/seize/conference.png') no-repeat center/cover;
color: #1f2937; color: #1f2937;
} }
.card-festivals { .card-festivals {
background: url('assets/images/seize/techfest.png') no-repeat center/cover; background: url('templateapi/assets/images/seize/techfest.png') no-repeat center/cover;
color: #1f2937; color: #1f2937;
} }
@ -780,7 +775,6 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.slide1r-container { .slide1r-container {
margin: 15px;
padding: 20px; padding: 20px;
} }
@ -820,13 +814,25 @@
.image-overlay p { .image-overlay p {
font-size: 12px; 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) { @media (max-width: 480px) {
.slide1r-container {
padding: 15px;
}
.slide1-box { .slide1-box {
gap: 12px; gap: 12px;
padding: 5px; padding: 5px;
@ -1410,22 +1416,6 @@
background-color: #1d4fa0; 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 { .corces-s {
margin: 40px 0; margin: 40px 0;
} }
@ -1447,6 +1437,7 @@
display: flex; display: flex;
gap: 20px; gap: 20px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
flex: 1; flex: 1;
max-width: 100%; max-width: 100%;
@ -1542,10 +1533,6 @@
/*----------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------*/
/* Practice Cards Component CSS - Unique class names to prevent conflicts */ /* Practice Cards Component CSS - Unique class names to prevent conflicts */
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
.practice-cards-container * { .practice-cards-container * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -1569,6 +1556,26 @@
padding: 0 20px; 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-title { .practice-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
@ -1633,14 +1640,9 @@
position: relative; position: relative;
} }
/* Default state - first card expanded */ .practice-card {
.practice-card:first-child {
flex: 2.5;
z-index: 10;
}
.practice-card:not(:first-child) {
flex: 1; flex: 1;
transform: scale(1);
} }
.practice-card .practice-card-svg { .practice-card .practice-card-svg {
@ -1653,46 +1655,17 @@
transform: translateY(15px); transform: translateY(15px);
} }
/* Show SVG and CTA for first card by default */ .practice-cards-wrapper:hover .practice-card {
.practice-card:first-child .practice-card-svg { flex: 1;
width: 35%; transform: scale(0.98);
opacity: 1;
} }
.practice-card:first-child .practice-cta-btn { .practice-cards-wrapper:hover .practice-card:hover {
opacity: 1;
transform: translateY(0);
}
.practice-card:first-child .practice-card-icon {
transform: scale(1.05) rotate(3deg);
}
.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);
}
/* Hover state - expand hovered card, shrink others */
.practice-cards-wrapper .practice-card {
transform: scale(1);
}
.practice-cards-wrapper .practice-card:hover {
flex: 2.5; flex: 2.5;
transform: translateY(-6px) scale(1.01);
z-index: 10; z-index: 10;
} }
.practice-cards-wrapper .practice-card:not(:hover) {
flex: 1;
}
/* Color changes for hover states */
.practice-card:nth-child(1):hover { .practice-card:nth-child(1):hover {
background-color: #89CFF0; background-color: #89CFF0;
} }
@ -1709,11 +1682,11 @@
background-color: #FFE186; background-color: #FFE186;
} }
/* SVG Container - UPDATED FOR IMAGES */
.practice-card-svg { .practice-card-svg {
width: 0; width: 0;
height: 100%; height: 10%;
display: flex; bottom: 0px;
display: block;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
@ -1721,21 +1694,10 @@
padding: 20px; padding: 20px;
background: transparent; background: transparent;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; /* Added to contain the image */
} }
/* 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;
}
/* Show SVG only on hovered card and first card by default */ .practice-cards-wrapper:hover .practice-card:hover .practice-card-svg {
.practice-card:hover .practice-card-svg {
width: 35%; width: 35%;
opacity: 1; opacity: 1;
} }
@ -1773,7 +1735,7 @@
} }
/* Icon animation on hover */ /* Icon animation on hover */
.practice-card:hover .practice-card-icon { .practice-cards-wrapper:hover .practice-card:hover .practice-card-icon {
transform: scale(1.05) rotate(3deg); transform: scale(1.05) rotate(3deg);
} }
@ -1825,13 +1787,13 @@
} }
/* Text animation on hover */ /* Text animation on hover */
.practice-card:hover h3 { .practice-cards-wrapper:hover .practice-card:hover h3 {
transform: translateY(-2px); transform: translateY(-2px);
} }
.practice-card:hover p, .practice-cards-wrapper:hover .practice-card:hover p,
.practice-card:hover .practice-meta-info, .practice-cards-wrapper:hover .practice-card:hover .practice-meta-info,
.practice-card:hover .practice-footer-text { .practice-cards-wrapper:hover .practice-card:hover .practice-footer-text {
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -1875,8 +1837,8 @@
transform: translateY(-2px); transform: translateY(-2px);
} }
/* Show CTA button only on hovered card and first card by default */ /* Show CTA button only on hovered card */
.practice-card:hover .practice-cta-btn { .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
@ -1899,82 +1861,146 @@
opacity: 1; 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;
}
.practice-cards-wrapper .practice-card .practice-cta-btn {
opacity: 0;
transform: translateY(15px);
}
.practice-cards-wrapper:hover .practice-card:hover .practice-card-svg {
width: 35%;
opacity: 1;
}
.practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
opacity: 1;
transform: translateY(0);
}
/* Mobile responsiveness */ /* Mobile responsiveness */
@media (max-width: 992px) { @media (max-width: 992px) {
.practice-cards-container { .practice-cards-container {
align-items: flex-start; display: none;
padding: 30px 15px;
}
.practice-cards-wrapper {
flex-direction: column;
height: auto;
border-radius: 12px;
gap: 0;
}
.practice-card {
flex-direction: row;
height: 120px;
border-radius: 0 !important;
min-width: auto;
}
.practice-card:first-child {
border-radius: 12px 12px 0 0 !important;
height: 120px;
flex: 1;
}
.practice-card:last-child {
border-radius: 0 0 12px 12px !important;
}
.practice-card:hover {
height: 300px;
flex-direction: column;
}
.practice-card:hover .practice-card-svg {
width: 100%;
height: 120px;
}
/* Mobile image styling */
.practice-card:hover .practice-card-svg img {
object-fit: cover; /* Better fit for mobile */
}
.practice-card-content {
min-width: auto;
padding: 20px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.practice-cards-container { .practice-container {
padding: 25px 10px; display: none;
} }
.practice-title { .mnc-box {
font-size: 28px; display: flex;
align-items: center;
max-width: 90%;
padding: 20px;
} }
.practice-subtitle { .slide1r-container {
padding: 20px;
width: 90%;
}
.card-add {
height: auto;
width: 120px;
}
.container {
padding: 20px;
width: 90%;
}
.move-slider-container {
padding: 20px;
width: 90%;
}
.move-slider-animation-box {
margin-top: 393px;
margin-right: 0px;
}
.move-slider-box-static {
padding: 20px;
min-width: 90%;
}
.card-simple {
max-width: var(--course-max-width);
margin: 0px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.crd {
width: 90%;
}
.hero h1 {
font-size: 30px;
width: 103%;
}
.hero p {
font-size: 12px;
width: 90%;
}
.cards-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
.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; font-size: 16px;
} }
.card-easy {
flex-direction: column;
width: 90%;
} }
@media (max-width: 480px) { .card-easy-right {
.practice-cards-container { padding: 50px 50px;
padding: 20px 8px;
} }
.practice-title { .card-easy-left img {
font-size: 24px; width: 90%;
max-height: 100%;
} }
.practice-subtitle { .our-numbers {
font-size: 14px; margin: 0 auto 0 auto;
}
.corces-s {
margin: 0px 0;
} }
} }

321
main.js
View File

@ -1,5 +1,5 @@
function goToApplay() { function goToApplay() {
window.location.href = "/applay/"; window.location.href = "/apply/";
} }
function getInTouch() { function getInTouch() {
@ -234,150 +234,150 @@ const observer = new IntersectionObserver((entries) => {
console.log("test"); console.log("test");
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
// const allCourses = []; const allCourses = [];
// const baseUrl = 'https://kodepilot.in/course/index.php'; const baseUrl = 'https://kodepilot.in/course/index.php';
// const res = await fetch(baseUrl); const res = await fetch(baseUrl);
// const html = await res.text(); const html = await res.text();
// const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g; const categoryRegex = /<h3 class="categoryname aabtn"><a href="([^"]+)">([^<]+)<\/a><\/h3>/g;
// const categories = []; const categories = [];
// let match; let match;
// while ((match = categoryRegex.exec(html)) !== null) { while ((match = categoryRegex.exec(html)) !== null) {
// categories.push({ url: match[1], name: match[2] }); categories.push({ url: match[1], name: match[2] });
// }
// for (const category of categories) {
// const resCat = await fetch(category.url);
// const catHtml = await resCat.text();
// const cleanHtml = catHtml.replace(/\n/g, ' ');
// const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
// while ((match = courseRegex.exec(cleanHtml)) !== null) {
// allCourses.push({
// category: match[4].trim(),
// link: match[1].trim(),
// image: match[2].trim(),
// name: match[3].trim(),
// description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
// });
// }
// }
const allCourses = [
{
category: "Software Development & Engineering",
link: "https://kodepilot.in/course/view.php?id=16",
image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
name: "UI/UX Design",
description: "Learn the fundamentals of user interface and user experience design."
},
{
category: "Software Development & Engineering",
link: "https://kodepilot.in/course/view.php?id=9",
image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
name: "iOS Development",
description: "Build iOS apps using Swift and Apple’s development tools."
},
{
category: "Software Development & Engineering",
link: "https://kodepilot.in/course/view.php?id=7",
image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
name: "React Development",
description: "Master React.js for building fast and scalable web apps."
},
{
category: "Software Development & Engineering",
link: "https://kodepilot.in/course/view.php?id=5",
image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
name: "Full Stack Development",
description: "End-to-end training in frontend, backend, and databases."
},
{
category: "Software Development & Engineering",
link: "https://kodepilot.in/course/view.php?id=3",
image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
name: "Java Full Stack",
description: "Become a full stack developer with Java, Spring, and modern tools."
},
{
category: "Quality & Testing",
link: "https://kodepilot.in/course/view.php?id=13",
image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
name: "Performance Testing",
description: "Learn tools and techniques for testing system performance."
},
{
category: "Quality & Testing",
link: "https://kodepilot.in/course/view.php?id=10",
image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
name: "QA Testing",
description: "Understand quality assurance practices for reliable software."
},
{
category: "Cloud & DevOps",
link: "https://kodepilot.in/course/view.php?id=17",
image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
name: "Google Cloud",
description: "Get hands-on with Google Cloud Platform services and tools."
},
{
category: "Cloud & DevOps",
link: "https://kodepilot.in/course/view.php?id=4",
image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
name: "AWS Associate",
description: "Prepare for AWS certifications and cloud computing skills."
},
{
category: "AI, Data & Emerging Tech (On-demand & trending)",
link: "https://kodepilot.in/course/view.php?id=26",
image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
name: "Data Engineering",
description: "Build pipelines and manage data at scale for analytics."
},
{
category: "AI, Data & Emerging Tech (On-demand & trending)",
link: "https://kodepilot.in/course/view.php?id=18",
image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
name: "Prompt Engineering",
description: "Learn to design prompts for AI models like ChatGPT."
},
{
category: "AI, Data & Emerging Tech (On-demand & trending)",
link: "https://kodepilot.in/course/view.php?id=12",
image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
name: "AI Essentials",
description: "Introduction to AI, ML concepts, and real-world use cases."
},
{
category: "Enterprise & Business Tech",
link: "https://kodepilot.in/course/view.php?id=24",
image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
name: "ServiceNow",
description: "Learn ITSM and workflow automation with ServiceNow."
},
{
category: "Enterprise & Business Tech",
link: "https://kodepilot.in/course/view.php?id=19",
image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
name: "SAP",
description: "Master SAP ERP modules for enterprise solutions."
},
{
category: "Cybersecurity & Compliance",
link: "https://kodepilot.in/course/view.php?id=23",
image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
name: "Security Fundamentals",
description: "Understand core concepts of IT security and defense."
},
{
category: "Cybersecurity & Compliance",
link: "https://kodepilot.in/course/view.php?id=22",
image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
name: "Cyber Essentials",
description: "Learn the basics of cybersecurity and compliance standards."
} }
];
for (const category of categories) {
const resCat = await fetch(category.url);
const catHtml = await resCat.text();
const cleanHtml = catHtml.replace(/\n/g, ' ');
const courseRegex = /<div class="card dashboard-card [^"]*"[^>]*>.*?<a href="([^"]+)"[^>]*>.*?background-image: url\(([^)]+)\);".*?<span class="sr-only">(.*?)<\/span>.*?<div class="course-category">\s*([^<]+)<\/div>.*?<div class="course-summary">.*?<p>(.*?)<\/p>/g;
while ((match = courseRegex.exec(cleanHtml)) !== null) {
allCourses.push({
category: match[4].trim(),
link: match[1].trim(),
image: match[2].trim(),
name: match[3].trim(),
description: match[5].replace(/<br\s*\/?>/g, ' ').trim()
});
}
}
// const allCourses = [
// {
// category: "Software Development & Engineering",
// link: "https://kodepilot.in/course/view.php?id=16",
// image: "https://kodepilot.in/pluginfile.php/53/course/overviewfiles/UiUx.png",
// name: "UI/UX Design",
// description: "Learn the fundamentals of user interface and user experience design."
// },
// {
// category: "Software Development & Engineering",
// link: "https://kodepilot.in/course/view.php?id=9",
// image: "https://kodepilot.in/pluginfile.php/39/course/overviewfiles/IOS.png",
// name: "iOS Development",
// description: "Build iOS apps using Swift and Apple’s development tools."
// },
// {
// category: "Software Development & Engineering",
// link: "https://kodepilot.in/course/view.php?id=7",
// image: "https://kodepilot.in/pluginfile.php/35/course/overviewfiles/RD.png",
// name: "React Development",
// description: "Master React.js for building fast and scalable web apps."
// },
// {
// category: "Software Development & Engineering",
// link: "https://kodepilot.in/course/view.php?id=5",
// image: "https://kodepilot.in/pluginfile.php/31/course/overviewfiles/PFS.png",
// name: "Full Stack Development",
// description: "End-to-end training in frontend, backend, and databases."
// },
// {
// category: "Software Development & Engineering",
// link: "https://kodepilot.in/course/view.php?id=3",
// image: "https://kodepilot.in/pluginfile.php/25/course/overviewfiles/JFS.png",
// name: "Java Full Stack",
// description: "Become a full stack developer with Java, Spring, and modern tools."
// },
// {
// category: "Quality & Testing",
// link: "https://kodepilot.in/course/view.php?id=13",
// image: "https://kodepilot.in/pluginfile.php/46/course/overviewfiles/PT.png",
// name: "Performance Testing",
// description: "Learn tools and techniques for testing system performance."
// },
// {
// category: "Quality & Testing",
// link: "https://kodepilot.in/course/view.php?id=10",
// image: "https://kodepilot.in/pluginfile.php/41/course/overviewfiles/QA.png",
// name: "QA Testing",
// description: "Understand quality assurance practices for reliable software."
// },
// {
// category: "Cloud & DevOps",
// link: "https://kodepilot.in/course/view.php?id=17",
// image: "https://kodepilot.in/pluginfile.php/55/course/overviewfiles/GC.png",
// name: "Google Cloud",
// description: "Get hands-on with Google Cloud Platform services and tools."
// },
// {
// category: "Cloud & DevOps",
// link: "https://kodepilot.in/course/view.php?id=4",
// image: "https://kodepilot.in/pluginfile.php/28/course/overviewfiles/AWSA.png",
// name: "AWS Associate",
// description: "Prepare for AWS certifications and cloud computing skills."
// },
// {
// category: "AI, Data & Emerging Tech (On-demand & trending)",
// link: "https://kodepilot.in/course/view.php?id=26",
// image: "https://kodepilot.in/pluginfile.php/73/course/overviewfiles/DE.png",
// name: "Data Engineering",
// description: "Build pipelines and manage data at scale for analytics."
// },
// {
// category: "AI, Data & Emerging Tech (On-demand & trending)",
// link: "https://kodepilot.in/course/view.php?id=18",
// image: "https://kodepilot.in/pluginfile.php/58/course/overviewfiles/PE.png",
// name: "Prompt Engineering",
// description: "Learn to design prompts for AI models like ChatGPT."
// },
// {
// category: "AI, Data & Emerging Tech (On-demand & trending)",
// link: "https://kodepilot.in/course/view.php?id=12",
// image: "https://kodepilot.in/pluginfile.php/44/course/overviewfiles/AI%28Ess%29.png",
// name: "AI Essentials",
// description: "Introduction to AI, ML concepts, and real-world use cases."
// },
// {
// category: "Enterprise & Business Tech",
// link: "https://kodepilot.in/course/view.php?id=24",
// image: "https://kodepilot.in/pluginfile.php/70/course/overviewfiles/ServiceNow.png",
// name: "ServiceNow",
// description: "Learn ITSM and workflow automation with ServiceNow."
// },
// {
// category: "Enterprise & Business Tech",
// link: "https://kodepilot.in/course/view.php?id=19",
// image: "https://kodepilot.in/pluginfile.php/61/course/overviewfiles/SAP.png",
// name: "SAP",
// description: "Master SAP ERP modules for enterprise solutions."
// },
// {
// category: "Cybersecurity & Compliance",
// link: "https://kodepilot.in/course/view.php?id=23",
// image: "https://kodepilot.in/pluginfile.php/69/course/overviewfiles/Security.png",
// name: "Security Fundamentals",
// description: "Understand core concepts of IT security and defense."
// },
// {
// category: "Cybersecurity & Compliance",
// link: "https://kodepilot.in/course/view.php?id=22",
// image: "https://kodepilot.in/pluginfile.php/68/course/overviewfiles/CyE.png",
// name: "Cyber Essentials",
// description: "Learn the basics of cybersecurity and compliance standards."
// }
// ];
console.table(allCourses); console.table(allCourses);
@ -422,12 +422,10 @@ function renderCourses(allCourses) {
} }
}); });
// If temp still has >= 4, push it
if (temp.courses.length >= 4) { if (temp.courses.length >= 4) {
mergedSections.push(temp); mergedSections.push(temp);
} }
// Render sections
mergedSections.forEach(sectionData => { mergedSections.forEach(sectionData => {
const section = document.createElement('div'); const section = document.createElement('div');
section.className = 'course-section'; section.className = 'course-section';
@ -443,6 +441,8 @@ function renderCourses(allCourses) {
`; `;
const track = section.querySelector('.course-track'); const track = section.querySelector('.course-track');
const prevBtn = section.querySelector('.prev-btn');
const nextBtn = section.querySelector('.next-btn');
sectionData.courses.forEach(course => { sectionData.courses.forEach(course => {
const courseDiv = document.createElement('div'); const courseDiv = document.createElement('div');
@ -459,19 +459,36 @@ function renderCourses(allCourses) {
track.appendChild(courseDiv); track.appendChild(courseDiv);
}); });
// Slider buttons // Button scrolling
const prevBtn = section.querySelector('.prev-btn'); const scrollAmount = 300;
const nextBtn = section.querySelector('.next-btn'); prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
prevBtn.addEventListener('click', () => { // Touch swipe
track.scrollBy({ left: -300, behavior: 'smooth' }); 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); container.appendChild(section);
}); });
} }
@ -493,7 +510,7 @@ function stepScroll() {
track.appendChild(first); track.appendChild(first);
track.style.transition = 'none'; track.style.transition = 'none';
track.style.transform = 'translateX(0)'; track.style.transform = 'translateX(0)';
void track.offsetWidth; // force reflow void track.offsetWidth;
track.style.transition = 'transform 0.5s ease'; track.style.transition = 'transform 0.5s ease';
track.removeEventListener('transitionend', handler); track.removeEventListener('transitionend', handler);
}); });