Handsome Hounds

https://stephanielenehan.github.io/love-cinema/

https://github.com/stephanielenehan/love-cinema

Author: DEVELOPER_stephanielenehan

Welcome to Handsome Hounds!

This is my website offering dog grooming which displays a welcome landing page, a gallery of photos of assorted dog breeds either freshly groomed or being groomed, an information panel of reasons to get your dog groomed, opening time and contact information, an enquiry & quote request form, and social media links. A 404 error page is also made to match the main web page and direct users back to the main page.

This website was originally to be a cinema website but I decided that I might use that idea for a later project. I was advised best not to change the name of the workspace and to simply continue on.

Wireframes

Imagery

• The imagery chosen reflects the variety of sizes and types of dog breeds catered for along with the variery of services offered (washing, cutting, brushing, nails).
• The imagery chosen shows happy healthy animal exhibiting positive results for both dogs and owners.

Styles

• The color palette chosen reflects a bright positive background with easy to read text.
• The muted earthy tones contrast well against the blue background whilst reflecting the nuetral tones of dog's fur.

Features

Header

• The header contains the display page title for the name of the business Handsome Hounds.
• The header contains navigation links as below detailed.
• The image used in the header is of a small shih Tzu being groomed. The image is a happy vibrant dog enjoying being groomed to demonstrate the overall aim and ethos of the website and reflects the alternative description of a : small Shih Tzu dog being groomed.
• The header contains a tag line under the main image to reinforce the mission of the website to provide grooming services for everything a dog needs: A customs cut from nose to butt.

Navigation

• Navigation bar consists of tabs for Home, Photos, Reasons to get your dog groomed, Opening Times, Make an Enquiry and Social Media
• Each tab on the navigation bar of the index.html page functions with an internal link to bring the user to the relevant place on the page.
• Each tab on the navigation bar of the 404.html page functions with an internal link to bring the user back to the landing page and to the relevant section in one click.

Body

• The body consists of 4 sections that each represent a user end point for provision of information or further action.

Section : Photos - The photos section is comprised of 6 images :

• small Pomeranian dog freshly groomed

• large dog having undercoat groomed out

• freshly washed and dried black Labrador dog wearing red bandana around neck

• Three eight week old puppies being washed together in a large sink

• Two small pugs dogs,freshly groomed, one black and fawn, one all black

• single dog paw showing freshly cut nails

Section : Reasons - The reason to get your dog groomed section is comprised of 5 statments that validate the reasons one might get their dog groomed

• Each reason links back to evidence shown in the afore mentioned photos section and is listed in the section right after the photos to reinforce this.

Section : Opening-Times - The opening times section shows the basic information one would need if they chose to contact or attend the dog grooming salon.

• Opening and closing day along with their corresponding times.
• Phone number for the dog grooming salon.
• Email address for the dog grooming salon.
• Physical address for the location of the dog grooming salon.

Section : Enquiry - The enquiry section comprises of a form the user has to complete and submit with either their email address or their phone number in order to receive a quote back.

• The input area for the email address requires the correct format with an @ symbol and an appropriate message appears for the user beside the input area when this criteria is not met so as to indicate to the user to input the email address correctly.

• The input area for the phone number requires the correct format with numbers and an appropriate message appears for the user beside the input area when this criteria is not met so as to indicate to the user to input the phone number correctly.

Footer: - The footer contains :

• Social media links for Instagram, Facebook and Twitter that follow the template of Coders Coffeehouse.
• Each social media link opens in a new page
• Copyright shown as a referal to the README containing fictional and attributed sources.

Testing

CSS Validation

• style.css has been tested with CSS Validation https://jigsaw.w3.org/css-validator/validator and any error or warnings found corrected.
• CSS now validates without error.

HTML Validation

• index.html has been tested with HTML Validation https://validator.w3.org/nu/#textarea and any errors or warnings found corrected.
• index.html now validates withour error.

• 404.html has been tested with HTML Validation https://validator.w3.org/nu/#textarea and validates without error.

Manual Testing

write out feature and say how you checked it.

• how I tested it in bullet points

Accessibility

• All images contain alt language to describe the images for screen readers.
• Social Media links open in a new tab with an aria-label to describe the link and advise that a new tab will open.

Responsiveness

• Site tested with https://ui.dev/amiresponsive?url=https://stephanielenehan.github.io/love-cinema/
• The site is responsive on mobile, tablet and desktop.

credits

imagery

• shih-tzu : https://pxhere.com/en/photo/678977
• pomeranian : https://pxhere.com/en/photo/802177
• large Dog undercoat removal : https://pxhere.com/en/photo/678974
• black labrador with red bandana : https://pxhere.com/en/photo/807386
• 3 puppies being washed : https://pxhere.com/en/photo/1055567
• 2-pugs-two-tone-and-black : https://pxhere.com/en/photo/1354939
• dog paw nails : https://pxhere.com/en/photo/847302

content

• Reasons to get your dog groomed. Source for text from: https://milliespetservices.co.uk/reasons-groom-your-dog/
• A custom cut from Nose to Butt! Source: Tag line is copyright to Muttzforcutz.ie
• Welcome to Handsome Hounds Source: Handsome Hounds is the name of a shop in Portarlington, Co. Laois, Ireland

styles

• Responsive Navigation based on Malia Havlicek's codepen: https://codepen.io/maliahavlicek/pen/LYeBwNY
• Color scheme from : https://visme.co/blog/website-color-schemes/ I have used no.3 Natural and Earthy #8D8741, #659DBD, #DAAD86, #BC986A, #FBEEC1.