Design and this is how it looks right now we have written the html and we haven't added any css over here so if you haven't watched this video you.
Can go ahead and watch it i will leave the link in the description of this video and in this video we're going to add the css and we'll make it look like this and.
We'll also add some javascript to hide and display this pop-up so when you click on this close button we can see that the popup disappears and when we click on this display the stats.
Button it comes back up so we're gonna add the css and the javascript in this video so let's get started .
All right this is the progress as of now we have a division with the class of pop-up container and in that we have all these elements now we already linked our css file over here so let's go to our.
And we'll set the background color to edf 6f9 and let's go back to our design and this is how it looks right now we have 600 pixels of width and we have this background color.
Now let's bring this pop-up to the center so for that let's set the position to fixed and we'll set the left position to 50 percent.
And the top position to 50 percent and now we can see that the pop-up starts from the center now to fix this we have to move this 50 percent of itself to the left and to the top.
So for that you already type transform translate and set it to negative fifty percent for the x and the y axis and now we can see that it is exactly in the center now the next thing we will do.
Is we will decrease the width of this chart so let's go back to our html and here we can see for the chart we have this division with the class of.
Chart container and in that we have this Wesdigital
Canvas so let's style this chart container let's go back to our style.css file and here let's type pop-up container.Chart container and we'll set the width to 300 pixels now the next thing we need to do is we need to set this chart and this data side by side so here we can see we have.
This chart on the left and this text on the right so let's do that let's go back to our html and here we can see we have this.
Division with the class of pop-up content and in that we have this chart container division and also this pop-up details division so we will add a display of flex to this pop-up content.
So that both these elements will be one next to the other so let's go back to style.css file and let's type pop-up container and pop-up content.
And let's set the display to flex and let's also decrease the size of this close button so let's go back and for that we have a division with the class of close button.
So let's target that in the css here i'll just type pop-up container close btn and let's set the width to 30 pixels right now the next thing we will do is.
We will change the font of this text so let's go back and here let's type font family and let's set it to railway.
And sensorif and now we need to add the link of this railway font inside our html so here i'm in phones.google.com and let's search for railway.
And let's select this font
And we need to have the bold version and also this i think this is a semi-bold version so let's go back to our phones.google.com.And let's select the phones that we need so we need to have this version right here bold 700 and i think we have this bolt 700 for this text over here.
And for this heading we will have this style over here called black 900 so let's select the style and let's click on this view your selected families and now let's copy.
This link and paste it in our html so let's go back to our html and here in the head section i'll just paste the link right now you can see we have this.
Railway font for the text now let's add some padding to this pop-up container so here let's type padding and we'll set the padding to 8.
Pixels top and bottom and 32 pixels left and right and we'll also add rounded corners so let's type border radius and let's set it to 8 pixels.
And we'll also add some box shadow so let's type box shadow and we'll set the values to 0 4 pixels 20 pixels negative 8 pixels.
And for the color we will set it to rgb a 0 0 0 and 0.3 all right now the next thing we will do is we will style this heading.
So for the heading we have an s3 so here we can see we have this s3 so let's style that here i'll just type pop-up container s3.
And we will set the font size to 30 pixels and we'll set the font weight to 900 and we'll also text align it to the center so i'll just tab text align and.
Center and let's set it to uppercase so let's type text transform and let's set it to uppercase and let's set the color of the text.
To 24213d and let's set the margin to 16 pixels top and bottom and 0 for left and right right now let's style this.
Pop-up details so if you go back to our html we have this division with the class of pop-up details so let's style this.
So here i'll just type pop-up container and let's tap pop-up details and let's set the font weight to 700 and we'll set a line height of 2.
And let's set the color of the text to the same color all right now the next thing we need to do is we need to have this border left over here and we also need to bring this.
To the center so let's do that so here let's type border left and we'll set it to one pixel solid and for the color we will set it to.
9f96f1 and let's also set a padding we'll set a padding left and we'll set it to 20 pixels and now we can see we have this border.
Left over here and let's also bring this to the center so for that we have to type align self and set it to center and now we can see that our text is in.
The center vertically now the last thing we need to do is we need to style this close button now we have to position this close button to the top right over here so let's do that.
Here we have the close button styles let's set the position to absolute and this will be positioned relative to its parent which is this pop-up container over here.
And let's set the right position to 24 pixels and the top position to 24 pixels now you can see we have this button at the correct position and here at the bottom we don't have.
Much padding so let's add some padding over here at the bottom so let's go to the pop-up container and here we'll just type padding bottom and we'll set it to 20 pixels.
Now we need to have a different color for this close button so if you go back to our design here we can see we have this red color over here and it is the same color as this color right here.
So let's change the color of the close button let's go back to our html and here we can see we have added this svg for the close button and here we need to change the color in the stroke.
So let's scroll down and let's copy this color of unity and let's paste it over here let's also add a hash and now we can see we have this red.
Color now we also need to have a hover effect when we hover over this so let's do that let's go back to our css and.
Here for the close button let's add a hover effect so let's type pop-up container close btn colon hover and let's tap transform.
Scale and we'll set the scale to 1.2 and we'll also add a smooth transition so let's stop transition and set it to all 100 milliseconds ease and when we hover over this we also need.
To have the cursor set to pointer so let's do that i'll just set cursor to pointer and now we can see everything looks alright.