diff --git a/dynamic-banner.html b/dynamic-banner.html index 1e1aba0..f8d9df7 100644 --- a/dynamic-banner.html +++ b/dynamic-banner.html @@ -1,202 +1,453 @@ - - -Right-side Image Expanding Cards - + .meta-info { + display: flex; + align-items: center; + margin-bottom: 16px; + font-size: 14px; + color: #4b5563; + transition: transform 0.5s ease; + } + + .meta-logo { + width: 24px; + height: 24px; + background-color: #3b82f6; + border-radius: 4px; + margin-right: 8px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 12px; + font-weight: bold; + } + + .footer-text { + font-size: 14px; + font-weight: 600; + color: #374151; + margin-top: auto; + transition: transform 0.5s ease; + } + + .cta-btn { + margin-top: 16px; + background-color: #111827; + color: white; + padding: 10px 16px; + border-radius: 8px; + font-size: 14px; + font-weight: 600; + text-decoration: none; + width: fit-content; + display: inline-flex; + align-items: center; + gap: 6px; + transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; + transform: translateY(15px); + position: relative; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + } + + .cta-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.8s; + } + + .cta-btn:hover::before { + left: 100%; + } + + .cta-btn:hover { + background-color: #374151; + transform: translateY(-2px); + box-shadow: 0 6px 12px rgba(0,0,0,0.15); + } + + /* Active card styles */ + .card.active { + flex: 3.5; + transform: translateY(-8px) scale(1.02); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); + z-index: 10; + } + + .card.active .card-svg { + width: 45%; + opacity: 1; + } + + .card.active .cta-btn { + opacity: 1; + transform: translateY(0); + } + + .card.active .card-icon { + transform: scale(1.1) rotate(5deg); + } + + .card.active h3 { + transform: translateY(-3px); + } + + .card.active p, + .card.active .meta-info, + .card.active .footer-text { + transform: translateY(-2px); + } + + /* Hover effects for non-active cards */ + .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; + } + + .card:hover:not(.active) .card-svg { + width: 25%; + opacity: 0.8; + } + + /* Subtle overlay effect */ + .card::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); + opacity: 0; + transition: opacity 0.6s ease; + pointer-events: none; + } + + .card.active::after, + .card:hover::after { + opacity: 1; + } + + @media (max-width: 992px) { + .cards-container { + flex-direction: column; + height: auto; + border-radius: 12px; + } + + .card { + flex-direction: column; + height: auto; + border-radius: 0 !important; + } + + .card:first-child { + border-radius: 12px 12px 0 0 !important; + } + + .card:last-child { + border-radius: 0 0 12px 12px !important; + } + + .card.active .card-svg, + .card:hover .card-svg { + width: 100%; + height: 200px; + } + + .card.active { + transform: translateY(-5px) scale(1.01); + } + + .card:hover:not(.active) { + transform: translateY(-3px) scale(1.005); + } + } + -

Practice Coding & Ace Hiring Assessments

-

Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!

- -
- -
-
-
-
💻
-

Coding Practice

-

Level up your coding skills by practicing the hiring Questions.

-

400+ Questions

-
- Start Now → +
+

Practice Coding & Ace Hiring Assessments

+

Level up your coding skills by practicing the hiring assessments of your dream companies & ace your placement game!

+ +
+ +
+
+
+
💻
+

Coding Practice

+

Level up your coding skills by practicing the hiring Questions.

+
+ Start Now ➤ +
+
+ Coding Practice +
+
+ + +
+
+
+
📋
+

Interview Preparation

+

Crack Top companies in just 5 days.

+
20+ Companies
+
+ Start Now ➤ +
+
+ Coding Practice +
+
+ + +
+
+
+
📂
+

Projects

+

Projects epitomize perfect synergy for success.

+ +
15+ Projects
+
+ Start Now ➤ +
+
+ Coding Practice +
+
+ + +
+
+
+
📝
+

Skill Based Assessments

+

Assess your skills and get ahead of the curve.

+
2000+ Questions
+
+ Start Now ➤ +
+
+ Coding Practice +
+
+
- Coding Practice -
- -
-
-
📋
-

Interview Preparation

-

Crack top companies in just 5 days.

-

20+ Companies →

-
- Interview Prep -
- - -
-
-
📂
-

Projects

-

Projects epitomize perfect synergy for success.

-

15+ Projects →

-
- Projects -
- - -
-
-
📝
-

Skill Based Assessments

-

Assess your skills and get ahead of the curve.

-

2000+ Questions →

-
- Assessments -
-
+ - + \ No newline at end of file diff --git a/index.html b/index.html index dcf56ae..91aa46b 100644 --- a/index.html +++ b/index.html @@ -676,13 +676,13 @@