1. Layout is necessary only for the desktop version, the mobile version does not need to be done. The layout should be close to the layout (pixel perfect is not needed, a minimum deviation from the layout is allowed - a maximum of 5 pixels) Hover effects should be done at your own discretion.
2. Support for modern browsers: Chrome, Firefox, Opera, Yandex, Safari, IE11, Edge. In all of these browsers, layout and functionality should work identically.
3. It is NOT allowed to use additional ui-frameworks such as: Bootstrap, 960 Grid system, Foundation, etc.
4. The use of additional js frameworks and libraries is allowed. The use of js frameworks will be a plus (when choosing a framework, it is necessary to maximize its capabilities and in this case, the work will be checked with a bias on a specific framework and its "best practices")
5. 2 sections of sliders: Coming soon and Most popular - work in parallel (filtering, change of view occurs within the framework of a particular slider, without affecting the appearance and functionality of another) Each of the films / TV shows has its own parameters, such as: year of release , name, number of likes, rating, etc. If there is no rating, the svg / products / actions / [login to view URL] icon is displayed instead. If there is a rating, then the rating icon with a filled circle on a scale (from 0 to 10) is put. The rating should be dynamic (depending on the value from 0 to 10 area should be painted over)
6. Slides are switched using the drag event (there are no arrows in the card-view, they are in the list-view and the slider becomes horizontal)
7. The use of css preprocessors is required
8. The code should be neat, aligned and structured.
9. Task at will (if successful, it will be a plus): make the functionality of opening a youtube player (opens by clicking on the "Play" button on the slider element) Autoplay is optional. The YouTube player opens under the black slider bar (with filter buttons) and above the slider elements. The YouTube player spans the entire width of the window. [login to view URL] - at the top of the YouTube player add a button to close the slider (cross), by clicking on which the video will stop and the slider will close.
10. Task at will (if successful, it will be a big plus): You can make layout strictly according to the layout, or you can use the dynamic data stored in the [login to view URL] file (also the data is available at: [login to view URL] / bins / p2dnz), and you will need to adjust the size of the images (posters). Each movie / TV show has its own parameters, such as: id, title, likes_count, type, comments_count, etc. Using this data, obtained by api or taken from a file, it is necessary to draw sliders. And in the case of the Coming soon slider and in the case of Most Popular, the data should be taken from the same file. In a movie / TV show that does not have a "rank" field, there is a "expectations_count" field instead, which shows the number of waiting votes (svg / products / actions / [login to view URL] icon).
11. Layout - Kaboodle [login to view URL], fonts - take from the fonts folder, svg-images are in the svg folder
12. The Like icon is located at: \ files \ svg \ products \ actions \ [login to view URL]
13. The task must be performed using the version control system - Git. The test task must be downloaded at [login to view URL]
12 freelanceria on tarjonnut keskimäärin 26$ tähän työhön
Hi there I am a web designer, I can do PSD to HTML, I have 1 years experience in HTML. You can work with me. I started working on the Freelancer website before I was working offline. Thank you