Compare commits

...

65 Commits
image ... main

Author SHA1 Message Date
Abhishek-unni-2
3ce194471c feat again : migrate kodepilot source files from dhanush.s repo 2025-10-11 11:35:54 +05:30
omsc
ecb6eebccc modified icon location 2025-10-04 10:43:02 +00:00
2bdd6a9219 updated whatsapp icon position 2025-10-04 16:06:26 +05:30
83352b4c88 feat: vidoe_add 2025-10-04 14:22:00 +05:30
4c87388cd8 Merge pull request 'test' (#41) from test into main
Reviewed-on: #41
2025-09-30 10:51:09 +00:00
6837a638d4 fix: infinity 2025-09-30 15:36:43 +05:30
1ee4878530 fix: whatsapp icon 2025-09-30 15:14:00 +05:30
e6bc1e695d fix: infinity testmo 2025-09-30 15:03:08 +05:30
46d4a1de47 Whstapp icon modified 2025-09-30 14:59:24 +05:30
25fad790e4 Whatsapp Icon Added 2025-09-30 14:46:30 +05:30
e71054b0e1 Merge pull request 'fetaurse:redirect' (#40) from content into test
Reviewed-on: #40
2025-09-30 07:25:52 +00:00
Abhishek-unni-2
0bd1be591d fetaurse:redirect 2025-09-30 12:54:28 +05:30
bf2ed05e29 Merge pull request 'fet: redirect' (#39) from content into test
Reviewed-on: #39
2025-09-30 07:16:02 +00:00
Abhishek-unni-2
c084f08a63 fet: redirect 2025-09-30 12:43:58 +05:30
a3a0ebfa44 URL added for cards 2025-09-30 11:55:36 +05:30
ace4e6eb31 feat: url /apply redir 2025-09-30 10:56:00 +05:30
5438fdb621 fix: image path 2025-09-30 10:37:27 +05:30
849d345d51 fix: image overview 2025-09-30 10:35:07 +05:30
0ad928c8d7 fix: ui 2025-09-30 10:35:07 +05:30
650392b397 fix: image_fixed 2025-09-30 10:33:16 +05:30
c70f68072f fix: url 2025-09-29 12:09:00 +05:30
8d01e06660 fix: ui imp 2025-09-29 12:00:00 +05:30
a4fe9fc394 feat: nav bar 2025-09-29 19:09:43 +05:30
188193af7e fix: ui 2025-09-29 18:51:49 +05:30
9c694d0a43 Merge pull request 'Login Button UI changed' (#36) from rajesh into main
Reviewed-on: #36
2025-09-29 10:12:14 +00:00
3f4351d303 Login Button UI changed 2025-09-29 15:41:29 +05:30
b37cad17d5 Merge pull request 'test' (#35) from test into main
Reviewed-on: #35
2025-09-29 04:18:57 +00:00
b6c3c68b3c fix: footer and hover slider liks added 2025-09-29 00:17:51 +05:30
5686b8c4a2 refactor: css 2025-09-27 19:13:46 +05:30
a7bce5a100 refactor: ! 2025-09-27 19:11:26 +05:30
db88a9c35f fix: nav fix 2025-09-27 04:57:55 +05:30
32e6cd75a5 fix: nav fix 2025-09-27 04:53:34 +05:30
5eb3a7918d Merge pull request 'KodePilot name changed' (#33) from rajesh into main
Reviewed-on: #33
2025-09-26 23:23:04 +00:00
eef596becf KodePilot name changed 2025-09-27 04:52:33 +05:30
fc6ad943ce Merge pull request 'updated contact' (#32) from rajesh into main
Reviewed-on: #32
2025-09-26 23:19:39 +00:00
7f4c515d49 updated contact 2025-09-27 04:48:46 +05:30
2c7200f4fc Merge pull request 'updated whatsapp message' (#31) from rajesh into main
Reviewed-on: #31
2025-09-26 23:02:06 +00:00
7a89d87393 updated whatsapp message 2025-09-27 04:31:30 +05:30
e6b3cab05a Merge pull request 'updated whatsapp message' (#30) from rajesh into main
Reviewed-on: #30
2025-09-26 22:55:43 +00:00
8414a3af51 updated whatsapp message 2025-09-27 04:23:56 +05:30
025ed1d119 fix: icon size 2025-09-27 04:14:41 +05:30
441d415b0f Merge pull request 'dynamic card' (#29) from rajesh into main
Reviewed-on: #29
2025-09-26 22:42:43 +00:00
ae4fd12955 dynamic card 2025-09-27 04:11:46 +05:30
6b674bdab1 Delete dynamic-banner.html 2025-09-26 22:40:09 +00:00
b2be41a3dd Merge pull request 'rajesh' (#28) from rajesh into main
Reviewed-on: #28
2025-09-26 22:38:54 +00:00
7a8038be74 number added 2025-09-26 22:38:19 +00:00
2333e95802 number added 2025-09-26 22:38:19 +00:00
2543ec800c card issue 2025-09-26 22:38:19 +00:00
7880913725 fix: feat 2025-09-27 04:07:15 +05:30
94fb53a168 fix: feat 2025-09-27 04:02:40 +05:30
8fb29c33af Merge pull request 'content:fixit' (#27) from content into main
Reviewed-on: #27
2025-09-26 22:27:37 +00:00
Abhishek-unni-2
b80f0a9e12 content:fixit 2025-09-27 03:56:26 +05:30
ba87dbc9e6 fix: feat 2025-09-27 03:54:49 +05:30
a7e28defbc fix: feat 2025-09-27 03:42:09 +05:30
112ba89b04 fix: url 2025-09-27 03:31:40 +05:30
0346054398 Merge pull request 'added phone num' (#26) from rajesh into main
Reviewed-on: #26
2025-09-26 21:50:52 +00:00
51b4628562 added phone num 2025-09-27 03:20:23 +05:30
ac36157032 fix: url 2025-09-27 03:20:04 +05:30
95c7c6f95e fix: url 2025-09-27 03:17:55 +05:30
4c47555466 Merge pull request 'added phone num' (#25) from rajesh into main
Reviewed-on: #25
2025-09-26 21:47:30 +00:00
51fe47e0b3 added phone num 2025-09-27 03:16:17 +05:30
66f96fb672 fix: content_updated 2025-09-27 03:10:51 +05:30
b8964de1ad fix: ! 2025-09-27 03:06:48 +05:30
8bacac0854 Merge pull request 'fix: image_updated' (#22) from image into main
Reviewed-on: #22
2025-09-26 21:33:13 +00:00
Abhishek-unni-2
97b9eb21b9 content changedonce 2025-09-26 20:18:56 +05:30
7 changed files with 1185 additions and 974 deletions

132
.gitignore vendored Normal file
View File

@ -0,0 +1,132 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
package-lock.json

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>

After

Width:  |  Height:  |  Size: 594 B

Binary file not shown.

View File

@ -1,202 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right-side Image Expanding Cards</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
body {
background: #f9f9f9;
color: #1a1a1a;
padding: 40px;
}
h1 {
font-size: 26px;
font-weight: 600;
margin-bottom: 10px;
}
p.subtext {
color: #555;
margin-bottom: 25px;
}
/* Flex container */
.cards-container {
display: flex;
gap: 15px;
height: 220px;
}
/* Card style */
.card {
flex: 1;
display: flex;
border-radius: 14px;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
cursor: pointer;
color: #fff;
}
/* Different background colors */
.card:nth-child(1) { background: #1d4ed8; }
.card:nth-child(2) { background: #e11d48; }
.card:nth-child(3) { background: #9333ea; }
.card:nth-child(4) { background: #f59e0b; }
/* Card content */
.card-content {
flex: 1;
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.4s ease;
min-width: 0; /* For text ellipsis */
}
/* Hide image initially */
.card img {
width: 0;
height: 100%;
object-fit: cover;
transition: all 0.4s ease;
border-left: 0px solid #fff;
}
/* Icon style */
.icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 10px;
}
.card h3 {
font-size: 18px;
margin-bottom: 6px;
}
.card p {
font-size: 14px;
}
.cta-btn {
margin-top: 10px;
background: rgba(255,255,255,0.3);
color: #fff;
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
width: fit-content;
white-space: nowrap;
}
.footer-text {
font-size: 13px;
font-weight: 500;
}
/* Hover effects */
.cards-container:hover .card {
flex: 1;
}
.cards-container .card:hover {
flex: 2.5;
}
.cards-container .card:hover img {
width: 50%; /* show image on right */
}
/* Responsive */
@media (max-width: 992px) {
.cards-container {
flex-direction: column;
height: auto;
}
.card {
flex: none;
width: 100%;
flex-direction: column;
}
.cards-container .card:hover img {
width: 100%;
height: 180px;
margin-top: 10px;
}
}
</style>
</head>
<body>
<h1>Practice Coding & Ace Hiring Assessments</h1>
<p class="subtext">Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!</p>
<div class="cards-container">
<!-- Card 1 -->
<div class="card">
<div class="card-content">
<div>
<div class="icon">💻</div>
<h3>Coding Practice</h3>
<p>Level up your coding skills by practicing the hiring Questions.</p>
<p><strong>400+ Questions</strong></p>
</div>
<a href="#" class="cta-btn">Start Now →</a>
</div>
<img src="https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Coding Practice">
</div>
<!-- Card 2 -->
<div class="card">
<div class="card-content">
<div class="icon">📋</div>
<h3>Interview Preparation</h3>
<p>Crack top companies in just 5 days.</p>
<p class="footer-text">20+ Companies →</p>
</div>
<img src="https://images.pexels.com/photos/1438084/pexels-photo-1438084.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Interview Prep">
</div>
<!-- Card 3 -->
<div class="card">
<div class="card-content">
<div class="icon">📂</div>
<h3>Projects</h3>
<p>Projects epitomize perfect synergy for success.</p>
<p class="footer-text">15+ Projects →</p>
</div>
<img src="https://images.pexels.com/photos/267569/pexels-photo-267569.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Projects">
</div>
<!-- Card 4 -->
<div class="card">
<div class="card-content">
<div class="icon">📝</div>
<h3>Skill Based Assessments</h3>
<p>Assess your skills and get ahead of the curve.</p>
<p class="footer-text">2000+ Questions →</p>
</div>
<img src="https://images.pexels.com/photos/3769021/pexels-photo-3769021.jpeg?auto=compress&cs=tinysrgb&w=600&h=400" loading="lazy" alt="Assessments">
</div>
</div>
</body>
</html>

View File

@ -4,10 +4,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kodepilot</title>
<title>KodePilot</title>
<link rel="stylesheet" href="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>
.center-container {
display: flex;
@ -159,12 +159,12 @@
</div>
<div id="body" style="display: none;">
<header class="navbar">
<div class="logo">Kodepilot</div>
<div class="logo">KodePilot</div>
<input type="text" class="search" placeholder="Search Opportunities">
<div class="buttons">
<a href="/login">Log in</a>
<button class="business" onclick="getInTouch()">Get in touch</button>
<button class="login" onclick="goToApplay()">Apply</button>
<button class="login_first" onclick="goToLogin()">Login</button>
<button class="business" onclick="getInTouch('https://wa.me/+919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21')">Let's Talk</button>
<button class="login" onclick="getInZoho()">Request a call</button>
</div>
</header>
@ -184,63 +184,21 @@
<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: "Aditya", text: "Just Went Kodepilot!" },
{ name: "Priya", text: "won a Hackathon!" },
{ name: "Rahul", text: "earned a Scholarship!" },
{ name: "Sneha", text: "joined a Festival!" }
];
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 class="cards">
<div class="card green">Internships<br><small>Gain Practical Experience</small></div>
<div class="card orange">Mentorships<br><small>Guidance From Top Mentors</small></div>
<div class="card blue">Jobs<br><small>Explore Diverse Careers</small></div>
<div class="card purple">Practice<br><small>Refine Skills Daily</small></div>
<div class="card yellow">Competitions<br><small>Battle For Excellence</small></div>
<div class="card pink">More<br><small>Explore More Options</small></div>
</div>
<div class="cards">
<div class="card green" onclick="getInZoho()">Internships<br><small>Gain Practical Experience</small></div>
<div class="card orange" onclick="getInZoho()">Mentorships<br><small>Guidance From Top Mentors</small></div>
<div class="card blue" onclick="getInZoho()">Jobs<br><small>Explore Diverse Careers</small></div>
<div class="card purple" onclick="getInZoho()">Practice<br><small>Refine Skills Daily</small></div>
<div class="card yellow" onclick="getInZoho()">Competitions<br><small>Battle For Excellence</small></div>
<div class="card pink" onclick="getInZoho()">More<br><small>Explore More Options</small></div>
</div>
</div>
</section>
<section class="users">
<div class="users_box">
<h2>Who's using Kodepilot?</h2>
<h2>Who's using KodePilot?</h2>
<div class="know-cards">
<div>
<div class="crd">
@ -309,15 +267,15 @@
</div>
</section>
<section id="slider">
<section class="slider" id="slider">
<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">
<img src="assets/images/hai1/qa.jpg" alt="Business Meeting">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
<div class="image-overlay">
<h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -325,7 +283,7 @@
</div>
</div>
<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">
<h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a
@ -335,11 +293,10 @@
</div>
</div>
<!-- Slide 2 -->
<div class="slide1">
<div class="slide1-box">
<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">
<h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network
@ -347,8 +304,8 @@
</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay">
<h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with
@ -360,15 +317,15 @@
<div class="slide1">
<div class="slide1-box">
<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">
<h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and
a successful performance report graph.</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay">
<h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with
@ -380,15 +337,15 @@
<div class="slide1">
<div class="slide1-box">
<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">
<h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a
split view showing the finished product on a mobile phone.</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/qa.jpg" alt="Technology">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
<div class="image-overlay">
<h4>QA & Testing</h4>
<p>A close-up of a developer's screen showing a green 'Tests Passed' status and
@ -400,7 +357,7 @@
<div class="slide1">
<div class="slide1-box">
<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">
<h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network
@ -408,8 +365,8 @@
</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/aws..jpg" alt="Technology">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
<div class="image-overlay">
<h4>Cloud & DevOps</h4>
<p>An abstract, interconnected graphic of servers and data pipelines with subtle
@ -422,7 +379,7 @@
<div class="slide1">
<div class="slide1-box">
<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">
<h4>AI & Data</h4>
<p>A stunning, large-scale data visualization or chart (like a complex network
@ -430,8 +387,8 @@
</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
<div class="image-overlay">
<h4>Cybersecurity</h4>
<p>A digital shield or lock icon overlaid on a dark, technical background with
@ -444,15 +401,15 @@
<div class="slide1">
<div class="slide1-box">
<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">
<h4>Software Dev</h4>
<p>A sleek image of a professional wireframe/design on a large monitor, with a
split view showing the finished product on a mobile phone.</p>
</div>
</div>
<div class="image-container">
<img src="assets/images/hai1/aws..jpg" alt="Beach">
<div class="image-container image-container1">
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
<div class="image-overlay">
<h4>Cloud & DevOps</h4>
<p>An abstract, interconnected graphic of servers and data pipelines with subtle
@ -480,28 +437,29 @@
</div>
<div class="cards-grid">
<div class="card-add card-quizzes">
</div>
<div class="card-add card-hackathons">
</div>
<div class="card-add card-scholarships">
</div>
<div class="card-add card-conferences">
</div>
<div class="card-add card-festivals">
</div>
<div class="card-add card-quizzes"
onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20would%20like%20to%20know%20more%20about%20the%20Quizzes%20opportunities%20you%20provide.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
</div>
<div class="card-add card-hackathons"
onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20came%20across%20the%20Hackathons%20section%20on%20your%20website.%20Could%20you%20share%20more%20information%20about%20upcoming%20Hackathons%20and%20how%20to%20participate%3F%20Thanks!')">
</div>
<div class="card-add card-scholarships"
onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99m%20interested%20in%20learning%20more%20about%20the%20Scholarships%20you%20offer.%20Could%20you%20please%20provide%20the%20details%3F%20Thanks!')">
</div>
<div class="card-add card-conferences"
onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%E2%80%99d%20like%20to%20know%20more%20about%20the%20Conferences%20mentioned%20on%20your%20website.%20Could%20you%20please%20share%20the%20details%3F%20Thanks!')">
</div>
<div class="card-add card-festivals"
onclick="getInTouch('https://wa.me/9787466226?text=Hi%20KodePilot%20Team%2C%20I%20saw%20the%20Tech%20Fest%20section%20on%20your%20website%20and%20I%E2%80%99m%20interested%20in%20participating.%20Could%20you%20please%20provide%20more%20information%3F%20Thanks!')">
</div>
</div>
</div>
</section>
<section class="move-slider-ruby">
<div class="move-slider-container">
<div class="move-slider-box-static">
<div class="slide-content-static">
<h1 class="slide-static-h1"> Kodepilot </h1>
<h1 class="slide-static-h1"> KodePilot </h1>
<p class="slide-static-text">
Helping the world with career success
</p>
@ -518,13 +476,13 @@
"
</p>
<p class="slide-text">
"The Kodepilot curriculum is laser-focused on job placement. I mastered the required
"The KodePilot curriculum is laser-focused on job placement. I mastered the required
skills and secured my position at GBL with confidence."
</p>
<div class="slide-logo-box">
<div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Client Logo" class="slide-logo">
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
class="slide-logo">
<div class="profile-info">
<p class="slide-name">Dhanush</p>
<p class="slide-role">Rust Developer</p>
@ -540,15 +498,38 @@
"
</p>
<p class="slide-text">
"After taking the QA and DevOps courses, Kodepilot made me ready for the global stage. I
"The KodePilot curriculum gave me hands-on experience with networking and security. I
gained practical
skills and secured my position in network engineering with confidence."
</p>
<div class="slide-logo-box">
<div class="profile-box">
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
class="slide-logo">
<div class="profile-info">
<p class="slide-name">koushik</p>
<p class="slide-role">Network Engineer</p>
</div>
</div>
</div>
</div>
</div>
<div class="move-slider-box">
<div class="slide-content">
<p class="slide-text-cot">
"
</p>
<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."
</p>
<div class="slide-logo-box">
<div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Client Logo" class="slide-logo">
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
class="slide-logo">
<div class="profile-info">
<p class="slide-name">kevin</p>
<p class="slide-name">Amit</p>
<p class="slide-role">QA Tester</p>
</div>
</div>
@ -561,13 +542,13 @@
"
</p>
<p class="slide-text">
"Kodepilot's training in AWS and DevOps was the key to my career breakthrough. I went
"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>
<div class="slide-logo-box">
<div class="profile-box">
<img src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Client Logo" class="slide-logo">
<img src="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
class="slide-logo">
<div class="profile-info">
<p class="slide-name">John Doe</p>
<p class="slide-role">AWS</p>
@ -579,8 +560,8 @@
</div>
</div>
</section>
<section>
<!-- <div class="practice-cards-container"> -->
<section class="practice-container-parent">
<div class="practice-container">
<div class="practice-container-box">
<div class="practice-container-text-box">
@ -601,11 +582,12 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a>
</div>
<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>
<!-- Interview Preparation Card -->
<div class="practice-card">
<div class="practice-card-content">
<div>
@ -617,11 +599,12 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a>
</div>
<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>
<!-- Projects Card -->
<div class="practice-card">
<div class="practice-card-content">
<div>
@ -633,11 +616,12 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a>
</div>
<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>
<!-- Skill Based Assessments Card -->
<div class="practice-card">
<div class="practice-card-content">
<div>
@ -649,21 +633,19 @@
<a href="#" class="practice-cta-btn">Start Now ➤</a>
</div>
<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>
</section>
<section class="card-simple">
<div class="card-easy">
<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 class="card-easy-right">
<h2>The Future of Your Career Starts Now. Learn, Grow, Achieve</h2>
@ -677,15 +659,6 @@
</div>
</section>
<section class="move-slider" style="display: none;">
<div class="container-slider">
<div class="container-slider-baby container-slider-1"></div>
<div class="container-slider-baby container-slider-2"></div>
<div class="container-slider-baby container-slider-3"></div>
<div class="container-slider-baby container-slider-4"></div>
</div>
</section>
<section class="our-numbers">
<div class="stats-grid">
<div class="stat-item">
@ -719,18 +692,25 @@
</div>
</div>
</section>
<section class="corces-s">
<div class="corces"></div>
</section>
<div class="whatsapp-icon" onclick="WhatsgetInTouch()">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp" />
</div>
<footer class="footer">
<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>
<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>
<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">
@ -822,15 +802,12 @@
</ul>
</div>
</div>
<div class="footer-bottom">
<div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
<p style="margin-top: 20px 0px; padding: 10px 0px; font-size: 15px; margin-bottom : 30px">
Copyright © 2025 <a href="#" style="color: #120ee2;">Kodepilot</a> - All
rights
reserved.
</p>
</div>
<p>
Copyright © 2025
<a href="https://kodepilot.in" target="_blank">KodePilot</a>
- All rights reserved.
</p>
</div>
</footer>
</div>

844
main.css

File diff suppressed because it is too large Load Diff

714
main.js
View File

@ -1,224 +1,179 @@
function goToLogin() {
window.location.href = "/login";
}
function goToApplay() {
window.location.href = "/apply/";
}
function getInTouch() {
window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
function getInTouch(vall) {
window.open(vall, "_blank");
}
(function () {
if (window.Slide1rSliderLoaded) {
return;
function WhatsgetInTouch() {
window.open(
"https://wa.me/919787466226?text=Hi%20KodePilot%20Team%2C%0A%0AI%20came%20across%20your%20website%20and%20would%20like%20to%20know%20more%20about%20your%20Career%20Guidance%20and%20Placement%20support%20services.%20Could%20you%20please%20share%20the%20details%3F%0A%0AThanks%21",
"_blank"
);
}
function getInZoho() {
window.open("https://forms.zohopublic.in/krishnakode1/form/KodePilotRegistrationForm/formperma/A2L8xK6T13A9-s5Kxj8BqRTGsgmpKDHM0DDcZQWye5E");
}
class Slide1rSlider {
constructor({ trackId = 'slide1rTrack', prevId = 'prevBtn', nextId = 'nextBtn', autoPlayDuration = 5000, invert = true } = {}) {
this.trackId = trackId;
this.prevId = prevId;
this.nextId = nextId;
this.autoPlayDuration = autoPlayDuration;
this.invert = invert;
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.initSlider());
else this.initSlider();
}
window.Slide1rSliderLoaded = true;
class Slide1rSlider {
constructor() {
setTimeout(() => {
this.initSlider();
}, 100);
}
initSlider() {
this.track = document.getElementById(this.trackId);
if (!this.track) return console.warn('slide track not found:', this.trackId);
initSlider() {
try {
this.track = document.getElementById('slide1rTrack');
this.slides = document.querySelectorAll('.slide1');
this.prevBtn = document.getElementById('prevBtn');
this.nextBtn = document.getElementById('nextBtn');
this.originalSlides = Array.from(this.track.querySelectorAll('.slide1'));
if (this.originalSlides.length === 0) return console.warn('no .slide1 found');
if (!this.track || this.slides.length === 0) {
console.warn("Slider DOM elements not found. Retrying...");
setTimeout(() => this.initSlider(), 200);
return;
}
this.prevBtn = document.getElementById(this.prevId);
this.nextBtn = document.getElementById(this.nextId);
this.currentIndex = 0;
this.totalSlides = this.slides.length;
this.autoPlayDuration = 5000;
this.setupStructure();
this.bindEvents();
this.init();
} catch (err) {
console.error("Slider initialization failed:", err);
this.currentIndex = 1;
this.updateSlider(false);
this.startAutoPlay();
}
setupStructure() {
this.track.style.display = 'flex';
this.track.style.transition = 'transform 0.5s ease';
this.track.querySelectorAll('.slide1').forEach(s => {
s.style.minWidth = '100%';
s.style.boxSizing = 'border-box';
});
const first = this.originalSlides[0].cloneNode(true);
const last = this.originalSlides[this.originalSlides.length - 1].cloneNode(true);
this.track.insertBefore(last, this.track.firstChild);
this.track.appendChild(first);
this.slides = Array.from(this.track.querySelectorAll('.slide1'));
this.totalSlides = this.slides.length;
}
updateSlider(animate = true) {
this.track.style.transition = animate ? 'transform 0.5s ease' : 'none';
this.track.style.transform = `translateX(-${this.currentIndex * 100}%)`;
}
nextSlide() {
if (this.invert) {
this.currentIndex--;
this.updateSlider(true);
if (this.currentIndex === 0) {
setTimeout(() => {
this.track.style.transition = 'none';
this.currentIndex = this.slides.length - 2;
this.updateSlider(false);
}, 500);
}
} else {
this.currentIndex++;
this.updateSlider(true);
if (this.currentIndex === this.slides.length - 1) {
setTimeout(() => {
this.track.style.transition = 'none';
this.currentIndex = 1;
this.updateSlider(false);
}, 500);
}
}
this.restartAutoPlay();
}
init() {
try {
this.updateSlider();
this.bindEvents();
this.startAutoPlay();
this.bindKeyboardEvents();
} catch (err) {
console.error("Slider init error:", err);
prevSlide() {
if (this.invert) {
this.currentIndex++;
this.updateSlider(true);
if (this.currentIndex === this.slides.length - 1) {
setTimeout(() => {
this.track.style.transition = 'none';
this.currentIndex = 1;
this.updateSlider(false);
}, 500);
}
} else {
this.currentIndex--;
this.updateSlider(true);
if (this.currentIndex === 0) {
setTimeout(() => {
this.track.style.transition = 'none';
this.currentIndex = this.slides.length - 2;
this.updateSlider(false);
}, 500);
}
}
this.restartAutoPlay();
}
startAutoPlay() {
this.stopAutoPlay();
this.autoPlayInterval = setInterval(() => this.nextSlide(), this.autoPlayDuration);
}
updateSlider() {
try {
const translateX = -this.currentIndex * 100;
this.track.style.transform = `translateX(${translateX}%)`;
stopAutoPlay() {
if (this.autoPlayInterval) {
clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null;
}
}
} catch (err) {
console.error("Error updating slider:", err);
}
restartAutoPlay() {
this.stopAutoPlay();
this.startAutoPlay();
}
bindEvents() {
if (this.nextBtn) this.nextBtn.addEventListener('click', () => this.nextSlide());
if (this.prevBtn) this.prevBtn.addEventListener('click', () => this.prevSlide());
const container = this.track.closest('.slide1r-container') || this.track.parentElement;
if (container) {
container.addEventListener('mouseenter', () => this.stopAutoPlay());
container.addEventListener('mouseleave', () => this.startAutoPlay());
}
nextSlide() {
try {
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
this.updateSlider();
this.restartAutoPlay();
} catch (err) {
console.error("Error going to next slide:", err);
let startX = 0, endX = 0;
this.track.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; this.stopAutoPlay(); });
this.track.addEventListener('touchmove', (e) => { endX = e.touches[0].clientX; });
this.track.addEventListener('touchend', () => {
const delta = startX - endX;
if (Math.abs(delta) > 50) {
if (delta > 0) this.nextSlide(); else this.prevSlide();
}
}
prevSlide() {
try {
this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
this.updateSlider();
this.restartAutoPlay();
} catch (err) {
console.error("Error going to previous slide:", err);
}
}
goToSlide(index) {
try {
this.currentIndex = index;
this.updateSlider();
this.restartAutoPlay();
} catch (err) {
console.error("Error going to slide:", err);
}
}
startAutoPlay() {
try {
this.stopAutoPlay();
this.autoPlayInterval = setInterval(() => {
this.nextSlide();
}, this.autoPlayDuration);
} catch (err) {
console.error("Error starting autoplay:", err);
}
}
stopAutoPlay() {
if (this.autoPlayInterval) {
clearInterval(this.autoPlayInterval);
this.autoPlayInterval = null;
}
}
restartAutoPlay() {
this.stopAutoPlay();
this.startAutoPlay();
}
});
bindEvents() {
try {
if (this.nextBtn) {
this.nextBtn.addEventListener('click', () => this.nextSlide());
}
if (this.prevBtn) {
this.prevBtn.addEventListener('click', () => this.prevSlide());
}
const container = document.querySelector('.slide1r-container');
if (container) {
container.addEventListener('mouseenter', () => this.stopAutoPlay());
container.addEventListener('mouseleave', () => this.startAutoPlay());
}
let startX = 0;
let endX = 0;
if (this.track) {
this.track.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
this.stopAutoPlay();
});
this.track.addEventListener('touchmove', (e) => {
endX = e.touches[0].clientX;
});
this.track.addEventListener('touchend', () => {
const deltaX = startX - endX;
if (Math.abs(deltaX) > 50) {
if (deltaX > 0) {
this.nextSlide();
} else {
this.prevSlide();
}
}
this.startAutoPlay();
});
}
} catch (err) {
console.error("Error binding events:", err);
}
}
bindKeyboardEvents() {
const keyHandler = (e) => {
const container = document.querySelector('.slide1r-container');
if (container && this.isElementInViewport(container)) {
if (e.key === 'ArrowLeft') {
this.prevSlide();
} else if (e.key === 'ArrowRight') {
this.nextSlide();
}
}
};
document.addEventListener('keydown', keyHandler);
}
isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
document.addEventListener('keydown', (e) => {
const containerEl = document.querySelector('.slide1r-container');
if (!containerEl) return;
if (e.key === 'ArrowLeft') this.prevSlide();
if (e.key === 'ArrowRight') this.nextSlide();
});
}
}
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();
});
new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
const statItems = document.querySelectorAll('.stat-item');
@ -264,121 +219,6 @@ document.addEventListener('DOMContentLoaded', async () => {
});
}
}
// 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 Apples 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);
@ -391,17 +231,14 @@ function renderCourses(allCourses) {
container.innerHTML = '';
// Group courses by category
const grouped = {};
allCourses.forEach(course => {
if (!grouped[course.category]) grouped[course.category] = [];
grouped[course.category].push(course);
});
// Convert grouped object to array for merging
let sections = Object.entries(grouped).map(([category, courses]) => ({ category, courses }));
// Merge sections with less than 4 courses
let mergedSections = [];
let temp = { category: '', courses: [] };
@ -409,12 +246,10 @@ function renderCourses(allCourses) {
if (section.courses.length >= 4) {
mergedSections.push(section);
} else {
// Merge into temp
if (temp.category) temp.category += '/' + section.category;
else temp.category = section.category;
temp.courses.push(...section.courses);
// If merged has 4 or more, push it
if (temp.courses.length >= 4) {
mergedSections.push({ category: temp.category, courses: temp.courses });
temp = { category: '', courses: [] };
@ -452,19 +287,19 @@ function renderCourses(allCourses) {
<div class="course-image" style="background-image: url(${course.image});"></div>
</a>
<div class="course-content">
<a href="${course.link}" class="course-name" target="_blank">${course.name}</a>
<a href="/apply" class="course-name" target="_blank">${course.name}</a>
<div class="course-description">${course.description}</div>
</div>
`;
track.appendChild(courseDiv);
});
// Button scrolling
const scrollAmount = 300;
prevBtn.addEventListener('click', () => track.scrollBy({ left: -scrollAmount, behavior: 'smooth' }));
nextBtn.addEventListener('click', () => track.scrollBy({ left: scrollAmount, behavior: 'smooth' }));
// Touch swipe
let startX = 0;
let isDragging = false;
@ -518,46 +353,261 @@ 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");
});
});
class ModernMobileMenu {
constructor() {
this.buttonsContainer = document.querySelector('.buttons');
this.hamburger = null;
this.mobileMenu = null;
this.overlay = null;
this.isMenuOpen = false;
this.init();
}
init() {
this.createMobileMenu();
this.bindEvents();
this.checkScreenSize();
window.addEventListener('resize', () => this.checkScreenSize());
}
createMobileMenu() {
this.hamburger = document.createElement('div');
this.hamburger.className = 'mobile-hamburger';
this.hamburger.innerHTML = `
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
<div class="hamburger-line"></div>
`;
this.overlay = document.createElement('div');
this.overlay.className = 'mobile-menu-overlay';
this.mobileMenu = document.createElement('div');
this.mobileMenu.className = 'mobile-slide-menu';
const originalButtons = this.buttonsContainer.querySelectorAll('button');
const closeBtn = document.createElement('button');
closeBtn.className = 'menu-close-btn';
closeBtn.innerHTML = '&times;';
this.mobileMenu.appendChild(closeBtn);
originalButtons.forEach(btn => {
const mobileBtn = document.createElement('button');
mobileBtn.className = 'mobile-menu-item';
mobileBtn.textContent = btn.textContent;
mobileBtn.onclick = () => {
btn.click();
this.closeMenu();
};
this.mobileMenu.appendChild(mobileBtn);
});
this.buttonsContainer.parentNode.insertBefore(this.hamburger, this.buttonsContainer.nextSibling);
document.body.appendChild(this.overlay);
document.body.appendChild(this.mobileMenu);
}
bindEvents() {
this.hamburger.addEventListener('click', () => this.toggleMenu());
this.overlay.addEventListener('click', () => this.closeMenu());
this.mobileMenu.querySelector('.menu-close-btn').addEventListener('click', () => this.closeMenu());
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.isMenuOpen) {
this.closeMenu();
}
});
}
toggleMenu() {
this.isMenuOpen ? this.closeMenu() : this.openMenu();
}
openMenu() {
this.isMenuOpen = true;
this.hamburger.classList.add('active');
this.overlay.classList.add('active');
this.mobileMenu.classList.add('active');
document.body.style.overflow = 'hidden';
const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
items.forEach((item, index) => {
setTimeout(() => {
item.style.opacity = '1';
item.style.transform = 'translateX(0)';
}, (index + 1) * 100);
});
}
closeMenu() {
this.isMenuOpen = false;
this.hamburger.classList.remove('active');
this.overlay.classList.remove('active');
this.mobileMenu.classList.remove('active');
document.body.style.overflow = '';
const items = this.mobileMenu.querySelectorAll('.mobile-menu-item');
items.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateX(30px)';
});
}
checkScreenSize() {
if (window.innerWidth <= 480) {
this.hamburger.style.display = 'flex';
} else {
this.hamburger.style.display = 'none';
this.closeMenu();
}
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => new ModernMobileMenu());
} else {
new ModernMobileMenu();
}
document.addEventListener("DOMContentLoaded", () => {
const counters = document.querySelectorAll(".stat-number");
const animateCounter = (el, target) => {
let current = 0;
const step = Math.ceil(target / 50);
const interval = setInterval(() => {
current += step;
if (current >= target) {
current = target;
clearInterval(interval);
}
el.innerHTML = current + "<span class='highlight'>+</span>";
}, 20);
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const finalNumber = parseInt(el.textContent);
animateCounter(el, finalNumber);
observer.unobserve(el);
}
});
}, { threshold: 0.3 });
counters.forEach(counter => observer.observe(counter));
});
// i know it is a bad code but it works 😅
document.addEventListener("DOMContentLoaded", () => {
const track = document.querySelector(".move-slider-animation-box");
const container = document.querySelector(".container");
let pos = 0;
const normalSpeed = 1;
let speed = 20;
function animate() {
pos -= speed;
track.style.transform = `translateX(${pos}px)`;
if (pos <= -100 && speed !== normalSpeed) {
speed = normalSpeed;
}
const firstChild = track.firstElementChild;
const firstRect = firstChild.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
if (firstRect.right <= containerRect.left) {
track.appendChild(firstChild);
pos += firstChild.offsetWidth + 20;
track.style.transform = `translateX(${pos}px)`;
}
requestAnimationFrame(animate);
}
animate();
});