The Barkingham Palace

Welcome to The Barkingham Palace, a pet hotel focused on safety, luxury and creating lasting memories for all club members and their pups. We pride ourselves as being the only one of few with facilities that encompass everything from wedding events to pet surgery.

UX

Concept wireframes for my layout can be found: Wireframes

OWNER USER STORIES

• As the owner of the pet hotel, I want to showcase my facilities so that guests can feel at ease when leaving their pets with us.

• As the owner of the pet hotel, I want pet owners to join the royal club so that we could get recurring income and build a community.

• As the owner of the pet hotel, I want to showcase our commitment to safety so that we could gain the trust of the pet owners.

DOG OWNER USER STORIES

• As the pet owner, I want to find a place to leave my pets at for a few days so that I can go on a holiday.

• As the pet owner, I want to let my dog socialise with other dogs in a safe environment so that my dog will not be so destructive at home.

• As the pet owner, I want to hang out with my friends and their pets so that we can have fun and create memories together.

• As the pet owner, I would like to know if the pet hotel is focused on safety so I can feel at ease.

• As the pet owner, I would like to know the price of the pet hotel so I can see if it fits my budget.

Features

Existing Features

Note: All external links are ficticious as The Barkingham Palace is not a real business.

1. Navbar:

• Fully functional from all pages.
• User is able to navigate to any page they want without using the back button in the browser.
• User can also reach the index page by clicking on The Barkingham Logo at the top left of every page.

2. Footer:

• Social media icons changes color on hover.
• Social media icons are clickable.
• Social media icons links opens a new tab when clicked.

3. Animation(Fade in and fade out):

• AOS is used to achieve this result on all pages.

4. Buttons:

• All buttons are fully clickable.
• Buttons changes color on hover expect Royal Club button in the Index page Jumbotron (Changing color will not match the current design).
• All buttons links to the corresponding page the User may be interested in.

5. Contact Page:

• Phone number button changes text to be"Call Us" upon hover. It links to a phone number when clicked.
• Address button changes text upon hover. It links to an address on google maps when clicked.
• Forms have a placeholder to allow users to visualise the infomation entered. Email input returns an error message if input is not in an email format.

Features Left to Implement

1. A little interactive puppy helper at the side of the user's screen. Expands to a help menu when clicked.

2. A puppy chasing a ball that rolls to whichever nav link the user clicks on the navbar.

3. A wedding page with a video playing in the back of a wedding with dogs as ring bearers and with Mariage D' Amour playing in the background.

Technologies Used

1. HTML:

• Link: https://html.com/
• Used as the backbone of the website that users see.

2. CSS:

• Link: https://www.w3.org/Style/CSS/Overview.en.html
• Used to style the website that users see.

3. BootStrap4:

• Link: https://getbootstrap.com/
• Used to create a mobile responsive site.
• Used grid system to make website look clean and tidy.

4. Animate on Scroll:

• Link: https://michalsnik.github.io/aos/
• Used to give users a more relaxed scrolling experience by adding in fading animations.

5. FontAwesome4:

• Link: https://fontawesome.com/v4.7.0/
• Used to add in social media, phone and address icons. This is so that users will feel more engaged when browsing.

JQuery

The project uses BootStrap JQuery to simplify DOM manipulation.

Testing

All testing were made manually, no automated testing was implemented.

In-depth testing file: Testing File

Deployment

Steps I took:

1. Login to GitHub.
2. Click my repository.
3. Click settings.
4. Scroll down to GitHub Pages.
5. Select source and select master branch.
6. Done! My website is now online!

Credits

Acknowledgement

This project would not have been made possible without StackOverFlow forums, w3schools and BootStrap documentation.

The photos from this site were obtained from:

• competition.jpg (https://www.nytimes.com/2020/02/11/health/westminster-dogshow-veterinarians.html)
• chamberjumbo.jpg (https://pixabay.com/photos/springer-spaniel-dog-puppy-pillow-4094776/)
• contactjumbo.jpg (https://canna-pet.com/are-mixed-breed-dogs-healthier-than-purebreads/)
• dogcafe.jpg (https://unsplash.com/photos/VihbwWEHhc4)
• dogfood.jpg (https://pixabay.com/photos/dog-food-dog-bowl-dog-kibble-5168940/)
• dogroom1.jpg (https://pixabay.com/photos/bed-dog-animals-pets-relax-1284238/)
• dogroom2.jpg (https://pixabay.com/photos/dog-died-german-shepherd-sleep-2817560/)
• dogroom3.jpg (https://pixabay.com/photos/sad-dog-lying-in-bed-lying-1930479/)
• facilitiescover.jpg (https://imgur.com/o3uha1x)
• grooming.jpg (https://unsplash.com/photos/dHIRbh9En6I)
• mainpagedog.jpg (https://pixabay.com/photos/dog-thoughtful-quiet-relaxed-cute-3168589/)
• outdoor.jpg (https://unsplash.com/photos/89QlzkUSwq0)
• priceschamber.jpg (http://oohlalaposhpets.com/blog/)
• pricesjumbo1.jpg (https://furandcollar.com/blogs/the-wag/5-best-small-hypoallergenic-dogs-that-are-perfect)
• pricesroyal1.jpg (https://www.shutterstock.com/image-photo/funny-dog-pembroke-welsh-corgi-teasing-1607029804?irclickid=wLFQOkQS-xyOW4bwUx0Mo3QWUkiR2NU1qSbRTg0&irgwc=1&utm_medium=Affiliate&utm_campaign=TinEye&u)
• royaljumbo.jpg (https://www.shutterstock.com/image-photo/afghan-hound-studio-349053782?irclickid=wLFQOkQS-xyOW4bwUx0Mo3QWUkiR2NTZqSbRTg0&irgwc=1&utm_medium=Affiliate&utm_campaign=TinEye&utm_source=77643&utm_term=)
• royalperks.jpg (https://www.health.harvard.edu/staying-healthy/the-health-benefits-and-risks-of-pet-ownership)
• safetycleaning.jpg (https://depositphotos.com/193495394/stock-photo-dalmatian-dog-in-apron-with.html)
• safetyjumbo.jpg (https://www.creditkarma.com/advice/i/options-huge-vet-bill)
• safetyvet.jpg (https://freeportvetmed.com/national-pet-health-insurance/)
• swimmingpool.jpg (https://unsplash.com/photos/rkkThs64v-A)
• walker.jpg (https://pixabay.com/photos/dog-walker-male-2970260/)