Join or log in to watch this lesson.

When you join Flowmingo you'll get access to every current & future course, lesson & project, for life.
Hero Content
Unlock this lessonLog in

Making The Pricing Table Responsive

5:08
minute lesson
Next LessonTable of Contents

In this lesson we make the pricing table fully responsive.

Table of Contents

Project Setup
[TITLE v.one] Project Setup
New Webflow Project & General Style Guide
The Header
[TITLE v.one] The Header
Building the Header
The Hero Section
[TITLE v.one] The Hero
Building Out The Hero Section
Building & Animating the Checklist Line
Making the Hero Section Responsive
Adding & Animating the Hero Background Icons
The Logo Grid Section
[TITLE v.one] The Logo Grid
Building the Logo Grid Section
The Features Section
[TITLE v.one] The Features Section
Building the Features Section
Making the Features Section Responsive
Building the Callout Grid Section
The Examples Section
[TITLE v.one] The Examples Section
Building The App Examples Section
Setting Up The Examples CMS Collection
Making The App Examples Section Responsive
Creating The Examples Page With Pagination
CTA Card
[TITLE v.one] CTA Card
Building The CTA Card Symbol
The Footer
[TITLE v.one] The Footer
Building The Footer
The Pricing Page
[TITLE v.one] Pricing
Building The Pricing Table
Making The Pricing Table Responsive
Building The Pricing FAQ & Wrap Up

Assets & links

Assets
V.One Project Assets
2.1mb
Links
View live demo
View project in Webflow

Styles Cheat Sheet

Colors
Primary 1
#000000
Primary 2
#8a8f98
Brand
#feb800
Headings
#FFFFFF
Border
#777777
Nav Links
#cdcdcd
Purple
#b186ff
Gold
#feb800
Green
#05d577
Blue
#3ca7ff
Typography
Font Family
Sofia Pro
Font Alternative
Montserrat
Jumbo Heading
Size
100px / 72 / 60 / 48
Weight
900
Line Height
1.1
Letter Spacing
-2px
Color
#FFFFFF
H1
Size
80px / 72 / 60 / 48
Weight
900
Line Height
1.1
Letter Spacing
-2px
Color
#FFFFFF
H2
Size
60px / 48 / 36 / 36
Weight
900
Line Height
1.1
Letter Spacing
-2px
Color
#FFFFFF
H3
Size
28px / 28 / 28 / 24
Weight
700
Line Height
1.1
Letter Spacing
-1px
Color
#FFFFFF
Text Large
Size
25px / 25 / 22 / 20
Weight
500
Line Height
32px / 32 / 28 / 24
Color
#8a8f98
Default Text
Size
18px
Weight
500
Line Height
22px
Color
#8a8f98