fix: cloud/local compatablity
This commit is contained in:
parent
2c7200f4fc
commit
21b6e5cd40
851
home.html
Normal file
851
home.html
Normal file
@ -0,0 +1,851 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kodepilot</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/logo/favicon.ico">
|
||||
<style>
|
||||
.center-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.cube-wrapper {
|
||||
transform-style: preserve-3d;
|
||||
animation: bouncing 2s infinite;
|
||||
}
|
||||
|
||||
.cube {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg) rotateZ(45deg);
|
||||
animation: rotation 2s infinite;
|
||||
}
|
||||
|
||||
.cube-faces {
|
||||
transform-style: preserve-3d;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
position: relative;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0) translateY(0) translateZ(-40px);
|
||||
}
|
||||
|
||||
.cube-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #003366;
|
||||
border: solid 1px rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.cube-face.shadow {
|
||||
transform: translateZ(-80px);
|
||||
animation: bouncing-shadow 2s infinite;
|
||||
}
|
||||
|
||||
.cube-face.top {
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
|
||||
.cube-face.front {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
|
||||
.cube-face.back {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(-90deg) translateZ(-80px);
|
||||
}
|
||||
|
||||
.cube-face.right {
|
||||
transform-origin: 50% 0;
|
||||
transform: rotateX(-90deg) translateY(-80px);
|
||||
}
|
||||
|
||||
.cube-face.left {
|
||||
transform-origin: 50% 0;
|
||||
transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
|
||||
animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
|
||||
animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bouncing {
|
||||
0% {
|
||||
transform: translateY(-40px);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateY(40px);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-40px);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bouncing-shadow {
|
||||
0% {
|
||||
transform: translateZ(-80px) scale(1.3);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateZ(0);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateZ(-80px) scale(1.3);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="msg" style="font-size: largest;" class="center-container">
|
||||
<div class="scene">
|
||||
<div class="cube-wrapper">
|
||||
<div class="cube">
|
||||
<div class="cube-faces">
|
||||
<div class="cube-face shadow"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face back"></div>
|
||||
<div class="cube-face front"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="body" style="display: none;">
|
||||
<header class="navbar">
|
||||
<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()">Let's Talk</button>
|
||||
<button class="login" onclick="goToApplay()">Request a call</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero_container">
|
||||
<div class="cards_box">
|
||||
<h1><span class="blue_text">Unlock</span> Your Career</h1>
|
||||
<p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired
|
||||
by
|
||||
your
|
||||
dream company.</p>
|
||||
<button class="button_blue_box">
|
||||
<img src="https://d8it4huxumps7.cloudfront.net/uploads/images/655edc8c1fab9_diamond_1.png?d=82x84"
|
||||
width="41" height="42" alt="diamond" loading="lazy">
|
||||
<span>
|
||||
<span class="nameContainer">Aditya</span>
|
||||
<strong class="descContainer"> Just Went Kodepilot!</strong>
|
||||
</span>
|
||||
</button>
|
||||
<style>
|
||||
.nameContainer,
|
||||
.descContainer {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const data = [
|
||||
{ name: "Ben", text: "Just Went HCL!" },
|
||||
{ name: "Rakul", text: "Just Went Accenture!" },
|
||||
{ name: "Anjali", text: "Joined a Ebmpapst!" },
|
||||
{ name: "Sneha", text: "joined a Infosys!" },
|
||||
{ name: "Amit", text: "Just Went JBL!" },
|
||||
{ name: "Vikram", text: "Just Went UST!" },
|
||||
{ name: "Priya", text: "Just Went Serviceplaingroup!" }
|
||||
];
|
||||
let index1 = 0;
|
||||
const nameEl1 = document.querySelector(".nameContainer");
|
||||
const descEl1 = document.querySelector(".descContainer");
|
||||
setInterval(() => {
|
||||
nameEl1.classList.add("fade-out");
|
||||
descEl1.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
index1 = (index1 + 1) % data.length;
|
||||
nameEl1.textContent = data[index1].name;
|
||||
descEl1.textContent = " " + data[index1].text;
|
||||
nameEl1.classList.remove("fade-out");
|
||||
descEl1.classList.remove("fade-out");
|
||||
nameEl1.classList.add("fade-in");
|
||||
descEl1.classList.add("fade-in");
|
||||
setTimeout(() => {
|
||||
nameEl1.classList.remove("fade-in");
|
||||
descEl1.classList.remove("fade-in");
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, 5000);
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section class="users">
|
||||
<div class="users_box">
|
||||
<h2>Who's using Kodepilot?</h2>
|
||||
<div class="know-cards">
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Students and Professionals</div>
|
||||
<p><strong>Unlock
|
||||
Your
|
||||
Potential:</strong> Compete, Build Resume, Grow and get Hired! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163"
|
||||
alt="Students and Professionals" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Companies and Recruiters</div>
|
||||
<p><strong>Discover
|
||||
Right
|
||||
Talent:</strong> Hire, Engage, and Brand Like Never Before! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67727626b861a_img2.png?d=211x163"
|
||||
alt="Companies and Recruiters" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Colleges</div>
|
||||
<p><strong>Bridge
|
||||
Academia
|
||||
and Industry:</strong> Empower Students with Real-World Opportunities! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b2a99511_img3.png?d=211x163"
|
||||
alt="ridge Academia and Industry" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mnc">
|
||||
<div class="mnc-box">
|
||||
<div class="mnc-row">
|
||||
<h2>
|
||||
<span class="gray"> Top Industries </span>
|
||||
<span class="blue_text">We Placed</span>
|
||||
</h2>
|
||||
<div class="mnc-logos">
|
||||
<div class="mnc-logos-track">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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
|
||||
a successful performance report graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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
|
||||
split view showing the finished product on a mobile phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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">
|
||||
<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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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">
|
||||
<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
|
||||
a successful performance report graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
|
||||
powerful infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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">
|
||||
<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
|
||||
logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
|
||||
powerful infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="nav-button prev-btn" id="prevBtn" aria-label="Previous slide"></button>
|
||||
<button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="opportunity-section">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
Pick <span class="highlight">The Right Opportunity!</span>
|
||||
</h2>
|
||||
<div class="header-content">
|
||||
<p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<p class="slide-static-text">
|
||||
Helping the world with career success
|
||||
</p>
|
||||
</p>
|
||||
<p class="slide-static-footer">
|
||||
100% Placement Success
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="move-slider-animation-box">
|
||||
<div class="move-slider-box">
|
||||
<div class="slide-content">
|
||||
<p class="slide-text-cot">
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"The Kodepilot curriculum is laser-focused on job placement. I mastered the required
|
||||
skills and secured my position at GBL with confidence."
|
||||
</p>
|
||||
<div class="slide-logo-box">
|
||||
<div class="profile-box">
|
||||
<img src="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>
|
||||
</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="assets/images/hai1/user-icon.svg" alt="Client Logo" class="slide-logo">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">Amit</p>
|
||||
<p class="slide-role">QA Tester</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">
|
||||
"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="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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
<div class="practice-container">
|
||||
<div class="practice-container-box">
|
||||
<div class="practice-container-text-box">
|
||||
<h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of
|
||||
your
|
||||
dream companies & ace your placement game!</p>
|
||||
</div>
|
||||
<div class="practice-cards-wrapper">
|
||||
<div class="practice-card active">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
<div class="practice-footer-text">400+ Questions</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack Top companies in just 5 days with unbelivable learning</p>
|
||||
<div class="practice-footer-text">20+ Companies</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<div class="practice-footer-text">15+ Projects</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<div class="practice-footer-text">2000+ Questions</div>
|
||||
</div>
|
||||
<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">
|
||||
</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">
|
||||
</div>
|
||||
<div class="card-easy-right">
|
||||
<h2>The Future of Your Career Starts Now. Learn, Grow, Achieve</h2>
|
||||
<p>Stop waiting for opportunity—create it. Dive into our extensive library to level up your
|
||||
expertise and unlock your next big career move.</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span>✓</span>50+ Courses</div>
|
||||
<div class="feature"><span>✓</span>Certificate</div>
|
||||
<div class="feature"><span>✓</span>Projects & Assignments</div>
|
||||
</div>
|
||||
</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">
|
||||
<span class="stat-number">100<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Active Users</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">16<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Assessments</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1000<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Opportunities</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Brands trust us</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">30<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Organisations</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">5<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Countries</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="corces-s">
|
||||
<div class="corces"></div>
|
||||
</section>
|
||||
<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>
|
||||
<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">
|
||||
<i class="fas fa-envelope"></i>
|
||||
careers@kodepilot.com
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
+91 88707 60431<span style="font-size: 12px;"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong style="color: white; font-size: 14px; line-height: 30px;">Support Inquiries</strong>
|
||||
<div style="margin-bottom: 20px; line-height: 23px; margin-left: -27px;">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
support@kodepilot.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-icons">
|
||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#"><i class="fab fa-facebook"></i></a>
|
||||
<a href="#"><i class="fab fa-telegram"></i></a>
|
||||
<a href="#"><i class="fab fa-discord"></i></a>
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="newsletter-section">
|
||||
<h4>Stay Updated</h4>
|
||||
<p>We'll send you updates on the latest courses and coding opportunities to enhance your skills
|
||||
and
|
||||
advance your career.</p>
|
||||
|
||||
<div class="newsletter-form">
|
||||
<input type="email" placeholder="Subscribe to our newsletter!">
|
||||
<button type="submit">></button>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="#" class="btn btn-primary">Start Learning Now</a>
|
||||
<a href="#" class="btn btn-secondary"><i class="fas fa-code"></i> View Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Courses</h3>
|
||||
<ul>
|
||||
<li><a href="#">Software Development</a></li>
|
||||
<li><a href="#">Cloud & DevOps</a></li>
|
||||
<li><a href="#">AI & Data</a></li>
|
||||
<li><a href="#">Cybersecurity</a></li>
|
||||
<li><a href="#">Quality & Testing</a></li>
|
||||
<li><a href="#">Enterprise Tech</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top: 30px;">Learning Paths</h3>
|
||||
<ul>
|
||||
<li><a href="#">Beginner to Pro</a></li>
|
||||
<li><a href="#">Career Switcher</a></li>
|
||||
<li><a href="#">Skill Enhancement</a></li>
|
||||
<li><a href="#">Project-Based Learning</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="#">Coding Tutorials</a></li>
|
||||
<li><a href="#">Blog Articles</a></li>
|
||||
<li><a href="#">Code Challenges</a></li>
|
||||
<li><a href="#">Live Workshops</a></li>
|
||||
<li><a href="#">Student Projects</a></li>
|
||||
<li><a href="#">Career Guidance</a></li>
|
||||
<li><a href="#">Interview Preparation</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top: 30px;">Community</h3>
|
||||
<ul>
|
||||
<li><a href="#">Forums & Study Groups</a></li>
|
||||
<li><a href="#">Code Reviews</a></li>
|
||||
<li><a href="#">Mentorship & Alumni</a></li>
|
||||
</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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script src="main.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).on("load", function () {
|
||||
$('#msg').show();
|
||||
setTimeout(function () {
|
||||
$('#body').show();
|
||||
$('#msg').hide();
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
860
index.html
860
index.html
@ -1,858 +1,2 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<style>
|
||||
.center-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.cube-wrapper {
|
||||
transform-style: preserve-3d;
|
||||
animation: bouncing 2s infinite;
|
||||
}
|
||||
|
||||
.cube {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg) rotateZ(45deg);
|
||||
animation: rotation 2s infinite;
|
||||
}
|
||||
|
||||
.cube-faces {
|
||||
transform-style: preserve-3d;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
position: relative;
|
||||
transform-origin: 0 0;
|
||||
transform: translateX(0) translateY(0) translateZ(-40px);
|
||||
}
|
||||
|
||||
.cube-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: #003366;
|
||||
border: solid 1px rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.cube-face.shadow {
|
||||
transform: translateZ(-80px);
|
||||
animation: bouncing-shadow 2s infinite;
|
||||
}
|
||||
|
||||
.cube-face.top {
|
||||
transform: translateZ(80px);
|
||||
}
|
||||
|
||||
.cube-face.front {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(-90deg);
|
||||
}
|
||||
|
||||
.cube-face.back {
|
||||
transform-origin: 0 50%;
|
||||
transform: rotateY(-90deg) translateZ(-80px);
|
||||
}
|
||||
|
||||
.cube-face.right {
|
||||
transform-origin: 50% 0;
|
||||
transform: rotateX(-90deg) translateY(-80px);
|
||||
}
|
||||
|
||||
.cube-face.left {
|
||||
transform-origin: 50% 0;
|
||||
transform: rotateX(-90deg) translateY(-80px) translateZ(80px);
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(45deg);
|
||||
animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(225deg);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateX(45deg) rotateY(0) rotateZ(405deg);
|
||||
animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bouncing {
|
||||
0% {
|
||||
transform: translateY(-40px);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateY(40px);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-40px);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bouncing-shadow {
|
||||
0% {
|
||||
transform: translateZ(-80px) scale(1.3);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateZ(0);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateZ(-80px) scale(1.3);
|
||||
animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="msg" style="font-size: largest;" class="center-container">
|
||||
<div class="scene">
|
||||
<div class="cube-wrapper">
|
||||
<div class="cube">
|
||||
<div class="cube-faces">
|
||||
<div class="cube-face shadow"></div>
|
||||
<div class="cube-face bottom"></div>
|
||||
<div class="cube-face top"></div>
|
||||
<div class="cube-face left"></div>
|
||||
<div class="cube-face right"></div>
|
||||
<div class="cube-face back"></div>
|
||||
<div class="cube-face front"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="body" style="display: none;">
|
||||
<header class="navbar">
|
||||
<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()">Let's Talk</button>
|
||||
<button class="login" onclick="goToApplay()">Request a call</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero_container">
|
||||
<div class="cards_box">
|
||||
<h1><span class="blue_text">Unlock</span> Your Career</h1>
|
||||
<p>Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired
|
||||
by
|
||||
your
|
||||
dream company.</p>
|
||||
<button class="button_blue_box">
|
||||
<img src="https://d8it4huxumps7.cloudfront.net/uploads/images/655edc8c1fab9_diamond_1.png?d=82x84"
|
||||
width="41" height="42" alt="diamond" loading="lazy">
|
||||
<span>
|
||||
<span class="nameContainer">Aditya</span>
|
||||
<strong class="descContainer"> Just Went Kodepilot!</strong>
|
||||
</span>
|
||||
</button>
|
||||
<style>
|
||||
.nameContainer,
|
||||
.descContainer {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const data = [
|
||||
{ name: "Ben", text: "Just Went HCL!" },
|
||||
{ name: "Rakul", text: "Just Went Accenture!" },
|
||||
{ name: "Anjali", text: "Joined a Ebmpapst!" },
|
||||
{ name: "Sneha", text: "joined a Infosys!" },
|
||||
{ name: "Amit", text: "Just Went JBL!" },
|
||||
{ name: "Vikram", text: "Just Went UST!" },
|
||||
{ name: "Priya", text: "Just Went Serviceplaingroup!" }
|
||||
];
|
||||
let index1 = 0;
|
||||
const nameEl1 = document.querySelector(".nameContainer");
|
||||
const descEl1 = document.querySelector(".descContainer");
|
||||
setInterval(() => {
|
||||
nameEl1.classList.add("fade-out");
|
||||
descEl1.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
index1 = (index1 + 1) % data.length;
|
||||
nameEl1.textContent = data[index1].name;
|
||||
descEl1.textContent = " " + data[index1].text;
|
||||
nameEl1.classList.remove("fade-out");
|
||||
descEl1.classList.remove("fade-out");
|
||||
nameEl1.classList.add("fade-in");
|
||||
descEl1.classList.add("fade-in");
|
||||
setTimeout(() => {
|
||||
nameEl1.classList.remove("fade-in");
|
||||
descEl1.classList.remove("fade-in");
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, 5000);
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section class="users">
|
||||
<div class="users_box">
|
||||
<h2>Who's using Kodepilot?</h2>
|
||||
<div class="know-cards">
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Students and Professionals</div>
|
||||
<p><strong>Unlock
|
||||
Your
|
||||
Potential:</strong> Compete, Build Resume, Grow and get Hired! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b0c0d0f7_img1.png?d=211x163"
|
||||
alt="Students and Professionals" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Companies and Recruiters</div>
|
||||
<p><strong>Discover
|
||||
Right
|
||||
Talent:</strong> Hire, Engage, and Brand Like Never Before! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67727626b861a_img2.png?d=211x163"
|
||||
alt="Companies and Recruiters" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="crd">
|
||||
<div class="d-flex flex-column">
|
||||
<div class="h4">Colleges</div>
|
||||
<p><strong>Bridge
|
||||
Academia
|
||||
and Industry:</strong> Empower Students with Real-World Opportunities! </p>
|
||||
</div><img
|
||||
src="https://d8it4huxumps7.cloudfront.net/uploads/images/67724b2a99511_img3.png?d=211x163"
|
||||
alt="ridge Academia and Industry" width="105" height="81" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mnc">
|
||||
<div class="mnc-box">
|
||||
<div class="mnc-row">
|
||||
<h2>
|
||||
<span class="gray"> Top Industries </span>
|
||||
<span class="blue_text">We Placed</span>
|
||||
</h2>
|
||||
<div class="mnc-logos">
|
||||
<div class="mnc-logos-track">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
<img class="image-hcl" src="https://repo.dhanu.cloud/ico/hcl.svg" alt="hcl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ebmpapst.svg" alt="ebmpapst">
|
||||
<img src="https://repo.dhanu.cloud/ico/infosys.svg" alt="infosys">
|
||||
<img src="https://repo.dhanu.cloud/ico/jbl.svg" alt="jbl">
|
||||
<img src="https://repo.dhanu.cloud/ico/ust.svg" alt="ust">
|
||||
<img src="https://repo.dhanu.cloud/ico/accenture.svg" alt="accenture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<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
|
||||
a successful performance report graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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
|
||||
split view showing the finished product on a mobile phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<div class="image-overlay">
|
||||
<h4>AI & Data</h4>
|
||||
<p>A stunning, large-scale data visualization or chart (like a complex network
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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="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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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="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
|
||||
a successful performance report graph.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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
|
||||
logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
|
||||
powerful infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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
|
||||
graph) displayed on a screen, hinting at discovery and high-level strategy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<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
|
||||
green/blue code lines, symbolizing protection.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<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="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
|
||||
logos (AWS/Azure/GCP-style icons, if usage is permitted) to symbolize
|
||||
powerful infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="nav-button prev-btn" id="prevBtn" aria-label="Previous slide"></button>
|
||||
<button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="opportunity-section">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
Pick <span class="highlight">The Right Opportunity!</span>
|
||||
</h2>
|
||||
<div class="header-content">
|
||||
<p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<p class="slide-static-text">
|
||||
Helping the world with career success
|
||||
</p>
|
||||
</p>
|
||||
<p class="slide-static-footer">
|
||||
100% Placement Success
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="move-slider-animation-box">
|
||||
<div class="move-slider-box">
|
||||
<div class="slide-content">
|
||||
<p class="slide-text-cot">
|
||||
"
|
||||
</p>
|
||||
<p class="slide-text">
|
||||
"The Kodepilot curriculum is laser-focused on job placement. I mastered the required
|
||||
skills and secured my position at GBL with confidence."
|
||||
</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">Dhanush</p>
|
||||
<p class="slide-role">Rust Developer</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="templateapi/assets/images/hai1/user-icon.svg" alt="Client Logo"
|
||||
class="slide-logo">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">Amit</p>
|
||||
<p class="slide-role">QA Tester</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">
|
||||
"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">
|
||||
<div class="profile-info">
|
||||
<p class="slide-name">John Doe</p>
|
||||
<p class="slide-role">AWS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
<div class="practice-container">
|
||||
<div class="practice-container-box">
|
||||
<div class="practice-container-text-box">
|
||||
<h1 class="practice-title">Practice Coding & Ace Hiring Assessments</h1>
|
||||
<p class="practice-subtitle">Level up your coding skills by practicing the hiring assessments of
|
||||
your
|
||||
dream companies & ace your placement game!</p>
|
||||
</div>
|
||||
<div class="practice-cards-wrapper">
|
||||
<div class="practice-card active">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">💻</div>
|
||||
<h3>Coding Practice</h3>
|
||||
<p>Level up your coding skills by practicing the hiring Questions.</p>
|
||||
<div class="practice-footer-text">400+ Questions</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📋</div>
|
||||
<h3>Interview Preparation</h3>
|
||||
<p>Crack Top companies in just 5 days with unbelivable learning</p>
|
||||
<div class="practice-footer-text">20+ Companies</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📂</div>
|
||||
<h3>Projects</h3>
|
||||
<p>Projects epitomize perfect synergy for success.</p>
|
||||
<div class="practice-footer-text">15+ Projects</div>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
<div class="practice-card-icon">📝</div>
|
||||
<h3>Skill Based Assessments</h3>
|
||||
<p>Assess your skills and get ahead of the curve.</p>
|
||||
<div class="practice-footer-text">2000+ Questions</div>
|
||||
</div>
|
||||
<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">
|
||||
</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">
|
||||
</div>
|
||||
<div class="card-easy-right">
|
||||
<h2>The Future of Your Career Starts Now. Learn, Grow, Achieve</h2>
|
||||
<p>Stop waiting for opportunity—create it. Dive into our extensive library to level up your
|
||||
expertise and unlock your next big career move.</p>
|
||||
<div class="features">
|
||||
<div class="feature"><span>✓</span>50+ Courses</div>
|
||||
<div class="feature"><span>✓</span>Certificate</div>
|
||||
<div class="feature"><span>✓</span>Projects & Assignments</div>
|
||||
</div>
|
||||
</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">
|
||||
<span class="stat-number">100<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Active Users</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">16<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Assessments</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1000<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Opportunities</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Brands trust us</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">30<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Organisations</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">5<span class="highlight">+</span></span>
|
||||
<span class="stat-label">Countries</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="corces-s">
|
||||
<div class="corces"></div>
|
||||
</section>
|
||||
<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>
|
||||
<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">
|
||||
<i class="fas fa-envelope"></i>
|
||||
careers@kodepilot.com
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-phone"></i>
|
||||
+91 88707 60431<span style="font-size: 12px;"> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<strong style="color: white; font-size: 14px; line-height: 30px;">Support Inquiries</strong>
|
||||
<div style="margin-bottom: 20px; line-height: 23px; margin-left: -27px;">
|
||||
<div class="contact-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
support@kodepilot.com
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-icons">
|
||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#"><i class="fab fa-linkedin"></i></a>
|
||||
<a href="#"><i class="fab fa-facebook"></i></a>
|
||||
<a href="#"><i class="fab fa-telegram"></i></a>
|
||||
<a href="#"><i class="fab fa-discord"></i></a>
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
<a href="#"><i class="fab fa-youtube"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="newsletter-section">
|
||||
<h4>Stay Updated</h4>
|
||||
<p>We'll send you updates on the latest courses and coding opportunities to enhance your skills
|
||||
and
|
||||
advance your career.</p>
|
||||
|
||||
<div class="newsletter-form">
|
||||
<input type="email" placeholder="Subscribe to our newsletter!">
|
||||
<button type="submit">></button>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="#" class="btn btn-primary">Start Learning Now</a>
|
||||
<a href="#" class="btn btn-secondary"><i class="fas fa-code"></i> View Courses</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Courses</h3>
|
||||
<ul>
|
||||
<li><a href="#">Software Development</a></li>
|
||||
<li><a href="#">Cloud & DevOps</a></li>
|
||||
<li><a href="#">AI & Data</a></li>
|
||||
<li><a href="#">Cybersecurity</a></li>
|
||||
<li><a href="#">Quality & Testing</a></li>
|
||||
<li><a href="#">Enterprise Tech</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top: 30px;">Learning Paths</h3>
|
||||
<ul>
|
||||
<li><a href="#">Beginner to Pro</a></li>
|
||||
<li><a href="#">Career Switcher</a></li>
|
||||
<li><a href="#">Skill Enhancement</a></li>
|
||||
<li><a href="#">Project-Based Learning</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>Resources</h3>
|
||||
<ul>
|
||||
<li><a href="#">Coding Tutorials</a></li>
|
||||
<li><a href="#">Blog Articles</a></li>
|
||||
<li><a href="#">Code Challenges</a></li>
|
||||
<li><a href="#">Live Workshops</a></li>
|
||||
<li><a href="#">Student Projects</a></li>
|
||||
<li><a href="#">Career Guidance</a></li>
|
||||
<li><a href="#">Interview Preparation</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 style="margin-top: 30px;">Community</h3>
|
||||
<ul>
|
||||
<li><a href="#">Forums & Study Groups</a></li>
|
||||
<li><a href="#">Code Reviews</a></li>
|
||||
<li><a href="#">Mentorship & Alumni</a></li>
|
||||
</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>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script src="templateapi/main.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).on("load", function () {
|
||||
$('#msg').show();
|
||||
setTimeout(function () {
|
||||
$('#body').show();
|
||||
$('#msg').hide();
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<iframe src="home.html" style="width:100%; height:100%; border:none;"></iframe>
|
||||
<iframe src="templateapi/home.html" style="width:100%; height:100%; border:none;"></iframe>
|
||||
Loading…
Reference in New Issue
Block a user