Framer Complete Course 2025

Framer is the new no code web design king. There, I said it. I've tried Figma

king. There, I said it. I've tried Figma sites. I've tried Web Flow. I've tried

sites. I've tried Web Flow. I've tried

Vick Studio. Framer is just a better web design tool. At least right now. If you

design tool. At least right now. If you

don't know what Framer is, here's a simplified explanation. Framer is like

simplified explanation. Framer is like Figma but for web design where you can design beautiful animated websites without writing a single line of code.

But unlike Figma, it's not just design.

It's the real deal. It's a published website with a live URL. But what makes Framer so powerful is that they have made making these stunning websites worth thousands of dollars. So simple

that even you can start making them right away. And trust me when I say that

right away. And trust me when I say that you should definitely learn Framer.

People are making crazy tons of money just selling framer templates. Even I've

created a portfolio template called Esteemed. It's the perfect portfolio

Esteemed. It's the perfect portfolio template for creatives. Look at those animations. It's such a beautiful and

animations. It's such a beautiful and still a very practical portfolio website and it also comes with light and dark mode. Currently, I'm offering 25% off

mode. Currently, I'm offering 25% off discount to my subscribers. So, if you want that discount, link is in the description. By the way, I'm using this

description. By the way, I'm using this template for my own portfolio and anybody who sees this is impressed. In

this video, we are going to learn everything about Framer from scratch.

Remember, this is a premium course, but now I've just made it free for all because I feel like I'm a teacher and charging money from my students who are just trying to learn from me. It just

feels greedy. So, I hope you learned something from it. As a show of love, you can subscribe to my channel. And if

you want to support me for creating these free courses, you can join my YouTube channel membership. Now, let's

dive in. I believe in learning with an example. So, we will be making this

example. So, we will be making this website completely from scratch. And

yes, this will include all these fancy animations and effects. Here are the topics that we will go through while we make this website. Read them through to know what to expect from this course.

Now, before we start, some important notes. I've included a resource zip file

notes. I've included a resource zip file in the description. It includes some images, logos, and style guide that I will be using during this course. So,

you can get those from the link and follow along. If you want the final file

follow along. If you want the final file of this completed website design, it is also available for a very affordable price in the link in the description. I

have made it paid so people actually go through the course and learn something instead of just copying the final design. Now, let's dive in. To get

design. Now, let's dive in. To get

access to Framer, go to framer.com. You

can learn all about Framer here. You can

also check out Framer marketplace where they have many plugins and templates to choose from. In the pricing tab, you can

choose from. In the pricing tab, you can check out different plans that Trimmer has to offer. You can explore different plans and compare their features. On

pricing, you won't see the free plan by the time of this video is being recorded, but if you scroll down to the FAQ section, you will see that they do have a free plan. And you can see that

it has a lot to offer in the free plan.

If you're just starting out, you can get started with almost all the features with free plan and publish the website to a subdomain URL, for example, your

website.framer. framer. But if you want

website.framer. framer. But if you want a custom domain, then it is included in the paid plans. Anyways, click sign up to register for free. I'm going to continue with my Google account. It's

pretty straightforward. After you

register and on board, you will land on this page. Framer is available in the

this page. Framer is available in the browser, but they do also have a desktop app for both Windows and Mac. We can

work on the browser, but some of the features are missing on the web version.

So, let's download the application. To

download the application, let's go back to frameware.com and scroll down all the way to the bottom. Here you have the option for desktop apps. In here, you can download the app for Windows or Mac,

whichever you want. I have already downloaded the Framer app for Mac. So,

let's switch to that app. I have already logged in and you can see it is exactly like how it was in the browser. This

here is the framer dashboard area. All

your projects and websites will live here. You have a few account options

here. You have a few account options here and you can organize your projects in the folders here. But the main thing is this button right here which will start a new project. This will take you

to the framer editor area. I'm going to quickly give you a tour of the editor area before we jump in. So on top here you can click to change the project name

and it auto saves your work. On the top left here we are currently in the insert menu. In the insert menu, you have

menu. In the insert menu, you have options like wireframer, which is basically framer's AI to create wireframes. You can prompt it to

wireframes. You can prompt it to something and it will generate a wireframe page for that. You have

options to add pre-made sections which you can just drag in and modify, but we don't want to do that right now because we are trying to learn everything from scratch. So, let's get rid of it.

scratch. So, let's get rid of it.

Similarly, you have navigations and menu sections that you can just drop in. Here

we have some CMS options which we will explore later. And in the elements you

explore later. And in the elements you have options to add different kind of icons forms videos images carousels

and tickers and whatnot. We will explore all of them later in the video. On the

top menu, we have option to add different layouts. You have option to

different layouts. You have option to add text. In the vectors, you can choose

add text. In the vectors, you can choose from different shapes. And then we have the CMS option. All of these we will be learning during the video so don't worry. At the bottom here we have some

worry. At the bottom here we have some tools that we can use to interact with our canvas area. For example, we can use this select tool to select anything that is in the canvas area. This is where we

will design our website. This hand tool can be used to pan around the canvas area. By the way, a trick to use pan and

area. By the way, a trick to use pan and scroll quickly is that when you have this selection tool selected, you can hold the space bar on your keyboard and

just click and drag to pan around and hold the command key or control key on Windows and then using mouse wheel up or mouse wheel down to zoom in and zoom

out. Or you can also use your trackpad

out. Or you can also use your trackpad as well. By the way, if zooming

as well. By the way, if zooming direction feels weird, you can go in here and in the preferences, turn on the reverse zoom direction. I know some people don't like inverted, but I'm used

to the inverted scroll. And this is another way you can zoom in and zoom out right from here. Now, up here, if we toggle off the insert menu, you will see a few tabs here. Pages, layers, and

assets. Pretty straightforward. In the

assets. Pretty straightforward. In the

pages, you have two options to create a web page or a design page. Design page

is very new feature in framer. I think

they just launched it last month. It is

basically just a blank canvas to experiment with your designs. This will

not be a part of your website design.

Our main pages however are going to be here in the pages section. You can

create new pages just like this. But we

will come to this later. And this is what is going to be part of your actual website. All right. Notice that when I

website. All right. Notice that when I make a selection there pops up a right panel. This here is the properties panel

panel. This here is the properties panel which will show different properties for selected object like positioning, colors and stuff. We will explore all about it

and stuff. We will explore all about it later in the video. Now, two last things before we start designing. This here is a light and dark theme toggle. Now, this

will change the theme of framer and it will also change the theme of your website design and I will show you how to create light and dark theme for your website in just a few minutes. For now,

let's keep it in the light mode. This

here is a plug-in section. Plugins are

basically third-party tools created to do stuff in framework that framework can't do natively. We will use some of these free plugins during this course.

Now, I think we are ready to start on our website. A website is basically made

our website. A website is basically made up of frames. Now, what are frames you might ask? Well, frames are like boxes.

might ask? Well, frames are like boxes.

All websites are made up of boxes within boxes within boxes. The outer box or the parent box is called the container and the inside box or the child box is

called an item or a content. Back in

Frameware, to make a frame, just go to the layout options right here and select frame or just use the shortcut key F on your keyboard. You have options to

your keyboard. You have options to create row and column layouts, but we will come to that later. Click and drag to draw a frame. Notice that this frame

is inside this desktop frame. Which

means now this frame is the content of the desktop container frame. Let's

create another frame inside this frame.

And let's change the fill color of this frame just so that we can differentiate.

Now this light gray frame is content of the dark gray container frame. Let me

just close this fill properties. And now

I want to draw another frame. Now I can of course draw a new frame or I can just select this one. right click and duplicate it right from here or use command D or control D on Windows to

duplicate it and just drag it over here.

Now this gray frame has two contents inside it. But if I draw another frame,

inside it. But if I draw another frame, press F on the keyboard and click and drag over here to draw the frame. See

now it is not part of the dark gray frame. It is basically now another child

frame. It is basically now another child of the desktop frame. So we have this kind of child and parent relation which is quite similar to Figma. Let's get rid of this frame. To delete a frame, just

select it and press delete on your keyboard. By the way, you can resize any

keyboard. By the way, you can resize any frame just like this and move it around.

Currently, this frame has an absolute position and a fixed width and height, which means that when we preview it, by the way, this is how you can preview or click over this play button to preview a

specific breakpoint. This looks great,

specific breakpoint. This looks great, but when I resize the preview, we can see that it stays fixed in the place and the width and height doesn't change. But

now if I go back and change the fixed width to relative, now I can set a percentage relative to the parent of this frame. So if I set it to 100% and

this frame. So if I set it to 100% and preview, it fits 100% of its parent size. Even if I resize the website

size. Even if I resize the website window, but what if I set it to 50%.

Well, now it is 50% of the frame, but I expected it to start from the left, not in the middle. Even when I preview it, it stays in the middle when I resize.

Why is that? That is because we have an absolute position. This absolute sets

absolute position. This absolute sets fixed distance from its parent frame.

For example, currently we have pinned it to only the top of its parent container.

To pin it to the left, we can just click on this line here and it will pin it to the left. And this value tells us how

the left. And this value tells us how much pixels away we need it from the pinned point. These dotted lines also

pinned point. These dotted lines also tell you that this is currently pinned to left and the top. So if I set it to zero for both left and right, it is going to be pinned to the top and the

left with no distance. Now when I preview it remains that 50% of the total parent frame, but it is pinned from the top and the left. But see what happens when I pin it to the right as well. The

relative width of this frame becomes fixed because when I say it is pinned to the right, which technically means that it will take the whole width of the parent frame which is equal to the 1200

pixels right now. Now when I preview it, it stays pinned to the left, top and right without any space. But what about the content frames of this container?

Well, they are dependent on their own parent, which is currently our dark gray frame. So if I select this light gray

frame. So if I select this light gray box, the width is fixed. We can change it to relative and 50%. Let's do it 50% for the other as well. Although now they

are both 50% of the dark frame in width, but their position is still overlapping.

Let me change the fill color so that we can differentiate. See the both frames

can differentiate. See the both frames are pinned to the left but have different left value. Let's set them both to zero. Now both of them are

aligned to the left. But we don't want that. We want them side by side taking

that. We want them side by side taking 50% of the dark gray box each. So for

one of the boxes, let's remove the left pin and add a right pin and set it to zero. And now we have the result that we

zero. And now we have the result that we wanted. Summarize to say you need a

wanted. Summarize to say you need a little bit of practice to understand absolute and relative positioning. But

the good news is that there is a much simpler way to align things and this is what you would be using 95% of the times. It's called layouts. Here we can

times. It's called layouts. Here we can see that we have the layout options when I select any frame. Now what are layouts? If you have used Figma before,

layouts? If you have used Figma before, layouts are exactly like auto layouts.

And if you know anything about CSS, they are equivalent to CSS flexbox or grids.

If you don't know anything about either of them, here's a simple explanation.

Say that you have a container frame and have some content inside it. If you add a layout to it, you can arrange them into stacks or a grid. Now these stacks or grids are basically layouts. Mostly

we are going to be using stacks. Now the

stacks can be vertical or horizontal.

The parent frame is called the container and the children are its content items. The space between the container and its items is called padding. The space

between the content items itself is called gap. Layer container can have

called gap. Layer container can have multiple contents in it as low as one.

Container can have fit content width which means that its width will depend on the width of its contents. But we can also have a fixed width of a container.

The content items on the other hand can have a fixed width, a fit content width or a filled container width. Fill

container means that it will take all the space available in the container. If

you have two items and both have fill container width, they will share that space equally. Finally, you can align

space equally. Finally, you can align items inside a layout stack using distribute and align properties. If the

stack is horizontal like this one, distribute property can be set to start, center, or end to align things on the x-axis. You also have some special

x-axis. You also have some special options like distribute space between which basically pushes each item to the other end. Distribute space evenly adds

other end. Distribute space evenly adds even space around all the items and space around puts equal space around the

each item. To align items on the y-axis

each item. To align items on the y-axis in a horizontal stack, we have the align property which can be set to top, center, and bottom just like so. You can

combine these properties to align something. For example, in the bottom

something. For example, in the bottom right corner, just like this. But

remember, these alignment rules are reversed for a vertical stack. In the

horizontal stack, distribute is responsible for aligning on the x-axis and align on the y-axis. But in a vertical stack, distribute is

responsible for aligning on the y-axis and align property on the x-axis.

Anyways, let's see how we can make layouts in framer. So, we have this normal frame here. We can add layout right from here. You can see that it has added a stack layout. You can have a

grid layout which we will use later in the video. The direction is set to

the video. The direction is set to horizontal. You can set it to vertical

horizontal. You can set it to vertical as well. These are the distribute and

as well. These are the distribute and the align properties that we talked about earlier. The gap controls the

about earlier. The gap controls the space between each item of the layout.

Let's add some padding to it and see nothing happens. The padding should add

nothing happens. The padding should add some space around the items. But it didn't work. Why is that? That's because

didn't work. Why is that? That's because

if we select one of the contract items, we can see that the position is relative and we have a width set to relative 50%.

Which is not exactly what we need. After

our layout, we can now choose it to fill the container like we discussed earlier.

And let's do it for the other item as well. Now both of these are filling the

well. Now both of these are filling the parent container width. And if we now change the padding, it will add some spacing around it. But see that it is only applying to the sides but not on the top and the bottom. That's because

we still have the height of these both set to fixed. Let's change that. By the

way, if you want to multi select things, you can do it through the layers panel while holding the shift key and selecting the layers you want or you just hold shift and directly click on the items that you want to multi select.

Let's change the height of both of them to fill. And now padding works on all

to fill. And now padding works on all sides. Now, what about the parent

sides. Now, what about the parent container? This has a fixed height and

container? This has a fixed height and width. And its contents have a fill

width. And its contents have a fill height and width. So it means that the children height is dependent on the container. If the height of the parent

container. If the height of the parent increases, so does the children. What if

I make the height of the children fixed and set the height of the parent to fit content? Now the height of the container

content? Now the height of the container is dependent on the children. If height

of the children changes, the parent height always fits its contents. So

that's what fit content means. Now let's

add another item in this container by just duplicating this frame. Now we have three items but see it's going off the main desktop frame and we can't see that. By the way to see things that are

that. By the way to see things that are going beyond the parent you can select the parent frame and set the overflow value to be visible just like this. But

we don't want that. We want to fill the desktop container and not go beyond it.

