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.