Tech Stack
Squarespace
HTML
CSS
JavaScript
Figma
Roles
- Design
- Front-end
About
Puppy Time Vancouver is a professional animal care based in the West End/Coal Harbour area of Vancouver, BC, Canada.
In order to increase their brand awareness and the number of clients, I designed and built the website from scratch by discussing with the owner and their marketing team.
We decided to build this with CMS, which is familiar to my client, Squarespace so that the client can maintain the website with a minimum help of developers.
The landing page looks like an one-page website, but the information on each section is limited on purpose.
On the landing page, when each item on the header is clicked the page will be scrolled down to the corresponding section of the page. On the other hand, on the other pages than the landing page each item on the header leads the user to each separated page.
I wrote a custom JavaScript to implement this function.
In the figure below, those two images on the left are the landing page as a whole. You can see the "Services" section under the hero image.
The image on the right is the separated page of "Services". When the user clicks each service or "Learn More" button, it leads them to the separated page. The rest of sections work the same way. (laptop/desktop version only)
For mobile devices, I designed and coded the fixed icons of phone and text. When the user taps these icons a phone or an sms application will start. Therefore, I hid the phone number from the header.
I implemented these with a custom CSS.