Let's try to fill this stack. But see

that fill option is disabled right now.

Let's try fixed and set it exactly the width of the main desktop frame. And for

the children, let's set them to fill.

But now if I preview, see it stays that fixed width. We wanted it to fill the

fixed width. We wanted it to fill the container. But we saw earlier that the

container. But we saw earlier that the fill option was disabled. That is

because the parent of this frame is not yet a layout frame. So to enable that fill option, you need to select the parent frame and add a layout to it.

Let's keep this as a vertical stack. Now

if I set the content frame to fill the container and preview it. Now you can see that it is fully responsive. Now

that our desktop is also vertical stack, we have one horizontal stack inside it.

Let's duplicate this horizontal stack and see that now we have another content inside our vertical desktop stack. It

means that we can have layouts within layouts. Now let's see how alignment

layouts. Now let's see how alignment works for the items. To understand this, let's get rid of one of these items in the stack here. Currently, all the items in the stack are aligned in the center

vertically and horizontally. But let's

say that there was no gap in between them. And let's say instead of filling

them. And let's say instead of filling the container, they had a fixed width, which is pretty common where we have text on the left and a smaller image on the right. But I want them to push each

the right. But I want them to push each other on each side of the container. I

can increase the gap between them like this. But that is a fixed space that I'm

this. But that is a fixed space that I'm setting. They are not actually pushing

setting. They are not actually pushing each other away. To achieve that, we can set distribute to space between. And now

you can see that they are on each end of the container. And with this option

the container. And with this option here, we can control the alignment vertically. So if this container had a

vertically. So if this container had a fixed height, we can align it top, middle or bottom. This is exactly how I explained with that animation that we saw earlier. A website is no more than

saw earlier. A website is no more than just a stack within a stack and each stack is a section. By the way, one of the things that you must always do is set the height of the desktop container

to fit content so nothing goes beyond that. Now that we have learned the

that. Now that we have learned the basics of frames, layouts, and alignments, it's time we start designing a real website. I have this reference image of homepage that I designed

earlier. I'm going to copy that in here.

earlier. I'm going to copy that in here.

You can find this reference image in this resource folder linked below in the description. We are going to try to

description. We are going to try to recreate this design exactly in framer.

It's a beautiful design. We will make this design, make it responsive and add some other pages like contact project page and project detail page. And then

finally, we will add some interactions and beautiful animation effects to it.

Before we do that, this is always a best practice to define a style guide to keep everything consistent. I have already

everything consistent. I have already decided on a style guide. I want the colors and the typography and the images that I'm going to use. These assets are also available in the resource folder

linked below. I'm just going to paste

linked below. I'm just going to paste them in in the design file here. It's

quite straightforward. These are the colors that we are going to use. These

are the fonts and type scales that we're going to use. And these are the pages and sections that we want to design. And

here are some logos and images that we will be using throughout the website design. Let's start with defining our

design. Let's start with defining our colors. This is a best practice that we

colors. This is a best practice that we define our colors as styles so that we can reuse them across the website. And

plus this is the way you can create light and dark modes for frame website.

I will show that in just a minute. To

define the styles go to the assets tab here and in here click on the styles and here you can choose the style that you want to create. Let's select color

style. Now you can name your color. And

style. Now you can name your color. And

this tab here you can define your light and dark variant of the color. So I have already mapped out all the light and dark mode colors. For example, for my text primary, in the light mode, I can

see that this is the black color. Let's

name it text primary. And in the dark mode, let's pick this white L for the dark mode. Now, when I switch to dark

dark mode. Now, when I switch to dark mode, see the text color changes to white. Let me actually add some text to

white. Let me actually add some text to show what I mean. By the way, to add a text, click this option here or press T on your keyboard and just click anywhere to start typing. Let me increase the

font a bit so we can see it clearly. All

right. Now in the fill color I can pick a solid color. Add a gradient like radial or conic gradient. For now let's just set solid. Here you can pick either

a fixed color or we can set it to a style that we have just created. As you

can see this is the text primary style that we just created. So let's set it to this one. Now if I change to light and

this one. Now if I change to light and dark mode it changes the color of the text based on the theme that we have selected. Just based on this principle,

selected. Just based on this principle, you can create dark mode for your website. Now, let's quickly add the rest

website. Now, let's quickly add the rest of the color styles. Let's add text secondary. For light, pick this gray

secondary. For light, pick this gray color. And for the dark, pick this

color. And for the dark, pick this lighter gray. Let's add another one. Set

lighter gray. Let's add another one. Set

it to this blue color here. This will be our text brand. By the way, we don't have to set a dark mode color for this one because it is the same color for both in light and dark themes. I'm going

to continue creating these color styles and fast forward.

[Music] For this surface primary 90% color, I

set this color for the light and set the opacity to 90%. Just like this. And

similarly for the dark, pick the corresponding dark color and set it to 90% as well.

[Music] All right. Now all our color styles are

All right. Now all our color styles are ready. We can see that they change in

ready. We can see that they change in light and dark mode accordingly. Now

it's time to create the text styles. I

have already decided I'm going to use this bald font for headings and for the rest of them I'm going to use interd display font. And these here are the

display font. And these here are the sizes that I want. To create the text styles again click the plus on the styles and in the text you can select the text type you want. Let's go with

heading one and click on it again to set its properties. For heading one we want

its properties. For heading one we want the font to be bald. Weight is regular which is fine. In the color I can now pick the default color. It can be overridden, but it's always best to set

a default color. And that is why we created color styles first, so that we can now pick our text primary color as the default heading one text color. You

can play with other settings here, but most important one is to set the font size. So for heading one, our font size

size. So for heading one, our font size will be 120px. Now in web, it's always best practice to use rem.

So, if you select rim from the drop-down, framer will automatically convert your pixel values to rim values.

You can change the line height, paragraph height if you want, but I'm going to leave it as is. Now, let's do another one. This is going to be heading

another one. This is going to be heading two. Again, pick the font. Set the

two. Again, pick the font. Set the

default color as text primary. And size

for this one is going to be 64px. And

now, we can convert it to REM. Next, we

have adding three, which is enter display font. Pick the default color.

display font. Pick the default color.

I'm going to disable the open type for this one. You can leave it enabled, but

this one. You can leave it enabled, but I don't want open type in my design.

Finally, set the font size and convert it to REM. These two I'm going to use as body fonts. So, this time I'm going to

body fonts. So, this time I'm going to pick paragraph. Again, same deal. Select

pick paragraph. Again, same deal. Select

the font, set the default color, and pick the font size and convert it to rim. Let's create another paragraph

rim. Let's create another paragraph style. Let's rename this. By the way, to

style. Let's rename this. By the way, to rename, right click and just click rename and set it as something like body bold. Pick the font. Wait for this one

bold. Pick the font. Wait for this one is going to be semi-bold. Pick the

default color. Disable open type and set the font size. And that's it. We have

all our text styles also ready. Let's

switch to light mode and go back to our homepage and start designing. First

thing that we need is a nav bar at the top. Now I can go insert and pick

top. Now I can go insert and pick already made navbar and modify it. But

we are here to learn from scratch. So

this desktop is already a stack. I'm

going to draw a frame in it. Press F on the keyboard. Click and drag. Let's give

the keyboard. Click and drag. Let's give

it a fixed height of 90px. To give it a color, let's go to the styles properties and let's give it a color. Now again, I can pick a fixed color, but we don't want to do that. I'm going to give it

the surface primary color style that we just created earlier. For the width, I'm going to set it to fill the container.

Remember, we have this fill option because our desktop main frame is a stack. Now, this is going to be our

stack. Now, this is going to be our navbar. It is also going to contain a

navbar. It is also going to contain a logo and couple of navigational links.

So, it means that it can be a horizontal stack. So, let's add a stack layout to

stack. So, let's add a stack layout to it just like this. Now, let's go to the design page where we put our assets and let's copy this logo. Command C or control C on Windows. And let's go back.

Select this tag and command V on Mac or controlV on Windows to paste it in. See

that it's in this stack. Now, this is an SVG logo. It's still too big. Let's

SVG logo. It's still too big. Let's

change the size. Let's turn on the aspect ratio right from here. So, it

scales down proportionally and reduce the size to something like maybe 200.

Now, let's add the navlink text. Type in

the text just like this. Now, see, I can pick the font and the font size right from here in the styles properties. But

we have already created few text styles.

So let's apply from those styles that we just created. I'm going to pick this

just created. I'm going to pick this body style for the nan link. It has

applied the font font size and the default color we set in the text styles earlier. But we can override the color

earlier. But we can override the color right from here if we want. But let's

keep the default for now. Notice that

this text layer is not part of the navbar stack. We don't want this. So

navbar stack. We don't want this. So

let's put them inside here. You see our navbar have this logo and one text inside it. Let's rename these layers so

inside it. Let's rename these layers so that we can differentiate them easily.

Let's duplicate this text once more.

Command D or control D on Windows to duplicate. Change the text. Now we have

duplicate. Change the text. Now we have another nav link. We want the logo on the left and the links on the right. To

achieve this, we can put these links together in a stack. The width can be fit the content. And let's add some gap to this stack. Now let's select the

navbar stack and align content at each end by using the same distribute to space between property. Let's add some padding to it. And let's preview.

Looking beautiful. You might not notice it but there is a problem. Actually not

a problem but a preference. What happens

if you open this website in a very big monitor or a wide screen? the logo will be very far left and the links will be very far right and that is a very bad UX

practice. Look at the Apple website. See

practice. Look at the Apple website. See

that their nav bar does not go beyond a certain width no matter how wide screen you've got. To achieve this maximum

you've got. To achieve this maximum width limit, what we can do is inside the nav bar stack wrap these contents inside another horizontal stack just like this. And let's call this one fixed

like this. And let's call this one fixed container. This container's width will

container. This container's width will fill the parent container. that we can add a maximum width right from here and set it to a fixed value. For example,

1200 px. That value depends on how much width limit you want. Let's change the distribute to space between for this one as well. Now, we don't want that space

as well. Now, we don't want that space between in the parent navbar anymore.

So, we can set it to distribute center.

So, it always keeps the fixed container in the middle. Now, when we resize it, look at that. The content tries to fill the container but stops at 1200 px. And

because we set the navbar distribute center, it always keeps everything in the middle. But you might ask, why

the middle. But you might ask, why didn't we just add max width to the navbar stack? And why did we create

navbar stack? And why did we create another stack inside it? Well, the

reason is that we want the content to be fixed, not the background of the navbar.

Now, let's add some left and right padding to the fixed container for a much cleaner look. All right. Now, what

we want is that we want our website to be responsive. In Framer, you can add

be responsive. In Framer, you can add break points for different screen sizes.

So, what are break points really? Think

of them as points where your design switches style depending on the screen size. Basically, you're telling framer,

size. Basically, you're telling framer, hey, when the screen is this wide, show the design like this. But when the screen shrinks, change it so it still looks nice. Let me give you an example.

looks nice. Let me give you an example.

On desktop, you can show a big full navigation bar with all the menu items spread out. Perfect, right? But when you

spread out. Perfect, right? But when you shrink it down to the tablet, suddenly there isn't room enough to fit everything. So maybe you hide a couple

everything. So maybe you hide a couple of less important links or make the font size smaller, but on the mobile there is no way you can fit the whole navbar. So

instead, you switch to that little hamburger menu. And when you click on

hamburger menu. And when you click on it, it expands into the full menu.

That's the whole idea of breakpoints.

You adapt your designs for different screen sizes so it always looks clean and usable. Now let's see how

and usable. Now let's see how breakpoints actually work in Frameware.

We already have a desktop breakpoint with 1200 px value. To add a break point just click this plus button and select tablet. You can set your custom value

tablet. You can set your custom value but 8 10px default work most of the time. And now this is the tablet view of

time. And now this is the tablet view of our design. And similarly we can add a

our design. And similarly we can add a phone breakpoint. You can clearly start

phone breakpoint. You can clearly start seeing that the navbar is looking fine in the desktop and the tablet view but for the phone it just doesn't work.

Before we fix this I want to talk about something else here. This nav bar is going to be repeated on all the pages.

or homepage or contact page or project page. So whenever we have something that

page. So whenever we have something that is going to be repeated, it's always best to make it into a component.

Component is basically a reusable element. So to convert it into a

element. So to convert it into a component, right click on the nav bar in the main desktop frame here. By the way, when we have different breakpoints, our desktop is our primary frame. Whatever

you do on the desktop breakpoint also applies to the other break points unless you override any changes in other breakpoints. More on that later. For

breakpoints. More on that later. For

now, let's make it into a component.

Now, because we had break point set, so it already created three variants for us. To add a new variant, select any

us. To add a new variant, select any variant, and you can either create a variant from this option right on the right here, or on the bottom access, you can also create state variants like

hover and press state. For navbar, we don't need state variants, but if this was a button, then we might have a hover and pressed variant. Now that we have three variants each for different breakpoint, we can modify them each

separately. I'm happy with the desktop

separately. I'm happy with the desktop variant in the tablet variant. Maybe the

padding can be reduced around it just like this. We are currently in the

like this. We are currently in the napper component page. To go back, you can just click over here to go back to the homepage. Now, if we preview this,

the homepage. Now, if we preview this, notice how if we go above 1200 px in the width, it shows our desktop view. And as

soon as we drop below 1200 px, it changes it to the tablet view. And you

can clearly see that the padding of the napper also changes for the tablet view.

In the phone view, it is still looking bad. And let's fix this. In the layers

bad. And let's fix this. In the layers panel, you can see that this component is shown by the star icon. To edit a component, either double click on it or right click on it and you will see the

edit option. Other way to do is to go

edit option. Other way to do is to go into the assets and in the component section, you can see that we have our naporg component. You can open it right

naporg component. You can open it right from here as well. All the components that you make will be listed here.

Anyways, let's go to the phone variant.

First, let's get rid of this extra padding. Make sure to select the fixed

padding. Make sure to select the fixed container stack where we applied the 64px padding in the desktop frame. But

you can see that it is still not looking so good. In the phone variant, I want a

so good. In the phone variant, I want a hamburger menu which can be collapsed to show the nav links. So to bring that icon, you can either bring in your own icon, but framer has different icon

libraries available in the insert menu.

Here you can choose from different icon libraries. I quite like the feather

libraries. I quite like the feather icon. So let's drop it in. Let's

