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

Merge pull request 'change UI' (#20) from rajesh into main

Browse Source 
Reviewed-on: #20
This commit is contained in:
rajesh.n 2025-09-26 18:12:21 +00:00
commit 9739a5a04a
3 changed files with 416 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -548,6 +548,7 @@
<div class="practice-card-icon">💻</div> <div class="practice-card-icon">💻</div>
<h3>Coding Practice</h3> <h3>Coding Practice</h3>
<p>Level up your coding skills by practicing the hiring Questions.</p> <p>Level up your coding skills by practicing the hiring Questions.</p>
<div class="practice-footer-text">400+ Questions</div>
</div> </div>
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>
</div> </div>
@ -562,7 +563,7 @@
<div> <div>
<div class="practice-card-icon">📋</div> <div class="practice-card-icon">📋</div>
<h3>Interview Preparation</h3> <h3>Interview Preparation</h3>
<p>Crack Top companies in just 5 days.</p> <p>Crack Top companies in just 5 days with unbelivable learning</p>
<div class="practice-footer-text">20+ Companies</div> <div class="practice-footer-text">20+ Companies</div>
</div> </div>
<a href="#" class="practice-cta-btn">Start Now ➤</a> <a href="#" class="practice-cta-btn">Start Now ➤</a>

351
main.css
View File

@ -1105,6 +1105,7 @@
align-items: center; align-items: center;
gap: 20px; gap: 20px;
margin-top: 76px; margin-top: 76px;
padding-bottom: 40px;
} }
.move-slider-box-static { .move-slider-box-static {
@ -1540,138 +1541,171 @@
/*----------------------------------------------------------------------------------------------------------------------*/ /*----------------------------------------------------------------------------------------------------------------------*/
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
/* Practice Cards Component CSS - Unique class names to prevent conflicts */
.practice-cards-container * { /* Practice Cards Component CSS - Unique class names to prevent conflicts */
.practice-cards-container * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif; font-family: 'Segoe UI', system-ui, sans-serif;
} }
.practice-cards-container { .practice-cards-container {
background-color: #ffffff; background-color: #ffffff;
color: #1f2937; color: #1f2937;
padding: 40px 20px; padding: 40px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
} }
.practice-container { .practice-container {
max-width: 1300px; max-width: 1200px;
width: 100%; width: 100%;
} margin: 0 auto;
padding: 0 20px;
}
.practice-title { .practice-title {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
margin-bottom: 12px; margin-bottom: 12px;
color: #111827; color: #111827;
text-align: left; text-align: left;
} width: 100%;
}
.practice-subtitle { .practice-subtitle {
font-size: 18px; font-size: 18px;
color: #6b7280; color: #6b7280;
max-width: 700px; max-width: 700px;
/* margin: 0 auto 40px; */
line-height: 1.5; line-height: 1.5;
text-align: left; text-align: left;
} width: 100%;
}
.practice-cards-wrapper { .practice-cards-wrapper {
margin: 30px 0; margin: 30px 0;
display: flex; display: flex;
height: 380px; height: 380px;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
/* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
position: relative; position: relative;
gap: 1px; gap: 1px;
background-color: #d1d5db; background-color: #d1d5db;
padding: 1px; padding: 1px;
} width: 100%;
}
.practice-card { .practice-card {
flex: 1; flex: 1;
display: flex; display: flex;
transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transform-origin: center; transform-origin: center;
background-color: white; background-color: white;
border-radius: 0; border-radius: 0;
} min-width: 80px;
}
.practice-card:first-child { .practice-card:first-child {
border-radius: 11px 0 0 11px; border-radius: 11px 0 0 11px;
} }
.practice-card:last-child { .practice-card:last-child {
border-radius: 0 11px 11px 0; border-radius: 0 11px 11px 0;
} }
.practice-card-content { .practice-card-content {
flex: 1; flex: 1;
padding: 24px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
transition: all 0.7s ease; transition: all 0.5s ease;
min-width: 0; min-width: 280px;
z-index: 2; z-index: 2;
position: relative; position: relative;
} }
/* Color changes for active and hover states */ /* Default state - all cards equal size */
.practice-card.active { .practice-card {
background-color: #c6e0f1; flex: 1;
} transform: scale(1);
}
.practice-card:nth-child(1):hover, .practice-card .practice-card-svg {
.practice-card:nth-child(1).active { width: 0;
opacity: 0;
}
.practice-card .practice-cta-btn {
opacity: 0;
transform: translateY(15px);
}
/* Hover state - expand hovered card, shrink others */
.practice-cards-wrapper:hover .practice-card {
flex: 1;
transform: scale(0.98);
}
.practice-cards-wrapper:hover .practice-card:hover {
flex: 2.5;
transform: translateY(-6px) scale(1.01);
z-index: 10;
}
/* Color changes for hover states */
.practice-card:nth-child(1):hover {
background-color: #89CFF0; background-color: #89CFF0;
} }
.practice-card:nth-child(2):hover, .practice-card:nth-child(2):hover {
.practice-card:nth-child(2).active {
background-color: #FEB4CF; background-color: #FEB4CF;
} }
.practice-card:nth-child(3):hover, .practice-card:nth-child(3):hover {
.practice-card:nth-child(3).active {
background-color: #DFC5FE; background-color: #DFC5FE;
} }
.practice-card:nth-child(4):hover, .practice-card:nth-child(4):hover {
.practice-card:nth-child(4).active {
background-color: #FFE186; background-color: #FFE186;
} }
/* SVG Container */ /* SVG Container */
.practice-card-svg { .practice-card-svg {
width: 0; width: 0;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 1.3s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0; opacity: 0;
padding: 20px; padding: 20px;
background: transparent; background: transparent;
} flex-shrink: 0;
}
.practice-card-svg svg { .practice-card-svg svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 180px; max-width: 150px;
max-height: 180px; max-height: 150px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
} }
.practice-card-icon { /* Show SVG only on hovered card */
.practice-cards-wrapper:hover .practice-card:hover .practice-card-svg {
width: 35%;
opacity: 1;
}
.practice-card-icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 10px; border-radius: 10px;
@ -1681,55 +1715,59 @@
font-size: 24px; font-size: 24px;
margin-bottom: 16px; margin-bottom: 16px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
}
.practice-card:nth-child(1) .practice-card-icon { .practice-card:nth-child(1) .practice-card-icon {
background-color: #1268f3; background-color: #1268f3;
color: white; color: white;
} }
.practice-card:nth-child(2) .practice-card-icon { .practice-card:nth-child(2) .practice-card-icon {
background-color: #ef4444; background-color: #ef4444;
color: white; color: white;
} }
.practice-card:nth-child(3) .practice-card-icon { .practice-card:nth-child(3) .practice-card-icon {
background-color: #8b5cf6; background-color: #8b5cf6;
color: white; color: white;
} }
.practice-card:nth-child(4) .practice-card-icon { .practice-card:nth-child(4) .practice-card-icon {
background-color: #f59e0b; background-color: #f59e0b;
color: white; color: white;
} }
.practice-card h3 { /* Icon animation on hover */
.practice-cards-wrapper:hover .practice-card:hover .practice-card-icon {
transform: scale(1.05) rotate(3deg);
}
.practice-card h3 {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
color: #111827; color: #111827;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-card p { .practice-card p {
font-size: 15px; font-size: 15px;
color: #6b7280; color: #6b7280;
line-height: 1.5; line-height: 1.5;
margin-bottom: 16px; margin-bottom: 16px;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-meta-info { .practice-meta-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
font-size: 14px; font-size: 14px;
color: #4b5563; color: #4b5563;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-meta-logo { .practice-meta-logo {
width: 24px; width: 24px;
height: 24px; height: 24px;
background-color: #3b82f6; background-color: #3b82f6;
@ -1741,17 +1779,28 @@
color: white; color: white;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.practice-footer-text { .practice-footer-text {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #374151; color: #374151;
margin-top: auto; margin-top: auto;
transition: transform 0.5s ease; transition: transform 0.5s ease;
} }
.practice-cta-btn { /* Text animation on hover */
.practice-cards-wrapper:hover .practice-card:hover h3 {
transform: translateY(-2px);
}
.practice-cards-wrapper:hover .practice-card:hover p,
.practice-cards-wrapper:hover .practice-card:hover .practice-meta-info,
.practice-cards-wrapper:hover .practice-card:hover .practice-footer-text {
transform: translateY(-1px);
}
.practice-cta-btn {
margin-top: 16px; margin-top: 16px;
background-color: #111827; background-color: #111827;
color: white; color: white;
@ -1769,10 +1818,9 @@
transform: translateY(15px); transform: translateY(15px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
}
.practice-cta-btn::before { .practice-cta-btn::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -1781,65 +1829,25 @@
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.8s; transition: left 0.8s;
} }
.practice-cta-btn:hover::before { .practice-cta-btn:hover::before {
left: 100%; left: 100%;
} }
.practice-cta-btn:hover { .practice-cta-btn:hover {
background-color: #374151; background-color: #374151;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
}
/* Active card styles */ /* Show CTA button only on hovered card */
.practice-card.active { .practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
flex: 3.5;
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
z-index: 10;
}
.practice-card.active .practice-card-svg {
width: 45%;
opacity: 1;
}
.practice-card.active .practice-cta-btn {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.practice-card.active .practice-card-icon { /* Subtle overlay effect */
transform: scale(1.1) rotate(5deg); .practice-card::after {
}
.practice-card.active h3 {
transform: translateY(-3px);
}
.practice-card.active p,
.practice-card.active .practice-meta-info,
.practice-card.active .practice-footer-text {
transform: translateY(-2px);
}
/* Hover effects for non-active cards */
.practice-card:hover:not(.active) {
flex: 1.3;
transform: translateY(-4px) scale(1.01);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
z-index: 5;
}
.practice-card:hover:not(.active) .practice-card-svg {
width: 25%;
opacity: 0.8;
}
/* Subtle overlay effect */
.practice-card::after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -1850,45 +1858,108 @@
opacity: 0; opacity: 0;
transition: opacity 0.6s ease; transition: opacity 0.6s ease;
pointer-events: none; pointer-events: none;
} }
.practice-card.active::after, .practice-card:hover::after {
.practice-card:hover::after {
opacity: 1; 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;
}
.practice-cards-wrapper .practice-card .practice-cta-btn {
opacity: 0;
transform: translateY(15px);
}
.practice-cards-wrapper:hover .practice-card:hover .practice-card-svg {
width: 35%;
opacity: 1;
}
.practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn {
opacity: 1;
transform: translateY(0);
}
/* Mobile responsiveness */
@media (max-width: 992px) {
.practice-cards-container {
align-items: flex-start;
padding: 30px 15px;
} }
@media (max-width: 992px) {
.practice-cards-wrapper { .practice-cards-wrapper {
flex-direction: column; flex-direction: column;
height: auto; height: auto;
border-radius: 12px; border-radius: 12px;
gap: 0;
} }
.practice-card { .practice-card {
flex-direction: column; flex-direction: row;
height: auto; height: 120px;
border-radius: 0 !important; border-radius: 0 !important;
min-width: auto;
} }
.practice-card:first-child { .practice-card:first-child {
border-radius: 12px 12px 0 0 !important; border-radius: 12px 12px 0 0 !important;
height: 120px;
flex: 1;
transform: none;
} }
.practice-card:last-child { .practice-card:last-child {
border-radius: 0 0 12px 12px !important; border-radius: 0 0 12px 12px !important;
} }
.practice-card.active .practice-card-svg, .practice-cards-wrapper:hover .practice-card:hover {
.practice-card:hover .practice-card-svg { height: 300px;
flex-direction: column;
}
.practice-cards-wrapper:hover .practice-card:hover .practice-card-svg {
width: 100%; width: 100%;
height: 200px; height: 120px;
} }
.practice-card.active { .practice-card-content {
transform: translateY(-5px) scale(1.01); min-width: auto;
padding: 20px;
}
}
@media (max-width: 768px) {
.practice-cards-container {
padding: 25px 10px;
} }
.practice-card:hover:not(.active) { .practice-title {
transform: translateY(-3px) scale(1.005); font-size: 28px;
} }
.practice-subtitle {
font-size: 16px;
} }
}
@media (max-width: 480px) {
.practice-cards-container {
padding: 20px 8px;
}
.practice-title {
font-size: 24px;
}
.practice-subtitle {
font-size: 14px;
}
}

45
main.js
View File

@ -502,16 +502,45 @@ function stepScroll() {
setInterval(stepScroll, 3000); setInterval(stepScroll, 3000);
document.querySelectorAll('.course-slider').forEach(slider => {
const track = slider.querySelector('.course-track');
const prev = slider.querySelector('.prev-btn');
const next = slider.querySelector('.next-btn');
prev.addEventListener('click', () => { /*--------------------------------------------------------*/
track.scrollBy({ left: -300, behavior: 'smooth' });
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');
}); });
next.addEventListener('click', () => { // Add active class to the specified card
track.scrollBy({ left: 300, behavior: 'smooth' }); 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);
});
}); });
}); });