We'll so now we type out the CSIS and we style our project, our components.
So first of all, we have to look at the glasses, the class names of which we have given, according
to that on Libyan style.
So as I promised you, we will have the CSO.
We will like not copy businesses and we will Typekit are from scratch.
The first is this app inside which all of this is presented.
So this is the app.
Let us just, first of all, go ahead and file this.
The Mona Lisa inside the app drawer.
We just dial the app.
Glass.
Alright, so here, first of all, we'll do display flags so that it doesn't stretch, so it will be
in order and it will be a little responsive, so it will be display flex if I just see it and just to
go back to the browser so I can see that is a little bit like the gaming order, the big came and a
little bit of order.
So that said, and next us see?
I mean, type of.
You didn't justify the contents to Senator, like we want the content in the center for next week and
do the flex like right now it's coming, not rule like it's coming in one line, as you can see, it's
coming in one line.
So no, but we want it to be in column column wise, so we'll be giving the flex.
Direction that is column.
Let me just see you and let me just take you to the browser.
So right now it came in like in the column fashion.
So.
That school next will be giving the like they are not in the center right now and they are like stuck
to the left.
Will bring it in the center, so we'll use a line items and center.
So I hope this brings in the center.
Yeah, looks like similar to our app.
So next hour, we'll be giving another style that will be because they are a little bit off.
You can see they are like too close to each other, so we'll be giving a little bit of padding.
So we'll be lot of padding will be a top and bottom.
It will be 40 pixels and four left and right.
It'll be twenty four pixels.
So I hope this this makes.
Things a little bit cold.
Oh yeah.
Maybe we see something.
OK.
And next, we'll be giving like the border at the top, so like beautiful border at the top.
The talk would be.
One pixel.
Color and the color would be bank.
I go.
Go ahead.
It is really, really hard for us to see that we have 15 Pixel.
Oh, if I go.
Yeah.
It's there.
So next, we'll be.
Styling the search component for.
So it's like really, really close to the setting.
Most of all, let me just put it up that first of all, let's just type.
We're done with the search name up search.
Wal-Mart is just absurd.
Those formal endoscopy, this to be more precise, you know, so that you don't do any typos because
even if one or even one word is different.
So you are like you see this as will not reflect that.
OK, yes.
So from here, we'll give a margin of four, 17 pixels, maybe.
This is just this is just trying to do things if you like it.
And if you don't just change it, all right.
And now they are a little bit separate.
OK, so now we'll give the styling to the input field, but it's not looking so beautiful right now.
So app and then we'll get input.
And for that, I'll be giving up.
The batting will be six Pixel six pixel is for top and bottom and 16 or 15, maybe four left and right.
So let's just go and see.
If this works.
As of now, I don't think I this to change, but.
Let us see.
And NPR, because I gave just one escort.
See, I told you only one word can make a lot of difference.
Still no change.
And what is it?
For.
So this would be up and put.
I guess.
And if favorite and.
Why am I?
You see, is OK.
OK, OK, OK, now I see I see a change here, but when I go back now, I go to abortions that will
make other changes.
Now we'll give you minimum bit of maybe 200 pixels so that it's like on any device.
There will be a minimum width and we'll give them max width.
Of 100.
You like this?
BW, I'll explain what it is.
With this is change according to the width of the screen.
You know, my own width will change according to the width of the screen.
Like right now, my rate is like I'm using laptop.
And when I turn, I open the application in mobile so that it will be different, so it will be adjusted
according to that.
So as simple as that, so you will see and see the reflected Tunisia.
It does, I assumed it, no, I did not save it.
Now I saved it and you can see it.
There are some changes.
There's not some major change, but still we are in the building process right now.
So next we'll give a foreign size.
Font size of 17 pixels would be good enough.
And we'll give a broader radius.
Mortality is to to make the search box a little cold because the square doesn't look so weird and because
it is better.
This bill beckons.
Now you can see it's a little cold, like the square doesn't look somber, so I made it a little cold,
so maybe we can make it more cold by giving 15 pixels.
Where do you see the pixels would be good?
Yeah, it looks even brighter now.
Now we're going to the next component.
It is, though it is a summit.
This is the summer transfer.
When are we going to stay that?
So for the summit.
Mean, to be giving the class of, first of all, let me see, what does the class mean?
OK, this is absolute.
It's better to copy other than like prevention is better than cure.
Okay, then we'll go to this class right here and we'll style this for styling is just we'll give a
little bit of padding.
First of all, because it's like stuck to the another component.
Padding will be open more than to be six pixels.
Came and left and right, it will be 16 big pixels.
I hope this.
Looks good.
But I'm getting this.
Now you can see there's a little bit of engine component.
All right.
And come back and look at the and properties that is.
One side's.
One sides would be.
Maybe we can give 15 pixels.
But it's better to give like similar to this because they look different, so say 17 would be good.
Seventeen percent would be good.
So you can see.
Our expert on.
Now we'll give the because it's a little bit stuck in the.
On the left, it's stuck like I can too close, who will give a margin all left, so marginal left.
Give it six pixels would be good, I guess.
And we save it.
And you can see that there's a gap the gap between so like looks good.
Next will be giving.
But now we'll be calling it.
So for that, we'll be giving background color would be I personally like green because you can provide
any color here or like it, be green or to save it.
Go back, you can see the button has become green.
And Steve Campbell too, and
we can also give a little bit of spoiler to it.
And the border controls will be defined for.
First of all, I look at the border and it will be.
We can give it out to pixels, which was the dark pixels, and it's a solid border, not like the cartoon
ones and different quarrelling ones, and then color will be green only.
So I don't think that would make much of a difference.
But it's all right.
Next, we'll be having a border radius.
Of course, we want to make it go so.
Border radius would be 15 pixel C, as we have given before.
So, yeah, you can see this.
The button is called.
I don't know why it's not cable, but will make it become a.
So that sort.
Next, we'll be providing the.
Colour, their text, which is inside, so the black is not looking, so for me to provide white color
would be good.
And I'm glad to see.
All those calls.
Now it looks.
Looks a little bit good.
Yeah.
Looks good, and it's not very clickable because we have given the border color also is green and the
color of the component is also green, so that's why we can't see it.
And one more thing this point that is not changing to the people thing like the cursor so that we can
change by giving the property that is going to.
Concern would be.
Find.
All then are gone.
You can see it has changed.
All right, so we have done with like the input component and the button.
So next, we'll be styling this.