icon. So let's drop it in. Let's

increase the size of this icon a bit.

And right from here you can choose the icon that you want. Let's find the menu icon and change the color to text primary. Now I want to drop this in

primary. Now I want to drop this in here. But framework components work

here. But framework components work slightly different than Figma components. All the variants of the

components. All the variants of the components will have the same structure and the same amount of items. But you can override some properties in one variant or the other. Let me show you

what I mean. Let's drag this icon and put it inside our desktop variant here.

Just make sure to put it inside the fixed container stack. Now we have three items in this fixed container. Logo, the

menu icon, and another stack of links.

But notice this also adds it in exactly the same place in all the variants. See

what happens if I hide this menu. To

hide it, you can toggle off the visible property right from here. It becomes

hidden in all variants because I told you earlier that whatever you do in the primary variant, it applies to the other variants as well. You can see that this variant still has the menu item hidden

away. But now let's turn on the

away. But now let's turn on the visibility on the phone variant only.

What it does is that it overrides the visibility property just for the phone variant. In the other variants, it is

variant. In the other variants, it is still hidden. Now in the phone I can

still hidden. Now in the phone I can just hide the link stack because this is the look we want to go for. Now let's go back to the home and preview. This is

the desktop view and this is the tablet view. And now this is how it looks on a

view. And now this is how it looks on a phone. But this is not enough because

phone. But this is not enough because what I want is when I click on this menu, it should open a panel to show the menu links. To achieve this, let's go

menu links. To achieve this, let's go back to the component. With this phone variant selected, I can add another variant right next to it. Just like

this, we have another variant. Now,

let's rename it by double clicking on it. And let's call this one phone

it. And let's call this one phone opened. Now, this variant will show how

opened. Now, this variant will show how an opened menu looks like. Let's try

something here. As I need some space for the links, let's increase the height of this phone opened variant. Just like

this. H. But see, I don't want it to be aligned in the middle. I want the logo and the menu on top and the links will be below that. So we can override the

distribute property right from here from center to start. Now in this variant I want the menus to show. So I can just turn on the visibility of the link stack. This is not the look I want

stack. This is not the look I want still. I want it below the logo and this

still. I want it below the logo and this hamburger menu. So I can try to set the

hamburger menu. So I can try to set the direction of this fixed container to vertical. But it just stacked all the

vertical. But it just stacked all the contents vertically. I want the logo and

contents vertically. I want the logo and the menu to be in horizontal stack. What

I can do here is go back in the primary variant. Let's show the menu icon for a

variant. Let's show the menu icon for a second. Here I can wrap the logo and the

second. Here I can wrap the logo and the menu in the horizontal stack inside the fixed container. By the way, you can add

fixed container. By the way, you can add a stack right from here as well. Width

of this should fill the container and they should push each other on each end.

So let's change the distribute to space between. Let's rename the stack to logo

between. Let's rename the stack to logo plus mobile menu. Now I can hide the icon in the desktop menu again. And look

at that in the phone where we were showing the menu. This looks great now because we now have a horizontal stack of logo and the menu icon inside our fixed container. Now I can set the

fixed container. Now I can set the direction of the link stacks to vertical as well. Remember we are overriding

as well. Remember we are overriding these properties only for the phone opened variant. Now very important thing

opened variant. Now very important thing here. We don't exactly know what the

here. We don't exactly know what the height of the phone will be. Different

phones can have different heights. So to

fix this, we can set the height of the fixed container to view port. So it will take up the whole screen size regardless of the screen height. And for the parent

container, we can set it to fit the content just like this. The links are at the bottom right now because we have distribute space between for the fixed container which works perfectly for the desktop and the tablet variant. But for

the phone variant, we can change it to start. And now we can just add some gap

start. And now we can just add some gap between this. Now, when we have an

between this. Now, when we have an opened menu, the icon should also change to close. So, let's change the icon

to close. So, let's change the icon right from here to a close icon. Looking

great. Let's go back and try it out. But

see, when I click it, nothing still happens. Why? That's because we didn't

happens. Why? That's because we didn't actually add any interaction. To do

that, let's go back into the component.

What we want is that when I click on this menu button, the phone variant should change to this phone open variant. To add this interaction, we can

variant. To add this interaction, we can select the menu icon and try to add on click interaction. But we don't see any

click interaction. But we don't see any option to add the interaction. That's

because framer has a limitation that you can just only add interactions on the frames, not the shapes or the icons directly. So we need to wrap it inside a

directly. So we need to wrap it inside a frame. To do this, let's go back to our

frame. To do this, let's go back to our primary frame and show this icon for a moment. Right click and select add

moment. Right click and select add frame. This will add a frame around it

frame. This will add a frame around it and it will apply to all other variants.

We can set the width and the height of this wrapper frame to fit the content of the icon itself. And now with this frame selected, you can see that we have the option to add a link or an interaction.

We want to add a click interaction. We

will do it in the phone variant. We

don't want it to show on the desktop and tablet. So let's hide it right from

tablet. So let's hide it right from here. Make sure to hide the frame and

here. Make sure to hide the frame and not the icon only. Just like this. Let's

rename this tag as menu. You might want to show it again for the phone variants if it's hidden.

Now I can add interaction just like this. We want to create a new transition

this. We want to create a new transition because we want to transition from one variant to another variant. Here we can set the trigger of when this transition

happens. We want it to happen on click.

happens. We want it to happen on click.

Here we can add delay if we want. Here

you can set the transition cycle if you want. And most importantly, this is

want. And most importantly, this is where you select the variant you want to transition to. By the way, you can also

transition to. By the way, you can also add transition interaction by clicking and dragging this bolt icon and attaching it to the variant that you want to switch to. Now, when it's opened

and I click this closed icon, it should go back to the closed variant. So, I can add this interaction. Make sure to select the wrapper frame, not just the icon, and drag and connect it to this

variant. Now, let's go back and preview.

variant. Now, let's go back and preview.

Click this menu. And it does switch to the variant, but it is not showing those menu links. That is because our height

menu links. That is because our height is set to fixed 90px. Everything beyond

that cuts off. So let's change it to fit content. And now let's preview it again.

content. And now let's preview it again.

And now see it works beautifully. But

the animation is too jumpy and it cuts off the logo a bit. To change the transition animation, go back to the component, select this variant. And here

you can click to change the transition.

It is currently springy animation. You

can play with the settings for different styles of animations or you can just have an ease animation. Here you can either create your own basier curve which basically is a fancy way of saying how the animation starts and how the

animation slows or you can select from the presets right from here. Here you

can control the time of the transition.

And here you can see the preview of the transition. I think 0.6 seconds works

transition. I think 0.6 seconds works fine. Let's try it out. And now look, it

fine. Let's try it out. And now look, it is a beautiful smooth transition. I

promise we're almost done without our navigation. One thing we need to do to

navigation. One thing we need to do to improve UX is that we can make the nav links big in the phone variant. To

achieve this, we can actually change the font size on the phone variant for these links. But the thing is that we can have

links. But the thing is that we can have more nav links in the future. So it's

best to make a component of a nav link.

Remember we said that it's best to make component of anything that is going to be repeated. So let's right click on

be repeated. So let's right click on this text here and create a component.

Let's name this navl link. Now this is a component. I'm going to rename this

component. I'm going to rename this variant to the desktop variant. Let's

add another variant and call this one a mobile variant. And for the font size,

mobile variant. And for the font size, let's apply the heading three style. The

variant frame width and height is set to fix. Let's set it always to fit the

fix. Let's set it always to fit the content just like this. Now we have a component within a component. Let's go

back to our navar component right from here. And there it is. This is our

here. And there it is. This is our navling component. You can switch

navling component. You can switch between the variants of this component right from here. But what about the text? What if I wanted to change the

text? What if I wanted to change the text of this component? There is no way to change it right from here. I can go inside this component and change the text right from there. But the problem

is that it will stay whatever I set it to for wherever I use this component.

And the whole purpose of the component is reusability. So I should be able to

is reusability. So I should be able to change its text wherever I use the component for this. Framer has something called variables. Let me show you what I

called variables. Let me show you what I mean. Click on the property that you

mean. Click on the property that you want to make dynamic. So in our case, we want the content to be dynamic. We can

click on it right here. And I can either create a variable or add a fetch. Add a

fetch is if you want to bring in data from an external API. We don't want that. We want to just create a variable.

that. We want to just create a variable.

Here I can select if I want a plain text variable or formatted text. Formatted

text usually works best if this was a paragraph. But for us plain text is

paragraph. But for us plain text is fine. It will open up the variables

fine. It will open up the variables panel and it has already created a variable and set the default name to title. Let's change it to something like

title. Let's change it to something like navling text. And here you can set what

navling text. And here you can set what would be the default value. Let's keep

everything as is for now. This is great.

But before we check it, let's go up here. We have this link option here.

here. We have this link option here.

Here we can set a link to a specific page. When this text is clicked, it will

page. When this text is clicked, it will take you to that page. But the thing is that just like the text, it also needs to be dynamic. Different nav links can take you to different pages. So we can

click on it and create a variable for the link. You can check out all the

the link. You can check out all the variables of a component right from here. So far we have created two

here. So far we have created two variables for this component. You can

add more as well. While we are discussing links, framer also applies default link style to any text. If you

add a link to it, you can modify it right from here. You can set the color to your color style right from here. You

can also add hover style and say we just want on hover the color should change some other color like text secondary.

Now let's actually see why we did all this variable mapping in the navbar component. Now where we are using the

component. Now where we are using the nav link component. If you select this nav link component you can see that it has basically exposed those values here.

Now you can easily change the text or add the link and it will only apply for this specific component. For example,

let's duplicate this navlink component once more and get rid of this text contact because we don't need it anymore. Now we can just select the

anymore. Now we can just select the second component that we just duplicated and change the text for this component to contact. We will add links later. But

to contact. We will add links later. But

now we can see that component is completely dynamic. Notice that it has

completely dynamic. Notice that it has also updated this navling component for all variants because we changed it in the primary variant. It is cutting off because there is a fixed width or

height. So let's make it fit the content

height. So let's make it fit the content just like this. Now in the phone variant, I can select these components and change the variant to mobile. And

there you have it. So this means that you can use components to make responsive variants. Let's preview it.

responsive variants. Let's preview it.

It changes to that phone variant once we get to that phone breakpoint and click on it to open it. And these nan links are now bigger. And you can also see that on hover their color changes to

text secondary. They are not yet

text secondary. They are not yet clickable. They will be once we make our

clickable. They will be once we make our work and contact pages and link them to these. All right, the hard part is over.

these. All right, the hard part is over.

I took it slow because we were just learning the basics. Now I'm going to go a bit faster. Let's now design this hero section quickly. Add another text. Type

section quickly. Add another text. Type

in our text. Apply the heading one.

Override the color to text brand for this one. Just like this. Duplicate it

this one. Just like this. Duplicate it

using the shortcut key command D or control D on Windows. Change the text again. Let's remove the override for

again. Let's remove the override for this one to switch back to the text primary. I want this to be bit

primary. I want this to be bit transparent like this. So let's change the opacity to 0.8.

Currently we only have our desktop stack and it has three children in it. I can't

control individual gap between them. So

let's wrap both of these text into another stack. Let's rename the layer to

another stack. Let's rename the layer to hero section. I can set the height of

hero section. I can set the height of this hero section to view port so it always fill the whole screen. But for

our design choice, I'm going to fix it to 800 pixels. Now, let's set the gap to something like 64 pixels. Now, it's time to add this character in the design. I

have this image. Let's copy it and paste it in here in the hero section. But see,

we have a problem here. As this hero section is just a vertical stack, it puts it below the text. We actually want it over the text. For such scenarios where you want to break out of the stack

normal behavior, you can change the position type from relative to absolute.

Remember we talked about this earlier in the video. This image is now absolute to

the video. This image is now absolute to the hero section stack and it is pinned to the bottom of the stack. If I set it to zero, it will look something like this. Let's resize it a bit to achieve

this. Let's resize it a bit to achieve the look we want. We can move this up and down while keeping it pinned to the bottom. I think this looks nice. Let's

bottom. I think this looks nice. Let's

preview it. It's looking perfect. But

see, we want this fading style on the character. To do that, we can select

character. To do that, we can select this image and go to the styles properties. To add some extra styles,

properties. To add some extra styles, you can click on this plus icon next to the styles properties. Here you can pick from different kind of styles. But for

such fading style, let's choose mask.

This will add a linear gradient mask on top of it. You can adjust the mask just like this to achieve this fading style.

Now let's preview this. and it is looking amazing. But looking at the

looking amazing. But looking at the reference image, notice that one of the text is behind the character and the other is in front of it. So when we want to achieve something like this, we can

play around with the property called Zindex. So when you have this image

Zindex. So when you have this image position set to absolute, you will see a zindex property in the styles.

Currently, it is set to one. What we

want to do is increase the zindex of this text to greater than one. But see

we don't have zindex property in styles for this text. To add that you can click on this plus icon. Choose zindex. Now

you can increase the z-index to be greater than one which was set for the character. Remember it should be greater

character. Remember it should be greater than the zindex of the image always. Now

this is the look we wanted. Now let's

work on the next section which is going to be our client section. Let's add a text here quickly. Change the text.

Apply the text style.

In the design, I have the logos. Let's

bring those in and let's put them next to it right here. But we don't want them to be static, boring logos. We want them to be an infinite moving animation. For

that, we have a built-in component in Framer called ticker. To add a ticker, just go into the insert and in the interactive menu, you will find the ticker. Just drag it in. To add elements

ticker. Just drag it in. To add elements to the ticker, just drag from these dots and attach them to the item frames.

Let's add all of them like this. Let's

cut both of these layers and paste them in the desktop frame. Now, you don't want to delete these logo frames because they are being used in the ticker. So,

let's put them somewhere safe up here.

Let me just adjust the height of this ticker just like this. Let's select this text and the ticker and put them in a horizontal stack. Let's set the width of

horizontal stack. Let's set the width of this sticker to fill the container. And

here you can change the gap between the ticker elements. Let's change the width

ticker elements. Let's change the width of this text to fix so it is always in two lines. Let's rename this stack to

two lines. Let's rename this stack to client section. Let me just close all of

client section. Let me just close all of these layer sections so it's a bit tidier. And now preview this. See that

tidier. And now preview this. See that

the ticker is now playing. It's a bit too fast. You can play around with the

