OK, guys, and this video, we will add the home section and also make it responsive, the first thing
we can do right now is to go to this part and delete all what we typed inside here.
OK, let's make it here.
OK, as you can see here, the first thing we will start with is adding a tag off section and then we
will add container and then row and then we will divide the page into two columns of the same with.
We can go here, add a tag section and give it an idea of home, because we will add a background image
for it, and then after this part, we can make together with class of container assets and we can close
this tag.
And here we can make the cast of rope, which is having the display a flex and flex wrap into.
Right.
And then after this part inside here, we will add the cones.
We can make Javin with class of Cobden, with a class of cool X X, large optics and also cold.
That's large six.
OK, that's good.
After this party, we can call and go six, call Smol 12 and call off 12.
So for the next X, not a screen X large medium they would be six and four.
The small and the extra small, they will be 12.
And here we will add the class of display four and some colors.
We can go here and one with class of this plane for and then after this party, we can make, uh, we
can just make it from here, OK?
We can't copy this text from here.
You can also find all of the text for this.
We're screwed.
And here based OK, after the SPART, we can go to the source and add a class for this color, which
is purple.
We can go to the pilot sees us down there, you know.
Or we can make it at the bottom here.
OK, here we can type purple to be having the color of hash.
Oh one two nine seven zero.
Sorry, this color, not color.
And then we can go and visit here, hear purple.
Let's see what we have right now inside our white page.
So now we got this.
But this is Polder right here.
We can go to the style system where we can and each has a home which divides your home and things like
that and each one.
And then we can make phone to wait to be polder.
We can now see the polder or we can just make it fold I think will be the same.
Yes, the same.
But it's good right now after this part, what we can do or we can just make it to five five zero.
OK, that's it.
And here we can add this text, which will be having a different color, we can just go to this text
and let's make get with the display five.
We can just go here covid this text this to be displayed for Thatcher because we will add on another
each one right here.
We can go here and each one and give it a class of display five.
And here we can type gray because we will, in fact, a new color right now.
And then we can copy this text from here and pasted here.
If the class is not good, we can change it.
We can go now to the CFF and add the color for this one here for that.
Great to be having the color of that.
Four four four three color hash four four four.
OK, I think this will be good when we go and we load.
No, that's not very good.
What about this color right here.
Yes.
This is navigate this darker and now we can just go to this part and say one.
Let's make this a display of six.
This is better.
And then here we need some margin.
We can go to this right here.
This this to be fixed, to be having the margin top off before it says, OK, good margin.
And actually this part, what you can see from here, we will add this button we can just go to.
Or to this one first, look where instead it's here and we can also go here and at large and put on
up peaks because the margin job are not enabled for the attack.
And here we can add a with nothing class of and purple.
And then after this part, we can just, uh, make here something like the content here and get started
here.
We can get to charge it.
And after this part we can go to our page and see what we have right now.
The first thing we will do is to give it a different background and color and also we will make text
decoration on and add some translation.
So transform property.
As you can see from here, we can make it in the form of Martien.
We can go here and right there.
This is how we type arrows when we go to your game.
OK, that's good.
We can now go to this part of the in purple with be so we can make Putin purple to be having the.
And yes, we can give it a color of Wiveton and then background, color of passion for one five four
four one isn't good.
And here we can give it a book, shadow of zero pixels, five pixels, 30 pixels of our DP, a six five
eight four two four one.
I think we got something wrong.
This part, yes.
Divided by 40 percent.
OK, I think this color would be great, but what wrong with it here?
I think we got something wrong here.
Let's delay this part.
Let's do what we have here first.
OK, now we've got this picture that we got, no problem with it, OK?
And after this part, we don't need the 40 percent.
We can make it by any color we wish to.
We can make purple or just covid color.
And so now we got this.
We can now make this can be 20.
This is better right now.
And at this part, we can add some paintings and margins we can make here, adding left of pixels burning
right off the top 15 pixels and also padding put him off 15 pixels that paint job and put on are very
large.
Let's just send them to seven point five.
Again, seven point five.
Let's see what we have right now.
OK, that's good after this.
But we just need that poder radius.
We can go here and order a radius of four pixels, I think for pixel enough.
Yes, and then here we can just look at what we have here.
OK, here it's larger.
Let's try to make this with 14, 14 and this to be 15 and 16.
I think this would be better right now.
OK, now that's good.
And then we will we want to delete this on under line right here.
We can just sit here, just decoration and turn up.
OK, that's good.
And then add to this part instead.
Can the the size of one of them.
OK, that's good right now.
And after this part we want to start here.
More margin.
We can go here, what, about four to four pixels.
OK, that's good.
And here we can just add that transition.
We can add here a span and then take this one chipping side here.
What about now?
OK, that's good.
And then we can just go to this part and and Putin purple or the whole poem and inside that Putin purple.
And when we come over the Putin purple, I want to change something in the span.
So Putin purple.
And then when I put on purple, we will change something in the span.
And here we can set Margon left of 20 pixels.
Let's see what we have right now inside the Web page.
OK, so here we got the Martin.
We just need to add some timing, something we can make here.
Transition of oil point three seconds or just one point five or four point one seconds and the same
here.
Let's see what we have right now.
OK, the problem is getting back, we can cut this one and yes, we can cover this one right here,
that closure, and then we can cover this one.
Pasting just put in purple and inside at us.
Let's go here.
So here we got some time function to do respond after this one, we need to make this a light center,
but after we add the image, we can go to the index card and check out this one right here.
Where is the closure?
Yes, based on the closure of this division.
And then we can imagine where the thought of this was watching.
Where is the image?
Yes.
We can just that image we have here with image and then we just had a class of image flood, if it's
not already there, it's not there.
The image flight to make the image responsive as we learn it before you mention flight to be having
the width of one hundred percent and then we can go to the index of A.M. and give it a class of Imanishi
and let's see what we have here inside the Web page.
OK, so now we got this.
We can add some padding job and put in for the idea of home.
We can scroll down right here.
Yes.
Starting from here, we can get it home for two 200 bucks and getting put off to five zero pixels.
This would be better than to hide because to hide MacOS problem in the responsive design.
So I always prefer to use bedding job and to calculate the hunt and then we can give it a background
color background in.
Sorry you are l of hero background of PMG background Forsythe's to cover.
I had to learn it before and also background position center and center.
And then I see this part.
We will add something which is called background attachment to sorry background, attachment to everything
and we will know what the background attachment to fix it.
Let's just call it now so we can see the difference.
OK, so now we got this and this is great.
Let's change this one to be one or just one point fifty and one fifty pixels.
What about now?
OK, that's good.
And after this part, we want to make this to be a line item to center.
We can go to the X L and just add inside the row Netflix box of center, which is having this kind of
a line I can call center.
And now we got this center with this Hober function.
OK, that's very good.
And we just got a problem with the response to find out what's the problem here.
Yes.
The larger
fix and large.
It's right here again.
OK, so now we would make the screen smaller.
Let's talk from the beginning right here.
OK, no problem until now.
Can't we just meet here some margette?
In the next year, we will edit the response design, I want this to be centered until we go to the
medium screen or the small screen.
Yes, until we reach the medium screen.
And also I want to get into the margin of this image.
So good luck and have fun.