Creating all Pricing cards lesson | Framer: Beginner to Pro course

Search lessons...

All Lessons

All Lessons

Housekeeping

Curriculum walkthrough

3:16

Free

How to get the most out of the course

2:04

Free

Create a Framer account

1:07

Free

Course resources

5:58

Framer Foundations

Intro to Framer Interface

5:13

Frames & Absolute positioning

7:19

Stacks & Relative Positioning

6:53

Sizing: Fixed, Fill, Fit,

5:12

5:05

Working with text & font styles

9:11

Working with colors & color styles

4:14

7:29

4:31

Introduction to Components

8:45

Homepage & Components

Components module overview

2:34

Free

Setting up our project & first font styles

9:14

Free

Defining all font styles

10:48

Free

Setting color styles

10:27

13:54

Working with logos in Framer

6:27

Validation section & ticker component

9:30

Feature highlights section

16:24

Features section: designing the section

15:08

Features section: turning into components

8:30

Process: Designing the section

14:15

Process: Adding interactivity

7:12

Vertically rotating card: design

11:07

Vertically rotating cards: interactivity

11:21

Featured testimonial

11:51

FAQ: designing cards

13:21

FAQ: making card interactive

7:37

Navigation & Footer

Navigation & Footer Module Overview

0:43

Free

Designing the Navbar

7:57

Mobile navigation

15:41

Sticky & Fixed positioning

8:08

Dropdown menu - desktop version

11:47

Dropdown menu - mobile version

6:20

13:06

Footer for mobile

3:51

Pricing & Masking

Module Overview

0:43

Free

Designing Pricing cards

11:26

Introduction to Masking

6:51

Creating all Pricing cards

12:34

Annual and monthly pricing

9:11

Adding a transition effect

10:32

Adding a background pattern

6:25

Designing a circle background

3:36

Designing CTA banners

13:45

Blogs & CMS

Blogs & CMS Module overview

1:10

Free

Setting up our first CMS collection

8:11

Designing blog post page

7:58

CSV importing & exporting

3:13

12:11

Conditional views

3:36

Creating our Blog card

11:24

Connecting components to CMS

6:40

CMS filtering & limits

8:39

Adding a Back button

6:08

Legal page with Previous & Next buttons

11:43

Forms & 3D Transforms

Forms & 3D transforms Module overview

0:55

Free

Designing our first form

16:39

Form states & sending data to email

12:11

Connecting our form to Google Sheets

4:19

Intro to 3D transforms

7:33

Designing 3D cards

12:34

Flipping on hover and click

9:32

Connecting 3D card to CMS

8:18

Animations & Effects

Animations & Effects Module overview

0:57

Free

Header Appear effect

8:43

Hero circle scroll transform effect

7:31

3D scroll transforms

6:53

Scroll speed effect

3:30

Scroll animation for Navbar

2:35

Appear animation with a delay

6:09

Feature section - Effects on component level

5:45

Loop, Drag, Hover & Press effects

10:37

5:49

6:53

Buttons hover effect

8:09

SEO & Analytics

SEO & Analytics Module overview

1:26

Free

Setting up a 404 page

7:19

Project clean up

11:26

SEO and Site settings

13:12

Setting accessibility tags

3:41

Connecting our site to a custom domain

2:41

Checking SEO score and social images

5:26

Framer analytics & connecting to Google Analytics

4:38

/

Foundations

/

Intro to Framer Interface

Creating all Pricing cards

Unlock the course

Unlock the course

12:34

Unlock the course

Unlock the course

12:34

Firdavs Abdunazarov

Course instructor

This lesson guides you through turning a pricing card into a reusable component in Framer. You'll learn to create variables for plan details, set up button variants, and use masking for gradient backgrounds. The tutorial also covers creating a distinct "most popular" card variant and ensuring responsiveness across devices.

This lesson guides you through turning a pricing card into a reusable component in Framer. You'll learn to create variables for plan details, set up button variants, and use masking for gradient backgrounds. The tutorial also covers creating a distinct "most popular" card variant and ensuring responsiveness across devices.

This lesson guides you through turning a pricing card into a reusable component in Framer. You'll learn to create variables for plan details, set up button variants, and use masking for gradient backgrounds. The tutorial also covers creating a distinct "most popular" card variant and ensuring responsiveness across devices.

Unlock the course today

Sign up today to lock in the course at the best price.

Course

Get access to the entire curriculum & learn at your own pace

$99

one-time fee

What's included:

90+ video lessons

90+ video lessons

11+ hours of content

11+ hours of content

Lifetime access

Lifetime access

All future updates

All future updates

Enroll today

Enroll today

Enroll today

Enroll today

Course + Coaching

Get access to the curriculum and 2 separate 1:1 sessions with the instructor

$399

one-time fee

What's included:

90+ video lessons

90+ video lessons

11+ hours of content

11+ hours of content

Lifetime access

Lifetime access

All future updates

All future updates

Two 40-min 1:1 sessions with instructor

Two 40-min 1:1 sessions with instructor

Enroll today

Enroll today

Enroll today

Enroll today

Introduction to Masking

Introduction to Masking

Annual and monthly pricing

Annual and monthly pricing