too fast. You can play around with the ticker settings right here. Let's reduce

the speed to maybe 50%. And now let's see. This is looking great. There are

see. This is looking great. There are

other settings of ticker that you can play with like direction of the ticker or you can make it slower on hover or even make it stop on hover. But we don't want that in our design. About the

padding, I want to give it the same padding as the header. So it aligns nicely with this logo. So let's add 64 padding around it. It is looking nice.

But see when I resize it, it does not stop to that 1200 px maximum width that we talked about when we were designing the navbar. Now what we can do is either

the navbar. Now what we can do is either add another stack wrapping around the items of this section. Let's call it fixed container and set it to maximum

width of 1200 pixels. Just like this.

Now when I preview it, it works beautifully. H actually I noticed that

beautifully. H actually I noticed that there seems to be some extra padding in the navbar. Let me just get rid of that.

the navbar. Let me just get rid of that.

All right. So, we have 64 padding in the inner wrapper. We don't need right and

inner wrapper. We don't need right and top padding on the main container. And

in the phone, let's add 20 right and left padding to this fixed container.

Now, it should align perfectly. By the

way, did you notice something? When we

scroll down the page, navigation also got scrolled and got lost. We always

want the navigation to stay on the top.

Well, in most cases, it's a simple fix.

We can just select this navar component and set the position from relative to fixed. Now, when we scroll, it stays

fixed. Now, when we scroll, it stays there. But our image is coming in front

there. But our image is coming in front of it. To fix this, we can increase the

of it. To fix this, we can increase the zindex of this fixed navbar to greater than the zindex of the image. Now, it

works beautifully. But there is a problem. Probably you can't see this but

problem. Probably you can't see this but there is a background to this navbar and it is not filling the whole website frame. So what we can do is try to set

frame. So what we can do is try to set it to fill but there is no fill property because it's not relative position anymore. It's a fixed width. And

anymore. It's a fixed width. And

remember we talked about pinning stuff.

So we can just pin it to left and right with zero value just like this. And now

it should work just as filling the container. You might not notice that

container. You might not notice that background color because it's a very light background and it might not show up on your monitor, but it's there, trust me. Let's move this character down

trust me. Let's move this character down a bit so it doesn't touch the navbar.

Now, we are going to make the rest of the sections. But before we do that, I

the sections. But before we do that, I want to tell you a trick. We want to align everything to a maximum of 1200 pixels width, just like we did in this client section. Well, let's say that we

client section. Well, let's say that we want another section. We could just duplicate this section just like this and it will align because we had that fixed container inside both of these

tags. But what if I have to change the

tags. But what if I have to change the max width from 1200 to something else?

Then it can be a bit tedious to change it everywhere. So here's the trick. If

it everywhere. So here's the trick. If

the background of the section is going to remain the same like we have in our design, what we can do is let's undo this first. And in the client section,

this first. And in the client section, we can just move these contents out of the fixed container and just get rid of this fixed container. And now we can just wrap all of our sections into a

vertical stack. Let's call this one as

vertical stack. Let's call this one as fixed container. Make sure the width is

fixed container. Make sure the width is fill. And you can add the maximum width

fill. And you can add the maximum width of 1200 pixels to this container only.

Now whenever we add a new section inside this fixed container, it will have that maximum 1200 pixels width applied to it.

But this only works if all of your sections are going to have similar background. You don't have to do this.

background. You don't have to do this.

This is just a trick that I wanted to share. All right, let's continue to our

share. All right, let's continue to our next section. Let's get rid of this

next section. Let's get rid of this section here. And in this one, we don't

section here. And in this one, we don't need the ticker, so let's get rid of that. Change the text just like this. We

that. Change the text just like this. We

don't need that fixed width anymore.

Let's set it to fit content. Change the

text style to body bold. Override the

color to text brand. Let's duplicate

this text. Now remember the shortcut key command D or control D on Windows. Let's

change the text style to heading 2. The

color can be text primary and change the direction of this stack to vertical. We

want to align everything to the left. We

can do this through here just like so.

Remember in vertical stack align property handles vertical alignment and distribute handles the alignment on the horizontal axis. Let's duplicate this

horizontal axis. Let's duplicate this text again. move it down the stack using

text again. move it down the stack using the keyboard down arrow key. Change the

text style to body just like this and remove the color override. Actually, we

can also remove the override for this text as well. Now, I'm going to just add some placeholder text and for that I use a plugin called Lauram. To access

plugins, just click over here and here you can browse all the plugins or you can just search for a particular plugin.

Let's search for this plug-in called Lauram Ipsum. It will open up the

Lauram Ipsum. It will open up the plug-in and now you can add words, sentences or even paragraphs just like this and it will apply to that selected text. You can browse frame marketplace

text. You can browse frame marketplace for more interesting plugins. For now,

let's continue. Let's set the width of this text to fill container. I need gap in between. But as this is just one

in between. But as this is just one stack, I can't control the gap individually. So let's put these two

individually. So let's put these two together in another stack and align to the left. Now I can control the gap

the left. Now I can control the gap between both of these tags individually just like this. Let's add a gap of 64 for this one. I think this section is looking nice. Let's duplicate this

looking nice. Let's duplicate this section again and work on our services section. Again, let's just change the

section. Again, let's just change the text. Now instead of this text, we need

text. Now instead of this text, we need these cards. To make this card, let's

these cards. To make this card, let's draw up a frame here. Just like this.

This also needs to be a stack because we have three vertical stack item inside it. So let's add a vertical stack layout

it. So let's add a vertical stack layout to it. Everything needs to be aligned to

to it. Everything needs to be aligned to top left. For the icon, let's use the

top left. For the icon, let's use the phosphorful icon library and increase the height of this icon to maybe 64.

Change the icon to a relevant icon.

Let's go with this selection icon. Good

thing about force for icons is that you can make them dual tone icons by adding alpha value to it just like this. As you

can see here, if I change the color to something like red, you can see that it has that dual tone effect to it. For our

case, let's give it our text primary color. Let's rename this frame to

color. Let's rename this frame to service card. Add some padding to it.

service card. Add some padding to it.

Maybe let's go with 32. And we need rounded corners which we can easily add from the styles in the radius. Let's add

32 radius or maybe 24. Next thing we need is the heading text. So, let's just copy this text and paste it in here and

change the style to heading three. Get

rid of the color override and double click on it to change the text. We need

a paragraph. So, let's just copy this one and paste it in here. And get rid of the extra text just like this. For this

text, we can apply text secondary color to it. This card should fit the content.

to it. This card should fit the content.

And let's add some gap between the items. Now, as I said earlier, this card needs to be repeated. Just the content is going to change. So, we can make it into a component. Right click and create

component. Let's keep the name service

component. Let's keep the name service card and create the component. Now, this

card is a component and it only has one variant. Let's rename this variant to

variant. Let's rename this variant to desktop. Let's go back to home and put

desktop. Let's go back to home and put this card inside our services section.

We are actually missing this border around it. So, let's double click and

around it. So, let's double click and edit the component. First, let's change the fill from fixed white to our surface secondary variable. And let's add a

secondary variable. And let's add a border to it just like this. For the

color, choose border 100. And width of the border can be 6 px. Let's go back and have a look. Nice. Let's duplicate

it. And we need them to be horizontally stacked. Let's remove this one and let's

stacked. Let's remove this one and let's add a stack to it. Set it to horizontal and the gap can be 32. Now, how do I change the content of this card or maybe

change the icon of this card? Currently,

I can't. Remember, we talked about exposing certain values of a component to make them dynamic. We just need to do that again. So, let's go to this

that again. So, let's go to this component again and select this icon. I

should be able to change the icon. So,

let's create a variable for that. Just

like this. Similarly, make a variable for the title and this description text.

You can also rename the variable to anything you want. Let's call this one description. So, it's easier for us to

description. So, it's easier for us to understand. Now, if I go back, we can

understand. Now, if I go back, we can see that in the component properties, I have the option to change the icon, title, and the description just like how we did for the nav link. So, let's

change the icon and the title. I can

also change description, but let's leave it as is. Let's duplicate this card once more and see this is overflowing the stack which we don't need. By the way,

to make the overflowing elements visible, you can select the parent container and set the overflow to visible just like this. But we want these cards to fill the space equally

and be responsive. So, let's select all of these component cards and set the width to fill. And now it looks great.

Let's rename this stack to something like cards container. By the way, you might be wondering why are we doing all this layout and fill container and fit content stuff. Why can't we just set

content stuff. Why can't we just set fixed height and fixed width for desktop, tablet, and phone separately and be done with that? Well, the thing is that we're just designing three break points. But think about it. There are

points. But think about it. There are

phones with different screen sizes.

Similarly, we have tablets. Some are

big, some are small. And what about laptop sizes and huge monitors? So

that's why we use these layouts to make everything responsive for different screen sizes even with just three break points. Now notice something. We have a

points. Now notice something. We have a very subtle background color to our whole website. Don't worry about it

whole website. Don't worry about it because we will add it in just a few minutes. For now, let's just duplicate

minutes. For now, let's just duplicate this frame section. This is going to be our project section. So let's just quickly change the text accordingly.

Let's rename this card container to project container. And let's get rid of

project container. And let's get rid of these cards because here we will design our project cards. First, let's go to the design page and copy this image and

paste inside this container. Let's add

some corner radius to it so it has some rounded edges. I need a text here. Let's

rounded edges. I need a text here. Let's

just go inside this component and copy this text and paste it over here just to save some time. Now, this is also starting to feel like that it should be a vertical stack. So, let's just move it

out for now and add a stack to it. Let's

call this project card and change the direction to vertical. And let's change the height to fit as well. And maybe the content should also align to left just like this. Let's copy this text from

like this. Let's copy this text from this component again and paste it inside this project card. You don't have to copy. You can add another text and you

copy. You can add another text and you know add the content, but I'm just doing it to save some time. Now, here is the interesting bit. Let's change all the

interesting bit. Let's change all the items width to fill the container just like this. Now because we have the width

like this. Now because we have the width of the project container fixed, we can change the width and the contents will always fill the space like this. Let's

wrap these texts into a substack and add some gap between the image and the stack just like this. Now again this card can also be a component. So let's right

click and make it into a component. And

let's make the image and both of these texts dynamic by creating variables. You

should know how to do all this by now.

Let's go back and put this inside it.

All right. Now, let's just duplicate this once more. And for both of these, I'm going to set the width to fill. Now,

see, when I duplicate it once more, it tries to put another card inside that horizontal stack. But this doesn't look

horizontal stack. But this doesn't look so nice, especially when we have more items. One row should only have two items. To achieve that, if we select this parent container, we can see that

it's a horizontal stack. Right now, to make it look like this one, we can change the layout from stack to grid.

Just like this. Remember, we talked about grid layout. In grid layout, you can control the columns and rows you want. For us, two columns and two rows

want. For us, two columns and two rows work perfectly. You can also control

work perfectly. You can also control vertical and horizontal gap right from here. Now if you select any item inside

here. Now if you select any item inside the grid, you have some extra properties. Let's delete this one and

properties. Let's delete this one and let's select this one. And here I can control the size of this card. I can

select for the columns that it should span across how many columns. So if I select two columns, it will take two columns. If you see this weird gap,

columns. If you see this weird gap, that's because in the grid settings in advanced, it has set the height to fill container by default. Let's change it to fit content to fix this problem. So, you

can play around with these settings to create different layouts inside a grid.

But for now, we just need two columns and two rows. And each card should just take one column just like this. Now, I

can change the content of this project card component just like before. Let's

just update the image for each of these cards. And remember how we did this? We

cards. And remember how we did this? We

created a dynamic property for image in the project card component. Everything

is looking great. You can change the content as well, but I'm just going to keep it as is for now. Don't worry about the tablet and the phone view right now because I know it looks terrible, but we

will fix that later. Now, let's just create this CTA card section. By the

way, if you don't want to start something from scratch, just duplicate something similar. For example, I can

something similar. For example, I can duplicate this card by holding down the option key on the Mac or alt key on your Windows and just clicking and dragging to duplicate it just like this. Now, as

this is a component, I can't directly edit it. To deattach a component, just

edit it. To deattach a component, just right click it and detach the instance just like this. Now, it's a normal frame. Get rid of the icon and the

frame. Get rid of the icon and the heading. Let's remove the color

heading. Let's remove the color overrides for this. Resize and let's rename it to CTA card. And let's just remove the border as well. Change the

fill to surface tertiary. Now we need a button. So let's start by adding a text.

button. So let's start by adding a text.

Let's add a stack to it. Now let's just set the width and the height to fit the content. Just like this. And let's add

content. Just like this. And let's add some padding around it. Oops, I didn't change the width to fit. Let me just do that. Everything is aligned in the

that. Everything is aligned in the middle. That is fine. Let's change the

middle. That is fine. Let's change the fill to button primary. Select this

text. apply body text style to it.

Override the color to text on color just like this. And to make it rounded, let's

like this. And to make it rounded, let's add 999 radius to it. We made it into a stack with padding so that when the content of this button changes, it should automatically grow just like

this. Let's change the text to say

this. Let's change the text to say something like button text. Now we need to make it into a component. And there

are two reasons for it. One is obvious that this is going to be reused in many places. Secondly, we need the hover and

places. Secondly, we need the hover and pressed variants. Let me just make it

pressed variants. Let me just make it into a component. Let's call this our primary button. And now button can have

primary button. And now button can have that hover and pressed states. To add

those state variants, we can just click here and select hover to create hover variant. Just like this. On hover, I can

variant. Just like this. On hover, I can change the fill from button primary to button primary hover. So it looks hovered. Similarly, let's create a

hovered. Similarly, let's create a pressed variant and change the fill to button primary pressed. Let's cut this button and paste it inside here. Let's

make this one a horizontal stack and increase the gap a bit and padding can be something like 24. Now as this is aligned to top when the text increases

on this component the button stays on top. So maybe let's change the alignment

top. So maybe let's change the alignment to center vertically just like this. Now

we can just make this card into a component as this can be used in different places just like this. Let's

copy it inside here and fill the container. We're not doing the dynamic

container. We're not doing the dynamic properties right now. I will do that later in the video. By the way, we have used color variables so far and we had

set them to dark and light mode as you can remember. So, let's try changing to

can remember. So, let's try changing to dark mode. Oh, see it is working for the

dark mode. Oh, see it is working for the most part. But some of the places we

