1

00:00:00,570 --> 00:00:10,560

OK, guys, and here we have with this team up and polishing docked here, we will type at 2pm at 5:00



2

00:00:10,560 --> 00:00:14,270

to get the template off to normal fun.



3

00:00:14,670 --> 00:00:17,490

And this want to be for politician.



4

00:00:18,750 --> 00:00:25,650

OK, the first thing we'll start with is that a relative and how we can use it here.



5

00:00:26,010 --> 00:00:31,020

We can create a devah and give it a class of relative.



6

00:00:32,820 --> 00:00:40,880

And then inside we can just type, uh, something like let's start with the be OK.



7

00:00:41,970 --> 00:00:53,520

And right now we get type something inside like X1 and on and fix it when we go to position us.



8

00:00:53,520 --> 00:01:06,960

But first we need to connect between them, link our L style to and we have to be put in DOT CFS and



9

00:01:06,990 --> 00:01:10,590

then here we can type Fitzherbert.



10

00:01:12,150 --> 00:01:13,320

Let's first reload.



11

00:01:13,320 --> 00:01:20,460

I said OK, we can give it a color of uh uh yes.



12

00:01:21,390 --> 00:01:23,450

Flag and background.



13

00:01:23,460 --> 00:01:26,610

Color of light green.



14

00:01:28,140 --> 00:01:29,160

Let's reload.



15

00:01:29,550 --> 00:01:34,170

We just need to add some padding and also you delete the space from here.



16

00:01:38,450 --> 00:01:50,000

Margin zero and zero, and there's something which we want to make there for the universe and the body,



17

00:01:50,270 --> 00:01:53,380

we can just add a comma here and type body.



18

00:01:53,720 --> 00:01:58,110

So these properties will be added to the universe and the body.



19

00:01:58,610 --> 00:01:59,480

That's right.



20

00:02:00,620 --> 00:02:03,260

OK, so now we have deleted the space.



21

00:02:03,650 --> 00:02:11,070

And to act this, we can just give a position set in.



22

00:02:12,440 --> 00:02:16,210

So now we got this week, but this is not great.



23

00:02:16,220 --> 00:02:18,830

I wanted to be taking one hundred percent.



24

00:02:19,310 --> 00:02:22,950

We can't just get rid of one hundred percent.



25

00:02:23,870 --> 00:02:27,230

So now we got the with the one hundred percent.



26

00:02:27,500 --> 00:02:32,180

So now we know how to solve this problem, but we got no difference here.



27

00:02:32,500 --> 00:02:42,500

That's because we want to add here for the body of this property, which it will be only applied to



28

00:02:42,500 --> 00:02:44,750

the body and not the universe.



29

00:02:45,650 --> 00:02:55,520

In addition to the margin and the bedding here, we can give it a height of two hundred and now when



30

00:02:55,520 --> 00:02:59,570

we scrub, it will be with me when wherever we go.



31

00:02:59,660 --> 00:03:05,390

But we find the position of extending it cannot be with me anymore.



32

00:03:06,140 --> 00:03:09,170

This is the position of fixed.



33

00:03:09,170 --> 00:03:15,830

And the second thing we can apply right here is the absolute.



34

00:03:18,080 --> 00:03:29,600

Let's start with here, Denver class, we kind of give it a class of absolute and then we can type at



35

00:03:29,660 --> 00:03:40,160

one and I am an absolute, absolute position.



36

00:03:42,080 --> 00:03:43,810

OK, so that's perfect.



37

00:03:46,040 --> 00:03:55,310

But there's something here I'm going to show you it, because people coming to this part, this is covering



38

00:03:55,640 --> 00:04:05,300

the absolute when we go and the latest thing that we got, I am absolutely the politician.



39

00:04:05,570 --> 00:04:07,670

We can just come in this part



40

00:04:11,570 --> 00:04:14,800

and we can learn fast.



41

00:04:16,490 --> 00:04:23,030

OK, so here we've got this place and I am absolutely positioned for the absolute position.



