<aside>
🔖
Summary
Root
[·] Instructions
→ Licences
→ Changelog
🔗 cc-folio.webflow.io
</aside>
Design+Code by Specimen©
specimen.studio
<aside>
<img src="/icons/flag-checkered_gray.svg" alt="/icons/flag-checkered_gray.svg" width="40px" />
Before publishing your site, please always refer to the Preloader section.
</aside>
Fluid Design and Responsiveness
This template uses a fluid design based on the body font size, ensuring a perfect and consistent experience across all devices.
<aside>
💡 What this means: The site is fully responsive, automatically adjusting to any screen size for a seamless user experience.
</aside>
Key Guidelines:
- Do not change the body font size.
- To modify the size of text elements, use the tags specified in the Styleguide, such as Paragraph, Paragraph Accent, or Big Headline.
- For adjusting padding, margins, or typography size, prefer using the "em" unit to maintain consistent proportions across the website.
- Use "px" for small elements or those that should not scale across different viewports (e.g., fixed-size paragraphs).
- "em" units help ensure your design is automatically responsive. However, for complex layouts, especially on vertical screens, double-check the responsiveness.
- For consistent horizontal padding, use the "Is Padding" tag.
- The website uses a 12-column grid. Feel free to use column classes for your layouts as needed. More details are available in the Styleguide utility tab.
Interaction panel
<aside>
▪️
To explore the animations in this template, you'll need to switch the interaction panel.
</aside>
This template uses two types of animations:
- Webflow Classic Interactions (via the Classique Interactions panel)
- GSAP Animations (via the GSAP Interaction panel)