diff --git a/assets/images/codinghiringassesments/coding_practice.png b/assets/images/codinghiringassesments/coding_practice.png deleted file mode 100644 index f69a9c1..0000000 Binary files a/assets/images/codinghiringassesments/coding_practice.png and /dev/null differ diff --git a/assets/images/codinghiringassesments/interview_preparetion.png b/assets/images/codinghiringassesments/interview_preparetion.png deleted file mode 100644 index f17bdc7..0000000 Binary files a/assets/images/codinghiringassesments/interview_preparetion.png and /dev/null differ diff --git a/assets/images/codinghiringassesments/nope_1.png b/assets/images/codinghiringassesments/nope_1.png new file mode 100644 index 0000000..649f1d5 Binary files /dev/null and b/assets/images/codinghiringassesments/nope_1.png differ diff --git a/assets/images/codinghiringassesments/nope_2.png b/assets/images/codinghiringassesments/nope_2.png new file mode 100644 index 0000000..a62f3ea Binary files /dev/null and b/assets/images/codinghiringassesments/nope_2.png differ diff --git a/assets/images/codinghiringassesments/nope_3.webp b/assets/images/codinghiringassesments/nope_3.webp new file mode 100644 index 0000000..a74404a Binary files /dev/null and b/assets/images/codinghiringassesments/nope_3.webp differ diff --git a/assets/images/codinghiringassesments/nope_4.webp b/assets/images/codinghiringassesments/nope_4.webp new file mode 100644 index 0000000..d445157 Binary files /dev/null and b/assets/images/codinghiringassesments/nope_4.webp differ diff --git a/assets/images/codinghiringassesments/project.png b/assets/images/codinghiringassesments/project.png deleted file mode 100644 index 72ec385..0000000 Binary files a/assets/images/codinghiringassesments/project.png and /dev/null differ diff --git a/assets/images/codinghiringassesments/skill_based_assesment.png b/assets/images/codinghiringassesments/skill_based_assesment.png deleted file mode 100644 index c10b369..0000000 Binary files a/assets/images/codinghiringassesments/skill_based_assesment.png and /dev/null differ diff --git a/index.html b/index.html index 9afaff0..8d9070b 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Kodepilot Clone + Kodepilot @@ -553,7 +553,7 @@ Start Now ➤
- Coding Practice + Coding Practice
@@ -569,7 +569,7 @@ Start Now ➤
- Coding Practice + Coding Practice
@@ -585,7 +585,7 @@ Start Now ➤
- Coding Practice + Coding Practice
@@ -601,7 +601,7 @@ Start Now ➤
- Coding Practice + Coding Practice
diff --git a/main.css b/main.css index c0d2d7d..3243c9e 100644 --- a/main.css +++ b/main.css @@ -1544,6 +1544,7 @@ /* Practice Cards Component CSS - Unique class names to prevent conflicts */ +/* Practice Cards Component CSS - Unique class names to prevent conflicts */ /* Practice Cards Component CSS - Unique class names to prevent conflicts */ .practice-cards-container * { margin: 0; @@ -1632,10 +1633,14 @@ position: relative; } -/* Default state - all cards equal size */ -.practice-card { +/* Default state - first card expanded */ +.practice-card:first-child { + flex: 2.5; + z-index: 10; +} + +.practice-card:not(:first-child) { flex: 1; - transform: scale(1); } .practice-card .practice-card-svg { @@ -1648,18 +1653,45 @@ transform: translateY(15px); } -/* Hover state - expand hovered card, shrink others */ -.practice-cards-wrapper:hover .practice-card { - flex: 1; - transform: scale(0.98); +/* Show SVG and CTA for first card by default */ +.practice-card:first-child .practice-card-svg { + width: 35%; + opacity: 1; } -.practice-cards-wrapper:hover .practice-card:hover { +.practice-card:first-child .practice-cta-btn { + opacity: 1; + transform: translateY(0); +} + +.practice-card:first-child .practice-card-icon { + transform: scale(1.05) rotate(3deg); +} + +.practice-card:first-child h3 { + transform: translateY(-2px); +} + +.practice-card:first-child p, +.practice-card:first-child .practice-meta-info, +.practice-card:first-child .practice-footer-text { + transform: translateY(-1px); +} + +/* Hover state - expand hovered card, shrink others */ +.practice-cards-wrapper .practice-card { + transform: scale(1); +} + +.practice-cards-wrapper .practice-card:hover { flex: 2.5; - transform: translateY(-6px) scale(1.01); z-index: 10; } +.practice-cards-wrapper .practice-card:not(:hover) { + flex: 1; +} + /* Color changes for hover states */ .practice-card:nth-child(1):hover { background-color: #89CFF0; @@ -1677,7 +1709,7 @@ background-color: #FFE186; } -/* SVG Container */ +/* SVG Container - UPDATED FOR IMAGES */ .practice-card-svg { width: 0; height: 100%; @@ -1689,18 +1721,21 @@ padding: 20px; background: transparent; flex-shrink: 0; + overflow: hidden; /* Added to contain the image */ } -.practice-card-svg svg { - width: 100%; - height: 100%; - max-width: 150px; - max-height: 150px; - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); +/* Image styling - NEW RULES */ +.practice-card-svg img { + width: 500%; + height:1200%; + object-fit: contain; /* This will scale the image properly */ + max-width: 200%; + max-height: 200%; + border-radius: 8px; } -/* Show SVG only on hovered card */ -.practice-cards-wrapper:hover .practice-card:hover .practice-card-svg { +/* Show SVG only on hovered card and first card by default */ +.practice-card:hover .practice-card-svg { width: 35%; opacity: 1; } @@ -1738,7 +1773,7 @@ } /* Icon animation on hover */ -.practice-cards-wrapper:hover .practice-card:hover .practice-card-icon { +.practice-card:hover .practice-card-icon { transform: scale(1.05) rotate(3deg); } @@ -1790,13 +1825,13 @@ } /* Text animation on hover */ -.practice-cards-wrapper:hover .practice-card:hover h3 { +.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 { +.practice-card:hover p, +.practice-card:hover .practice-meta-info, +.practice-card:hover .practice-footer-text { transform: translateY(-1px); } @@ -1840,8 +1875,8 @@ transform: translateY(-2px); } -/* Show CTA button only on hovered card */ -.practice-cards-wrapper:hover .practice-card:hover .practice-cta-btn { +/* Show CTA button only on hovered card and first card by default */ +.practice-card:hover .practice-cta-btn { opacity: 1; transform: translateY(0); } @@ -1864,30 +1899,6 @@ 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 { @@ -1913,23 +1924,27 @@ border-radius: 12px 12px 0 0 !important; height: 120px; flex: 1; - transform: none; } .practice-card:last-child { border-radius: 0 0 12px 12px !important; } - .practice-cards-wrapper:hover .practice-card:hover { + .practice-card:hover { height: 300px; flex-direction: column; } - .practice-cards-wrapper:hover .practice-card:hover .practice-card-svg { + .practice-card:hover .practice-card-svg { width: 100%; height: 120px; } + /* Mobile image styling */ + .practice-card:hover .practice-card-svg img { + object-fit: cover; /* Better fit for mobile */ + } + .practice-card-content { min-width: auto; padding: 20px;