Style guide

Take advantage of beautiful design and easily create your dream course website.

Mega H1
Aa Bb Cc

Mega H1 - 65px / 115% (Poppins)

Heading 1
Aa Bb Cc

Heading 1 -50px / 130% (Poppins)

Heading 2
Aa Bb Cc

Heading 2 - 35px / 120% (Poppins)

Heading 3
Aa Bb Cc

Heading 3 - 30px / 135% (Poppins)

Heading 4
Aa Bb Cc

Heading 4 - 23px / 130% (Poppins)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text / Big - 21px / 160% (Poppins)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text / Medium - 18px / 140% (Poppins)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text / Tiny - 16px / 145% (Poppins)

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.

For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Rich Text Example

Colors

Phoenix Course is using shades of green, beige and white.

Gray / #f1f1f1
Dark Gray/ #585858
Black / #151515
White / #fcfcfc

Icons

All icons used in Skill Sprint template come from an open source icon library - Remix Icons. Meaning they are are free for personal and commercial use.

Fonts

Skill Sprint Template is using two additional fonts, called Inter and Poppins. They can be downloaded at Google Fonts and are 100% free for personal and commercial use.

Buttons

Button Text
Secondary Large
Button Text
Secondary Small
See all teachers
CTA With Icon

Tiles

Maria

“I just received my first salary after completing the course and I’m 100% satisfied with the results! Recommended it to all my friends”

Google Project Management
Template details

Included in Skill Sprint

Skill Sprint Courses Template comes with everything you need

12+ pages

20+ sections

20+ Styles & Symbols

Figma file included

To give you 100% control over the design, together with Webflow project, you also get the Figma file. After the purchase, simply send us an email to hi@byq.studio and we will be happy to forward you the Figma file.

Skill Sprint Comes With Even More Power

Overview of all the features included in Skill Sprint Template

Premium, custom, simply great

Yes, we know... it's easy to say it, but that's the fact. We did put a lot of thought into the template. Skill Sprint was designed by an award-winning designer. Layouts you will find in our template are custom made to fit the industry after carefully made research.

Optimised for speed

We used our best practices to make sure your new website loads fast. All of the images are compressed to have as little size as possible. Whenever possible we used vector formats - the format made for the web.

Responsive

Skill Sprint is optimized to offer a frictionless experience on every screen. No matter how you combine our sections, they will look good on desktop, tablet, and phone.

Reusable animations

Both complex and simple animations are an inseparable element of modern website. We created our animations in a way that can be easily reused, even by Webflow beginners.

Modular

Our template is modular, meaning you can combine different sections as well as single elements, like buttons, images, etc. with each other without losing on consistency of the design. Long story short, different elements will always look good together.

100% customisable

On top of being modular, Skill Sprint was created using the best Webflow techniques, like: global Color Swatches, reusable classes, symbols and more.

CMS

Skill Sprint includes a blog collection that is made on the powerful Webflow CMS. This will let you add new content extremely easily.

Ecommerce

Skill Sprint Template comes with eCommerce set up, so you can start selling your courses straight away.

Figma included

To give you 100% control over the design, together with Webflow project, you also get the Figma file.