Completely responsive and then in the end i will also show you how to add this pricing table to your blogger website and i will also leave the link of the source code in the description of this video so let's get started right here i have created this folder called responsive pricing table and i opened it with vs code and i also have a folder called images over here and in that we have this icon so it is this icon over here.
All right so let's start by creating the necessary files so let's create an html file so let's click on new file and i'll just name it index.html and let's create another file and i'll just name it style.css and 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 all right now let's link our css file over here so i'll just type link and press tab and here the sr file is type style.css now for this design we're.
Going to use a font called railway so let's get the link of the font right here i'm in phones.google.com and let's search for railway and let's click on this font and we need to have three styles of this font so here we can see this is the first style and then we want to have this regular style and there's one more style over here for semi-bold so let's go back and let's select the regular version and let's scroll down and let's also.
Select the bold 700 and i will also select black 900 right now let's click on this icon to view selected families and let's copy this link from here and let's go back to our html and i'll just paste it over here in the head section right now let's start with the html of our design now let's create a division to contain everything and we'll give it a class of pricing table container so i'll just type dot pricing table container.
And press tab and in that for each of these tables will create a division with a class of table so let's create a division of the class of table now the first thing we need to have in this table is this heading so let's copy this and let's go back over here and let's create an h2 and i'll just paste the heading over here and then we will have a paragraph and in that we will have this text over here so i'll just copy this from here and i'll just paste it over here and then we need to have this price.
All right let's continue writing the html so the next thing we need to add are these features so let's go back over here and let's create a division with a class of features and in that we'll create a ul now in this ul or another list we will add some list items so let's type li and in that we will add the first feature over here i'll just copy this and paste it over here and let's duplicate this two more times and then for the next feature i'll just copy this from here.
And paste it right here and then lastly we have this feature over here so i'll just copy this and i'll just paste it over here and then the last thing we need to have is this button called choose plan so i'll just go outside the ul and i'll just create an anchor tag and for the edge of i'll just type hash for now and we'll also create a class called btn so that we can style it later in the css.
And here i'll just type choose plan and now here you can see we have all these elements over here all right now let's write the html of these two remaining tables over here so i'll just copy this table from here and let's paste it down here i'll just paste it two more times now for the second table we need to have a different styling so for that we need to add a unique class so let's go back over here and for the second table let's also add a class called best value.
And then for the plan we will type premium so i'll just copy this and paste it over here and i'll just copy this text from here and i'll just paste it over here and then for the pricing we have 49.99 and we'll just change the features over here we have 110 and phone support all right now for this best value plan we also have this tag over here called the best value so for that we also need to add the image so let's go back and uh.
Here inside this division will create a division with a class of tag icon and in that we will have the svg so let's go back to our file manager and let's go to images and let's click on this svg file and i'll just copy all this code from here and let's go back to our html and i'll just paste it over here inside the tag icon and we also need to have the text best value written over here so for that before the svg i'll just create a span.
And we'll give the class of tag text and here let's type best value Wesdigital
Or that's it with the best value table right now let's scroll down and we have this last table over here and let's update the values so i'll just copy this professional and paste it over here and i'll just copy this text and paste it over here inside this paragraph and then for the price we have 99.99 and i'll just change these features over.Here and that's basically it with the html of our design so let's open the browser and let's see how it looks so here we can see all the elements are displayed over here and we also have this image so everything looks alright all right this is our html and we already linked our css file over here so let's go to our style.css file and let's start styling this page now here we can see in our html we have this division with the class of pricing table container and in that we have all.
These tables so let's go to style.css file and let's type dot pricing table container and let's set the font family to railway and sign serif and if you go back to our design we can see that all these tables are one below the other now we want them to be one next to the other so for that we have to type display of flex and now we can see that all these tables are one next to the other all right now let's bring everything to the center so let's go back and here we just type.
Justify content and center now we will also add some margin to the top and to the bottom so here i'll just type margin and for top and bottom i'll just type 30 pixels and 0 for left and right and now the next thing we need to do is all these tables are aligned to the top so if you go back to our original design we can see that all these tables are aligned to the bottom so let's do that so for that you have to type align items and set it to flex end and now we can see that all the tables.
Are aligned to the bottom right now let's start with the styling of the tables inside the pricing table container so if you go back to our html we can see that we have this division with the class of table so let's style that so here i'll just type pricing table container table and we'll set the width to 300 pixels and we will set a background color of e2f7ff and let's also add rounded corners so.
I'll just have border radius and we'll just set it to 24 pixels and now we can see we have rounded corners and let's also add some padding so i'll just have padding and for top we will add a padding of 16 pixels and 0 for right and 8 pixels for the bottom and 0 for left now let's add some margin between these elements so let's type margin and 0 for top and bottom and 16 pixels for left and right and now let's add a box shadow so let's.
Type box shadow and we will set the values to 0 10 pixels 25 pixels negative 3 pixels and rgb a 0 0 0 and 0.2 our knowledge style is heading so let's type pricing table container h2 because if we go back to our html we can see that we have created this h2 for the heading so let's set a font size of 32 pixels and we'll set the font weight to 900.
And let's set the color of the text to 204959 and let's also add a padding of 0 for top and bottom and 32 pixels for left and right right now let's style this paragraph so if you go back to our html we can see that we have this paragraph over here after the heading so let's style that so here i'll just type pricing table container p and we'll set the font size to 15 pixels.
And we will set the color of the text to 0 0 1 2 1 9 and let's set a padding of 0 for top and bottom and 32 pixels for left and right now let's increase the line height of this paragraph so here let's type line height and we'll set it to 2 and we'll also remove the default margin so i'll just start margin and set it to zero all right now the next thing we will style is this price so if you go back to.
Our html we have this division with the class of price so let's target that
So here's the star pricing table container price and let's set the font size to 70 pixels and let's set the font weight to 900 and we'll also add a padding of 32 pixels and let's remove the top padding so i'll just type padding top of 0.Now let's set the color of the text to the dark color over here zero zero one two one nine now the next thing we need to do is add a dollar symbol over here before the price so here we can see in our design we have this dollar symbol over here so for that we will use a before selector so here i'll just type pricing table container price column column before and for the content i'll just type dollar symbol.
And we'll set the font size to 32 pixels and let's go back and here we can see we have this dollar symbol before every price now the next thing we will style is this features division over here so let's go back and if you go back to our html we can see we have this division of the class of features and in that we have this unordered list so let's style that so here i'll just type pricing table container features and let's set a background color of.
7dd0ff and let's add a border radius of 24 pixels right now let's style the ul inside the features so here let's type pricing table container features ul and let's add a padding of 24 pixels top and bottom and zero for left and right and let's also remove these bullets from here so for that let's type list style and we'll set it to none.
Now let's remove this bottom padding from here so i just type padding bottom and set it to zero all right now let's style the list items inside the ul so here let's type pricing table container features ulli and let's set a margin of 8 pixels top and bottom and 0 for left and right and we'll also set the font size to 18 pixels and let's also set the font weight to.
700 right now let's add some padding so here i'll just have padding of 16 pixels top and bottom and 32 pixels left and right now let's set the color of the text to the dark color so let's type color and we'll just set it to zero zero one two one nine right now when we hover over this we need to have a different background color so if we go back to our original design we can see that when you hover over this we have this background color and we also have this border left over here when we hover over this.
So let's do that so let's go back and here i'll just type pricing table container features ulli colon hover and let's set a background color of abe for ef and now if you hold over this we have this background color and let's also add smooth transition so let's go back and here i'll just type transition and set it to all 500 milliseconds is and now you can see we have this smooth transition now let's also add this border left over.
Here so let's go back over here and we will add a before element for that so let's type pricing table features ulli colon column before and now we need to set this before element relative to this li so here in the li i'll just type position and set it to relative and here we can type position and set it to absolute and now we can position this before element relative to this li so for the content let's type.
Blank and now let's set the left and the top positions so here i'll just type left and i'll just set it to 8 pixels and top to 0 pixels and we'll set the height to 100 percent and visit the width to 4 pixels now let's add a background color and we'll set it to this dark color over here and now we can see we have this before element over here now we will display this only when we hover over these elements so let's go back and here i'll just type opacity and set it to zero.
And here i'll just type pricing table container features ul li colon hover column column before and here let's type opacity and set it to one and we'll also add a transition for smooth animation as i said to all 500 milliseconds ease and let's go back and now if you hover over this we can see that everything works all right all right now the next thing we will do is we will add this border left over here for these features so let's go back and let's go to the features and here we will add a before element so.
I'll just have pricing table container features colon colon before we will position this before element relative to the features so here i'll just type position and i'll set it to relative and now here we'll just type content and we'll set it to blank and let's set the position to absolute and we'll set the top position to 50 and the left position to zero and let's set the width to eight pixels and we'll set the height to 90 percent.
And let's also add a background color so let's type background and we'll just set it to this color right here right now we can see it starts from the center so for that we have to type transform translate y and set it to negative 50 and now we can see everything looks alright we'll also add a border radius and we'll also set the z index to some higher value so that it will be above the other elements so let's type border radius and set it to 24 pixels.
And we'll also set the z index to let's say 200 and this is how it looks right now let's style this button so let's go back to our html and here we can see we have a class of btn for the button so let's target that so here i'll just type pricing table container btn and for the button we will set a background color of zero zero one two one nine now this button is an anchor tag so.
Anchor tags are basically inline elements by default so we can have problems in margin and padding so let's set the display to inline block and let's set the padding to 12 pixels top and bottom and 32 pixels left and right and let's set the color of the text to white and let's also remove the underlines by typing text decoration to none and let's also set the font weight to 700.
And let's set a margin of 0 for top and bottom and 32 pixels for left and right and let's also add rounded corners so i'll just type border radius and set it to 24 pixels now let's set a margin bottom so let's type margin bottom of 24 pixels right now let's add a hover effect so let's go back and here let's type pricing table container btn colon hover and let's change the background color to zero two to e3f.
And we'll also add smooth transition so i'll just type transition and set it to all 500 milliseconds ease and now we can see we have this hover effect for this button right now when we hover over these tables we need to increase the size a little bit so let's go back and here for the table we will add a hover effect so i'll just type pricing table container table column hover and let's set the transform scale to 1.02 and let's also add smooth transition so i'll just start transition.
And we'll set it to all 500 milliseconds ease and let's go back and here we can see when we hover over this we have this horror effect and now we can see both the basic and the professional tables are looking all right but we need to make some changes to this table right here in the middle so let's do that if you go back to our original design we can see that for this we have a dark background color so let's go back to our css and if you go back to html we can see that for the second table we have this class of best value.
So let's target this let's go back to our style.css file and here i'll just type pricing table container and here we'll just type table dot best value and now let's add a background color of zero nine one four one eight right now we need to change the color of the text of all these elements over here we need to change the color of the heading the paragraph and the price so let's go back and here let's type.
Pricing table container table dot best value h2 and let's type pricing table container table best value p for the paragraph and pricing table container table best value and price and let's set the color to white right now it looks pretty much all right now the last thing we need to do is style this image and the best value text over here.
So let's do that now we need to position this image relative to this table so for that we need to add a position of relative over here in the table best value so let's type position and set it to relative and now let's style this image so if you go back to our index.html file we can see we have this division with the class of tag icon so let's target that here i'll just type pricing table container table best value tag icon.
And let's set the position to absolute and we'll set the top position to negative 22 pixels and we'll set the right position to 22 pixels and now we can see that the image is positioned correctly now let's also position this best value text over here so for that let's go back and let's type pricing table container table best value and for the text we have this division of the class of tag text so let's target that.
Just type tag text and let's set the position to absolute and we'll set the left position to 19 pixels and we'll set the top position to 22 pixels and we'll set the color of the text to white and we'll also set the font weight to 700 and now we can see that it is positioned correctly now let's go back to our original design and we have to change the color of this heading so let's go back and.
I'll just remove this line of code from here for the h2 and i'll just add it down here and for the h2 we will have a different color so let's type color and we'll set the color to 7dd0ff so that's basically it with the css of our pricing table all right this is our progress as of now right now let's go ahead and add a media query so i'll just tap at media.
And we will set a max width of 1000 pixels so now in the browser window is less than 1000 pixels all the css that we have inside this block will be added to the page right now the first thing we need to do is we need to set all these tables one below the other so let's target the container division so if we go back to our html we can see we have this division with the class of pricing table container and in that we have all the tables so if you go back to our style or css and if you scroll up here we can see we have this pricing.
Table container so let's copy this and let's scroll down and let's paste it over here and here you have to type flex direction and set it to column and now we can see all these tables are one below the other now let's bring everything to the center so i'll just type align items to the center and let's also have some gap between these tables so here we'll just type gap and we'll set the gap to 42 pixels.
And now we can see we have this gap between these tables right now let's style the table so let's type pricing table container and table and if you scroll up we can see that for the table we have set a width of 300 pixels so let's scroll down and here we will set the width to 90 percent of the screen size and now if you increase the width over here we can see that it increases the width of the table.
And it sets the width to 90 but we will set a limit to the maximum width so here i'll just type max width and we'll set the max width to 500 pixels and now even if you increase the width we can see that the max width will be 500 pixels right now let's style this heading so let's type pricing table container h2 and we will set a margin bottom of 8 pixels and i will also set a margin top of 8 pixels.
And now let's decrease the size of this price so here let's type pricing table container price and we'll set the font size to 50 pixels and right now we have a lot of padding to the top and the bottom so i just type padding and for top and bottom i'll set the padding to 12 pixels and for left and right we will set the padding to 32 pixels and now it looks pretty much all right we'll also add some styling to these.
List items so let's type pricing table container and features ulli because if you go back to the index.html file we can see that we have this division with a class of features and in that we have the ul and in that we have the list items right now for the list items i just set a margin of 0 and will also decrease the font size and i will set it to 16 pixels and i think that looks all right for a mobile device so this is how it looks for a mobile.