Markup

• Adaptive layout of a typical page of an Internet resource in the format of the JS language, syntactic sugar JSX and the stylization system React of Styled Components
• The layout was performed using the Pixel Perfect method

Branches

• develop - contains the source code
• gh-pages - demo

Stack

• JavaScript
• React
• Styled-Components
• TypeScript
• Figma
• Pixel-Perfect

The layout is displayed correctly in the following browser versions:

• Internet Explorer versions 11 , platforms — Windows
• Microsoft Edge versions 12 and above, platforms — Windows, Mac OS
• Mozilla Firefox versions 40 and above, platforms — Windows, Mac OS
• Safari versions 6.1 and above, platforms — Mac OS
• Google Chrome versions 29 and above, platforms — Windows, Mac OS
• Opera versions 28 and above, platforms — Windows, Mac OS
• Mobile device browsers iOS 7 and above
• Mobile device browsers Android 5 and higher, with the exception of UC Browser
• Browsers Samsung Internet

Adaptability consists in writing media on the following key “breakpoints”:

• 1920 (hd+), 1440 (hd), 1200px (wide), 992px (desktop), 768px (tablet), 568px (mobile), 414px (mobile-s).

Demo

https://pavel-parkhomenko.github.io/Markup-Task/#/Home