OK, guys here, which will add to put in so the media, when I read the page, I want to hear a menu
that will give the user a choice to choose between the dark mood and the light mood.
The first thing we can do right here is to go to this party and then we can add here and Denver and
give it a class menu or just that we can give it a class of choice.
And then here inside we can make and another division and give it a class of two choices.
OK, after this part, what we can do is to adhere to the S right here, OK?
And for this one, we can make for where choice and choice.
I want to be having position absolute for the width of one hundred the W and five of one hundred X and
for the background color I want it to be having the background color of black or we can make it six
percent and then here we can just decrease the reporting that first we can reload.
So now we got this for all of the that we can just give it that index of nine to nine.
OK, so now we got here the index again wanted the index or the index.
We can delay this one.
We can't scroll down here, we can see the images, but we don't want all of that.
So this is having the index more than the index of the divisions.
What we can do to solve this part is to go here and add the index with a higher number.
We can give here an index of ninety nine and then we can reload.
So here we don't have the images, neither the images nor the map.
OK, after this part we can just decrease the degree of the plaque.
We can start from here and see what we have now.
We can make it again left before.
I think that's good activist part.
What we can do is to go to the index of esteemable.
And for this one we can go now back to this disaster and make for the two charts
and this one to be having the padding
of twenty pixels, shadow of every pixel for pixels.
So we so off the plank and this one to be having the position.
Thought said, left off 50 percent, top of 50 percent.
And here we can add, transform, translate negative 50 percent and negative 50 percent.
And we talked about this before.
So here we got this at the center and always be at the center.
OK, that is good at this part.
We can give it ground color white.
So you've got the background color all the way.
We will just hear a lot more content to spark the frisking.
We will do right here is OK here.
We can at P give class access with good morning.
And here we can add another one day time or it's let's hope for an example, 18.
Oh OK.
So now we can go and reload.
So here we got this.
We can just make it larger.
We can go to this bar and solve one and left be up to let's see what we have here right now.
OK, that's good.
We can just make it for the text centered.
Senator, let's see what we have here now.
OK, that's good.
We can go here and pile off the weight of Holder and then we can cover this one and apply it also here.
OK, that's good here.
And then what we can do after the start is at a pool, the radius for this thing, we can go to the
seats right here.
And then here we can make the yes, here to be having broader range, uh, let's try the 10 pixels on
that 10 pixels and we can just try to add more padding.
We can add padding of, uh, where to be 30 or 40.
OK, 40 is very good.
And then after this party, we can add a porter.
We can just go here and give and give it a class line.
And with this line, we can go to the system and add some styling like here the line.
This be having background color of black width of one hundred percent of this part.
And I like it.
So let's see what we have here.
OK, now we got this and this is good.
And then we can add margined top and and put Putin we can just go with your margin type of pixels and
margin.
Put them there.
OK, that's good.
After this part we can add two charge here, but first we can add what do you prefer.
We can just go here and add to here.
Yes.
Be with one and stindl phone wait all older and here we can add Athabascan retallack.
OK, that's good.
And inside here we can make what we do or what.
Like what would you prefer and then we can go here.
So now we get what like mood, what you prefer.
And here we want to add two items.
The first one to be for the light and the second one to be for the dark.
We can just go here for this part and here we can make do with class of road and then we can make here
the great system we can make here in here.
First, we can make justified content evenly and align tends to be centered.
No flex both center.
And then here we can just make uh.
OK, let me think about it.
What you can just do here is Devon with class column expects large of four.
We can just make it four column that's large for coal and large for OK column medium all five columns,
small twelve or just let's make it ten and column often.
OK, and we can give here an idea of life and for the other one we can give it for the dark dog and
then he's not here but we can just get it for the put in.
We can add here a button and give it a class of uh, light.
And then inside here we can type light.
No.
And then we can't copy this one and apply for the dog would just be for dog, go here and reload.
So here we go, the light mood and the dark mood.
Let's go to the teeth so we can add some styling for both of them.
We can just go here and add for the light to be having Peg left off Phil's padding right there because
those padding top of Phil's padding put them all in films.
And this to be having quarter of, uh, three pixels solid black and then here to be having background
color.
So we got the light and we can just delete the background color in the background.
So here we have no background.
We can just the phone size.
We can go here and make font size.
Let's try to identify.
No, that's very big.
What about just, uh, 15 or 17?
No, that's not very good.
OK, we can try for 20.
No, no, no.
This is not very good.
We can ask for this one to be five and five.
Let's see what we have here.
No, that's not very good.
It's OK.
We can try four.
Where is it?
It is at the top.
OK, this one here, five,
five, five, four and five.
OK, that's good.
Right now we can just add some margin for this part.
We can go here and add a little margin top.
It feels OK.
We can add more something like fifteen.
Sixteen.
OK, this is good right here.
We can just make it TGP in the past.
OK, after this part we can add the of the radius.
We can just go here and, and look for the radius from here, the radius of five pixels.
OK, that's good.
Now we can infer the dark lord we can just go here and add this one here for the dark, this one to
be having the new quarter.
But the pink from to be black color.
Why we can just go in there and reload.
So here we got for the dark and we can just make the quarter of none because we tried in the quarter
on the picture.
So here we go no further and to be the same and the width, we can just copy this corner.
So now we are equal in width.
OK, that's good.
No, they're not equal because we have to for department and here they are equal.
OK, that's good.
Now it comes with me whenever we go in the next video, we will learn about the OnLoad function because
I don't want this to be up.
You're always I want this to be appearing for the load function.
And when I click on something here, like Dark Mood, like mood, I want it to be disappearing and have
the dark right here.
And also we want to change this one according to the data or the hour, and we want to change this one
to be dynamically added.
We will do that in the next week.
So good luck and have fun.