From bb8438b69670e62a3097a47fbbd65cb91855f292 Mon Sep 17 00:00:00 2001 From: "dhanush.s" Date: Fri, 26 Sep 2025 10:04:36 +0530 Subject: [PATCH] feat: loading animation --- index.html | 1359 +++++++++++++++++++++++++++++----------------------- main.css | 7 +- main.js | 6 +- 3 files changed, 754 insertions(+), 618 deletions(-) diff --git a/index.html b/index.html index 6724fd0..afbebbb 100644 --- a/index.html +++ b/index.html @@ -5,540 +5,664 @@ Kodepilot Clone - + @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; + } + } + -
- - - -
- - -
-
- -
-
-
-

Unlock Your Career

-

Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired by - your - dream company.

- -
-
-
Internships
Gain Practical Experience
-
Mentorships
Guidance From Top Mentors
-
Jobs
Explore Diverse Careers
-
Practice
Refine Skills Daily
-
Competitions
Battle For Excellence
-
More
Explore More Options
-
-
-
- -
-
-

Who's using Kodepilot?

-
-
-
-
-
Students and Professionals
-

Unlock - Your - Potential: Compete, Build Resume, Grow and get Hired!

-
Students and Professionals -
-
-
-
-
-
Companies and Recruiters
-

Discover - Right - Talent: Hire, Engage, and Brand Like Never Before!

-
Companies and Recruiters -
-
-
-
-
-
Colleges
-

Bridge - Academia - and Industry: Empower Students with Real-World Opportunities!

-
ridge Academia and Industry +
+
+
+
+
+
+
+
+
+
+
+
-
- -
-
-
-

- Top Industries - We Placed -

-
-
- hcl - ebmpapst - infosys - jbl - ust - accenture - hcl - ebmpapst - infosys - jbl - ust - accenture -
-
- +
+ -
+ -
-
-
-
- -
-
-
- Business Meeting -
-

Business Innovation

-

Modern workspace collaboration

-
-
-
- Architecture -
-

Modern Architecture

-

Contemporary design solutions

-
-
-
-
+
+
+
+

Unlock Your Career

+

Explore opportunities from across the globe to grow, showcase skills, gain CV points & get hired + by + your + dream company.

+ +
+
+
Internships
Gain Practical Experience
+
Mentorships
Guidance From Top Mentors
+
Jobs
Explore Diverse Careers
+
Practice
Refine Skills Daily
+
Competitions
Battle For Excellence
+
More
Explore More Options
+
+
+
- -
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
+
+
+

Who's using Kodepilot?

+
+
+
+
+
Students and Professionals
+

Unlock + Your + Potential: Compete, Build Resume, Grow and get Hired!

+
Students and Professionals
-
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
+
+
+
+
Companies and Recruiters
+

Discover + Right + Talent: Hire, Engage, and Brand Like Never Before!

+
Companies and Recruiters
-
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
-
-
-
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
-
-
-
-
-
- Analytics -
-

Data Analytics

-

Business intelligence insights

-
-
-
- Technology -
-

Technology Hub

-

Innovation and development

-
-
-
-
- - -
-
-
- Creativity -
-

Creative Space

-

Inspiration and expression

-
-
-
- Beach -
-

Tropical Paradise

-

Natural beauty and relaxation

-
-
+
+
+
+
Colleges
+

Bridge + Academia + and Industry: Empower Students with Real-World Opportunities!

+
ridge Academia and Industry
+
+ +
+
+
+

+ Top Industries + We Placed +

+
+
+ hcl + ebmpapst + infosys + jbl + ust + accenture + hcl + ebmpapst + infosys + jbl + ust + accenture +
+
- - -
-
-
-
-
-

- Pick The Right Opportunity! -

-
-

Explore opportunities that best suits your skills and interests!

+
-
-
-

Quizzes

+
+
+
+
+ +
+
+
+ Business Meeting +
+

Business Innovation

+

Modern workspace collaboration

+
+
+
+ Architecture +
+

Modern Architecture

+

Contemporary design solutions

+
+
+
+
+ + +
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+
+
+
+ Analytics +
+

Data Analytics

+

Business intelligence insights

+
+
+
+ Technology +
+

Technology Hub

+

Innovation and development

+
+
+
+
+ + +
+
+
+ Creativity +
+

Creative Space

+

Inspiration and expression

