It looks we can see all the elements are added to our web page now in this video we will style it using css and will make it look like this so let's get started.
all right this is our source code and before getting started with the css i just want to make a correction in the.
Html so if you go back to our website here we can see for the x offset and the y offset we are setting a min value of zero so here we can see in the x offset we have set a min value of zero.
But x offset can also have negative values and so does the y offset so let's go ahead and change the mean value to negative 50 and we'll do the same for the y offset.
We will change this to negative 50 and the blur radius does not have any negative values so everything looks alright.
The h1 so here we can see we have this h1 with this heading so let's target that let's tap h1 and we will set the font family to.
Roboto sensorif and we'll also set the font weight to 100 and let's set the text align to.
Center and here we can see this is our heading now let's style the box shadow generator so if you go back to our index.html file here we can see we have this division.
With the class of box shadow generator so let's target this class here let's tab dot box shadow generator and here also we'll set the font family to roboto.
And sans serif and we will set the width to 800 pixels and let's also add a box shadow and we'll set the values to 0 0 40 pixels negative 8 pixels rgba.
0 0 0 and 0.3 now let's go back to our Wesdigital
Website and we don't have the box shadow added so here we have a typo we need to type rgba right now we can see we have this width.Of 800 pixels for the box shadow generator now let's bring it to the center so let's type margin and for top and bottom we'll just set it to zero and for left and right we'll set it to auto.
All right now the next thing we will do is we'll position all the controls on the left and the result on the right so here we can see we have all the controls on the left and here we have this box.
This code and this generate button so if you go back to our index.html file here we can see inside the box shadow generator we have this division of the class of controls.
And then we have another division with the class of result so let's add a display of flex to this box shadow generator so here i'll just type display of flex.
And now we can see we have all the controls on the left and the result on the right we'll also type justify content to space between and now we can see we have this space.
Between these two elements and will also align items to the center so that they are vertically centered now let's set the box size into border.
Box for all the elements so that we have the correct height and width so we will select the box shadow generator and also all the elements inside the box.
Shadow generator so here i'll just type asterisk and here i'll just have box sizing border box right now let's add some styles to this.
Controls
So for the controls we have a division with the class of controls so let's tap box shadow generator controls.And we will set a padding of 8 pixels and we'll set a width of 300 pixels right now let's tile these headings inside the controls so here we can see we have this h2 for the headings.
So let's type box shadow generator controls h2 and let's set the font size to 18 pixels we'll set the margin to four pixels top and bottom and zero for left and right.
And we'll set the font weight to normal right now let's add some spacing between these groups so if you go back to our html file here we can see we have this division of the class of group and in.
That we have the h2 and the input field the same we have for all the input tags so let's target this group division so here i'll just have box shadow generator controls group.
And let's set a padding of 12 pixels top and bottom and 24 pixels left and right and we'll set a margin of 8 pixels and 0. right now the next thing we need to do.
Is we need to position these two controls one next to the other so if we go back to our html file here we can see for that we have a division with the class of container and in that we have.
These two groups so let's target this container so here i'll just have box shadow generator controls container and let's set the display to flex so.
That the elements are one x to the other and we'll also set justify content to space between right now we can see these two elements are one next to the other right now.
Let's style these sliders and we will increase the width to 100 percent so let's go back and if you go back to our html file here we can see for all these sliders we have a class of control.
So let's target the control class so here i'll just type box shadow generator controls control and we'll set the width to 100 percent.
And now we can see we have 100 width for all these sliders now let's also increase the width and the height of this color so.
For the color we have this input field with a type of color so let's target that here i'll just type box shadow generator controls input.
With the type of color and let's set the width to 60 pixels and let's set the height to 30 pixels and that looks all right right now let's style the result.
Division so here we can see we have this division of the class of result so let's target that here i'll just type box shadow generator result.
And we'll set the display to flex and we'll also type flex direction to column and i will also bring everything to the center so let's type align items to the.
Center and let's also add a padding of 24 pixels and we'll set the flex to one so that it will take up the maximum space it can.
All right now let's style the box so here we can see we have this division with the class of box so let's type box shadow generator result.
Box and let's set the width and the height to 240 pixels and we'll set the background color to white and let's also add a box shadow by.
Default so if you go back to our html file here we can see for the x offset we have a value of zero for the y offset we have a value of zero.
For the blur radius we have a value of six and for the spread radius we have a value of zero and for the opacity we have a value of 0.3 and the color is set.
To black by default so let's go back over here and let's set the values to 0 for x and y offsets and for the blur radius we have a value of 6.
And then we have 0 for spread radius and for the color we will type rgba 0 0 0 and the opacity is set to 0.3 so here we can see we have the box now let's add a margin bottom for this box.
So here i'll just type margin bottom and let's set it to 50 pixels right now let's style this button i will position this button relative to this.
Box shadow generator so for that let's go back over here to the box shadow generator and here we'll set the position to relative and let's go back over here.
And for the button we have a class of generate code button so here just type box shadow generator result generate code button.
And we'll set the position to absolute and we'll set the bottom position to 8 pixels and the right position to 8 pixels so now we can see that the button is.
Positioned correctly now let's add a padding and let's set it to 12 pixels top and bottom and 48 pixels left and right.
And let's set the font size to 18 pixels and let's set the font weight to bold and let's remove the border so i'll just have border of none and let's add a background color of.