PIED PIPER

The demo of how I used HTML & CSS skills to create adaptive design of this Figma template

Design requirements

• Header is fixed and isn't moved if scrolling
• Content is centered and its max-width is 1219px
• Header menu has navigation to the approprite topic (link anchors)
• Minimize the usage of fixed height. Fixed width is required for inner container (refer to second design template in Figma)
• Usage of 'position' is allowed only for header

Homework of this Stepik course

Features

• Flexbox layout
• Grid layout
• Double container pattern
• Float & clearfix
• Link Anchors
• EM & REM usage
• Block, Element, Modifier Methodology
• Adaptive for Mobile & Desktop

Check it out

https://piedpiper-by-duckate.netlify.app/