📚 Skilled E-Learning Landing Page

Skilled is a responsive landing page for a fictional e-learning platform. It's a Frontend Mentor challenge that was a great opportunity to sharpen CSS fundamentals — modular stylesheets, CSS custom properties, fluid typography with clamp(), CSS Grid, and a fully responsive layout across mobile, tablet, and desktop without a single line of JavaScript. https://www.frontendmentor.io/challenges/skilled-elearning-landing-page-S1ObDrZ8q

📦 Technologies

• HTML5
• CSS3
• Plus Jakarta Sans — self-hosted via @font-face (weights: 500, 700, 800)

𖦹 Features

• Responsive Header: A minimal navbar with the Skilled logo on the left and a dark blue Get Started pill button on the right. Padding adjusts between mobile and tablet/desktop breakpoints.

• Hero Section: A two-column layout (on tablet and up) with a headline, description, and a pink gradient Get Started CTA on the left, and a hero image on the right. The image uses a <picture> element to serve three different sources — mobile, tablet, and desktop — for optimal performance. On tablet and desktop it's absolutely positioned and bleeds off-screen to the right for a dramatic visual effect.

• Courses Catalog: A responsive grid of course cards covering Animation, Design, Photography, Crypto, and Business. Each card has a floating icon at the top (offset above the card border), a course title, a short description, and a pink Get Started link. The title card uses a pink-to-magenta gradient background instead of white. The grid goes from 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop).

• Gradient Buttons: Three button variants are available — .blue, .pink, and .purple — each with hover states (color shift for blue, opacity fade for pink and purple). All buttons share the same pill shape and transition timing.

• Footer: A dark navy footer with the light logo variant on the left and a purple gradient Get Started button on the right, matching the header's layout structure.

• Fluid Typography: Font sizes are defined with clamp() in :root, so headings and text scale smoothly between viewport widths without hard breakpoint jumps:

  --fs-1: clamp(2.5rem, 0.42rem + 4.1vw, 3.5rem);

🖇 How to Run

This is a pure HTML/CSS project — no build tools or dependencies needed. Just open index.html in your browser directly, or use a local dev server like VS Code's Live Server extension for the best experience.

🫧 Preview