Fork this repository and implement a responsive three-column display using the
supplied starter kit. Designs are provided in Adobe XD and in PNG in the
comps/ directory.
(in order of priority)
- Your implementation is expected to match the designs exactly in all supported browsers.
- Your code is well-organized, readable, and maintainable.
- Third-party libraries are pulled in carefully and only as needed.
- Browser payload size should be kept to a minimum.
- You are not allowed to change the HTML
<body>markup provided inindex.html - Each section of the accordion-style elements should expand on user interaction
- The default state of the accordions should be that all elements are collapsed
- Animations are hardware accelerated
- Implementation works as expected in most recent two versions of Firefox, Chrome, Safari, and Edge
- Use a CSS preprocessor. We use mostly use PostCSS or LESS. LESS is already set up for you.
- Make the layout fluid for any device or screen resolution.
- Add CSS transitions for the expand/collapse indicator.
- Add CSS transitions to the content/container as the sections are expanded/collapsed.
All fonts used in the design are available on Google Fonts.
- Bree Serif: Block title, post title, post subtitle
- Roboto: Body copy
- 32px: Block title
- 24px: Post title
- 21px: Post subtitle
- 16px: Body copy
Don't stop here -- look at the designs!
Feel free to contact us at any point if you have questions or experience an issue with any of the provided assets.