People Cards
Template Menu
Web Developer 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Web Developer 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Web Developer 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Design Notes
These cards were built using F6 stacks including Drift Timeline and Animate so that the animation is only allowed once on hover and doesn't revert to the original when un-hovered. The custom animation attributes are used to control the change in height and margins. the animation is only set to work for medium and large screens.
Filter Pro is also used to increase brightness slightly on hover but this is an afterthought and is not essential.
SVGs from SVGrepo are used instead of Font Awesome icons to help with speed. Images are 600px wide .webp images, again to help with performance.
People images sourced from unsplash.
Structured Data Person stacks from SEO Helper added to each lightbox pop up.
Paletton used to find a complementary colour to my primary colour of teal. My first choice of red failed the Lighthouse test for a colour of sufficient contrast to use white for my headers.
Web design company York for your next effective website.
Test result for this page tested with Lighthouse:
