Create a landing page following the given design (Figma).
-
Use of semantic tags wherever is necessary
-
All fonts, colour palette, elements sizes must strictly match the design.
-
Pixel perfect is also not required, BUT your website should visually match the design template (i.e. If the element is horizontally centred on the design, it should look centred on the website)
-
All class names must not be meaningless (i.e. class=”myClass”) and should follow the same naming convention, preferably BEM, but you could come up with your own (just be consistent)
-
Basic cross-browser support (website should look correctly on last versions of modern browsers (Chrome, Safari, Edge) For now, responsiveness is not required.
Improve a landing page following the given design (same as previous) by adding full responsiveness and some animation.
-
The website should be partly responsive: Required: for 320px (iPhone 5s) 2560px (4K screens). Hint: for extra-large screen width, you can just fit website content inside a previously set container for the regular screen width and centre it horizontally.
-
The header should collapse to a hamburger on small screens
-
The website must contain animations (at least 3). Can be made in any possible way, preferably with css properties (animation/transition).
-
Your project should be logically structured (all your CSS can’t be in just one-two files)
-
All of the previous work requirements must be kept.