Compare commits
No commits in common. "main" and "image" have entirely different histories.
132
.gitignore
vendored
132
.gitignore
vendored
@ -1,132 +0,0 @@
|
||||
# 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
|
||||
@ -1,12 +0,0 @@
|
||||
<?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>
|
||||
|
Before Width: | Height: | Size: 594 B |
Binary file not shown.
202
dynamic-banner.html
Normal file
202
dynamic-banner.html
Normal file
@ -0,0 +1,202 @@
|
||||
<!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>
|
||||
257
index.html
257
index.html
@ -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="templateapi/assets/images/logo/favicon.ico">
|
||||
<link rel="icon" type="image/x-icon" href="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">
|
||||
<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>
|
||||
<a href="/login">Log in</a>
|
||||
<button class="business" onclick="getInTouch()">Get in touch</button>
|
||||
<button class="login" onclick="goToApplay()">Apply</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -184,21 +184,63 @@
|
||||
<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">
|
||||
@ -267,15 +309,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slider" id="slider">
|
||||
<section 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 image-container1">
|
||||
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Business Meeting">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -283,7 +325,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/hai12.jpg" alt="Architecture">
|
||||
<img src="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
|
||||
@ -293,10 +335,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
|
||||
<img src="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
|
||||
@ -304,8 +347,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -317,15 +360,15 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Analytics">
|
||||
<img src="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 image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -337,15 +380,15 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/hai12.jpg" alt="Analytics">
|
||||
<img src="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 image-container1">
|
||||
<img src="templateapi/assets/images/hai1/qa.jpg" alt="Technology">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -357,7 +400,7 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
|
||||
<img src="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
|
||||
@ -365,8 +408,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Technology">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -379,7 +422,7 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/ai.jpg" alt="Analytics">
|
||||
<img src="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
|
||||
@ -387,8 +430,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container image-container1">
|
||||
<img src="templateapi/assets/images/hai1/cyber.jpg" alt="Technology">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -401,15 +444,15 @@
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img src="templateapi/assets/images/hai1/hai12.jpg" alt="Creativity">
|
||||
<img src="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 image-container1">
|
||||
<img src="templateapi/assets/images/hai1/aws..jpg" alt="Beach">
|
||||
<div class="image-container">
|
||||
<img src="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
|
||||
@ -437,29 +480,28 @@
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
</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>
|
||||
@ -476,13 +518,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="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<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">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">Dhanush</p>
|
||||
<p class="slide-role">Rust Developer</p>
|
||||
@ -498,38 +540,15 @@
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"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
|
||||
"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="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<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">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">Amit</p>
|
||||
<p class="slide-name">kevin</p>
|
||||
<p class="slide-role">QA Tester</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -542,13 +561,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="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<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">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">John Doe</p>
|
||||
<p class="slide-role">AWS</p>
|
||||
@ -560,8 +579,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="practice-container-parent">
|
||||
<section>
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
<div class="practice-container">
|
||||
<div class="practice-container-box">
|
||||
<div class="practice-container-text-box">
|
||||
@ -582,12 +601,11 @@
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="templateapi/assets/images/codinghiringassesments/nope_1.png"
|
||||
alt="Coding Practice">
|
||||
<img src="assets/images/codinghiringassesments/nope_1.png" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -599,12 +617,11 @@
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="templateapi/assets/images/codinghiringassesments/nope_2.png"
|
||||
alt="Coding Practice">
|
||||
<img src="assets/images/codinghiringassesments/nope_2.png" alt="Coding Practice">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Projects Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -616,12 +633,11 @@
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="templateapi/assets/images/codinghiringassesments/nope_3.webp"
|
||||
alt="Coding Practice">
|
||||
<img src="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>
|
||||
@ -633,19 +649,21 @@
|
||||
<a href="#" class="practice-cta-btn">Start Now ➤</a>
|
||||
</div>
|
||||
<div class="practice-card-svg">
|
||||
<img src="templateapi/assets/images/codinghiringassesments/nope_4.webp"
|
||||
alt="Coding Practice">
|
||||
<img src="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="templateapi/assets/images/learn/learn.png" alt="Student Image">
|
||||
<img src="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>
|
||||
@ -659,6 +677,15 @@
|
||||
</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">
|
||||
@ -692,25 +719,18 @@
|
||||
</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">
|
||||
@ -802,12 +822,15 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>
|
||||
Copyright © 2025
|
||||
<a href="https://kodepilot.in" target="_blank">KodePilot</a>
|
||||
- All rights reserved.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
738
main.js
738
main.js
@ -1,179 +1,224 @@
|
||||
function goToLogin() {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
function goToApplay() {
|
||||
window.location.href = "/apply/";
|
||||
}
|
||||
|
||||
|
||||
function getInTouch(vall) {
|
||||
window.open(vall, "_blank");
|
||||
function getInTouch() {
|
||||
window.open("https://wa.me/1234567890?text=Hi%20Link%20kodepilote%20Team...", "_blank");
|
||||
}
|
||||
|
||||
|
||||
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();
|
||||
(function () {
|
||||
if (window.Slide1rSliderLoaded) {
|
||||
return;
|
||||
}
|
||||
window.Slide1rSliderLoaded = true;
|
||||
|
||||
initSlider() {
|
||||
this.track = document.getElementById(this.trackId);
|
||||
if (!this.track) return console.warn('slide track not found:', this.trackId);
|
||||
|
||||
this.originalSlides = Array.from(this.track.querySelectorAll('.slide1'));
|
||||
if (this.originalSlides.length === 0) return console.warn('no .slide1 found');
|
||||
|
||||
this.prevBtn = document.getElementById(this.prevId);
|
||||
this.nextBtn = document.getElementById(this.nextId);
|
||||
|
||||
this.setupStructure();
|
||||
this.bindEvents();
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
stopAutoPlay() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval);
|
||||
this.autoPlayInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
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());
|
||||
class Slide1rSlider {
|
||||
constructor() {
|
||||
setTimeout(() => {
|
||||
this.initSlider();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
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();
|
||||
initSlider() {
|
||||
try {
|
||||
this.track = document.getElementById('slide1rTrack');
|
||||
this.slides = document.querySelectorAll('.slide1');
|
||||
this.prevBtn = document.getElementById('prevBtn');
|
||||
this.nextBtn = document.getElementById('nextBtn');
|
||||
|
||||
if (!this.track || this.slides.length === 0) {
|
||||
console.warn("Slider DOM elements not found. Retrying...");
|
||||
setTimeout(() => this.initSlider(), 200);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
this.autoPlayDuration = 5000;
|
||||
|
||||
this.init();
|
||||
} catch (err) {
|
||||
console.error("Slider initialization failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
try {
|
||||
this.updateSlider();
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
this.bindKeyboardEvents();
|
||||
} catch (err) {
|
||||
console.error("Slider init error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
updateSlider() {
|
||||
try {
|
||||
const translateX = -this.currentIndex * 100;
|
||||
this.track.style.transform = `translateX(${translateX}%)`;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error updating slider:", err);
|
||||
}
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
try {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to next slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Slide1rSlider({ invert: true, autoPlayDuration: 4000 });
|
||||
new Slide1rSlider();
|
||||
})();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const track = document.querySelector(".move-slider-track");
|
||||
const boxes = Array.from(track.children);
|
||||
|
||||
boxes.forEach(box => {
|
||||
const clone = box.cloneNode(true);
|
||||
track.appendChild(clone);
|
||||
});
|
||||
|
||||
let position = 0;
|
||||
const speed = 1;
|
||||
|
||||
function animate() {
|
||||
position -= speed;
|
||||
if (Math.abs(position) >= track.scrollWidth / 2) {
|
||||
position = 0;
|
||||
}
|
||||
track.style.transform = `translateX(${position}px)`;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
});
|
||||
|
||||
|
||||
const statItems = document.querySelectorAll('.stat-item');
|
||||
|
||||
@ -219,6 +264,121 @@ 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 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);
|
||||
|
||||
|
||||
@ -231,14 +391,17 @@ 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: [] };
|
||||
|
||||
@ -246,10 +409,12 @@ 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: [] };
|
||||
@ -287,19 +452,19 @@ function renderCourses(allCourses) {
|
||||
<div class="course-image" style="background-image: url(${course.image});"></div>
|
||||
</a>
|
||||
<div class="course-content">
|
||||
<a href="/apply" class="course-name" target="_blank">${course.name}</a>
|
||||
<a href="${course.link}" 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;
|
||||
|
||||
@ -353,261 +518,46 @@ 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
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");
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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 = '×';
|
||||
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();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user