I click on this button we can see we have this ui displayed over here and we have this message and then we have all this text over here you can go ahead and change this to whatever.
You want and then you can go ahead and provide the coupon code for your product over here and then we have this button over here and this is also a link so you can just add the link of your.
Product with the coupon code over here and whenever someone clicks on this they'll be taken to that page with the coupon code applied and then we have this close button over here and if i.
Click on that the message goes away so this is what we're gonna design in this video let's get started .
All right here i have created this folder called coupon and i just opened it with vs code now let's go ahead and create our necessary files so let's click on new.
And we also need to have a javascript file so let's create a new file and i'll just name it main.js now let's start with the index.html file now in vs code you have the shortcut.
Where you can just press exclamation and press tab and you'll have this basic html5 code and here i'll just link our css file over here so i'll just type link and.
Press tab and in the extra values type style.css and in the body i'll just link the javascript file so let's type script called an src and press tab and here.
I'll just type main.js all right let's start with this button right here so for that let's create a button tag and for that we will have a class called get discount button.
And in this button i'll just type get discount all right now let's open this in our browser so i have this extension called live server installed in vs code.
So you can just search for live server Wesdigital
And install it and once you do that you can just right click over here in the html and click on open with live server and here you can see our design is.Displayed over here in the browser right now let's write the html for this coupon design over here so the first thing we will do is we'll create a container division so let's.
Create a division with a class of coupon container all right now the first thing we will do is we will create this heading so let's create an h2 for that.
And here let's type congratulations and then we will have a paragraph and here this type you can get and then we have this text for the discount so i'll just create a division.
With a class of discount and here i'll just type 75 percent off and then we have another paragraph so let's create a p tag and here this type.
Here is your code and then we have the code so for that i'll just create a division with a class of code and here i'll just type the code so just.
Type lb save 75 and then lastly we have this button so for that let's create an anchor tag and for the srf i'll just type hash for.
Now you can go ahead and add the link of your product with the coupon code added and we'll also add a class over here so that we can style it in css now for this we'll just give the class of btn.
And here let's type redeem all right let's go to our page and here we can see all these elements now we also need to add this image and this close button and also this.
Background image
Now the first thing we will do is we will add this close button so for that i'll just go to heroicons.com and here you can find a lot of svg files.So i'll just type close and here we can see all these close icons i'll just click on this one right here i just click on copy svg and let's add the svg over here so.
Inside the coupon container let's create a division with a class of close and i'll just add the svg over here right now the next thing we will add is.
This image right here now for that i already have an image inside this images folder and here we can see we have this image for the gift.
So let's add that image over here so here i'll just create an img tag and in the src i'll just type images slash gift dot svg.
And we'll also give it a class so i'll just type class equals and i'll just type gift and then we'll create one more img tag and here i'll just type images slash.
Bg.svg this is for this pg right here and for this we will give a class of bg all right that's basically it with the html.
Now let's go to our css and let's start styling this so let's go to our style.css file now the first thing we will do is we'll just reduce the size of this closed image so.
For that i'll just type coupon container and we have given it a class of close and let's set the width to 24 pixels now the next thing we will do is we'll position all these images relative to.
The coupon container so for that let's type coupon container and for this we will set a position of relative and then for the gift image i'll just.
Type coupon container and here just type gift which is the class that we are given for the gift image and let's set the position to absolute.
And will also position the bg so i just type coupon container bg and let's set the position to absolute and now we can see nothing is being displayed over here because everything.
Is under this bg image now when we add a position of absolute to any of these elements we also need to add some position to the other elements or else they won't be having the correct z index.
So if i click over here and click on inspect and if we just select any of these elements let's select the heading and let's set a position of relative.
Now we can see that the heading is displayed over here so we need to add a position of relative to all the other elements so we have a heading we have the.
Paragraph we also have this discount and the code and also this button so let's go back to our style.css file.
And let's target all of them so just tab coupon container h2 and let's type coupon container p and let's also type coupon container.
Discount and also coupon container code and let's set a position of relative and we also need to add the button over.
Here so i'll just type coupon container btn right now let's add some styles to the coupon container.
So here i'll just type font family and we need to set a font family of roboto so let's type robot over here.
And now let's set a max width of 350 pixels and let's set the text align to center and now we can see that this image has moved to the right so let's go over here.
To this image bg and let's type left of zero and top of zero right now let's go back to the coupon container and uh let's add a background.
Color so i'll just type background and for the color i'll just type a3f9f and right now the background color is not being displayed over here because we have this image on top of all the.
Other elements right now let's bring it to the center so i'll just type margin and for top i just set a margin of 100 pixels and for right i'll just type auto and for bottom i'll just type 30 pixels.
And for left i'll just type auto now we can see that it is in the center now the next thing we will do is we will set the width of this bg image to match with this coupon container with.
So let's scroll down and here i'll just type width of 100 and now we can see we have the correct width for this bg all right now the next thing we will do is we will position.
This close button to the top right over here so here i'll just have position absolute and let's set it to top 16 pixels and.
Write 16 pixels and we'll also set the z index of the close button to something higher so i'll just type two now we can see we have the close button.
Displayed over here we'll also set the cursor to pointer so now when we hover over this we have this pointer right now let's style this heading so.