In this session I’ll take the home page from greyscale wasteland to technicolored masterpiece* right before your eyes while blessing your ears with tune I hurriedly made in GarageBand with some off the shelf loops.
- 0:00 – Intro
- 1:30 – Moving from Affinity Designer to Figma for website designs
- 2:40 – Time-lapse home page styling
- 4:10 – CSS framework adjustments
- 4:45 – Styling services section
- 5:48 – Styling projects section
- 6:15 – Styling CTA section
- 7:05 – Styling testimonial cards
- 9:02 – Hero Section background texture (utility classes)
- 12:05 – Applying texture throughout
- 12:58 – Adding quote icon, outer glow, top spotlight effect to testimonial cards
- 18:18 – Explaining some of the advanced CSS used in testimonial card (time-lapse finished)
- 19:20 – Showing off the dynamic overlay header (mind bomb!), bricks conditions and SCSS to make magic happen
Last time I advised you to get a coffee before watching, this is still relevant.
*Not actually technicolored, or a masterpiece… but I like it.