This website is my first project, where I decided to implement Bootstrap - just to get more practice using that library. However, I decided against I used only three elements: the navigation bar, the carousel (a mini gallery, a display of multiple images in one window with navigation arrows, which allows users to easily navigate between the previous and the next image) and a modal (the widow that will pop up when users click the 'leave a review' button).

Colour Scheme

Colour palette used on Lucie's website complements the beautiful photograph by Pauline Leroy and consists of two shades of brown/beige and pale blue that goes well with the colour of the sky from the hero image. Pastel hues of blue and brown give off a very calming effect, that bring comfort and friendliness to mind. I went with black for the action buttons.

Sections on the Website

The website has a standard layout with a hero section and two CTA (call to action) buttons, followed by a short description of the business and cards displaying services currently offered by Lucie.

Later we have It's a Safe Space paragraph as Lucie wanted to send a very clear message that she accepts all people and animals, and doesn't discriminate on any grounds. I chose an image of a rainbow that has been painted on the ground (photo by Carlos de Toro) and added a white overlay of a very high opacity to make the text more readable. I was very pleased to find out that Lucie loved the look of that section 😊

The next section are Testimonials, but this part is not visible yet, as LC Animal Care & Training is still waiting for the first reviews. The section is ready though and will look like this:

Below Testimonials Users have the option to leave a review - there is a round button with a radial gradient effect on hover; when clicked a modal window appears. Inside of it there is a form to submit, where a User can give Lucie feedback with a 1 to 5 star rating. On small screens the reviews will stack and form a column.

Contact section has a beautiful background portraying a grey-black-and-white border collie taken by Rafał Karoń. The photograph is absolutely amazing so I decided to leave the left side of the page empty so the dog is mostly unobstructed, and move the contact form and the Calendar button to the right. I also gave the photo a fixed position, making it unmovable and look as if it was glued to the back of the website. There is also a Google map, icons linked to social media accounts and contact information.

The footer of the page has also a radial gradient effect giving it a bit less of a flat look. On top of it, there is an arrow linked to the top of the website. The smooth scrolling property makes the way back up quick and effectively. There is a Navigation column with links to the most important places on the website and also a link to a page where all the used images are listed and their authors given due credit.

About page is all about Lucie - we get to know her, her new business as well as her hopes and intentions.

Services page is where you can find more details about the services provided by LC Paws-Claws Animal Care. There are also a number of CTA buttons making it easier for the User to book an appointment.

The website is fully responsive and looks good on all screen sizes and browsers. The code has the basic SEO applied and the website gets the maximum score for Accessibility, Best Practises and SEO when analyzed on PageSpeed Insights.

I must say that I am very happy with how it turned out, but most importantly my client absolutely loves her new website and that is what matters the most.