most part. But some of the places we forgot to set the variables. For

example, if you select this desktop breakpoint, we can see that the fill is set to fixed white color. So, let's just change it to surface primary. And now it

looks perfect. Let's see. This mask is

looks perfect. Let's see. This mask is weird. Let's quickly fix this.

weird. Let's quickly fix this.

I think dark and light theme are working perfectly now. Apart from this logo

perfectly now. Apart from this logo here, let's fix it by applying text primary to this SVG logo. Just like

this. In the light mode, it will be black and in the dark mode, it will be white. It's now looking great. Let's

white. It's now looking great. Let's

quickly complete our desktop frame design. Next, we have the testimonial

design. Next, we have the testimonial section. I'm just going to duplicate

section. I'm just going to duplicate similar section and just bring it down in the stack using the keyboard arrow down key. Let me just really quickly

down key. Let me just really quickly change the text. Now, I want to design the testimonial cards and I don't want to do it from scratch. Uh I think this project card is quite similar. So, let's

just duplicate it over here. We don't

need these here. Now, let's detach this project card instance. We need image on the left. So, we can change the

the left. So, we can change the direction to horizontal. Let's add a fill surface secondary for this one. And

some padding and some corner radius. And

let's adjust the corner radius of this inner frame to match the outer corner radius. By the way, there is a formula

radius. By the way, there is a formula to do this. Whenever you have like a card with corner radius and you have another item which needs corner radius inside it. So to make it look perfect

inside it. So to make it look perfect just minus the padding from the outer radius. So in our case outer card has 24

radius. So in our case outer card has 24 corner radius and the padding is 16. So

the corner radius of this image would be 24 minus 16 which is 8. And now it looks perfect. I want this image to always

perfect. I want this image to always have a fixed width and fill the height of the parent. So, let's unlock the aspect ratio and set height to fill. And

now it works perfectly. Let's change the text. Let's change the style on this

text. Let's change the style on this text here. Add some placeholder text.

text here. Add some placeholder text.

Remove the color override. Next, we need these star ratings. So, luckily in Framer, we have this built-in star shape right here. Just select it and click and

right here. Just select it and click and draw to draw it. Let's duplicate it four more times and put them all in a horizontal stack. Now we can control the

horizontal stack. Now we can control the gap. Make sure to fit the content for

gap. Make sure to fit the content for width and height. For color, we don't have any color style for it. So, let's

try to pick this color. Oops, it didn't work. Don't worry. Let's just set it

work. Don't worry. Let's just set it manually. Let's rename this stack to

manually. Let's rename this stack to stars and put it inside our frame here.

This text needs to be changed to a person name and the company name. Let's

align everything to the left. Stars are

a bit too large. Let's select all of them and reduce the size a bit. Just

like this. One important thing, set the height of this card to fix so that when we resize it, the content should fill height of it. And for this frame here,

set the height to fill the container.

Now, as you can see that it is now center aligned. We don't want that. So,

center aligned. We don't want that. So,

let's change the distribute property to start. And as I need the author and

start. And as I need the author and company name to be always at the bottom, I can wrap the star container and this text into another stack and align

everything left. And now we can just set

everything left. And now we can just set the parent container to distribute space between just like this. Now this card is fully responsive.

Let's change the name. All right. So

let's replace this image. Now you can bring your own, but I'm going to use this Unsplash plugin. And let's search for a happy man. Let's choose this one.

Let's cut this image and put it into testimonial card and paste it in. Let's

just put it next to our old image and delete the old one. Now again set the height to fill and change the radius as before. Now let's make it into a

before. Now let's make it into a component and let's make the content dynamic by creating variable for this text and for this one as well. Let's

call this one as author. We want this image to be dynamic as well. So let's

create a image variable for this one.

And just like that, our testimonial component is ready. Let's place it inside our stack. We need two testimonials. So let's just duplicate

testimonials. So let's just duplicate this one. Select both of them and set

this one. Select both of them and set the width to fill. And this stack needs to be vertical just like this. In our

design, we have the CTA section here. So

I'm just going to copy this one and paste it in here. Now let's quickly do the footer. Add the text. Apply a style.

the footer. Add the text. Apply a style.

Duplicate it once more. Change the text for this one. Wrap them in a stack.

Distribute space between. And let's

place it over here. H. Actually, I don't want it to be a part of testimonial section. So, let's just cut it out. I

section. So, let's just cut it out. I

want the footer section to be its own section. So, let's duplicate this

section. So, let's duplicate this testimonial section and get rid of everything and paste our footer stack here. I need a top border for this

here. I need a top border for this section. So, let's add a border right

section. So, let's add a border right from here. I can set the width of this

from here. I can set the width of this border to zero for right, bottom and left and leave 1px on the top and change

the color to border 100. I think so we are done. Actually I forgot to rename

are done. Actually I forgot to rename the sections as we just duplicated them from the client section. All of them are saying it's client section. So let's

just quickly rename all of these to relevant names so it's just easier for us to understand. Now let's preview this. It's looking great. Everything is

this. It's looking great. Everything is

nice and pretty. This text over here is still in front of the nav bar. It's an

easy fix. Let's select this nav bar and increase the z-index to three. Now, it

should work, but it's always better to actually give it a bigger value like 9 so that in the future if you add something with zindex 4, 5, 6, n bar

always stays on top of that. Now, our

desktop design is looking great. Now, we

can start tweaking the tablet view. I

promise it's going to be really quick.

So, first thing I'm going to do is select all of these sections here in the tablet and change the padding to 32 because 64 works great for the desktop, but for the tablet 64 is too big. Now,

it looks better. These cards are too squished together. So, in the tablet

squished together. So, in the tablet view, we can change the direction to vertical and it just works. See, this is why we spend so much time in making these cards responsive in layout so that

when we change the direction, it should just work. Now, it's looking great.

just work. Now, it's looking great.

Other sections are fine as is. But what

about these texts? They are too big for a tablet. It would be great if we could

a tablet. It would be great if we could somehow change the text size automatically for different break points. Well, the good news is that we

points. Well, the good news is that we can. To do that, let's go to the text

can. To do that, let's go to the text styles that we defined earlier in the assets tab. Select any text style. And

assets tab. Select any text style. And

here you have the option to add break points. And it will automatically make

points. And it will automatically make three break points as we have three break points in our design. Large is for desktop, medium is for tablet and small is for phone. Now I can individually

decide what will be the font size for each breakpoint. So for example in

each breakpoint. So for example in medium I can reduce the font size so that it fits. I think 5.5 ram is looking nice. I can do it for the phone as well.

nice. I can do it for the phone as well.

Just like so. Let's repeat this process for other textiles. So for heading two, let's add break points. I think I like the size created by default for the

different break points for now. Let's

preview it to see how it looks. I think

so it is looking nice. Actually the

footer is not filling the container.

That's probably because width in our primary frame is set to fixed. Let's

change it to fill. And now it will fill the container. Our tablet is looking

the container. Our tablet is looking good. Let's work on the phone view. Now,

good. Let's work on the phone view. Now,

for the hero section, this depends on what look you want to go for. You could

just resize this character to something smaller and place it on top of it like this. Actually, let's change the padding

this. Actually, let's change the padding between these texts to something smaller for tablet and phone. But I still don't like the look of the phone. I would like

the character and the text to be stacked vertical. So, we can easily do that. All

vertical. So, we can easily do that. All

we need to do is select this character image and change the position from absolute to relative. And now it will behave just like anything else in the stack. Now I can just drag it over here.

stack. Now I can just drag it over here.

So it is the first item in the vertical stack. Now as per the size when I try to

stack. Now as per the size when I try to resize it is resizing proportionally. So

I can unlock the aspect ratio just like this and reduce only the height. But see

when I resize it keeps the character in the center of the frame. Well it's an easy fix. In the fill where you uploaded

easy fix. In the fill where you uploaded the image you can see that we have this position property which is set to center. You can change it to top center

center. You can change it to top center so it always cuts from the bottom only.

Another thing that you can do is set this position to focal point and set this point to where you want to focus.

Just like this. Now it tries to always focus to that point as the size changes.

But for us, let's keep it top center.

Let's tweak the mask here so it shows the character a bit more. Now let's

select the hero section container and set distribute to start. Add some top padding and change the height to fit content and maybe some bottom padding

too. Now for the rest of the section,

too. Now for the rest of the section, let's change the padding to 20.

Currently, it is set to 64, which is too big for the phone. On the phone, this section can be vertical as well. Also,

make the text center aligned right from here. Heading two is too big for the

here. Heading two is too big for the mobile. Let's update it. Again, make

mobile. Let's update it. Again, make

sure to update it for only the small break point. Just like this.

break point. Just like this.

This is starting to look very nice. For

these cards, we can align them vertically like how we did for the tablet. For the project container, we

tablet. For the project container, we have two column grid. We can make it one column right from here. But what about this CTA card component? We can't change

the direction for this right from here.

What we can try to do is edit this component, create a variable property for the direction property just like we did for the other things. And now I can change the direction from where I have

used the component. But still I can't control the button to fill the container. The other way is to create a

container. The other way is to create a variant for the phone. So let's undo this. And in the CTA card component, add

this. And in the CTA card component, add another variant just like this. And this

will be the mobile variant. Now I can change the direction to however I want.

Let's reduce the width a bit. Reduce the

gap. And I can maybe fill this button just like this. And just like this, now I can go back to the homepage. And in

the phone breakpoint, I can just change the variant of this component to the mobile variant. One thing we missed was

mobile variant. One thing we missed was how are we supposed to change the content of this button. We didn't create any variables for this button text. So

let's go inside this CTA card. I still

can't do it over here because button is also a component within the CTA card component. So let's double click on the

component. So let's double click on the button to edit the button component. Now

here I can create and assign a variable to this text just like this. And when

you do it for the primary variant, it also assigns it to the rest of the variants. Now if I go back to the CTA

variants. Now if I go back to the CTA card component, I can change the button text. But we still have a problem. What

text. But we still have a problem. What

if one CTA card button says explore more and some other CTA card instance say I don't know something like contact me. It

means that this button text needs to be dynamic for CTA card as well. So we can create another variable in CTA card and assign it to this button text variable.

It's like a chain chain of connections to basically expose the button text to the main page level. Now I can change the button text right from here in the

homepage. Let's change the CT card

homepage. Let's change the CT card variant to mobile as well. For the

footer, let's change the direction to vertical in the phone. Make sure to select the internal stack just like I have and set the height to fit content.

Now select both of these texts and set the width to fill. And I think so we are done with our homepage for now. Let's

just switch the theme and make sure everything is in order. Everything is

looking beautiful and nice. Oo, this is tiring. If you think you have learned

tiring. If you think you have learned something, anything, I think I deserve a subscribe and a like. Please do that.

And after you do that, go take a break, have some coffee. I'm going to go grab something to eat and I will be back. I

promise. All right, I'm back. Next step

is to learn how to create a page. Well,

it's quite simple. Go here in the pages.

Click over here and add a page. Name it

whatever you want. Let's call it contact. Now we have a contact page.

contact. Now we have a contact page.

Let's design it real quick. We need a navbar. Now the thing is that there are

navbar. Now the thing is that there are some things that are always going to stay on every page. For example, a navbar and a footer. We don't want to

copy again and again for every page.

What we can do is go to the homepage and select the desktop frame. And up here we have this option to add a template.

Let's call it main template. Now this is a template page. If you go in the layers, you can see that there is only one layer that says placeholder.

Placeholder means that this is where all the content of any page where we use this template will go. Let me show you what I mean. Let's go back to the home and cut this nav bar right from here.

And let's edit this template again. You

can edit it right from here. Now here in the template I can just paste in that navbar and place it over the placeholder just like this. Make sure the position

is fixed and pinned to top left and right. And remember we added background

right. And remember we added background fill to the desktop frame on the homepage. Now we can just do it over

homepage. Now we can just do it over here. So let's set the fill to surface

here. So let's set the fill to surface primary. Now we've got our navigation

primary. Now we've got our navigation placeholder. will have the content of

placeholder. will have the content of the page and at the bottom we need a footer because that is also going to be available on every page. So let's cut the footer from the homepage like we did

for the navbar and go back to the template again and paste in the footer just like this. The desktop frame of this template is also a stack so it automatically stacks at the bottom. Now

we can create similar break points for template as well. Let's add a tablet one in the template. The footer will have 32 padding instead of 64. And maybe we can

have it vertical stack just like this.

And add some gap to it. Now let's add the phone breakpoint. And here let's set the width of these text to fill the container and align them in the middle.

And maybe actually we can add text style breakpoint for the body just like we did for the headings. for large 1.5 ram.

Medium can be also 1.5 and small can be 1.26. Let's do this exactly for the body

1.26. Let's do this exactly for the body bold as well. So it's consistent. Now

let's go back and check it out. And look

now even we don't have the navbar and the footer on this homepage. But because

we are using a template on it, it still shows that navbar and the footer. Let's

check out the tablet and phone view. I

think something is gone wrong here for the phone variant. Let's go into the template and let's go inside the navar component and let's investigate and compare both of these. All right, I see

the problem. I accidentally added

the problem. I accidentally added padding to the wrong stack here. Let's

remove it. We actually wanted to give right and left padding of 20 pixels to this fixed container. And same should go for this h. Why do we have this weird

space on the left? Let's see. Oh, sorry.

I entered 9 pixels instead of zero when removing the padding earlier. Now, it's

fine. Let's go back to the template.

Let's change the height of this navbar to fit the content and preview. By the

way, you can only preview the template as well. It seems to be working fine

as well. It seems to be working fine now, but let's make this navbar a bit more interesting. Currently, we can see

more interesting. Currently, we can see that we have a fill of surface primary set to it. Let's change that and set it to surface primary 90%. Now this

background is a bit transparent. Now on

top of that we can add some background blur. Right from here in the styles you

blur. Right from here in the styles you can add your background blur. Just make

sure to apply to the primary variant. So

it gets applied to all other variants automatically. Now if I preview look at

automatically. Now if I preview look at the nar this is now transparent and how everything behind is kind of blurred out. And same goes for the phone

out. And same goes for the phone variant. All right let's start working

variant. All right let's start working on our contact page. Before we do that, let's just delete this reference image as we don't need this anymore. Now,

let's go back to the design first. As

you can see in the contact page, we need a form section. Let's go to the contact page right from here. See that there is no navbar still, but I thought we did all that template making just for this.

