From a7bce5a100f17f6d8385f3ba17f5396deb7f1e62 Mon Sep 17 00:00:00 2001 From: "dhanush.s" Date: Sat, 27 Sep 2025 19:11:26 +0530 Subject: [PATCH] refactor: ! --- index.html | 62 ++------- main.css | 399 +++++++++++++++++++++++++++-------------------------- main.js | 73 ++++------ 3 files changed, 246 insertions(+), 288 deletions(-) diff --git a/index.html b/index.html index ab2fa6b..f7ab472 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + -
Internships
Gain Practical Experience
@@ -316,7 +272,7 @@
- +
@@ -338,7 +294,7 @@
- +
@@ -583,7 +539,7 @@
- +
@@ -609,7 +565,7 @@
- +
@@ -626,7 +582,7 @@
- +
@@ -643,7 +599,7 @@
- +
@@ -733,11 +689,11 @@
-

Built with ❤ in India for the world

+

Built with ❤ in India for the world

Stay Connected

- +
diff --git a/main.css b/main.css index a2398b1..d8df60e 100644 --- a/main.css +++ b/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,64 +446,6 @@ 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); @@ -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,34 +1371,6 @@ } - @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 */ @@ -1902,6 +1735,58 @@ transform: translateY(0); } + .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; + } + } + /* Mobile responsiveness */ @media (max-width: 992px) { .practice-cards-container { @@ -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); } } \ No newline at end of file diff --git a/main.js b/main.js index 8bac0e2..6a9fda8 100644 --- a/main.js +++ b/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,58 @@ 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); \ No newline at end of file