Will write the html and in the second part we will add the css and make it look like this and in the third part we will make it responsive so that it will look good on a mobile device as well 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 will have this basic html5 code all right now let's link our css file.
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 Wesdigital
And press tab and in that for each of these tables we'll 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 edge too 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 now i'm just going to copy this price from here and we will add this dollar sign using css.
So here i'll just create a division with a class of price and that will add the price right now let's open this in our browser and let's see how it looks so i have.
This extension called live server installed in vs code so you can go ahead and install this and once you do that you can just right click over here in the html and click on.
Open with live server and now here we can see the design is displayed over here in the browser 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 the 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 right now for this best value plan we also have this tag over here called best value so for that we also need to add the.
Image so let's go back and here inside this division we'll 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 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 just changed 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 now in the next video i'll show you how to add css and.
Make it look like this 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.