OK, guys, and now we will add this section to our Web page, so let's go and do it and we can make
a screen smaller.
OK, now make it larger.
Starting from here is OK.
We can go now to the index dot to.
Yes.
Starting from here, we can add a section and give them idea of a pound.
And then after this part we can make d'arvor with class of container and then we can make with class
of throw and as you can see here from the last screen.
Let's make it larger again, sorry, here, this is having the column six and column six until we go
to the small screen, it will be having 12 and 12.
OK, I think you're the smallest having the six all.
So it's OK.
You can see what we can do.
Let's make a larger dinner.
OK, here we can make Jennifer with class of call an act of sex, call them X large six Galán large
sex column, medium six columns, small office six and the rest to be 12.
OK, and answer this part of the crackhead and copy this again and paste, because I think we can use
the same method for the center of this part to make it good and look good.
And then here this is having the glass of lead, which we've added before, which adds
this one, the font size of one point five orien and font weight of one side font weight off three hundred.
We can go here and be and give it a glass of lead and just type who we are.
And then I think here we got the purple light purple note.
So let's say the print here, but we can copy this color because we believe that for this text and then
we can go here and search for purple, purple color, this one, and let's give it a new class for the
purple light color of this color.
And then we can go back to the index, stood at temple here and give it a class of purple light.
We can now go and reload.
OK, that's good right now here we've got a different bit drunk to her, just let me up and inspect
and get the color of the background, OK?
And not sorry, sorry.
And here we got the row and container, this background color.
You can just come this background color and paste it inside the seats right here and just give it gas
light or just big
p.g.
Why it's OK.
And I'll this and make background color of this color and then we can go here and add a glass of white.
Now what we have right here,
OK, I think we got no difference.
What is that.
All right.
So what's the problem here.
Let's try again with a spark that can cut this part here.
Yes, we already have it.
OK, it's here, as you can see here, we can zoom in and you can find it here when we scroll.
OK, that's good.
And it's ending here, OK, after this part, we can go here and add some padding.
We can go here and we can scroll down about and inside that room, we can give a so of pixels to be
having padding in all directions.
OK, that's good.
And after the start, as you can see from here, we will add this text.
We can just go to the index to it.
And here this is having the F as of three.
We can make a copy with class F of three and then we can close it and give it a class of purple and
then we can copy this text to paste it in five here.
Based, let's see what we have here inside our Web page.
OK, so basically the last thing we will add here is the.
We can just go here, make a great effort from nothing and class of potent purple, and then we can
type here something like check our designs.
And then for the Rintaro Rintaro, we can make a left arrow if we wish so we can go here.
We get something wrong.
Yes, they have to be here.
We just need to apply to the whole function for this part so we can just go to the S and see what we
can do.
We can make Cuma now.
We can cut this part and paste and start to take.
And then after this started, we can where is this?
Yes, I will lead the first right here I'm sorry, I've edited before myself and now it's also working
great.
Let's test it here, OK, no problem with it.
I'm sorry.
It's making a problem here.
OK, it's OK.
And then after this party, we can just go here and see what we can do.
We can cover this part.
Yes, we already have it for John need.
You can see now what's going on.
So here we got this overfunctioning function we just need to make here that's about to be having the
transition when we go back.
OK, that's good.
And after this part, we need some margin here.
We can go to this far.
To where?
Yes, scroll down.
High powered and inside the glass row inside and three to be having the margin.
Put them like say that for six months.
Yes, more than margin.
Put them and not job.
So here we get some margin and also the A function then.
Now, as you can see from here, we will add the image and this whole function.
Also, we can go here and up the index of Acharn L, I imagine with a source about Dot GPG, you can
it can already find all of the source could attach it to the first article of this section and here
we can give it a class, uh, image light and now we can up in our file here.
So now we got this.
We just need to make a line items to center.
We can go here and make Philips Center.
So now we got the Flex Book Center.
The next step right here is to make this with a hover function.
We can update the system or we can just give it a class of image over scale because we will need it
many times.
We can go now to the title the as I at this to be having the transition of a one point one five seconds
and then we can cover this part basic here, but this one to be for the whole function.
Now we can make this to be having that transformer translate sorry, scale of one point one and now
we can go and with our white page.
So now we've got this whole function and we've got no problem with it.
This is working perfect.
OK, ok, OK.
And also we got the background color.
OK, that's good.
After this party we got the problem now.
OK, so now after this party let's see that, let's check that everything's OK for the small screen.
OK, this is the small screen when we go smaller again.
Yes.
We got the problem here I think.
No, no, no.
No problem.
Yes.
Get a problem here.
So we need to set a medium for margin for this part.
We can just go to the input so that lnc the great system we will make from yes.
The actors move on table until we reach the small screen.
We can just go here, add a new medium which we did add before minimum or project.
We can just mix cream and max with five seven five point ninety eight pixels, we can have a crack right
here about it inside a glass of room and inside at excited to be having margin up of pixels.
What about now.
So now we've got some margin.
Let's make it seventy two.
We can see some difference.
OK, that's good.
We can cut this much and put it with this one here and we can just copy both of them and make it, make
them at home so we can find them together.
OK, that's good.
Now we can make this text center, but I think it's OK like that.
We don't we know how to.
Let's try again.
We didn't cover this class and here deluded it, just make your tax cut align to the center.
So now we got this sentence, we can keep it centered.
It's OK.
This is good because we are testing and we want to know the C elements.
OK, that's good.
Let's up in to inspect.
There's another big problem.
Might be where this text prevented.
We can just make overflow.
Excellent.
You hate it, but we will make it at the end to make sure that we got no problem with the responsive
design.
And also we may have a problem here.
No, we got no problem.
OK, this is good.
OK, that's perfect.
And now we are done from this part and also made it responsive.
We just need to check the response design.
In the next year.
We will add this part.
It's OK.
Let's now check the responsive design of this section.
We can up in the back right here and see what we can do.
OK, let's start from the beginning and then we will test for each one hundred pixels.
Is it OK and starting from here.
OK, and we got this over.
Perfect.
OK, we get this text covering, but this is not a problem, we can just change and.
The Great Satan, if we wish to, and then for the screen, no problem with it.
OK.
And now for the screen, OK?
OK, that's good.
Good again.
OK.
Six hundred pixels.
Also gauge for the 500.
OK, good for the 400, Alcibiades, 300.
Very well.
This is not a problem.
OK, and OK, that's very good.
If you wish to delete the problem, you can just go and delete the arrow.
If I go and leave the area, we will be having a problem that we were to move this hover effect.
Yes, here we load.
So now we've got the problem with check our designs because of the padding.
Maybe.
I think we can just go here.
You can't sit back and then we can go to the toilet, says, let's see here.
The purple we can put in purple and go here that this green and this won't to be here in just 20 and
20.
We can go here every we load.
So now we got no problem with responsive design of this one.
We just have with the hopper, we can go and the creative team, let's make it to 15 and 16.
The game, and we can believe this, this one to be zero zero right now.
OK, so now we solved the problem.
OK, that's good.
But also no problem here with the response, the design of the problem.
And now forward for the two hundred pixels.
There's another problem.
There is no screen with this, which is the last one, which is one five zero pixels.
The problem is with this one.
So now this page is very responsive.
In the next video, we will add this page, this section we just need to add here some margin.
We can go to the scissors or we can just make this smaller from here.
Make it larger.
And here we're about to talk, and from here we don't have to be on top of, uh, let's say 35 five,
so it's OK.
And then here we got some options.
And also we have the pink brown color.
OK, that's good.
So in the next video, we will add a new section, which I told you about.
Good luck and tackle.