(097) 619-4640
support@jetbit.pro
Project Request
(097) 619-4640
support@jetbit.pro
Project Request

Development of a promotional website for a pharmaceutical product

At the beginning of the year, we completed the "Smart Contraception" promo site for Bayer AG — a website dedicated to a women's health medication.

Task

A new, modern design for the website smartcontraception.ru, dedicated to Bayer Healthcare LLC's pharmaceutical product for smart female contraception, was completed in February 2016. Key features of this site include its full responsiveness across all devices, complex object animations, and a single-screen height layout for convenient content viewing. The HTML markup was integrated into the site's engine by other developers, as Bayer's company policy does not allow a single company to handle all project work. The site will subsequently run on Team CMS.

Brief Technical Specification

Home Page
  1. The home page consists of THREE SLIDES. Transition between slides is controlled by a slider.
  2. Changing the slider's state updates the main image and the slider's title: "A Full Life," "Smart Gadgets," and "You and Folate."
  3. Specific images corresponding to the current SLIDE state become active. Implement a smooth transition between slides with an effect of sliding fields for the title and text appearing.
  4. If the user is inactive for more than 5 seconds, the slider automatically moves to the next state. This process should be looped: slide transitions follow the sequence 1-2-3-1-2-3…
  5. When hovering over a highlighted (active) image, it should smoothly scale up by 10%.
  6. Website footer links. On hover, the underline should disappear and the color should change to blue. Use the color from the "GYNECOLOGIST ONLINE" button.
  7. Social media links should also change to the same blue color on hover, as in point #6.
  8. The "GYNECOLOGIST ONLINE" button should have a pressed-button effect when clicked.
  9. The page must scale to fit any screen resolution, displaying full-screen without triggering vertical or horizontal scrollbars. That is, both height and width are 100%.
  10. Ensure a smooth transition between slides as described in point #3.
Home Page (Responsive Version)
  1. Responsive layout for displaying the site on mobile devices (smartphones and tablets).
  2. Strive to preserve the functionality and transition effects from the desktop version.
  3. Also ensure automatic transition from slide to slide after 5 seconds of user inactivity.
Secondary Page

The page is a landing page. As the page is scrolled, the slider in the left menu switches based on the content's sequence. The left menu is fixed relative to the page content.

  1. The SMART logo is a link to the home page.
  2. A vertical menu appears on the left, fixed in height and does not scroll with the content in the right part of the screen (images). It contains three sliders and links to standard site pages, as well as links to social networks and "Gynecologist Online." For the responsive version, the menu should be collapsible.
  3. The page must display full-screen at any screen resolution: 100% width. The page height is determined by the set of displayed images corresponding to the selected sliders, scaling according to the number of images.
  4. The slider functionality is as follows:
    • A Full Life
    • Smart Gadgets
    • You and Folate

Upon entering the page, the slider corresponding to the home page slide is activated. For example, if the user arrives at the secondary page from slide #1 of the home page, the "A Full Life" slider will be active. Similarly, if arriving from the second slide of the home page, "Smart Gadgets" will be active.