FMFW

In this case, we were faced with the task of creating a cool landing page for a crypto exchange with a table of changes in the price of cryptocurrencies online, as well as a podcast site where the company records cool podcasts with industry leaders, thereby sharing information with young entrepreneurs and just crypto enthusiasts.

The main goal is to convert visitors of the resource into users who will register, but the page had to demonstrate the company's difference from the others from the first step, show the company's technology, modern approach and wow effect in terms of animation and the process of user interaction with the site.

In layout (front-end development), we stick to relative sizes like rem, em and %. This allows you to achieve maximum adaptability, minimum the amount of code. The pixel value is used only for fixed values that are not should change to different screen sizes, such like frame size or corner rounding. Based on the principles laid down above, we use 18 column rubber grid without fixed container. Indentation between columns are equal to 1rem

We adhere to the same principle with fonts. The base font size is equal to 1rem = 16px. That is font with size 2.5rem = 40px. Based on this we we can increase / decrease fonts throughout the site by simply changing the rem value. For example, on laptops, 1rem is already equal to 13px, means the same font in 2.5rem sizes already has size 32.5px. This allows you to practically get rid of from adapting fonts, reducing the amount of code and simplify further support.

Fonts:

Colors: 

Using horizontal lines, rounded and straight shapes, as well as check marks from the lines

Using a set of solid and dashed curved lines to separate the background

Animated noise overlay is used throughout the site

Bull / Bear and Envelope Implementation

Bull / bear and envelope animation implemented with using the 'canvas image sequence' technique, which means alternate display of pictures (frames) inside the canvas element. This technology was chosen because at the moment only chrome browser supports video with alpha channel (transparency).

Realization of the planet

Planet is implemented on webgl library three.js and plugin three-globe