Html css and javascript so if you want to learn how to design this from scratch you can watch that video i will leave the link in the description of this video and i will also leave the link of.
The source code so you can just copy and paste the code to your website now this is how it works by default we will have this button over here and when i click on this button.
We will have this coupon ui popup displayed over here now you can go ahead and change these messages and all these things over here to whatever you want and then you can.
Add your discount coupon over here and you can add the link of your product page over here in this button and then we have this close button over here and if i click on that we can see that the.
Coupon ui disappears so this is what we're gonna add in our blogger website so let's get started all right this is our blogger website.
Let's click on new post and here for the title i'll just type huge discount or something like that and now here we will add the code so the first thing you have to do is go into.
The html view so it will be in the compose view by default so you have to click on this button and go to the html vive now here we can paste the html the css and the.
Javascript so let's go to our source code and this is the source code of our website so let's copy all the html first so i'll just copy from here and we'll copy it.
Till here and let's paste it inside our blogger post so i'll just go back to a blogger post and let's paste it over here.
Right now the next thing we will do is add the css so let's scroll up and here i'll just create a style tag and here the style tag we will add the css so let's go back to our source code.
And let's go to style.css file and i'll Wesdigital
Just select everything and copy it from here and let's go back to our post and let's paste it over here.And the last thing we need to do is add the javascript so here i just create a script tag so here i'll just type script and close it over here.
And let's go back to our source code and let's go to the main.js file and let's copy everything from here and let's paste it over here inside the script tag.
Now let's click on publish and let's see how it looks and confirm right now let's open this post so let's click on weave.
Right now here we can see we have this button and let's click on this button and we have this pop-up display over here but we have some problems in the design the first thing is that the.
Images are not being displayed over here and the next thing is that we don't have enough margin between these elements over here and the last thing we need to fix is the color of this code so it.
Should be a dark color i think it should be the same color as this text over here all right so let's make those changes the first thing we will do is we will see what's the problem with the margin.
Of this element over here so let's right click over here and click on inspect and here we can see we have this division with the class of discount and let's scroll down in the css and let's.
See what is causing the problem now here we can see we have some default styling for the theme so for the post body we have a line height of 1.6 m so if i remove this line height we can see.
That it fixes the problem
So we have to unset the line height of this discount element over here and then we need to change the color of this.Text over here for the code so here we can see we have this division with the class of code and here we can see in the theme itself we already have some color set over here so we have to add some.
Color to this code division so let's do that in our css let's go back to our post and let's open the post.
And let's scroll down and let's go to the discount so here in the discount we need to set the line height to unset so i just type line height unset.
And then we need to add a color to the code so let's see what's the color of the heading so let's copy this line of code from here.
And let's scroll down and let's paste it over here and now for the images we need to add the svg code inside the html itself so if you go back.
And if we scroll down we can see that we are adding an image tag and in that we are adding the source of the image so we have to remove this line of code from here and we have to.
Add the svg code so let's go back to our source code here we can see inside the images folder we have these two svgs so we are adding the link of those.
Images over here so let's go inside the svg and here we can see the code of the svg so let's copy all of this from here and let's go back and let's paste it.
Over here so this is the code for the bg svg so i'll just remove this line of code from here and paste it over here and then we need to get the svg of the.
Gift so let's go back and let's open the gift svg and let's copy everything from here and let's go back and i'll just delete this line of code.
And let's paste the svg over here now if you go back to our index.html file we can see that we are adding this class called bg for this bg.svg.
And a class called gift for gift.svg so let's go back and let's add those classes so that we have the correct styling so here for this svg i'll just type class and i just type gift.
And then for this svg i just type class and this is the bg so just type bg right now let's update this and let's see whether it solves the problem let's go back to our post and let's.
Refresh this page right now let's click on this button and we still have some problems with the line height of the elements so let's right click over here and click on.
Inspect and what we will do is we will add some default line height so let's select all the elements so here we can see that we have a selector where.
We are selecting all these elements and what we will do is we will add some line height over here so i'll just type line height and let's add a line height of let's say 1.3 or something.
I think this looks alright and the last thing we will do is we will set the position of this coupon container to fixed so right now we can see when we scroll.
Down and up we can see that the coupon container also moves but we want it to have a fixed position so let's right click over here and click on inspect and let's select the coupon container so.
I'll just select this and here instead of position relative i'll just type position fixed and now we need to set the position so i'll just set the left position to 0 and.
The right position to 0 so that it is in the center and we'll also set a top position of i think 30 pixels let's increase it a little bit.
I think 70 pixels looks alright and we'll also add a z index so just type z index and let's set it to some higher value so i'll just type 200.
Now you can go ahead and change these values to your needs right now let's add these changes to our css so i'll just copy these four lines of css.
And let's go back to our css and here for the coupon container i'll just set the position to fixed and i'll just paste the lines of code and we need to remove this position.
Relative from here and the next thing we need to do is add the line height so here i'll just type line height.
And let's set it to 1.3 i think and now we can go ahead and remove this line of code line height set to unset and i think these were all the changes so we had to make so let's click on.
Update and let's go back to our post and let's refresh this page and now let's click on this button and now we can see we have this.
Pop-up display over here and everything looks alright let's click on this close button and we can see it disappears so now you can go ahead and.
Make changes to this data and you can add your code and this is an anchor tag so if you go back to our post here we can see this is an anchor tag you can add the.