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

feat: banner added

Browse Source
This commit is contained in:
dhanush.s 2025-09-25 16:34:09 +05:30
parent fbe12af676
commit 4bccda809c
4 changed files with 386 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
banner.html
View File

@ -1,181 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill Card</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
display: flex;
width: 1200px;
background-color: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.card-left {
flex: 1;
background-color: #FFD966;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.card-left img {
width: 80%;
border-radius: 15px;
}
/* Optional: floating icons */
.icon {
position: absolute;
background: white;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
animation: float 3s ease-in-out infinite;
}
.icon1 { top: 20%; left: 10%; animation-delay: 0s;}
.icon2 { top: 10%; right: 15%; animation-delay: 0.5s;}
.icon3 { bottom: 20%; left: 20%; animation-delay: 1s;}
.icon4 { bottom: 15%; right: 10%; animation-delay: 1.5s;}
@keyframes float {
0%, 100% { transform: translateY(0);}
50% { transform: translateY(-10px);}
}
.card-right {
flex: 1;
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-right h2 {
font-size: 2em;
color: #0b2e6f;
margin: 0 0 20px 0;
}
.card-right p {
font-size: 1em;
color: #555;
margin-bottom: 20px;
}
.features {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.feature {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.95em;
color: #555;
}
.feature span {
background: #FFD966;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #0b2e6f;
font-weight: bold;
}
.card-right button {
background-color: #0b2e6f;
color: white;
border: none;
padding: 8px 18px; /* controls height and width */
border-radius: 25px;
font-size: 0.9em;
width: auto; /* ensures it doesn't stretch */
max-width: 155px; /* optional limit */
display: inline-block; /* prevents flex from stretching it */
cursor: pointer;
transition: background 0.3s;
}
.card-right button:hover {
background-color: #1d4fa0;
}
@media (max-width: 900px) {
.card {
flex-direction: column;
width: 90%;
}
.card-right {
padding: 80px 50px; /* more top/bottom space increases height */
}
.card-left img {
width: 90%;
max-height: 100%; /* image takes more vertical space */
}
}
</style>
</head>
<body>
<div class="card">
<div class="card-left">
<img src="/home/rajesh/Downloads/Gemini_Generated_Image_u81x8ju81x8ju81x.png" alt="Student Image">
<!-- Floating icons -->
<!-- <div class="icon icon1">AWS</div>
<div class="icon icon2">SQL</div>
<div class="icon icon3">C++</div>
<div class="icon icon4">Python</div> -->
</div>
<div class="card-right">
<h2>Learn & Level Up Your Skills</h2>
<p>Select from a wide range of courses to upskill and advance your career!</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>
<button>Explore Courses</button>
</div>
</div>
</body>
</html>

197
index.html
View File

@ -129,51 +129,26 @@
<span class="blue_text">We Placed</span>
</h2>
<div class="mnc-logos">
<img 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 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 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">
<h3>Quizzes</h3>
</div>
<div class="card-add card-hackathons">
<h3>Hackathons</h3>
</div>
<div class="card-add card-scholarships">
<h3>Scholarships</h3>
</div>
<div class="card-add card-conferences">
<h3>Conferences</h3>
</div>
<div class="card-add card-festivals">
<h3>College Festivals</h3>
</div>
</div>
</div>
</section>
<section id="slider">
<div class="slide1r-container">
<div class="slide1r-wrapper">
@ -221,6 +196,86 @@
</div>
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Analytics">
<div class="image-overlay">
<h4>Data Analytics</h4>
<p>Business intelligence insights</p>
</div>
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Technology">
<div class="image-overlay">
<h4>Technology Hub</h4>
<p>Innovation and development</p>
</div>
</div>
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Analytics">
<div class="image-overlay">
<h4>Data Analytics</h4>
<p>Business intelligence insights</p>
</div>
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Technology">
<div class="image-overlay">
<h4>Technology Hub</h4>
<p>Innovation and development</p>
</div>
</div>
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Analytics">
<div class="image-overlay">
<h4>Data Analytics</h4>
<p>Business intelligence insights</p>
</div>
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Technology">
<div class="image-overlay">
<h4>Technology Hub</h4>
<p>Innovation and development</p>
</div>
</div>
</div>
</div>
<div class="slide1">
<div class="slide1-box">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Analytics">
<div class="image-overlay">
<h4>Data Analytics</h4>
<p>Business intelligence insights</p>
</div>
</div>
<div class="image-container">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
alt="Technology">
<div class="image-overlay">
<h4>Technology Hub</h4>
<p>Innovation and development</p>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="slide1">
@ -250,6 +305,40 @@
<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">
<h3>Quizzes</h3>
</div>
<div class="card-add card-hackathons">
<h3>Hackathons</h3>
</div>
<div class="card-add card-scholarships">
<h3>Scholarships</h3>
</div>
<div class="card-add card-conferences">
<h3>Conferences</h3>
</div>
<div class="card-add card-festivals">
<h3>College Festivals</h3>
</div>
</div>
</div>
</section>
<section class="move-slider-ruby">
<div class="move-slider-container">
<div class="move-slider-box-static">
@ -273,7 +362,7 @@
"
</p>
<p class="slide-text">
"From farm inventory to eco-shipment tracking, OpsMonsters built us a green-tech backbone.
"From farm inventory to eco-shipment tracking, kodepilot built us a green-tech backbone.
Their system lets us trace every organic ingredient and prove our sustainability story to
conscious customers."
</p>
@ -296,7 +385,7 @@
"
</p>
<p class="slide-text">
"OpsMonsters understood our mission: simple, honest, organic. They delivered a clean,
"kodepilot understood our mission: simple, honest, organic. They delivered a clean,
lightning-fast e-commerce engine that scales with our growth."
</p>
<div class="slide-logo-box">
@ -311,15 +400,13 @@
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="move-slider-box">
<div class="slide-content">
<p class="slide-text-cot">
"
</p>
<p class="slide-text">
"Loan processing used to take weeks. OpsMonsters’ smart engine made approvals happen in days
"Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in days
without compromising security."
</p>
<div class="slide-logo-box">
@ -338,7 +425,25 @@
</div>
</section>
<section class="move-slider">
<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>Learn & Level Up Your Skills</h2>
<p>Select from a wide range of courses to upskill and advance your career!</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>
<button>Explore Courses</button>
</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>

256
main.css
View File

@ -268,12 +268,15 @@
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 1200px;
}
.mnc h2 {
font-size: 22px;
font-weight: 600;
font-size: 1.3vw;
white-space: nowrap;
}
.mnc h2 .gray,
@ -287,10 +290,16 @@
.mnc-logos {
overflow: hidden;
width: 100%;
height: 55px;
}
.mnc-logos-track {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
gap: 5vw;
animation: stepScroll 12s infinite;
height: 100%;
}
.mnc-logos img {
@ -299,13 +308,40 @@
transition: transform 0.3s ease;
}
.mnc-logos img:hover {
transform: scale(1.1);
.mnc-logos img.image-hcl {
height: 25px;
}
@keyframes stepScroll {
0%,
20% {
transform: translateX(0);
}
25%,
45% {
transform: translateX(-25%);
}
50%,
70% {
transform: translateX(-50%);
}
75%,
95% {
transform: translateX(-75%);
}
100% {
transform: translateX(0);
}
}
.our-numbers {
max-width: 1200px;
margin: 0 auto 47px auto;
margin: 50px auto 50px auto;
}
.our-numbers h2 {
@ -433,35 +469,15 @@
}
.stat-item {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.stat-item:nth-child(1) {
animation-delay: 0.1s;
}
.stat-item:nth-child(2) {
animation-delay: 0.2s;
}
.stat-item:nth-child(3) {
animation-delay: 0.3s;
}
.stat-item:nth-child(4) {
animation-delay: 0.4s;
}
.stat-item:nth-child(5) {
animation-delay: 0.5s;
}
.stat-item:nth-child(6) {
animation-delay: 0.6s;
}
.opportunity-section {
padding: 0 0 50px 0;
/* when visible */
.stat-item.visible {
opacity: 1;
transform: translateY(0);
}
.container {
@ -792,7 +808,6 @@
margin-right: 3px;
}
/* Dots */
.dots-container {
display: flex;
justify-content: center;
@ -820,7 +835,6 @@
transform: scale(1.1);
}
/* Mobile responsive */
@media (max-width: 768px) {
.slide1r-container {
margin: 15px;
@ -1143,6 +1157,7 @@
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 76px;
}
.move-slider-box-static {
@ -1301,4 +1316,171 @@
margin-bottom: 20px;
line-height: 1.5;
margin-top: -23px;
}
.card-simple {
max-width: 1200px;
margin: 50px auto 50px auto;
}
.card-easy {
display: flex;
width: 1200px;
background-color: #F6F8FA;
border-radius: 20px;
overflow: hidden;
}
.card-easy-left {
flex: 1;
background-color: #FFD966;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.card-easy-left img {
width: 80%;
border-radius: 15px;
}
.icon {
position: absolute;
background: white;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
animation: float 3s ease-in-out infinite;
}
.icon1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.icon2 {
top: 10%;
right: 15%;
animation-delay: 0.5s;
}
.icon3 {
bottom: 20%;
left: 20%;
animation-delay: 1s;
}
.icon4 {
bottom: 15%;
right: 10%;
animation-delay: 1.5s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.card-easy-right {
flex: 1;
padding: 40px 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-easy-right h2 {
font-size: 2em;
color: #0b2e6f;
margin: 0 0 20px 0;
}
.card-easy-right p {
font-size: 1em;
color: #555;
margin-bottom: 20px;
}
.features {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.feature {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.95em;
color: #555;
}
.feature span {
background: #FFD966;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #0b2e6f;
font-weight: bold;
}
.card-easy-right button {
background-color: #0b2e6f;
color: white;
border: none;
padding: 8px 18px;
/* controls height and width */
border-radius: 25px;
font-size: 0.9em;
width: auto;
/* ensures it doesn't stretch */
max-width: 155px;
/* optional limit */
display: inline-block;
/* prevents flex from stretching it */
cursor: pointer;
transition: background 0.3s;
}
.card-easy-right button:hover {
background-color: #1d4fa0;
}
@media (max-width: 900px) {
.card-easy {
flex-direction: column;
width: 90%;
}
.card-easy-right {
padding: 80px 50px;
/* more top/bottom space increases height */
}
.card-easy-left img {
width: 90%;
max-height: 100%;
/* image takes more vertical space */
}
}

16
main.js
View File

@ -214,3 +214,19 @@ document.addEventListener("DOMContentLoaded", () => {
animate();
});
const statItems = document.querySelectorAll('.stat-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const index = Array.from(statItems).indexOf(entry.target);
entry.target.style.transitionDelay = `${(index + 1) * 0.1}s`;
entry.target.classList.add('visible');
// observer.unobserve(entry.target); // optional: animate only once
}
});
}, { threshold: 0.2 }); // 20% visible
statItems.forEach(item => observer.observe(item));