Well, don't sweat it. All you got to do is just add the template to it right from here. And there you go. Now you

from here. And there you go. Now you

have the navbar and the footer. Now, we

need a form on this page. But before

that, I'm just going to quickly copy one of these sections from the homepage and paste it in here to save some time.

Let's increase some padding. Top can be 128 pixels or maybe 200. Now, let's get rid of this text. We don't need it. And

let's change the text to something like get in touch and you know message me or something like that. Now, for the form, let's go to insert. And inside the form,

framer has its own form builder. Or you

could go with the third party forms like Mailchimp or HubSpot or any other. For

now, let's just go with the form builder. I'm going to drag and drop it

builder. I'm going to drag and drop it in here in this stack. Again, this is nothing more than just bunch of frames.

So, let's fill this container. Let's

increase the height of these inputs to match our styles. So, maybe these inputs can be 56 pixels in height. This button

too. By the way, notice that this button is not the button that we designed.

Basically, what happened is that framer added its own button component. And you

can edit it as well by double clicking on it. And you can see that it has a few

on it. And you can see that it has a few variants. You have the loading,

variants. You have the loading, disabled, success, and the error. And

some state variants for hover and pressed. To keep things consistent,

pressed. To keep things consistent, let's change the colors to our color styles. Change the fill of this button

styles. Change the fill of this button to button primary. This one can be button hover and this one button primary pressed. For the text, let's apply the

pressed. For the text, let's apply the body text style. Let's increase the height to something like 60 pixels. And

let's change the text color to text on color. Radius can be 999. So it's

color. Radius can be 999. So it's

completely rounded. This spinner frame can be a bit bigger as well. And we

probably don't need success and error variant. So let's just remove those. Now

variant. So let's just remove those. Now

the button is looking nice. Let's try to update the textiles of these labels for inputs. So let me just try and select

inputs. So let me just try and select this. Maybe I can select it from the

this. Maybe I can select it from the layers and let's apply textile body to it. Now for the inputs, there is no way

it. Now for the inputs, there is no way to apply textiles directly to it. But

you can apply a different font size.

Let's apply the 1.5 ram to it. Now

change the color to text primary for the placeholder. The color can be text

placeholder. The color can be text secondary. The fill can be surface

secondary. The fill can be surface secondary. All right. So the colors are

secondary. All right. So the colors are set but there is a special property of inputs which is focus. Focus means when you click on any input it becomes focus.

So you can control how it looks like when it is focused. To do that let's go into the focus properties and let's say that we want a border of 1 px and the color can be border 100. I've just

realized that the font sizes are not matching. So let's change the font to

matching. So let's change the font to enter display from enter just like this.

Let's also add a border around it with 2px and the color can be border 100 again. By the way, if you select this

again. By the way, if you select this input, you can add different input properties to it or you can change the input type to something like date or URL

depending on what we want. For us, we want it to be text because it's just a name. The name field is the label value

name. The name field is the label value which will be sent to the database if you submit this form and placeholder can be changed right from here. You can also make it a required or not required

field. We are just learning. We can just

field. We are just learning. We can just get rid of these two fields and maybe duplicate this once and change it to message and also change the input field

to text area and increase the height like so. You can also adjust the

like so. You can also adjust the placeholder and the field name to whatever you want. Main thing now is what happens when I click this submit button. One thing that we can do is

button. One thing that we can do is change the variant of this button based on the form state right from here. So

during the loading state the button changes to loading variant and on success we can set it to another variant. But in our case we just need to

variant. But in our case we just need to redirect the user to a thank you page.

So to do that we can select this form container and here we can decide where to send the data. Great thing is that framer makes it really easy to send it to an email. Here you can enter where

you want to receive this email and you can also decide the sender name, subject and the description of the email. So

what will happen is that you will receive an email from framer with this name, this subject and body. But it also includes the data that was submitted in

the form. Other way to send the data is

the form. Other way to send the data is to either attach a Google Sheets. not

going to show you how to do that. Just

click over here and it will walk you through how to connect it. And thirdly,

you can also connect an external API right from here with this web hook option. For the learning purpose, I'm

option. For the learning purpose, I'm just going to keep it blank. However,

once it sends to something, we can set redirect link. Here you can pick a page

redirect link. Here you can pick a page where you want to redirect. Here you can pick the page you want to redirect to after the submission. We will create a thank you page later. But for now, let's

just set it to homepage. And that's it.

Let's preview it. Now, if I submit this without filling in, the validation is working perfectly as this is a required field. So, let's fill in the both of

field. So, let's fill in the both of these and try submitting again. And

there you go. It loaded for just a second there and redirected us to the homepage. Now that we have our contact

homepage. Now that we have our contact page, maybe we should link it to this nav link here as well. So let's go back to the navbar component. Select this

contact navl link instance and we can link it to the contact page just like this. We can also link the work page but

this. We can also link the work page but we don't have the work page right now.

We will do this later in the video. By

the way, you don't have to do it separately for the mobile variant because you did it in the primary and as I told you if you do it in primary it applies everywhere. Now we can preview

applies everywhere. Now we can preview homepage and we can go to contact page right from here using this link. And

once we submit the form there, it will redirect back to home. This is great.

But in real scenario, there should be a thank you page where it should actually redirect to. So let's quickly create a

redirect to. So let's quickly create a new thank you page. You can see that it is already using the template. Let's

copy this section from the contact page.

Actually, while we're doing that, rename this section to something like contact section. Now, just copy it and paste it

section. Now, just copy it and paste it in the thank you page. You don't have to copy stuff. It just saves me some time.

copy stuff. It just saves me some time.

So that's why I'm doing it. Let's call

this one thank you section here. Now I

can just change the text to something like I will get back to you. Thank you

for your message and remove the form.

Height of this section can be viewport.

And let's align the content in the middle. Actually select the internal

middle. Actually select the internal stack as well and align everything in the middle just like this. All right,

let's preview this. H it's looking interesting. Maybe the padding can be

interesting. Maybe the padding can be reduced to something like 64. Let's see

it again.

Actually, we don't need viewport height.

We can just set it to 800 pixels. And

that's it. It's a simple thank you page and it's ready. Now, in contact page, we can change the redirect from the homepage to thank you page just like this. And that's it. Now, we are done

this. And that's it. Now, we are done creating our contact and thank you page.

We need a project index and project detail page. What I mean by this is

detail page. What I mean by this is currently on our homepage, we have listed some dummy projects, right? In a

typical portfolio website on homepage, you would just show your special projects or featured projects. Then you

would have like an explore more work button which actually takes you to a separate page where you list all of your projects. So let's change the text on

projects. So let's change the text on this button in this CTA card to say explore more work. Now when I click this button or if I click work from the

navbar I should go to the new work page where we will have all the works listed.

So first thing first we need a page.

Let's add that. Let's call this one work. Let's just copy this whole project

work. Let's just copy this whole project section from the homepage and paste it in here. Let's rename this section to

in here. Let's rename this section to work section and add some top padding of 200. You can change the text to whatever

200. You can change the text to whatever you like. For example, amazing work or

you like. For example, amazing work or whatever you think works best. We don't

need CTA card. So, let's remove that.

Let's duplicate this project card twice more just to show some extra projects in here. Now, from the homepage, we need to

here. Now, from the homepage, we need to link this button to this page. But, we

actually didn't add a link variable to the button yet. So, let's go in here inside the button component. Here we can create a variable for the link just like

we did for the other stuff. Now go back to the CTA card. Same thing again.

Create a variable to expose it to the main page level just like this. And now

if I go back I can link it to the work page just like this. Let's test it.

Scroll down to the CTA and click explore more button. And now we are on the

more button. And now we are on the workpage. Now here's where things get

workpage. Now here's where things get more interesting. Now that we have a

more interesting. Now that we have a work page, whenever we have a new project, we can add it to this page. But

wouldn't it be better if there was like a database where you could just add your project data and it automatically shows up here? To solve this, we use CMS. CMS

up here? To solve this, we use CMS. CMS stands for content management system.

CMS is like a database and it contains collections. Now, collections can have

collections. Now, collections can have some fields like project name, image, client name, description or my role. Now

these collections can have records. For

example, in this project collection, we can add all the projects that we have worked on. And we connect this CMS

worked on. And we connect this CMS collection to our work page. And it

automatically picks up the details of our projects from our project collection and shows it on our work page just like this. And when we click on any project,

this. And when we click on any project, it takes us to a project details page which we will discuss how to design later in the video. On this page, you can further show the fields from the

project collection. CMS makes it easier

project collection. CMS makes it easier to manage content. Instead of designing different pages for each project, we just keep on adding project details to our project collection and it

automatically fills in that data in our design. Let me show you how CMS works. I

design. Let me show you how CMS works. I

promise you by the end of this video you will understand all about CMS. To access CMS, click over here on the top. You can

either start with a built-in CMS for a blog or import your own from a data source. But let's learn from scratch.

source. But let's learn from scratch.

Let's create a collection right from here. Let's name this collection

here. Let's name this collection project. Now, this is where we will add

project. Now, this is where we will add all our projects that we worked on. But

if I press this add new item button, I get this form where you have fields like title, slug, and content. You might ask where are these fields coming from? And

what if I want some other field for my project? I don't know something like

project? I don't know something like role. What to do then? Well, that's why

role. What to do then? Well, that's why it's important to define your collection fields first, which you can do right from here. Let me remove the default

from here. Let me remove the default fields that framer added so you don't get confused. By the way, you can't

get confused. By the way, you can't remove slug. Slug field is basically a

remove slug. Slug field is basically a URL. So, let's say that you have these

URL. So, let's say that you have these four projects and one of them is iPhone 16. And when you click on this, it takes

16. And when you click on this, it takes you to a unique URL. For example, your website.com/work/

website.com/work/ iphone16. Now, this is the slug for that

iphone16. Now, this is the slug for that specific project. And it's unique for

specific project. And it's unique for each project. Don't worry about it. You

each project. Don't worry about it. You

will understand what it means soon. For

now, we need to create fields for our project section. Now, here you need to

project section. Now, here you need to think to yourself what data you need to show for a project. And based on that, you create certain fields which you can do right from here. You have option to

choose from different type of fields like text field, date field, color, link, image or even vector icons. So

let's say you need a project name field.

Now project name is obviously going to be a plain text field. So let's go with that. Let's call this field project

that. Let's call this field project name. Here you can play with different

name. Here you can play with different settings of this field. For example, I can mark it as required or add some placeholder or default text. But for

now, let's keep it as is. Let's create

another field and let's call this one short description. I'm going to leave

short description. I'm going to leave the other settings as is. For the slug, I can set the slug to be based on the name of the project. Now, if I close this and add a new item, you can see

that we have the fields that we just created. I can enter the project name.

created. I can enter the project name.

Slug automatically gets filled in as we set it to be based on the project name.

And in the description, I can just put some random text for now. This is just a sample data. In real portfolio, you

sample data. In real portfolio, you would actually put real project name and short description. And just like that,

short description. And just like that, you have added one project. Let's

quickly add another dummy project. Let's

assume the project name is second project and the description is testing ABC. Now that we have our CMS collection

ABC. Now that we have our CMS collection project created. So far, we have created

project created. So far, we have created a project collection and we have added two project records in that collection.

Now, all we've got to do is connect the CMS collection to our work page. For

that, let's just move this container out of the way for now. And if we go to the insert in the collection, we can see that it shows our collection that we just created. Let's drag and drop that

just created. Let's drag and drop that in. And there you go. As you can see,

in. And there you go. As you can see, this is showing the project name of both of the projects that we added in the project collection. In the layers, if

project collection. In the layers, if you look at it, here is the project list. And this will list all the items

list. And this will list all the items from project collection. And this

internal project layer is the instance of a record from your project list. And

currently it only has one text layer which is showing the project name. But

you might be wondering there is one layer of text and it is showing the project name for both of the projects.

See how it works is that you only design for one project and it also applies the same design for the other project in the list. Let me show you what I mean. Let's

list. Let me show you what I mean. Let's

select this text layer and duplicate it.

See what happened is that it added another text layer. But it also applied it to the other project in the list.

Let's continue and it will become all clear to you. Let's select this project's collection and set the width to fill. Now let's select this internal

to fill. Now let's select this internal project and maybe add a fill. Notice as

I change the color, it also gets applied to the other item in the collection.

Whatever I do to this layer, for example, if I change the direction, it also gets applied to the other one. And

that's the beauty of it. So that you have to design just one item and it also applies to the other items as well. Now

you might be thinking both of these text layer are showing the project name. What

if I wanted one of them to show the project name and the other one to show the short description that we added. If

I select this text and have a look at this text content, I can see that this is connected to the project name. And

you can see that by clicking on it. And

if I wanted to show the project description, I can change this connection from project name to short description right from here. So

basically you can assign any field value from your project collection. And now

you can see that one of the text is showing the project name and the second text is showing the short description.

Now I can continue making this pretty and adding an image. But we've already designed a project card component.

Remember this? So let's use this instead of doing everything from scratch. So,

let's copy this card and get rid of these two text layers because we don't need them anymore. Let's remove the fill and set the width to fixed. Now, paste

it in. All right. So, we've pasted in the card. Let's set the width of this

the card. Let's set the width of this card to fill. Actually, let's select this parent one because we need a grid for this. So, let's change the layout to

for this. So, let's change the layout to grid and set the gap to maybe 32 with two columns. Just like this. Now it is

two columns. Just like this. Now it is starting to look just like how we had before. It is showing two cards because

before. It is showing two cards because we had two items in our collection. But

see we have a problem. Currently the

text are not even connected to the project name or the project description.

We can do that right from here. Remember

we created these properties when we designed the project card component so that we could change the title right from here to something else. But instead

of giving a fixed title, I can map this to the project name just like this. And

now you can see both of these cards are showing their respective project names.

And same thing goes for the description.

I can map it to the short description.

Now whenever we need to add some other project to this page, we don't have to design it from scratch. We can just go to the CMS and add another project. Just

go to the CMS, click new item, add the project name and add the short description. And there you go. Now the

description. And there you go. Now the

project is added and it is also showing on our work page. Now what about these images? Well, we haven't connected them

images? Well, we haven't connected them to any project field. We don't even have a project field for the image. So let's

go back to the CMS, edit the fields, and add another field. Make sure to select the image type of the field. Let's make

