While I was working for CSL Behring as a Web Development Coop I got the chance to build a new full info site from scratch. It’s all about HPV and can be found at www.hpv.com.au/. Content and general design were provided to me from our marketing team but throughout implementation there were some design decisions that I had to make.

The title and background on every page fade and slide in from the left and right respectively. The background will first load a lower resolution blurred version to maintain appearance and slide effect on slower phones or networks and to prevent the image just “popping in” once it loads.

Both the HPV and Females and the HPV and Males pages feature a tabbed content area which is purely CSS driven. It utilizes a mechanic where the tabs are labels for hidden radio buttons and the content is styled based off the :checked status of that hidden radio button. This is the most interactive section on the site and by eliminating the need for JS here we made sure it would work whether users had JS enabled or not.