<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)