Educational platform with courses, instructors and progress tracking.
The green-blue gradient on keywords reinforces the educational identity and draws the eye to important figures (50K+ students, 200+ courses).
background-clip: text + linear-gradient(135deg) Explore Text & Typography →The 10px elevation on hover with deep shadow invites the student to click. The colored border change confirms the interactive state.
transform: translateY(-10px) + box-shadow 30px Explore Hover & Interactions →The course image zooms slightly (scale 1.1) on hover, creating an immersive effect that makes you want to discover the content.
transform: scale(1.1) transition 0.4s ease Explore Hover & Interactions →Category cards rise 8px with a luminous green shadow. The effect quickly guides students to their preferred topic.
translateY(-8px) + box-shadow rgba(16,185,129,0.15) Explore Cards & Layouts →The border turns green on focus with a luminous halo. Clearly indicates to the student that search is active and ready to receive their query.
border-color + box-shadow 0 10px 30px au :focus-within Explore Forms →The chevron icon rotates 180 degrees and content unfolds smoothly. Saves screen space while making information accessible with one click.
max-height transition 0.3s + rotate(180deg) Explore Transitions →The background blur on scroll makes the nav semi-transparent and modern. Students keep visual context while navigating the platform.
backdrop-filter: blur(20px) + transition padding Explore Glass & Morphism →