Of our design and this is how it looks right now we have all the components of the website ready and this is our goal so we have this button over here and if i click on this button we need to.
Have this onboarding screen displayed over here and then we have the next steps over here and then we can finish the tutorial so in this video we're going to add css.
And make our design look like this so let's get started right here in the html i have already.
Linked the style.css file over here so let's go to our style.css file and let's start with our css the first thing we will style is this button so if we go back to our index.html file here we can.
See for the button we have this class of onboarding button so let's target that here i'll just type onboarding button and first of all let's give it a padding.
Bold and let's set the background color of this button to e6394 and let's remove the border so i'll just have border none.
And let's set the color of the text to white and we'll also add cursor to pointer so when we hold this we have this cursor so the design of the button is complete.
Now let's start designing the rest of the elements first of all let me add box sizing of border box to all the elements so that we have the correct width and height for all the elements so here we.
Will target the onboarding container division and also all the other elements inside this division so here let's type onboarding container coma.
Onboarding container asterisk so this will select all the elements inside the onboarding container division and we'll set the box sizing to border box.
All right now the next thing we will do Wesdigital
Is we will reduce the height and the width of these images so the images are inside this division with the class of.Image so let's go back to our style.css file and here i'll just type onboarding container image and in that we have the svg so.
I'll just type svg over here and let's set the height of the image to 150 pixels and we'll set the width of the image to 100.
And we'll also add a margin of 32 pixels top and bottom and 0 for left and right right now the next thing we will do is we will style the overlay so if we go back to our index.html file.
Here we can see we have this division with the class of onboarding overlay so if you go back to our original design and if i click on this show demo button we can see we have this dark overlay.
Behind this onboarding screen so let's style that so let's go to our style.css file and let's target the onboarding overlay division.
First of all we'll set the background color to rgba and we'll set it to 0 0 0 and for the opacity i'll just type 0.4.
And let's set the position to fixed and we'll set the left position to zero and the top position to zero and let's set the height to 100 we put height and let's set the width to 100.
Percent so now we can see we have this dark overlay now we don't want to display this overlay by default so by default we will set the opacity to zero so i'll.
Just type opacity zero
And when we click on the show demo button we will display the overlay but right now we can see that we cannot click on the show demo button.So for that we have to set the pointer events of this overlay to none and now we'll be able to click on the button.
Right now when we click on this button we're going to add a class called active to this onboarding overlay so here i'll just type onboarding overlay dot active.
And here i'll just set the opacity back to one and we'll also add smooth transition so i'll just type transition and set it to all 400 milliseconds is.
Right now let's go back to our html and let's add the class active over here for the overlay and now we can see that the overlay is displayed over here all right let's go.
Back to our style.css file and let's continue styling this now let's style this content so if you go back to our index.html file here we can see we have this division.
With the class of onboarding container and in that we have this division with the class of content so let's target this so here i'll just type onboarding.
Container content first of all let's set the background color to white now the color is not being added because we don't have the correct z index for.
The onboarding container so here i'll just type onboarding container and let's set the z index to let's say 300 and if you go over here to the overlay.
We can see that we have set a position of fixed so we need to have some position for this onboarding container so here also i'll just set the position to fixed.
And now we can see we have this background color now the next thing we will do over here is set the font family to roboto so i'll just type font family roboto and sans serif and let's set the.
Left position to 50 and let's set the top position to 50 so that it is in the center so right now it starts from the center so we have to move this 50 of itself to.
The left and the top so for that we have to type transform translate and we have to type negative 50 for the x-axis and negative 50 for the y-axis right now.
It is in the center now let's also add some box shadow so i'll just a box shadow and let's set the values to 0 4 pixels 40 pixels negative 8 pixels rgba 0 0 0 and 0.4.
Right now the next thing we will do over here is we will set a max width for this content so i just type max width and let's set it to 300 pixels and we'll also add a padding.
Of 24 pixels right now let's position all these steps one next to the other so let's go back to our index.html file and here we can see we have this division of the class.
Of steps and in that we have this division of the class of step for each of the steps so let's target the steps division here i'll just type.
Onboarding container steps and let's set the display to flex now we can see all these steps are one next to the other now we need to display just.
One step at a time so we need to increase the width of the steps division to three times the width of its container so here we have to type width.
And we have to set it to three hundred percent and now we can see we have the correct width for all these steps right now let's style all the other elements so.
First of all let's style this s3 so here we can see we have this s3 over here so let's target that here i'll just type onboarding container.
S3 and first of all let's set the margin to zero and let's say the font size of the heading to 32 pixels and let's text align it to the center so.
I'll just type text align center right now let's style this paragraph so here we can see in the index.html file we have this paragraph tag so here i'll just type onboarding.
Container p and let's set the line height to 1.8 right now let's style this button so if you go back to our original design.
We can see for the button we have this full width for the button and since we have added a padding for this container division we cannot have full width for this button so let's go back over here.
To this content division and we will change the padding to just padding top and.
We will add the padding over here for the s3 and the paragraph so i'll just start padding 0 for top and bottom and 32 pixels left and right and we will do the same for the paragraph i'll just.
Type padding 0 32 pixels right now let's style the buttons so let's type onboarding container and for the button we have this.
Button with the class of next btn so let's target that here i'll just type next btn and let's set the width to 100 and let's set the padding to 16 pixels.