+
+
+
+ Beach +
+

Tropical Paradise

+

Natural beauty and relaxation

+
+
+
+
+
-
-

Hackathons

+ + +
+
+
+
+
+

+ Pick The Right Opportunity! +

+
+

Explore opportunities that best suits your skills and interests!

+
-
-

Scholarships

-
+
+
+

Quizzes

+
-
-

Conferences

-
+
+

Hackathons

+
-
-

College Festivals

+
+

Scholarships

+
+ +
+

Conferences

+
+ +
+

College Festivals

+
-
-
-
-
-
-
-

Kodepilot

-

- Helping the world withcreative -

-

- designs -

-

- 92% Client Retention -

-
-
-
-
-
-

- " +

+
+
+
+
+

Kodepilot

+

+ Helping the world withcreative

-

- "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." +

+ designs

-
-
- -
-

John Doe

-

CEO

+

+ 92% Client Retention +

+
+
+
+
+
+

+ " +

+

+ "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." +

+
+
+ +
+

John Doe

+

CEO

+
-
-
-
-

- " -

-

- "kodepilot understood our mission: simple, honest, organic. They delivered a clean, - lightning-fast e-commerce engine that scales with our growth." -

-
-
- -
-

John Doe

-

CEO

+
+
+

+ " +

+

+ "kodepilot understood our mission: simple, honest, organic. They delivered a clean, + lightning-fast e-commerce engine that scales with our growth." +

+
+
+ +
+

John Doe

+

CEO

+
-
-
-
-

- " -

-

- "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in days - without compromising security." -

-
-
- -
-

John Doe

-

CEO

+
+
+

+ " +

+

+ "Loan processing used to take weeks. kodepilot’ smart engine made approvals happen in + days + without compromising security." +

+
+
+ +
+

John Doe

+

CEO

+
-
-
+
-
-
-
- Student Image -
-
-

Learn & Level Up Your Skills

-

Select from a wide range of courses to upskill and advance your career!

-
-
✓50+ Courses
-
✓Certificate
-
✓Projects & Assignments
+
+
+
+ Student Image +
+
+

Learn & Level Up Your Skills

+

Select from a wide range of courses to upskill and advance your career!

+
+
✓50+ Courses
+
✓Certificate
+
✓Projects & Assignments
+
+
-
-
-
+ - - -
-
-
- 100+ - Active Users + -
- 16+ - Assessments +
+
+
+ 100+ + Active Users +
+ +
+ 16+ + Assessments +
+ +
+ 1000+ + Opportunities +
+ +
+ 500+ + Brands trust us +
+ +
+ 30+ + Organisations +
+ +
+ 5+ + Countries +
+
+
+
+
-
- 1000+ - Opportunities -
+ + + +
+ + + + - - \ No newline at end of file diff --git a/main.css b/main.css index 1dfba61..f2e3018 100644 --- a/main.css +++ b/main.css @@ -260,7 +260,7 @@ .mnc-box { display: flex; align-items: center; - max-width: 1200px; + max-width: 1159px; } @@ -277,6 +277,7 @@ font-weight: 600; font-size: 1.3vw; white-space: nowrap; + margin-top: -5px; } .mnc h2 .gray, @@ -704,13 +705,11 @@ position: relative; overflow: hidden; border-radius: 16px; - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); transition: all 0.3s ease; } .image-container:hover { transform: translateY(-5px); - box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); } .slide1-box img { @@ -1342,7 +1341,7 @@ } .card-easy-left img { - width: 80%; + width: 100%; border-radius: 15px; } diff --git a/main.js b/main.js index a257d95..d7d7361 100644 --- a/main.js +++ b/main.js @@ -194,19 +194,18 @@ document.addEventListener("DOMContentLoaded", () => { const track = document.querySelector(".move-slider-track"); const boxes = Array.from(track.children); - // Clone all slides once boxes.forEach(box => { const clone = box.cloneNode(true); track.appendChild(clone); }); let position = 0; - const speed = 1; // pixels per frame, adjust for faster/slower scroll + const speed = 1; function animate() { position -= speed; if (Math.abs(position) >= track.scrollWidth / 2) { - position = 0; // reset after first set slides out + position = 0; } track.style.transform = `translateX(${position}px)`; requestAnimationFrame(animate); @@ -224,7 +223,6 @@ const observer = new IntersectionObserver((entries) => { 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