Website rebuild ’23, styling the home page

A little bit of chat to set the stage and then into some time-lapse goodness. It turns out this is indeed a multipart series, this is part two.

Written by

Matthew Olding

Published on

BlogWebsite Updates

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.