the image field required as well. And I

can upload a default image, but let's leave it as is. Now, for each project, we can add a relevant image. So, let's

say we upload this board image right here. Now, I can just update the project

here. Now, I can just update the project name and short description to make it a bit more relevant to this image. So, it

is easier for us to distinguish between different projects. Again, I'm just

different projects. Again, I'm just using a demi text. You can write whatever you want. Now, I'm going to repeat this process for the rest of the project items. Upload relevant image.

change the project name, add a relevant description. By the way, if the slug

description. By the way, if the slug doesn't update, just copy this and paste that name in here and it will automatically update that slug for you.

Actually, we should do this for the first project as well. Just like this.

And let's update the content of the third project. This one is going to be a

third project. This one is going to be a plane image. And the project name would

plane image. And the project name would be project plane. And the short description can be something like this aircraft is very fast. Let's add another

project so that we have even four projects in our grid. Let's call this one project train. The short description can be something like this train is very big. And upload the relevant image.

big. And upload the relevant image.

That's it. Now back in our work page, we have the updated projects and their details, but image is still not updated.

That's because we didn't assign the image to the CMS variable. So let's do that. Select this project card and

that. Select this project card and assign this image property to the image field of CMS project collection. That's

it. Our project list is now totally dynamic with our custom styling. On work

page, we are fine with showing all the projects in our list. But on homepage, maybe we just want to show only specific projects. We can easily do this now. So,

projects. We can easily do this now. So,

first thing first, let's copy this project list. Go back to home. Select

project list. Go back to home. Select

this project section and paste it in.

Let's move it up the stack and get rid of this static project container as we don't need it anymore. Now, like I mentioned earlier, we want to show only specific projects on the homepage or

maybe we want to just show the two most recent ones. So, what we can do about

recent ones. So, what we can do about that is select this CMS collection and you will see some content properties on the right panel. Here you can select the source of the collection. You can add

some kind of sorting or add conditional filtering through this option. For

example, you can set something like if the project name is equal to this, then only show that project. But for now, let's not go into that complexity. You

can also add pigeonation if the list is too big. But in our case, we can just

too big. But in our case, we can just add a limit of two. So it only shows two most recent projects. Now, what about if I click on any project on homepage or on

the work page? It should take me to a page with the details about that specific project, right? Well, we don't want to create separate detail pages for

each project. That would be crazy. So,

each project. That would be crazy. So,

CMS allows you to create one detail page for all. To do that, let's go back to

for all. To do that, let's go back to the pages and add a page. Add CMS page just like this and select the project collection and see here we have index or

detail page option. Index page is where all the work items are listed. But we

have already done that. We just need a details page. So let's go with that.

details page. So let's go with that.

This will create a basic page with some design to it and project fields already assigned to them. For example, you have this next project button text added which basically takes you to the next project in the list depending on what

kind of design you want for the project detail. You can modify this project

detail. You can modify this project page. Let's quickly fix the design. This

page. Let's quickly fix the design. This

stack needs to be filling the container.

Max width can be 1200 pixels. Add some

top padding of 200 pixels. And look at that. It already had that project name

that. It already had that project name and project description text added to it. It was just not being shown because

it. It was just not being shown because of the poor design. One of them is showing the project name and the other one is showing the project description.

Now I want both of them on my project detail page. So maybe let's just change

detail page. So maybe let's just change the color of these text. Actually

instead of changing the color we can just apply the text style of heading one and change the color to text primary. I

think so it's too big. Let's go with heading two. Same thing goes for the

heading two. Same thing goes for the other text. Set the style to body LG

other text. Set the style to body LG just like this. And the color can be text primary. Now, this next project

text primary. Now, this next project section, well, you can keep it, but I'm just going to get rid of it because, well, I want to keep my design clean.

And maybe this image height can be a bit bigger. Now, you might be wondering,

bigger. Now, you might be wondering, this is just for one project. Where are

the pages for the rest of the projects?

Well, this here is one page for all. You

can change between different collection items right from here just like this.

And it will automatically update the data accordingly. But what about if we

data accordingly. But what about if we had a full description of a project?

Let's say all of your projects have an overview challenge solution and results. How can we show it over here?

results. How can we show it over here?

Well, what we can do is we can go back to the CMS, add another field, and this time instead of plain text, we add a formatted text field. Let's call this

one full description. Now we can go back to each project and just add in our full description. I'm just going to copy and

description. I'm just going to copy and paste some placeholder text here. Now

because this is a formatted text field, I can format the content. Like for

example, we have heading 1 through six and paragraphs. Now to show this

and paragraphs. Now to show this content, let's close this and go to our project detail page and insert this content here. To do that, we can go to

content here. To do that, we can go to insert and inside CMS, we have this field option. And here we can just drag

field option. And here we can just drag and drop the full description in here.

Oh, I think we forgot to add full description of this project. So, let's

go back to the CMS. Let's just copy the same full description and copy it for the rest of the projects. I'm just doing it to save some time. Of course, in real time scenario, all the projects will have different descriptions. All right.

Now, we have the full description for all our projects. And you can see that it is showing right here. But it is still not showing as formatted as we want it to. To fix this, we can add a

style to it right from this option. So,

let's add heading one to it. Wo, this is too big for our liking. Maybe we can remove this and add heading two style to it. But this also means that we have to

it. But this also means that we have to go back in the CMS and in the full description change the heading one content to heading two so that it applies that heading two style to it.

And let's do it for all the headings.

And let's just copy all of this and update it for all the rest of the projects. Just like this. Now the

projects. Just like this. Now the

heading two is looking fine, I think. So

it's still too big, I guess. Maybe we

can do heading three for this. Before we

do that, let's add the paragraph style as well. And you can see that it has

as well. And you can see that it has added that paragraph style and it has applied all body text style to it. You

can however change it to body bold if you like. Now let's actually apply

you like. Now let's actually apply heading three instead of heading two so it looks a bit nicer. Go to the CMS and select one of these projects. And

actually let's add some line break to it so there is some gap between them. And

let's change these heading two to heading three. Make sure to change all

heading three. Make sure to change all of these headings to heading three. And

now let's just copy this and update it everywhere else. Let's go back to our

everywhere else. Let's go back to our project page. Now we can remove the

project page. Now we can remove the heading two right from here and add heading three style. And there you go.

It is looking much nicer. We can switch between different projects and it will load their full description accordingly.

All that is left to do is actually make these projects clickable on the work page. So when I click on them, it should

page. So when I click on them, it should take me to the relevant project. And the

same thing goes for the homepage as well. It's pretty simple. If I select

well. It's pretty simple. If I select this project item on the homepage, there is no option to add a link to it yet.

That's because we are actually using a component. And you should know by now

component. And you should know by now how to expose any property to the front for any component. Just go into the component. Here we have the option to

component. Here we have the option to add the link. Let's create and connect a variable to it. And now let's go back.

And now I can just add a link to a page.

But this time instead of connecting to a specific page, we have this option to connect it to a project slug. Let's

select this. Let's do this in the work page as well. And that's it. it will

work for all the items automatically.

Let's preview this on the homepage. If I

click on this project, it goes to that project page. And actually, we should

project page. And actually, we should also connect this worknav link to the work page as well. You should know how to do this by now. Go to the navar component and just add the link to the

work nav link just like this. Now, let's

just preview it again. Scroll down to the project section and click on any project and it will take you to the project detail page. And if I click on this work now link now, this should also

take me to the work page. And if I click on any project on the work page, this will again take me to a project detail page, which means all our clicks are working fine. Now, any project I click

working fine. Now, any project I click on, it automatically opens that project detail page. All that is left is to make

detail page. All that is left is to make the rest of the pages responsive as well, just like how we did for the homepage. Don't worry, it's going to be

homepage. Don't worry, it's going to be really quick. Let's go to the contact

really quick. Let's go to the contact page. at a break point for the tablet

page. at a break point for the tablet and a phone. For the tablet, I can just reduce the padding a bit, maybe 32 for the sides and on top of it, it can be

150. And on the phone, it can be 150 on

150. And on the phone, it can be 150 on the top and 20 on each side. This form

has some extra padding that we don't need. So, let's remove it for all. Now,

need. So, let's remove it for all. Now,

let's go back to the work page and add break points. And the same thing for the

break points. And the same thing for the tablet. 150 on top and 32 pixels padding

tablet. 150 on top and 32 pixels padding on the sides. And for the phone, 150 px padding on the top and 20 px on the sides. And maybe we can also change this

sides. And maybe we can also change this grid to one column layout. Just like

this.

Now let's test this. Let's go back to home and preview this. Change the size to phone view. Open the menu. Click

work. Oops, this is not working. This

menu didn't close when we clicked on the work page. Don't worry, it's a very

work page. Don't worry, it's a very quick fix. Let's go to the navbar

quick fix. Let's go to the navbar component. And here in the phone

component. And here in the phone variant, remember we added interaction on this close icon to close the navbar.

We can add the same interaction on these links as well. Just like this. Now when

we click on these links, the navbar will switch to close variant automatically.

As you can see this works now. And let's

see work and contact page are also responsive. Let's see now the project

responsive. Let's see now the project detail is left to be made responsive.

So, let's go to the project detail page right from here and add a tablet and the phone breakpoint. And for this stack

phone breakpoint. And for this stack here, let's add 32 pixels padding on all sides and 150 pixels on top. And for the phone, 150 px on top and 20 on the

sides. Maybe the height of this image

sides. Maybe the height of this image can be a bit shorter for the phone and the tablet view as well. Let's go to the work page and preview. Click on the

project and everything is now working smoothly. Finally, we are done with this

smoothly. Finally, we are done with this website. But this website is looking

website. But this website is looking very boring, static website without any bells and whistles. So now it's time to add animations and effects to it. And

always remember to complete the website first and then start applying effects.

Now this is the last and the most fun part of this video. Before we dive in, just a reminder to subscribe and like.

And also if you are looking for a practical yet modern portfolio design, I have created this beautiful portfolio template with elegant design and smooth animations in framer that I'm also using

for myself. You can get this template

for myself. You can get this template right now at a discount price from the link in the description. This is a limited time offer. No matter what kind of creative professional you are, you

can get this template and easily modify it to make it your own. Now let's go back to the video. Now in terms of animation and effects there is so much you can do in framer. Let's go through

some of the things that you can do and rest you can try on your own. First

let's try animating our hero section of homepage because that's the first thing that anybody sees when they visit your website. To add effects let's select any

website. To add effects let's select any layer. For example, this text layer and

layer. For example, this text layer and you can see this effect option here.

Click this plus icon to see what kind of effects you can add. For example, text effects can apply text effects on letters itself. Appear effects add

letters itself. Appear effects add effects like moving from one place to another. Hover effect is like an effect

another. Hover effect is like an effect that is applied when you hover on it.

Similarly, we have press. We also have loop. If you want to loop an animation,

loop. If you want to loop an animation, then you can also add some scroll animations. I won't be covering all of

animations. I won't be covering all of these because that could be a complete different course just for the effects.

So, let's start small. Let's add text effect. This here shows the preview of

effect. This here shows the preview of the effect. Framer has added a default

the effect. Framer has added a default text effect to it. This here is the trigger. This means when this effect

trigger. This means when this effect will be played. Currently, it is set on appear, but you can change it to layer in view or section in view. We will

explore these settings later. Let's keep

it on appear for now. On appear means it will play as soon as the page loads. You

have bunch of preset text effects to play with. You can select them and see

play with. You can select them and see how each of them looks like out of the box. These are some great effects in

box. These are some great effects in Framer. But in the enter settings, you

Framer. But in the enter settings, you can also control how this text enters into the effect. For example, before entering, the opacity here is set to zero. In the transition, you can control

zero. In the transition, you can control the transition of this effect. Like

maybe you can make it bouncier or smooth and slow animation. Let's not change anything right now. And let's preview.

And just like that, without doing anything, this text has this blur effect applied to it, which looks really cool.

I'm going to hide this character for now just to see the animation clearly. Now

let's preview. And look at that. This is

looking really good, but it's a bit too fast. Maybe I can add some delay of 0.3

fast. Maybe I can add some delay of 0.3 seconds to the effect. So it starts after 0.3 seconds after the page loads.

Let's reload now. And this is looking great. But let's spice it up a bit. In

great. But let's spice it up a bit. In

the same effect, let's go to the enter settings and maybe change the offset Y to 100. By the way, you can see the

to 100. By the way, you can see the preview right here as well. Let's

preview it. Now the text starts to come in a bit further below. Similarly, we

can also add an offset of X to like minus 100. And now it looks even better.

minus 100. And now it looks even better.

Let's try another thing. Let's go back into the enter settings and increase the entering scale a bit. Now when I preview this, see how it starts as big text and

then reduces the size as it ends. You

can mix in different enter effect options to make unique effects. I think

this is looking really great now. So

let's make that character visible again.

And let's apply a peer effect to this character. Again you can select from the

character. Again you can select from the presets like fade in and scale in and more. And you can play with the enter

more. And you can play with the enter effects. For example, I can give it Y

effects. For example, I can give it Y offset of 150 just like this. Now when I preview it, it fades in but from the bottom. It is still very fast. Maybe we

bottom. It is still very fast. Maybe we

can slow it down a bit. To play with the speed of animation, we can go to the transition settings in here. Currently,

it is set to a spring animation. And

time of animation is 0.4 second and the bounce is 0.2 seconds. Let's try to add some delay of 0.8 second and slow down

the time to maybe 1 second. Now, let's

preview it. This is looking much better.

Now, for this text here, let me just copy the style of this text. To copy a style, select the layer and right click over here and then copy. Just like this.

Now just select the layer where you want to apply it and then go to the effects, right click and paste it. Now both of these texts have the same effect. Maybe

we can add some delay to the second one so it comes after the first one. Now

let's preview. This is looking much nicer. I mean look at this. Within

nicer. I mean look at this. Within

seconds we were to make this hero section much more interesting. Now we

can add more than one effect to something. For example, if I want to

something. For example, if I want to give it like a parallel effect, I can add a scroll speed effect just like this and reduce the scroll speed of this element to 50%. Now, as I scroll the

website, this character will scroll 50% slower. Similarly, I can increase it to

slower. Similarly, I can increase it to 120%, then this character will scroll 20% faster than other elements.

Now, let's try and add simple appear effect to this text here. And we can add some Y offset to it just like this. But

