The goal of this project was to create a responsive Drupal multisite dedicated to a famous golfer and his charitable foundation.
To achieve this, Drupal was set up as multisite that contains both sites for a golfer and a charity foundation.
The multisite has shared module and theme files, but two separate databases. This allows to enable some modules on one site without enabling them on another one.
What Was Done
The team created a complicated responsive layout and all the functionality of the multisite according to the customer's requirements. The header of both sites includes a logo of the respective website and a hamburger menu icon that opens all navigation.
The menu consists of the links to website interior pages, social links which open the respected social website in a new window, and a search form. The search input closes the menu and navigates to the page with search results. The menu of the website about the golfer also includes a CTA button to visit the charity website.
The homepage of the website about the golfer includes a scroll down slideshow with several large slides that feature key areas and topics of the site. The website about the golfer has the following interior pages — biography, sports career, interests apart from sports, products, charity, etc.
The homepage of the charity website contains a three pillars module and a “join charitable foundation” module.
The pillar module consists of three vertical sections that feature a background image, color overlay, the name of the section, a title , short description, and a CTA button.
After clicking on a section, it opens and aligns either left, center, or right depending on which of the three sections was clicked. Two sections, that are not open, decrease in width.
Open section content consists of either an image or video, a title, subtitle, text, and two CTA buttons to learn more or donate. To close the section the user should click X in the upper right corner.
The “join a charitable foundation” module provides a signup form with a first name, last name and email address as required fields and a phone number as an optional field.
The charity website also includes several interior pages about the history of the foundation, its values, ways to help, donations, etc. The “join a charitable foundation” module is present on all interior pages.
On the donations page there are two main tabs with a slider for different types of donations — monthly and one-time. Each tab has three call to action boxes with a set amount of money, a subtitle, and a “donate” button that appears on hover.
Under the slider there is also an option to donate a custom money amount. The “donate” buttons take the user to a third party website where transactions are processed.
The footer of both sites consists of three parts — a top, mid, and a bottom footer. The top footer has a group of three clickable images with headlines that highlight three key topics of the website and link to the respective pages.
After rollover, the images are covered with a transparent overlay and a line under the headline becomes an arrow. The mid footer consists of a website logo that leads to the homepage, a social links menu, and a CAT button that links to the charity website.