42

00:04:23,360 --> 00:04:33,540

We can just go here and absolutely give it the color of one and background color black.



43

00:04:36,620 --> 00:04:37,120

OK.



44

00:04:38,090 --> 00:04:45,620

And after this part, we can give a position of absolute when I get a position of absolute.



45

00:04:45,650 --> 00:04:47,080

Now we got this here.



46

00:04:47,450 --> 00:04:52,490

Now I can control the left and the right.



47

00:04:52,490 --> 00:04:56,440

I'm going to show you how we can give a topic of zero.



48

00:04:58,190 --> 00:05:01,160

So now we got it at the top of the room.



49

00:05:01,430 --> 00:05:06,290

And also I can control the left of center.



50

00:05:08,630 --> 00:05:11,740

But this is not 50 percent right.



51

00:05:12,260 --> 00:05:17,690

There's something which is called transform translate, which we will use very soon.



52

00:05:17,870 --> 00:05:26,950

But when we make the screen larger, OK, and now we can make this to be also 50 percent.



53

00:05:27,940 --> 00:05:30,440

And now we got this here and here.



54

00:05:31,100 --> 00:05:33,170

Let me get a screen larger in here.



55

00:05:33,170 --> 00:05:37,720

Also, we have freedom and right if we wish to add podium and.



56

00:05:37,770 --> 00:05:40,310

Right, let's make the screen larger.



57

00:05:41,360 --> 00:05:47,820

So now we got this here, but this is not centered to make it centered and to make it work.



58

00:05:48,200 --> 00:05:52,010

There is a property which is called Transform Translate.



59

00:05:52,670 --> 00:05:57,830

We can go to our code like maybe screens onto larger.



60

00:05:59,150 --> 00:06:07,070

We can here transform translate negative 50 percent and negative 50 percent.



61

00:06:13,130 --> 00:06:19,820

And very soon we will talk about the transform of scale rotate and all of that.



62

00:06:20,480 --> 00:06:22,190

We can go back to our page.



63

00:06:22,910 --> 00:06:25,710

So now we got this centered on the screen.



64

00:06:25,970 --> 00:06:27,910

This is the absolute position.



65

00:06:28,220 --> 00:06:34,520

Let's just now talk about that relative we can make us want to regain.



66

00:06:36,110 --> 00:06:37,730

And the same is here.



67

00:06:38,940 --> 00:06:42,290

Get here.



68

00:06:43,950 --> 00:06:45,660

Let's come in this part,



69

00:06:48,330 --> 00:06:57,080

OK, the same as here, and then we can create a any death, but I'm going to show you a way to type



70

00:06:57,090 --> 00:06:57,900

the class.



71

00:06:57,930 --> 00:07:03,160

We can just make the class indices as we use just to talk.



72

00:07:03,780 --> 00:07:10,680

So here we will type doctor relative when we click enter.



73

00:07:10,980 --> 00:07:15,360

So here we got to have we have a class of relative after this part.



74

00:07:15,630 --> 00:07:18,860

We can just type here something like that.



75

00:07:18,910 --> 00:07:22,770

Schwann and on and relative.



76

00:07:26,760 --> 00:07:32,760

So with that, the I am relative, we can go to our final



77

00:07:36,120 --> 00:07:48,030

position, let's just ask some tiny, like color of white background, color of red and let's add quarter



78

00:07:48,030 --> 00:07:53,930

five pixels solid of black when we go and reload the page.



79

00:07:54,440 --> 00:07:55,730

So now got a space.



80

00:07:56,070 --> 00:08:04,340

Let's just now try to add position of relative, position of relative.



81

00:08:05,520 --> 00:08:08,800

And now let's try to add the top gun.



82

00:08:09,380 --> 00:08:12,330

I would say about nothing.



83

00:08:12,980 --> 00:08:17,340

That's because it's relative according to this space.



84

00:08:19,020 --> 00:08:26,330

