-
As a user, I want to be able to adopt a Cat or a Kitten to care for.
-
As a user, I want to be able to donate to the charity so I can give my support.
-
As a user, I want to be able to sponsor a Cat to a Kitten so I can give support to a specific cat the charity cares for.
-
As a user, I want some support in how to best take care of Cats and Kittens.
-
As a user, I want to be able to contact the charity.
-
As a user, I want the website to run on different screen sizes.
-
As a user, I want to be able to apply to volunteer my time to help the charity.
-
As a user, I want to be able to raise funds in other ways so I can give support to the charity.
| Feature | Importance | Viability | |
|---|---|---|---|
| A | Information about the charity | 5 | 5 |
| B | Generate money for the charity | 5 | 4 |
| C | Adoption info | 3 | 4 |
| D | Responsive application form | 5 | 4 |
| E | Location and contact info | 3 | 4 |
| F | Cat care support | 2 | 4 |
| Total | 23 | 25 |
Am I Responsive? was used to test how responsive the website is on different devices.
The following webpage was useful in order to decide which font style to select. A display type was chosen due to its friendly accessible approach, and Sans-Serif as the fallback font.
1 Google Font was used throughout this website:
The following website was useful in order to decide which colours I used for my website.
Navbar
Buttons
Footer-
Donate-Panel
Font Awesome 5.13.1 The following 4 Font Awesome icons were used.
- map - used in the Contact Us modal
- phone - used in the Contact Us modal
- mail - used in the Contact Us modal
- copyright - used in the footer
- Click here to see the project Wireframes
- GIMP was used to create the logo by editing this image. The website font from Google Fonts was then added to GIMP and then inserted underneath the image to create the logo.
Back to top
-
Adopt
- Allows user to see the selection of cats available for adoption and follow a link to contact the charity directly and to find out where to find them.
-
Donate
- Allows user to give money to the charity by pressing a button and going to checkout through PayPal. (dummy)
-
Sponsor
- Allows user to select a cat to sponsor by pressing a button and going to checkout through PayPal. (dummy)
-
Videos
- Allows users to watch appropriate videos on the page which give support with cat care.
-
Navbar
- Navbars are used throughout which work effectively to link between all pages. Logo also leads back to Home. On smaller screens the links become a toggle button.
-
Footer
- Footers are used throughout which allow users to use links to appropriate Facebook, Twitter and Instagram page. Users can also follow links to important anchors of Donate, Adopt and Sponsor. There is also a button for users to click which links to a Bootstrap modal with a map and contact details.
-
Volunteer Form
- Allows users to fill in a form to volunteer. The form includes a file upload button so users can attach their covering letters.
-
Support-Us buttons checkout
- The purchase page of Donate / Sponser will eventually link to a PayPal purchase page. Currently links to a demo.
Back to top
-
HTML
- This project uses HTML to create the main functions of the website.
-
CSS
- This project uses CSS to override the Bootstrap elements and apply the determined styling.
Back to top
-
HTML
- W3C HTML Validator "Document checking completed. No errors or warnings to show."
-
CSS
- W3C CSS Validator "Congratulations! No Error Found. This document validates as CSS level 3 + SVG !"
For information on the testing, follow the link to the document here
Back to top
*The CatsUnion repository was developed using GitHub Workspaces, and all commits were pushed to GitHub using Git.
*Commits were pushed every time important sections were completed in order to create useful ongoing checkpoints.
- Local Deployment not required
-
Deployed Site:
*In order to deploy the website, the following was actioned:
- Navigate to GitHub repository:
- Open the cat-union repository:
- Click on the Settings tab at the top:
- Scroll down to the GitHub Pages section.
- The first drop-down field should be Source with None pre-selected.
- Select master branch from the list.
- The page should refresh.
- Scroll down to the GitHub Pages section.
- There will now be a deployed link:
- The site is published at https://adam181189.github.io/cat-union/
Back to top
- All written content was my own.
- Pixabay - Database Images
- Unsplash - Database Images
- Google Maps - image modified to include fake location
Inspiration for this project was drawn from Dogs Trust