commit
b37cad17d5
63
index.html
63
index.html
@ -8,6 +8,7 @@
|
||||
<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;
|
||||
@ -184,51 +185,6 @@
|
||||
<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>
|
||||
@ -316,7 +272,7 @@
|
||||
<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">
|
||||
@ -338,7 +294,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
@ -583,7 +539,7 @@
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<!-- <div class="practice-cards-container"> -->
|
||||
|
||||
<div class="practice-container">
|
||||
<div class="practice-container-box">
|
||||
<div class="practice-container-text-box">
|
||||
@ -609,7 +565,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interview Preparation Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -626,7 +582,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -643,7 +599,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skill Based Assessments Card -->
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-card-content">
|
||||
<div>
|
||||
@ -662,11 +618,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="card-simple">
|
||||
<div class="card-easy">
|
||||
<div class="card-easy-left">
|
||||
@ -737,7 +690,7 @@
|
||||
<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">
|
||||
|
||||
419
main.css
419
main.css
@ -3,6 +3,30 @@
|
||||
--course-max-width-small: 1000px;
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) {
|
||||
:root {
|
||||
--course-max-width: 1000px;
|
||||
--course-max-width-small: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
:root {
|
||||
--course-max-width: 800px;
|
||||
--course-max-width-small: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
@ -422,71 +446,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-height: 100px;
|
||||
padding: 15px 8px;
|
||||
}
|
||||
|
||||
.our-numbers {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.our-numbers h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-height: 110px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
/* when visible */
|
||||
|
||||
.stat-item.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -665,7 +631,7 @@
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Image overlays */
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -773,90 +739,6 @@
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide1r-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.slide1-box {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.image-overlay h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.image-overlay p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.practice-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.course-section {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.corces {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.slide1-box {
|
||||
gap: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
@ -1081,27 +963,6 @@
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.newsletter-form input,
|
||||
.newsletter-form button {
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.move-slider-ruby {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@ -1510,37 +1371,9 @@
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) {
|
||||
:root {
|
||||
--course-max-width: 1000px;
|
||||
--course-max-width-small: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
:root {
|
||||
--course-max-width: 800px;
|
||||
--course-max-width-small: 600px;
|
||||
}
|
||||
|
||||
.mnc h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
|
||||
.practice-cards-container * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -1751,7 +1584,7 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Icon animation on hover */
|
||||
|
||||
.practice-cards-wrapper:hover .practice-card:hover .practice-card-icon {
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
}
|
||||
@ -1803,7 +1636,7 @@
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Text animation on hover */
|
||||
|
||||
.practice-cards-wrapper:hover .practice-card:hover h3 {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@ -1854,13 +1687,13 @@
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Show CTA button only on hovered card */
|
||||
|
||||
.practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Subtle overlay effect */
|
||||
|
||||
.practice-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -1878,10 +1711,10 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* REMOVED: Default expanded state for first card */
|
||||
/* Now all cards start equal and only expand on hover */
|
||||
|
||||
/* Show SVG and CTA button only on hover */
|
||||
|
||||
|
||||
|
||||
.practice-cards-wrapper .practice-card .practice-card-svg {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
@ -1902,7 +1735,59 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
.nameContainer,
|
||||
.descContainer {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-height: 100px;
|
||||
padding: 15px 8px;
|
||||
}
|
||||
|
||||
.our-numbers {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.our-numbers h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
min-height: 110px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mnc h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.practice-cards-container {
|
||||
display: none;
|
||||
@ -2026,6 +1911,136 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-left: 14px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.slide1r-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.slide1-box {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
display: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.image-overlay h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.image-overlay p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.practice-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.course-section {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.corces {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card-festivals {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.move-slider-ruby {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.newsletter-form input,
|
||||
.newsletter-form button {
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.slide1-box {
|
||||
gap: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
78
main.js
78
main.js
@ -194,31 +194,6 @@ function getInTouch() {
|
||||
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');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
@ -397,46 +372,69 @@ function stepScroll() {
|
||||
|
||||
setInterval(stepScroll, 3000);
|
||||
|
||||
|
||||
|
||||
/*--------------------------------------------------------*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const cards = document.querySelectorAll('.practice-card');
|
||||
let activeCard = document.querySelector('.practice-card.active');
|
||||
let lastActiveCard = activeCard;
|
||||
|
||||
// Function to set active card
|
||||
function setActiveCard(card) {
|
||||
// Remove active class from all cards
|
||||
cards.forEach(c => {
|
||||
c.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to the specified card
|
||||
card.classList.add('active');
|
||||
|
||||
// Update last active card
|
||||
lastActiveCard = card;
|
||||
}
|
||||
|
||||
// Set first card as active by default if none is active
|
||||
if (!activeCard && cards.length > 0) {
|
||||
setActiveCard(cards[0]);
|
||||
}
|
||||
|
||||
// Add click event listeners (better for mobile and accessibility)
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('click', function () {
|
||||
setActiveCard(this);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Optional: Add hover effect for desktop (complementary to click)
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function () {
|
||||
// Only activate on hover if you want that behavior
|
||||
// setActiveCard(this);
|
||||
const data = [
|
||||
{ name: "Ben", text: "Just Went HCL!" },
|
||||
{ name: "Rakul", text: "Just Went Accenture!" },
|
||||
{ name: "Anjali", text: "Joined a Ebmpapst!" },
|
||||
{ name: "Sneha", text: "joined a Infosys!" },
|
||||
{ name: "Amit", text: "Just Went JBL!" },
|
||||
{ name: "Vikram", text: "Just Went UST!" },
|
||||
{ name: "Priya", text: "Just Went Serviceplaingroup!" }
|
||||
];
|
||||
let index1 = 0;
|
||||
const nameEl1 = document.querySelector(".nameContainer");
|
||||
const descEl1 = document.querySelector(".descContainer");
|
||||
setInterval(() => {
|
||||
nameEl1.classList.add("fade-out");
|
||||
descEl1.classList.add("fade-out");
|
||||
setTimeout(() => {
|
||||
index1 = (index1 + 1) % data.length;
|
||||
nameEl1.textContent = data[index1].name;
|
||||
descEl1.textContent = " " + data[index1].text;
|
||||
nameEl1.classList.remove("fade-out");
|
||||
descEl1.classList.remove("fade-out");
|
||||
nameEl1.classList.add("fade-in");
|
||||
descEl1.classList.add("fade-in");
|
||||
setTimeout(() => {
|
||||
nameEl1.classList.remove("fade-in");
|
||||
descEl1.classList.remove("fade-in");
|
||||
}, 500);
|
||||
}, 500);
|
||||
}, 5000);
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".footer a").forEach(link => {
|
||||
link.setAttribute("href", "/apply");
|
||||
});
|
||||
|
||||
document.querySelectorAll(".practice-container a").forEach(link => {
|
||||
link.setAttribute("href", "/apply");
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user