OK, guys, in this video, we will check the responsive design of this part and we will also add this
section, but we will make it with that center and not in this form.
We can just go now to this page and take the responsible line.
We can make it smaller than the Explorer, which is this one right here, OK?
And after this party, as you can see from here, after the explosion, it will be having that width
of one hundred percent.
Let's go to our team balance to what we can add here.
We can add Colombe large three and then with this one here and also here, we can go and reload the
page.
OK, that's good for the large.
Let's go to the medium.
Let's try the scene for the meeting, and if it's OK, we can make it to different one column, maybe
three, and then we can cover this class based here and here.
Let's go and reload our Web page.
OK, that's good.
Until now, when we go to this good.
Until now.
Also, let's go to the smaller and smaller, the small.
We can make it 12.
Let's go to this part and meet Colen mom of a 12 and Colen of 12.
After this part, we can't cover this place that your and your.
OK, that's good.
We're just going to be having some margin put in.
Let's do the margin put in for this part where yes, it's, uh, here we can go his -- right now and
add value or we can just cover this part,
this to be column X like last week, and then we can add it for the media.
This media will be starting from all the screen and max width of the beginning or the end of more than
we can make off minimum width, sorry, or we can make a screen and max, which we can go into for the
width of the screen, we can crawl up here and that.
Where is the media?
This one right here.
So we can just cover this and then go back to the first as part of the bracket.
OK, and this to be a big margin of twenty pixels.
Let's go and see what we have right now.
So you would get some margin.
OK, that's good.
And we got a problem with it.
We can try to make this thirteen.
So it's larger right now.
And we got also this horror effect.
OK, that's good.
After this part, what we can add inside our right page is this one.
So how can we add these icons?
There is a website which is called Seante Also, which is helping us to download or use these items.
You got the script?
Uh, it's, uh, icons.
We can copy it from the demo version.
We can copy you can find it in The Wizard of the video.
And then we can basically inside our indexed estimate, we can pasted here, OK, and then we can scroll
down and let's just think about as first here we got one, two, three, four columns.
We can use column X of two so we can be having some padding and maybe justify content of evenly.
Where is the row?
The row is ending here.
OK, we can together with class of row and justify just find content of even evenly and style with the
margin of pixels.
And then we can type inside, we can dab in the middle class column or large two column two and then
uploads the bracket.
And after this part we can uh, type here on and then we will add I can this kind of text, uh, can
and here we can at P with class of F of two and also purple
style font weight of older and then inside we can type two three to add the number.
We can go and see what we have right now inside the Web page.
So can we get the item.
Let's try to make this FSL one.
OK, that's good.
And after this part, we want to get this item from here and know how we can get it.
We can go to the front of some dot com and search for faith and enter.
OK, we can just take that, we can select the free because there are some probe and then we can just
take this one right here.
You can choose anyone you want loading the Elsom, and then we can just click on this part and it will
be Coupet.
Let's go to our source code and paste instead of this one.
And we can just give it a class.
Let's do a classroom.
And here or the color here, I've got the SVT so we can copy that color.
This is for the other friends, I think.
Or surprize.
I do not remember.
We can't scroll here.
We can just take this one, copy this one, and go to this part where the index attached to and found
this to be having style of color of this color.
We can go now and see what we have inside our Web page.
So here we got this, we can, of course, change it from here, the font size, font size, let's try
to make pixels and go Patkin.
So here we got the 50 pixels.
OK, that's good.
We can just add Martien Putin.
We can go here and add some margin put in for this part and March and Putin off because I think it will
be fine.
We can go back to our Web page, Champix as fine.
And then here we will add this text.
We can make it.
Where here people are fleeing the office mall and they must be having a type of challenge and then we
can cover the same text from here, we can cover this text, OK?
And from here, we can go now to our page and see what we have right now.
Uh, what's the problem here?
We did something wrong.
Yes, we deleted.
Um, I'm not sure what's the problem here.
Yeah, yeah, yeah.
I got it.
Let's just do the same and then go back to the index A..
Oh.
Sometimes it's the language of the Internet that is working great for the icon, but it's OK right now
and then you would get the happy clients after this point.
What we can do is to copy this and four or three times to three and four.
So we got one, two, three, four.
And in this part, we will add some shadow or we can just give it the same shadow we can get here where
the idea of the shadow, we can try to make it here first.
OK, that's good.
We can apply to the rest in.
And then for this is the last one.
No, we got the first one, where is the first one here?
It's here.
OK, so now that's good at this party.
Yes.
Where is I'd like you to leave the file and check it.
Yes, it's here.
We can get everything back and leave the margin.
So now we got this.
We can just edit for the class of margin.
I can.
And then we can go to Ulysses S..
From here,
Marjo put off the chain of pixels and here we got no like.
And then after this part, what we can do is to go here and see what icons we will.
And here we got the new pope.
We can just search here for just click, OK?
And then we can just see what we can take from here, we can take that, we can select the three.
And then at its part, we can take this one right here and then we can change its color from the original.
And fixed, and now we can go here.
Where where the second one, this is the first, this is the second, I can give it a class here of
large an icon, and then we can copy the same styling function from this one.
And through here we will just change the color it would cover and we can't change it from here.
Just search for fill this one here by clicking on control plus F if you are Windows or Linux and Kumite
plus F for the Mac, copy this one and go in there and to an L and pasted here.
We can go now and see what we have inside the web page so we can go here.
What's the problem again.
Yes, it was a like again and then he, we got this book OK, and after this part we can change the
third one.
We can go here, see here this be having for the headphones and so on.
And here you can find also the entry G if you want to edit in the form of image tag.
And then here we can just take this one or this one is OK, is perfect, and then we can click on copy,
go back to our source code from here.
And this third one, we can just paste this to be having a class of margin come and then we can copy
this type of function and paste inside here and we will change the color of this, what we can to the
headphones for film and come this color, go here and we can just pick this color up here.
Let's go and see what we have inside our Web page right now.
We can reload a like a game.
I don't like this.
Like, OK, we can try to add the last one right now.
We can't copy the same end here or we can just change a class margin of icon.
Let's reload in the like.
Done.
Yes.
And then after this part, we will add the last one.
The last one here is for the user friendly, OK, can search for their friendly click enter.
And then here we have the friendly we can click on this one and then we can change its color from the
V click on or we can just make F a U with their friends.
You were their friends.
And then we can go to the U.
The French insert for Phil can tell you this color and go back to the index and.
Oh yes, here and that page.
And now we can go to the index, the best team alongside the web browser and see what we have.
OK, so like a green or ruxton, this to be where I a s and not are f a.
S reloader.
OK, so you got these icons and everything is working fine.
We can just edit the Martian put on, we can go to Tyldum and make this to be twenty
the like again.
But it's OK right now.
We can make the responsible design until it comes OK.
After this part we can make a change.
OK, so here, this is good right now with 15 and then we can go and take the response design.
This is for the exact law and the lorsch when we go smaller than that and.
OK, or we can just go here for the weather if we can make the theme for the last OK, and also for
the maintenance column, go to.
This is the last one.
Yes, sir.
And let's go and see what we have right now.
Uh, no, don't say reload.
OK, let's make this smaller.
No, that's not very good.
We can just make this for the last and for the medium to be five.
OK, five and five.
We can go in reloaded.
OK, so that's good for the meeting, which just got a problem with the icons like and then we can add
more and put them for the media.
This will be starting from screen and the screen, which is the last thing for the medium, which is
nine nine one point nine eight pixels, and then we can check the rest.
This is small for the small.
We can make the same calls, mobile five and then we can cover this one and apply it to the rest.
OK, let's go and reloaded.
OK, that's good, and then we can make Colen five.
It's already here, so we don't need to it after this part, we just need to add some margin right here.
We can go here where you can find make media or we can just cover this one live to be four nine nine
one.
And then here we can start that.
We are where this road, we can just give it an idea of where I come.
And then you can go to the states and add your values and this idea and this would be having a margin
of 10 pixels inside.
And Colefax, like Lord of the Rings, we can reload.
We don't have a margin.
So what's the problem again with this part?
Yes, sir.
We need to check it again.
Yes, yes, you can go again right here.
OK, let's try 20.
So now we don't have the margin, but, um, so we get the same problem again.
We can get this one right here.
We don't have this plus, too, I think.
No.
So what's the problem?
This part we can go to the index at stimulating the problem.
OK, this was the.
And yes, the idea the wrong this to be here in this context sort of tune, and he would got the margin,
we can make this smaller.
OK, we got no small screaming gaine.
We can just make one of 12 for the smallest screen column 12, and then we can cover this face that
it's already there.
They're in there.
And the last one here likes to reload.
So you've got the 12 for the split screen.
We just got a problem here again.
So, yes, it will be starting from here.
Colon, Twelver Colon, 12.
Let's check it right now.
OK, that's good.
And we got no problem with the responsive design.
We can just up in that respect to check everything is OK or not.
Yes, everything is working fine.
And again, no problem with anything inside our Web page just with this one, because the text is longer.
OK, that's good.
And we did all of that.
And the next year we will add this section, make the responsive and we will add a different our function
here.
I want to change the color of this icon when I hope over.
We will know how to make it in the next video.
So good luck and have fun.