Animal Rahat

This is a beautiful website redesign, built entirely on WordPress, for Animal Rahat, a non-profit organization located in the Indian state of Maharashtra. Animal Rahat is dedicated to providing care for neglected bullocks, donkeys, ponies, horses, and other animals. I was one of two developers on this project, and my role involved building out the front-end, as well as creating the ajax loading functionality.

The design featured a lot of diagonals which were interesting to code, both in CSS and JavaScript. The homepage banner slider and the interior pages headers feature a dynamic diagonal overlay that is set via JavaScript. The diagonal overlay is dynamic because the design requested that the angle of the diagonal always match up with the teal-colored diagonal of the top bar (see slider image).

The site layout is meant to be full-width, so the colors are not constrained by a max-width container. This is easily achieved for the top-bar, since a simple linear-gradient background works. The images in the homepage banner and the interior page headers are also full-width, which makes things a little more difficult compared to if everything was within a max-width container.

Javascript is used to calculate what percentage of the page width should be covered by the maroon-colored diagonal overlay. The formula is the difference of the total page width minus the static left width (as determined by the teal diagonal), divided by the total page width.

Development: 2019