see when I preview it, the effect does not play for this text. That's because

when we loaded the page, it ran that effect already. What we want to do is

effect already. What we want to do is instead of on appear, we can say that when this layer is in view only then start the animation. This here controls

when it should start the effect after the object is in view. Should it start as soon as it comes into view or in the middle of the screen or when it is exiting the screen? We have the same

enter effects properties for this one as well. But in addition to that, you have

well. But in addition to that, you have the exit effects which are played basically when that element is about to go off screen. Similarly, you can also disable the replay right from here,

which means that it will only play once instead of playing every time when you scroll up and down. Now when I preview this and scroll down to this layer, the effect starts playing. Let's try it

again. And there you go. Now you don't

again. And there you go. Now you don't have to apply effect to one particular element. You can also add it to the

element. You can also add it to the whole stack. Like for this section here,

whole stack. Like for this section here, let's apply a peer effect on this stack and select the layer in view in the middle just like this. And let's

actually go to the enter transition and make it a smooth transition instead of a bouncy one. To do that, let's choose

bouncy one. To do that, let's choose ease. Now you can either play with this

ease. Now you can either play with this basier curve to control the speed of animation over time yourself or pick from the presets below. I'm going to do a custom one like this and maybe add

some time to it. And also let's add some offset of Y to it just like this. Let's

preview this and scroll through this section. It is much smoother animation

section. It is much smoother animation actually. Now let's apply the same

actually. Now let's apply the same section effects to this text here. So

let's copy this effect. Select this text and remove the existing one and paste it in just like this. Actually, better yet, let's remove it from this text and just apply it to the whole stack. Just like

this. You may want to do it individually for each element. Or you can do it like how I did it. Let's apply the same style to all of these heading sections. We

already have the effect copied. We just

need to right click here and paste it.

Let's do it for this heading section as well. Again, go to effect and paste it

well. Again, go to effect and paste it in. And just for fun, let's add the same

in. And just for fun, let's add the same effect to this one as well. Now, let's

preview this. The heading section looks amazing. And as I scroll, the text comes

amazing. And as I scroll, the text comes in nicely. These cards are still static.

in nicely. These cards are still static.

So, let's add some effects to these ones. For these cards, maybe we can add

ones. For these cards, maybe we can add the same style. But to make it more interesting, there is a trick that I like to do. First, let's just paste the same effect to all of these. Just like

this. Now for each of these texts I can change the offset a little bit and make it higher and higher as I go. So for

example for this one it can be 130 and for this one it can be 160. Now when I preview this as I scroll one card comes after the another one which looks really

nice. Now you might notice that as I

nice. Now you might notice that as I scroll up and down every time these sections with effects come into the view they're playing the effect again. We

don't want it to play again and again.

Well, sometimes you do want to replay, but in our case, we don't. So, to turn off the replay, you can go into the effect settings and turn off the replay right from here. Let's select all other

elements where we applied this effect and turn the replay off. I'm going to fast forward this section to save some time.

All right, all of them are done. Now,

when I preview it, it does not replay on scroll. By the way, you might notice the

scroll. By the way, you might notice the whole page reload sometime. It is just a framer thing, so don't worry about it.

Let's move on and copy this effect again and paste it for this card. Actually,

let's just quickly do it for the other cards as well. Let's select the CTA, paste that in. Let's select this heading section. And actually, let's select

section. And actually, let's select these cards here as well, and paste the same effect to all of these. Now, let's

preview. Now, as I scroll down, you can see that the text slides up nicely with this smooth transition, which is really satisfying. Website seems to be looking

satisfying. Website seems to be looking really good. And when you apply the

really good. And when you apply the effect on the desktop, it also applies to the other break points. As you can see, as I scroll down the tablet view, this is looking very smooth and modern.

By the way, I just noticed that there is no home nav link in the navbar. How

ignorant of me. So, let's go back to the navbar component really quickly.

Duplicate this nav link. Change the text to home and link this to the homepage.

Just like this. It should work now.

Let's go and preview it. Let's go to work and home. Now the home nav link is working. All right. We just learned how

working. All right. We just learned how to apply effects to elements. There's

another type of animation that you can do to make your site more interesting.

So let's say that what I want to do is when I hover this character, there should be a cursor saying drag me and then I should be able to drag this character around. So let's try to do it

character around. So let's try to do it and you will see what I mean. So first

thing first, let's go to the design page and copy these images and let's go back to the homepage and paste them in here.

Now I'm going to use these images later.

First let's add some text that says drag me and let's add our body text style to it. Just like this. Now let's resize

it. Just like this. Now let's resize this hand image and place it next to this text. Oops, wrong image for the

this text. Oops, wrong image for the drag me. Actually, we needed this one.

drag me. Actually, we needed this one.

So, let's resize it and actually rotate it just like this. By the way, this is how you can rotate anything right from the bottom corner just like so. Now,

select both of them and press shift A to add them to a stack. Let's add some cap and maybe add a fill of surface primary just like this. Also, let's add some

padding around it just like this. And

let's make it fully rounded by adding border radius to it. Let's rename this stack to drag cursor. Let's cut this closed hand image from the homepage and

make this one into a component like we have done many times before. Now here I am going to create a pressed variant just like this. And I'm going to paste that closed hand image right here and

get rid of this open hand image just like this. You're going to see why we

like this. You're going to see why we did this in just a second. Let's go back to home. Delete this as we don't need it

to home. Delete this as we don't need it anymore. Now select the character and in

anymore. Now select the character and in the properties you will see this option to add a cursor. You can either select a web cursor and pick from the default cursors or you can add a custom cursor.

Let's remove the web cursor from here and add a new custom cursor right from here. Here you need to pick a component

here. Here you need to pick a component to set as the cursor. It can be any component. For our case, I'm going to

component. For our case, I'm going to pick the drag cursor component that we just created. And let's add a spring

just created. And let's add a spring transition by just clicking right here.

Now, when I preview and hover on this character, I see that cursor on hover.

But there's a problem. When I hover on this text, that cursor disappears.

That's because it thinks that I am hovering on the text. Now, to ignore the mouse events on these text, we can select both of these texts and in the

styles, click this plus symbol and select pointer events and set them to none. Just like this. And now when we

none. Just like this. And now when we preview, it will work fine. Now when I try to click and drag, still nothing happens. Well, we have just added a

happens. Well, we have just added a cursor for now. We have not added that drag effect to the character yet. So

let's go back, select the character and add that drag effect right from here.

Let's keep the settings as is. And let's

preview. Now I can hover on it and it says drag me with hand icon. And then I can start dragging and the character drags and the cursor also changes to that pressed variant. Let me hide this

yellow cursor outline so that you can see much easily. Now look at that. This

is looking beautiful. So this is a very creative thing that you can do in framer. Actually when I drag down here

framer. Actually when I drag down here you can see that the fading effect goes away. So let's actually do one thing.

away. So let's actually do one thing.

Remove the mask from the character and apply the mask to the whole hero section and adjust it like so. Let's preview

this. And now it looks much better wherever I drag it to. This is shaping up nicely. Beautiful smooth animations.

up nicely. Beautiful smooth animations.

Framer has made it so easy to add effects and animations. You can also do some really really complex animations but we will discuss them some other day.

Ooh, what's that? We forgot to add max width container to these pages. So these

are not aligned. Remember we had this in our homepage. We didn't add this to the

our homepage. We didn't add this to the other pages. So let's go to the contact

other pages. So let's go to the contact page. Select this section and add a max

page. Select this section and add a max width of 1200 pixels. Like so. Let's

preview this. And now it should work.

Let's do this exact same thing for the other pages as well. And add a max width of 1200 pixels just like this. And let's

go to the work page. And same thing, select this work section and add a max width of 1200 pixels. And for the project page, if I can remember

correctly, I think so. I've already

added that max width. And yes, I have added it. Let's preview this. Now

added it. Let's preview this. Now

everything is perfectly aligned. I

noticed that this mask that we added to this hero section doesn't look so nice on the phone view. So, let's just remove that for the phone variant. Let's check

it out now. Let's change some pages.

Looking good. Maybe this drag effect we don't need for the phone. So, maybe we can remove the drag effect from the phone variant just like this. Now, let's

look at another kind of effect or animation which can be achieved through component variants. So let's say that

component variants. So let's say that when I come to this project section and I hover on this card, there should be some kind of indication to tell me that I can click this project. Now there are

million ways to do this. But let's say we want to show view project when I hover on this. So what we can do is go into the component, add a hover variant

just like this. Now first thing I want is an overlay to dim the image and then we can add a view project text on top of that. So let's draw a frame here and

that. So let's draw a frame here and let's put that in here. And remember I told you whenever you put something in primary it also shows in other variants.

Let's put this frame out of this image frame just like this and make it absolute as this is going to be acting as the overlay. Actually let's stack them together and this would be our

image area. So let's rename that. Now

image area. So let's rename that. Now

let's select the frame again and set it to absolute again. Let's pin it to all sides and set it to zero. Just like

this. On the default variant, we don't want to show this. So, we can set the opacity to zero. And on this variant, I want to show it. So, I can override the opacity to 100. Just like this. And

actually, let's change the color of this frame from white to something semi-transparent, black, something like this. You might see that this is showing

this. You might see that this is showing that weird corner. That's because only image has a border radius and not the overlay frame. Well, you could add a

overlay frame. Well, you could add a border radius to overlay just like the image. But a better way is to actually

image. But a better way is to actually remove the border radius from the image and actually add border radius to the containing stack like this and set the overlay to clip. And now it is looking

fine. Now all we need to do is add a

fine. Now all we need to do is add a text here. So let's add a text saying

text here. So let's add a text saying view project. Apply our text style just

view project. Apply our text style just like this. Color can be text on color.

like this. Color can be text on color.

And let's put it inside here. And notice

that it has disappeared. That's because

it is inside the overlay frame for which we set the opacity to zero. Let's align

it in the middle just like this. And you

can see that it is showing it over here as the opacity is 100. Now when I preview this and hover, you can see that the overlay appears and so does the

text. To make it a bit more interesting,

text. To make it a bit more interesting, let's make this text appear slightly from the bottom. So let's select this text, move it down using the keyboard down arrow key. You might not see it,

but it is actually moving down. And the

proof is that this text here has also moved down in the hover variant as well.

But let's just override the position to make it center on hover. And now when I preview and hover on this, you can see that the text slides up just slightly, which looks nice. So this is another way

to use component and states to make animations and effects.

This is looking great. Now there is one more effect that I think so I should talk about that is page transitions. See

when I change to different pages the change is so abrupt. It would look much nicer if there was a smooth transition.

So to add page transitions all you got to do is select this desktop frame on the homepage and you will see this effect option. Click here to add a page

effect option. Click here to add a page transition to all pages or a single page. Let's go with all pages. If you

page. Let's go with all pages. If you

leave default settings and preview it, you can see that when I change pages, there is this crossfading transition. To

make it more interesting, you can go into the transition settings and select from different presets. For example,

this slide left. Now, when I change pages, it will slide in from the left.

One that I particularly like is this wipe up. And on top of this preset, you

wipe up. And on top of this preset, you can also decide how does this page leaves. So for example, you can change

leaves. So for example, you can change the transition basier to something like this and increase the time to 0.8 seconds. And now when you preview, you

seconds. And now when you preview, you have this beautiful wipe up transition with that smooth animation. Let's switch

the theme to dark mode and preview it again. And you can see that the dark

again. And you can see that the dark mode is looking even better, I think. So

we are done with the website. It's time

to publish the website. Before we

publish, there are a few things which are not required to publish, but you should always do those. Go to settings here. First of all, give your website a

here. First of all, give your website a title. This is very important for SEO.

title. This is very important for SEO.

You can name it anything you want. I'm

just going to call it framer tutorial.

Next, add the site language. This is an English site, so I'm going to select English. And here, add a short

English. And here, add a short description about your website. And in

here, you should always upload a favicon and a social preview. These are very important. There are some other options

important. There are some other options in here like setting a password protection or adding Google Analytics and even custom code but let's not do those today. Let's save these changes

those today. Let's save these changes and I think so we are done and now it's time to hit that publish button. And

there you go. It's published. And this

is the URL of your framework website.

Click here to view the website. And this

is looking so good. All the animations are working perfectly. The pages are responsive. It's so good. Let me zoom

responsive. It's so good. Let me zoom out a bit in the browser so I can see more content. And when I click on

more content. And when I click on another page, look at those page transitions. It's unbelievably it's

transitions. It's unbelievably it's unbelievable that you could make such a website within just short period of time. By the way, if you don't like this

time. By the way, if you don't like this URL, Framer gives you ability to add your own domain right from here. Now, if

you are on a paid plan, then you can connect your own domain. If not, you can still create a subdomain for free. for

example, the bold template.framer.ebite.

Now, this URL will take you to your website. Let's try it out. And there you

website. Let's try it out. And there you go. Now, this website is available on

go. Now, this website is available on your custom domain. As you can see up top, I just saw a problem with our phone view in the homepage, which is that this project section is not supposed to be

two columns. So, let's select this

two columns. So, let's select this project section and make it one column just like this. By the way, did you notice that in the live URL, the website is showing in the dark mode? That's

because it's nighttime where and when I'm working and my system theme is set to auto. So, if it's daytime, it's going

to auto. So, if it's daytime, it's going to be light mode and if it's nighttime, it's going to be dark mode. However,

there is a possibility to make a theme switch toggle like I have here on my portfolio website. It is a bit tricky to

portfolio website. It is a bit tricky to do that. We will explore it some other

do that. We will explore it some other day. For now, this website is done and

day. For now, this website is done and dusted. Thank you for watching this

dusted. Thank you for watching this course. As I said, if you learned

course. As I said, if you learned something from this course, please like, share, and subscribe. Learning should be free and I will try my best to keep creating these complete courses for

free. As I mentioned earlier, if you

free. As I mentioned earlier, if you don't want to create website from scratch, you can get this website template from the link below for a very low cost. Or if you want to save tons of

low cost. Or if you want to save tons of time and would like to get a premium portfolio template, check out my esteemed portfolio template which I am actually using myself. Link for that is

also in the description. Now, if you want to support my channel apart from just subscribing, you can join my YouTube membership. This keeps me

YouTube membership. This keeps me motivated to keep creating these free courses. Thank you for watching. See you

courses. Thank you for watching. See you

in the next one.

[Music]