Then it will be displayed after one day so we're gonna do that using cookies with javascript and this is also responsive so if i decrease the width of the browser window this is how it will look so let's get started right here i have created this folder called model and i just opened it with vs code let's go ahead and create the necessary files let's create a new file and i'll just name it index.html.
And we also need to have a css file so let's create a new file and i'll just name it style.css and we'll also need a javascript file so i'll just name it main.js 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 let's link our css file over here so i'll just type link and press tab and in the extra file just type style.css and here in the body i'll just link the javascript file so i'll just type script colon src and press tab and here i'll start main.js.
Right now let's go back to our design and here we can see we have this background overlay for this model so first of all let's create that let's create a division with a class of model overlay and we will style that using css later all right now for this model we'll create a division with a class of model and in that the first thing we will do is create this shape so we have this background shape over here so for that let's create a division with a class of bg shape and we'll style that using css and then.
We have this close button so let's create a division with the class of close btn and for the close button we need to have this icon so we will use font awesome for that so first of all let's get the cdn of font awesome so you can just google for font awesome cdn and you will find this website called cdnjs.com so let's open that and let's copy the link of all.main.css so let's click on copy link tag and let's go back to our html and i'll.
Just paste it over here inside the head section and now the next thing we need to do is get the icon so let's go to the font awesome official website and here i'll just search for close and here we can see we have this icon let's click on this icon and this is the code that we need to copy so let's click on it to copy it and let's go back and i'll just paste it over here right now let's open this in our browser.
Of left for this left section so here i'll just create a division of the class of left and for the right part we will create a division of the class of right now in the left section the first thing we need to have is this heading so we have this text special sale so let's create an s3 and here let's tab special and then for the next text we need to have sale but this has a larger font size so let's create an s3 and we'll also give it a class so i'll just give it a class of sale.
Text and here i'll just type sale and the next thing we need to have is this text so let's create a division with the class of discount and in that we will have this text over here so we'll create a paragraph for that and here i'll just type save up to and then we have 45 percent so for this also we have a different styling so let's create a class for that we will create a division with a class of discount percent.
And here i'll just type 45 percent right that's it for the left section so here we can see we have all these elements over here now let's move on to the right section so here in the right section the first thing we need to have is this heading so let's create an edge too and we will add the text inside that now here we can see we have this line break after the so for that we'll create a br tag after the and if you go back to our website here we can see we have this heading.
With two lines right now let's go back and the next thing we need to have is this text over here so for that i'll just create a paragraph and i'll just type click below and then we need to have this button so for that let's create an anchor tag and here in the edit you can just add the link of the page for now i'll just type hash over here you can add the link of your product page over here and i'll also give it a class so i'll just give it a class of discount button.
And here for the text i'll just type get discount all right that's basically it with the html of our design so here we can see all the elements are displayed over here now let's start writing the css and we will make it look like this so let's go to our css file and the first thing we will do is style the overlay so for the overlay we have this division with a class of model overlay so here i just type dot model overlay now for the model overlay we need to.
Have the height and the width to 100 percent and i will also set the position to Wesdigital
Fixed so let's type position fixed and we will set the height to 100 viewport height and the width to 100 and we'll set the left position to 0 and the top position to zero and let's add a background color and we'll set it to rgba and here i'll just type 0 0 0 and for the opacity i'll just type 0.4.Here we can see we have this overlay displayed over here and we'll also set the pointer events to none so that all the elements below the overlay can also be clicked so here i'll just have pointer events none right now the next thing we will do is style the model so for the model we have a division with the class of model so let's type dot model and even for the model we will set the position to fixed and we need to bring it to the center of the screen.
So for that we will type top and we will set it to 50 and left to 50 and now we can see that the model starts from the 50 mark so now we need to add a line of code which is transform translate and we need to set it to negative 50 x and negative 50 y now we can see it is exactly in the center now for the model we will also set a z index of let's try 300 pixels and we'll.
Also add a background color and we will set it to white now let's also add a min width and we'll set the min width to 550 pixels and we'll also change the font family to roboto so first of all let's get the link of the font roboto so here i'm in phones.google.com so let's search for roboto and let's click on the font and we need to have three different styles of fonts we need to get the lite.
Version for this text over here so let's select this light 300 and then we need to select the regular version so let's select this and then lastly we need to select the bold version so let's select this right now let's click on this button called viewer selected families and here we have this link which we can copy in our html so let's copy this link and let's go back to our html and let's paste it over here in the head section.
Right now let's go back to our css file and let's add the font family over here so i'll just have font family let's set it to roboto sensor if right now let's add a box shadow so let's tap box shadow and we will add the values 0 5 pixels 26 pixels negative 8 pixels rgba 0 0 0 and 0.3 and let's also add a border radius for rounded corners so let's tap border radius.
And let's set it to 20 pixels right now let's tile this close button so for the close button we have a division with a class of closed btn so let's type model close btn and let's set the position to absolute now this close button will be positioned relative to this model and we will set the right position to 20 pixels and the top position to 20 pixels now for the close button we will set a font size of 20 pixels.
And let's also add cursor to pointer so that when you hover over this we have this cursor and we'll also add a padding so let's type padding and let's set it to 4 pixels and now we can see we have this padding for this close button right now if you go back to our design we can see that we have the left division on the left side and the right division on the right side so for that we need to set the display to flex for the model so let's go over here to the.
Model and here we will type display of flex and now we can see we have this left division on the left and the right division on the right now first of all let's style the left division so for the left division we have a division with the class of left so let's type model left and we'll set the background color to 242424 and we'll set the color of the text to white and we'll also add a border radius so let's type border radius and let's set.
It to 20 pixels and we'll also add a box shadow and let's set the values to 17
Pixels 0 17 pixels negative 8 pixels rgb a 0 0 0 and 0.3 let's also add a padding so let's type padding and we'll set it to 24 pixels top and bottom and 16 pixels left and right and we'll text align everything to the center so let's tap text align center right now let's style this s3 so let's type model left s3.And let's set the font size to 22 pixels and let's set the text transform to uppercase and we'll also remove the margin so let's stop margin zero now for the second heading we need to increase the font size so for the second heading we have a class of sale text so let's type model left s3 dot cell text and let's set the font size to 36 pixels.
Right now let's style this text right here so for that text we have a paragraph and it is inside this division discount so let's type model left discount p and let's set the font size to 13 pixels and we'll set the text transform to uppercase and we'll also set letter spacing of 3 pixels and let's change the text color so just type color and let's set it to e b f 0 0.
And let's remove the margins and we will add a margin top of 32 pixels right now let's style this text right here so let's go back and for that text we have a division with a class of discount percent so let's tile that here let's type model left discount discount percent and let's set the font size to 60 pixels and we will set the font weight to 300 all right so that's basically it with the left section now let's focus on the right section and let's go back to our.
Code and here we can see in the html for the right section we have this division of the class of right so let's target that here i'll just type model right and we will add a padding of 32 pixels and we need to bring everything to the center vertically so let's set the display to flex and we'll also set the flex direction to column and we'll set justify content and center now let's style this h2.
So let's type model right h2 and we will set the margin to zero and we'll set text transform to uppercase and we'll set the font size to 24 pixels now for this paragraph let's change the text color so let's type model right and for the paragraph we have a p tag.
So let's type p and let's set the color of the text to dark gray and now let's style this button so for the button we have this anchor tag with a class of discount btn so let's type model right discount button and first of all let's remove the underline so let's type text decoration set it to none and we will set a background color of ff5555 and here we can see we have a width of 100 so it is because we have set the display.
Of the container to flex so for that we have to type align self and we have to set it to flex start and let's also add some padding let's start padding and let's say to 8 pixels top and bottom and 32 pixels left and right and let's change the color of the text to white and let's set the text transform to upper case and we'll also set the font weight to bold.
And we'll also add a border radius of 20 pixels right now the last thing we need to style is this background shape over here so for that we already have this division with the class of bg shape so let's style that here i'll just type model bg shape and let's set the position to absolute now this will be positioned relative to this model we will set a height of 12 pixels and we'll set a width of 40.
Percent and let's also add a background color and let's set it to linear gradient and we will set it to 180 degrees and for the first color we'll set it to 0 for b 6 c 1 and it is 0 and then we will add a color 0 e 8 a 9 1 and it is hundred percent so here we can see we have this shape let's add a border radius so let's tap.
Border radius and set it to 20 pixels 20 pixels and zero zero now let's position it over here on the top so let's set the top position to negative 12 pixels and let's set the left position to let's try 40 and that looks alright so let's start by creating a media query so let's tap at media and we will set a max width of 600 pixels.
So now when the screen width is less than 600 pixels all the css that we have over here will be added to our website now the first thing we will do is we will place these elements one below the other so this left part will be over here at the top and this right part will be over here at the bottom so if you scroll up and if you go to the model css here we can see we have set a display of flex so let's scroll down and here we will target the model solutions tab dot model and we'll set the flex direction to.
Column and now we can see that these elements are one below the other and if you scroll up we can see that we have set a min width so here we can see we have set a min width of 550 pixels now we need to change this in the mobile version so let's scroll down and here we will just type min width and we will set it to 300 pixels now for the mobile version i don't think that this shape is looking good so if you go to our index.html file here we can see we have added a division with the class of bg shape so that's what we see over here at the top.
So let's hide that in the mobile version so let's type model bg shape and let's set the display to none and the next thing we will do is we will change the color of this close button so for the close button we have this division with the class of close button so let's type model close button and we will set the color of the text to light gray and we'll also change the right and the top positions so let's set the right position to 8 pixels and the top position to 8 pixels now the next.
Thing we will do is we will position these two headings in the same line so if we go back to our index.html file here we can see in the left division we have this s3 with this text special and then we have another s3 with this text sale so what we will do is we'll create a division around this so i'll just call it discount text so just give it a class of discount text and i'll just close this after these two headings and now let's style this discount text so let's go back to our css and here we'll just type model.
Left discount text and we'll set the display to flex now we can see that both these elements are one next to the other we'll also add a gap between them so let's set the gap to 8 pixels and we'll also type justify content to center so that it is in the center now we will have the same font size for these two headings so here we can see we have this s3 and we also have an s3 with a class of sales text so let's target both of these here i'll just type model left s3.
And we'll add a comma and let's tap model left s3 with the class of sale text and let's set the font size to 24 pixels and that looks alright now let's target this paragraph so if you go back to our html file here we can see inside the discount division we have this paragraph so let's type model left discount p and let's set a margin top and let's set it to 20 pixels right now let's style.
This section over here so it has a division with the class of right so let's type model right and we will set a padding of 24 pixels and we'll also text align everything to the center now let's target this heading so in the right division we have an h2 so let's type modal right h2 and let's set the text transform to none and if we go back to our html we can see that we have this br tag over here now if you have a br tag.
It will add a line break to your text so let's remove this in the mobile version so here i'll just type model right h2 br and let's set the display to none and now you can see it looks alright now the last thing we will do is style this button so for the button we have this anchor tag with the class of discount btn and if we scroll up we can see that for the discount button we have set the align self to flex start so that we don't have 100 width for this button but.
For the mobile version we need to have hundred percent width so let's go back and let's target the button so let's tap model right discount btn and let's set the align self to auto and that's basically it with the mobile version of the model now let's add the functionality using javascript now the first thing we will do is display the model after two seconds after the page load so what we will do is we will add a class called active to this model when we want it to be displayed and we will remove the active class when we don't.
Want it to be displayed so let's scroll up to the css of the model and here for the model by default we will set the opacity to 0 and we'll also set the transform translate to a little lower in the y axis so here i'll just type calc and he will type minus 50 percent minus 10 pixels now we'll also set the pointer events to none so that we cannot click on the model when it is not being displayed so let's type pointer events and set it to none and let's also add a transition so that we'll have smooth animation so.
Let's set it to all 400 milliseconds is now let's create the active class so let's type model dot active and when we have the active class we will set the opacity back to 1 and we'll set the pointer events to auto and we'll set the transform translate to negative 50 and negative 50 and we will do the same for the model overlay so if you scroll up we can see this is the css for the model overlay so here we'll just type opacity and set it to zero and here also we'll set the transition.
To all 400 milliseconds is and let's type model overlay dot active and let's set it to opacity one all right now let's add the javascript so if we go back to our index.html file and if we scroll down we can see that we have already linked our javascript file over here now in our javascript we need to access some of these elements from the html so we need to access the model because we need to add the active class we also need to access the model overlay and we also need to access the close.
Button and also the discount button over here so let's reference all of that in the javascript so here let's type const model equals document.queryselector and we have a division of the class of model and let's type const model overlay equals document.queryselector model overlay and then we have the close button so let's type const close btn equals document.queryselector and here we'll start model close btn and then we have the discount button.
So let's type const discount btn equals document.queryselector model discount btn right now let's create a function to display the model so let's create a function called display model now in this function we need to add the active class to the model and the model overlay so let's type model dot class list dot add and we'll set it to active and we'll type model overlay dot class list dot.
Add and here we'll just type active now we need to display this model after two seconds after the page load so let's create a set timeout and for the timeout let's type 2000 for two seconds and here we'll just call the function so let's type display model and now if you save this we can see after two seconds we have the model displayed over here now the next thing we need to do is when we click on this close button or on this get discount button we want this model to be hidden so let's type close btn.
Dot add event listener and we will listen for the click event and let's create an arrow function over here and here we just need to remove the active class from these two elements so let's type model dot class list dot remove active and modal overlay dot class list dot remove active and now we can see we have this model displayed over here let's click on the close button and we can see that the model is hidden and if i refresh this page.
After two seconds we have the model displayed over here we will add the same code to the discount button so let's copy this and let's paste it down here and i'll just change this to discount btn right now the next thing we will do is create a cookie so that once this model is displayed it should not be displayed for a specific amount of time so for that let's create a function and i'll just call it create cookie now to create a cookie using javascript you have to type document dot cookie.
And you have to set it to the cookie so you have to type equals and here you have to add the name of the cookie and you need to add a key value pair so let's name the cookie live blogger popup and we'll set it equal to displayed and then the next thing we will do is add the max age for the cookie so i'll just create a variable for that i just create a variable called max age and we'll set it equal to this string semicolon max hyphen h equals and here.