All right, everyone.
So now we need to style our select option.
And styling a select option can be quite tricky in cases.
So basically what I have done to save time is I just went to the internet
and see for some style options for styling or select options.
So what I will be doing is I will be simply copy pasting the code
for the select option that I have already written.
So here the select option,
we have the idea of WAC for select option
and I will be simply copy pasting this whole select option code
and I will be pasting it to my
on our original style.
Notice this file that I'm walking with currently.
So let's ascorbate and let's paste it here.
Now let's see what our option is looking like.
Great. So this is looking very nice.
Now we need to style our buttons,
so let's select buttons first.
Now using the idea that we have given to it by dents.
And so we need to give it all margin left and margin tops
for all the buttons because they are attached to the sides and the top.
So let's give it a margin left along form.
And let's see, I may love what should be perfect for it.
I think 20 pixels would be sufficient
and a margin top of them would be sufficient for it.
Now let's see what it is looking like so far.
Great stuff.
Now we need to this align them properly and to align it,
I'm going to use a flexbox layout, so I will making this
whole wave of buttons of Flexbox and I will be spacing them out.
So let's set basically as flags.
And after that we need to justify the content
and we will be doing space around.
So justified content would be space around, space around.
And let's see that isn't
great stuff.
Now we need to
just simply select the buildings and we need to add styles to it.
So basically we have the same styles for all of the three buttons.
So what I will be doing is I will be simply
selecting all three balance B when B using the ities.
So even B and B2B and we have
then P three or the reset button or the said button.
And let me just
first of all, start with the background color of these buttons.
So the background color that I have used as
R has a 70 3ab, so hash
and then 7b38d8.
This is the background color that I have used and so basically
we have a radius for the border as well, and that radius is then pixels.
So a border area is ten pixels, so B
of ten pixels or border radius of ten pixels.
I forget the image for this one as well.
And basically we know that are does cases
and which are quite overwhelming and you can't remember all of them.
So now after that we need to give our border to this in the main project.
Let me show you.
we have double borders for this.
So what we will be doing is we will be adding a border
and the border would be something like four pixels and a double border.
And then on the color for that double border
as well, cc cc, cc. Yeah.
So this is the second double border
and the color for the text inside the buttons would be easy.
So color would be hash e, e, e.
Now let's move to the next line and here
we need to send the text.
So here we need to send our text so I can basically write in text line.
I think that that would be a matter of fact.
But first of all, let me add a font size for our text inside it.
So font size would be font size would be something like one ram.
And so let's see what it is looking like.
And wow, now we need to also add margin.
So margin would be like 0.25 items
for top and bottom and to find names for sites. So
basically I'm saying padding, not margin.
So margin padding would be 0.5 grams
for top and bottom and 2.5
grams for site now.
let's see, what do we have here?
This is looking pretty fine now.
We need to add a translation effect to it.
And basically I have copied this transition in fact from on that.
So the transition effect that we have here is
let me see what transition in fact we have.
So this is the transition effect that we have for the whole option.
So let me just simply cooperate and let's placed it here or pasted here.
Yeah,
so far, so good.
Now we need to add up.
So as pointer for this.
So cursor would be something like pointer.
Now we need to add a whole state for them.
So after we hover the pointer they should change their color.
So the color for the player one and player two buttons are same.
You can see in the main project as well.
The color for they are same and the color for the reset button is red now.
So let me select the player one and player two who was state to player when button
and the state would be over and the player
to button and the state would be hood.
So this would be our
now we need to
first of all change the background color to a color that I have used.
So the color would be color and the color is f837 double F,
So this is f837 double F.
Now let me move on to the next line.
And I think that this is all that I have done.
So now let's add a whole state for the reset button as well.
And I think that we will be done after adding the reset,
after adding the whole state for the reset button.
So let's add the whole state and the background color would be made.
Color B, D, C would be red.
So let me remove this and this would be red.
And let's see our project.
So this is it. This is looking very nice.
So we have done and stammers and says, So now we need to add in our JavaScript
and make it the way we want to.
So now in the next lecture we will be dealing with JavaScript.
So see you in the next one.