Rowan Dierich

Screenshot of the Natours project
A header using gradients, double background images and clip path. Load effects also tie animations to transitions for a more aesthetic element appearance on load
Screenshot of the Natours project
Mobile view. Leveraging custom breakpoints as mixins and the power of proper use of global font size declarations and scaling using rems
Screenshot of the Natours project
Absolutely positioned image stack using scaling and outlines for hover effects
Screenshot of the Natours project
The grid was custom designed using the CSS calc function
Screenshot of the Natours project
Package cards which use an array of advanced CSS features like perspective, mulitple transforms, box declarations, backface visibilty and background blending to create a beautiful, functional rotationing card using pure CSS
Screenshot of the Natours project
Mobile has no hover effect so redesigned using clip path and gradients
Screenshot of the Natours project
A 'stories' section build using layered transparency, a background video and some pretty neat transform skews and 'shape outside' properties to direct text flow around images. Image filters are applied on hover
Screenshot of the Natours project
Here you can see the shape-outside property working well.
Screenshot of the Natours project
Modern form set over mulptile backgrounds including gradients. Radio button redesign and functionality using sibling selectors. Modern UI design for input targeting placeholder text behaviour on focus with validation
Screenshot of the Natours project
Simplification for the mobile view
New homepage coming soon.
Full screen menu overlay using fixed positioning, radial gradients and transition effects using scaling. Linking by way of target psuedo-classess
New homepage coming soon.