New Website Published

Examples of free art from Pixabay.com used on my site

Finally found the time to put the finishing touches on the code for To Katch A Kitty.com. It's a website about trap, neuter, release for feral cats. My goal with the site was to make it as informative, easy to read, and engaging as I could. Most of my research came from the many well established feral cat and animal welfare organizations out there such as Alley Cat Allies, Neighborhood Cats, and the Humane Society of the United States. Other bits of information came courtesy of my local animal shelter, the Placer SPCA.

Other resources for elements such as graphics and pictures were used thanks to the various Creative Commons licensed material available on Flickr, Wikimedia Commons, and Pixabay. Although most of the site's content was produced by myself, I could not have rounded up all of the the elements needed without these free-licensed materials.

Mouseover the tabby to see what message he has for you.

The website employs some of the latest CSS3 :hover techniques that I have learned recently. I used the CSS transform and transition properties on several photos to not only engage the user but to provide attribution to photos used that were not my own.

For the overall design, I wanted the main article to appear as a sheet of transparent glass hovering over the background and I think I achieved that. The images in the background are sized in percents so they change size depending on the device screen width. I used the CSS background-attachment property to fix the images to the background so that they do not move. Also, I created two additional stylesheets for screen widths smaller than 900px and 700px. I found that at smaller screen widths, the cat face graphics get in the way of the background so I removed them at smaller widths. There is also a stylesheet for the printed page that removes certain elements that are not necessary to print.

There is a bit of JavaScript on the page. I used JavaScript to help iOS devices with the CSS :hover. I also used JavaScript to include a site search bar in the footer and add some sound effects.

Overall, I am glad the website is up. It has been about a two-three month project. The site could have been up sooner but I have had some personal issues arise that has made it difficult to find time to work on my projects.