Will name it index dot HTML we'll also create a CSS file and we'll name it style dot CSS alright let's start with the index dot HTML file then we ask oh do you have this option of just typing.
Exclamation and pressing tab and you'll get this html5 boilerplate code let's link our CSS file over here and let's start by creating a division to contain everything and we'll call it countdown.
Container and in that we'll have a heading with a class of countdown heading and the here we'll type huge discount and then we'll have a paragraph and we'll give the class of countdown.
Details and we'll just stop sale ends in now we need to create the timer so we'll just have a division with the class of timer and in that we'll have a division with the class of number and in that.
It looks so this is a countdown timer as of now and now we need to have 4 of these numbers and units because one is for the days then we have hours minutes and seconds so we'll create a.
Division called days and we will just wrap it around these two divisions and now we will copy this day's division and we'll paste it three more times and for the second division we will give a class.
Name of ours and I will just change this number and instead of days we will type hours and then in the third division we will type the class name as minutes and we'll change this number as well and.
We'll change dates to minutes and lastly we have seconds so we'll change the class name to seconds we'll just type some value over here and here we will type seconds now the last thing we need.
To do is have a button so outside our timer division we will have an anchor tag and we'll give you the class of countdown button and in the ester if you can type the link of your product but.
Posts Related:
For now I'll just type hash and here we
Will type purchase so that's basically it with the HTML of our countdown timer now let's go to our style dot CSS and let's style this page the first thing.We'll do is target the countdown container and we'll give it a background color of B 6 e 8 FF and we'll also give it a padding of 24 pixels and the color of the text to 1 D 3 3 5 7 we'll also.
Change the font family to Roboto sans-serif and we'll set the width to 500 pixels and we'll also set the box sizing to border box so that the width is calculated correctly and then we'll.
Have margin:0 auto to set it to the center we will also give it a box shadow of 0 4 pixels 22 pixels minus 8 pixels RGBA zero zero zero and zero point six now.
Let's target the countdown hitting so countdown container count down heading and for that we will just text align it to Center and font size of 32 pixels and margin of eight pixels top and bottom.
And zero of a left and right then we'll target the countdown details so countdown continue countdown details and we'll set the text align to center now let's style the timer division so we'll.
Type timer and we'll give a background color of 1 D 3 3 5 7 and the color of the text to F 1 F a double e and we'll also give a padding of 16 pixels and displayed to flex so that the items will.
Be one beside the other will set the justified content to space between now we can see that we have even space between each of these elements now I'll text align everything to the right and.
Set a border radius of 10 pixels all right now let's target the number inside the timer so we'll just type timer number and we'll set the font size 256 pixels and font weight to bald and for.
The timer unit we will set the color of
The text to a 8 D ADC now let's style the button so he will type countdown button and will give a background color of DC to e 2 e and we'll set the text.Decoration that is the underline to none and also set a padding of 16 pixels top and bottom 32 pixels left and right and they will set the display to block and also a margin top of 32 pixels and we.
Set the color of the text to F if a double e will also set the font weight to bald and will also text align it to the center now in our original design we can see that the button.
Stretches all the way to the container so if you go to our design we can see that in our countdown container we had given a padding so all the elements inside the countdown container has this.
Padding so if you want to get around the padding and stretch this button to the whole container division then you have to give a negative margin to your element.
So in our countdown container we have a padding of 24 pixels so we have to give negative margins of 24 pixels so here we can see we have a margin top of 32 pixels so we want a margin of 32 pixels.
To the top but for left right and bottom we need margins of minus 24 pixels so just remove margin top from here and here we will just start margin and for top we have 32 pixels for right we'll.
Have negative 24 pixels for bottom we will have negative 24 pixels and for the left we have the same margin so now you can see the button stretches all the way to the edges of the container now I will.
Also have a hover animation so for that we will type can't down button colon hover and we'll change the background color so we'll type background and we'll change the color to e 0 3 F 3 F and.
We'll also add a transition over here to have a smooth animation and I will select the background color and will give a timing of 500 milliseconds all right now when we hold over this we have.
This color changing over here all right so that's basically it with the design of our countdown timer in the next video I'll show you how to use JavaScript to make this work and then we'll also add.
This to our blogger website so that's it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this.
Channel to get the latest video updates thanks a lot for watching have a nice day you.