Overview
The Mayo Click Office of Information Security needed a site to provide an entry point for their doctors and other medical staff about preventing information security issues such as spam, viruses, and reducing vulnerabilities. Since doctors are more interested in helping patients and have limited time information had to be engaging and short.
- Main Responsibilities: Front end development, back end development, site documentation
- Technologies used: HTML5, CSS3, jQuery, Javascript, PHP, MySQL, WordPress
- Notable features:
- Responsive design
- CSS3 animations
- Use of SVG for logos and icons
- 3D rotating responsive carousel
- 3D rotating FAQ cards
Main Menu
The main menu used a fade in effect overlay. Menu items rotated into view during the fade it giving a 3D effect adding depth to the site. To ensure continuity the animation rotates down during fade out.
3d Topics
Mayo Clinic breaks their organization into three areas. Each area has a specific set of information. Selecting one of the areas creates an overlay with details about that area. Switching the areas causes a 3D rotating effect.
Info Cards
To continue the rotating animation hovering over cards flips them to show more information.