So the screen is starting from here for this position, if I add here, chopped off one hundred percent.



85

00:08:27,660 --> 00:08:29,100

So now we've got some space.



86

00:08:29,550 --> 00:08:34,650

This is the difference between the absolute and the relative to the absolute.



87

00:08:34,650 --> 00:08:37,820

When we type job of zero, it takes me up here.



88

00:08:37,830 --> 00:08:42,300

But for the look for the relative, it's starting from here.



89

00:08:42,870 --> 00:08:48,870

Let's make that with your GPA to one hundred percent.



90

00:08:49,760 --> 00:08:50,640

OK, that's good.



91

00:08:51,270 --> 00:08:55,030

And here we can make the left to be 50 percent.



92

00:08:56,250 --> 00:09:03,440

So now we've got the left of 50 percent and we can try to add a chance to translate if we wish to.



93

00:09:03,810 --> 00:09:06,410

But it's not the discovery right now.



94

00:09:07,590 --> 00:09:10,460

And now this is the relative.



95

00:09:10,860 --> 00:09:15,740

Let's talk about the sticky and how we can use it here.



96

00:09:16,350 --> 00:09:23,640

We can comment this section also the same as we did for the absolute aim to fix that.



97

00:09:24,070 --> 00:09:39,040

And here we can add depth with class at X1 and we can just type checking and actually start let's reload.



98

00:09:39,930 --> 00:09:45,140

We can go now to our CFS and see how we can use this technique.



99

00:09:45,330 --> 00:09:49,650

But first we would get a copy of the text right here.



100

00:09:50,790 --> 00:09:51,510

That's one.



101

00:09:52,350 --> 00:09:56,540

Lauren Zahedan, Lauren, Lauren, Lauren.



102

00:09:58,680 --> 00:10:04,570

Because we need to add some text in order to use a sticky for this part.



103

00:10:04,950 --> 00:10:14,130

Let's go now to the seasons and know how we can use the sticky function right here, working at a class



104

00:10:14,180 --> 00:10:17,440

of to that style and function.



105

00:10:19,110 --> 00:10:29,040

And here we can give it color of, uh, yes, we can give it a line and background color.



106

00:10:30,720 --> 00:10:35,320

OK, and quarter five, petfood fellate.



107

00:10:36,060 --> 00:10:39,570

And for that we can go and reload.



108

00:10:40,080 --> 00:10:43,580

And then we got this, OK, or we can just make it black.



109

00:10:44,110 --> 00:10:44,460

OK,



110

00:10:47,370 --> 00:10:56,050

and after this part we will add the position of taking like a start up here position of text.



111

00:10:58,570 --> 00:11:02,310

OK, we're talking difference, but when we scroll down.



112

00:11:03,480 --> 00:11:05,430

Sorry we something wrong with this part.



113

00:11:05,460 --> 00:11:06,500

So what's the problem.



114

00:11:09,730 --> 00:11:12,640

Yes, it's Teche,



115

00:11:15,520 --> 00:11:17,230

top of the road.



116

00:11:19,580 --> 00:11:28,220

So now we got the job of a zero, so this is the sticky position I've inserted on top of zero, so when



117

00:11:28,220 --> 00:11:34,270

we scroll and go here, it will be taking the job of zero.



118

00:11:34,490 --> 00:11:36,990

We can try to top that.



119

00:11:39,130 --> 00:11:47,270

So now when we go through here, before I reach, let's take a position with 50 pixels.



120

00:11:47,270 --> 00:11:48,870

It will be coming with me.



121

00:11:49,400 --> 00:11:58,610

And when I go back to its original position, it will go back to at that fill about the position and



122

00:11:58,610 --> 00:11:59,840

the next video.



123

00:12:00,020 --> 00:12:01,660

We can just talk about that.



124

00:12:01,760 --> 00:12:10,920

I'm sure we will know how to use that transfer of translate and rotate skill and all of that.



125

00:12:11,390 --> 00:12:13,420

So good luck and have fun.