So if you think that this is the best plan for most of the users then you can put this tag over here as well so let's see how to design this from scratch using HTML and CSS and then we will see.
How to add this to our blogger post so let's get started I hope created a blank folder called pricing table and I opened it with vyas code so let's go ahead and create the files for our project so.
First of all we need an HTML file so we'll go ahead and click on this button over here for new file and we'll create a file called index dot HTML and we'll create four more file for our Styles.
Soul image styled or CSS so let's start with the HTML envious code we have an extension called Emmet already installed so you can just type exclamation and press tab and you get this html5.
Plans will be inside this division so for each of the plants will have divisions with classes of plan and in that we will have an h2 and for the first plan we have the name basic so.
Let's open this in our browser and see how it looks I have this extension called live server installed on vyas code so I can just open this live on our browser and we can see the heading over.
Here now the next thing we is the pricing so we'll create under division with a class of price and in that we'll type dollar 29.99 and if we take a look at this right here by the.
Way this is also responsive so we can see that when we have lesser width of our browser we have the pricing table vertical right so here we have the pricing and we can see the pricing is.
Written here in big font and then we have per month in smaller font so we need to have a different class for this part right here so let's just add a span for that so it will just type span and.
Posts Related:
- Connecting Your Scenario to Non-Supported Web Services
- FULL VIDEO How To Design Responsive Tabs For Your Website (JS & CSS-only)
- Excel 2021 Power User Tutorial
We'll also give it a class called
Duration and here we'll type per month all right now the next thing we need are the features so these are the features of this plan so let's go ahead and add.An unordered list for that so we'll type ul and we'll also give it a class called features and in that will have some list items first of all we have speed and I'll just duplicate this three more.
Times and I just fill in these details all right now the last thing we need is the button to get the plan so for the button we'll use an anchor tag so that we can send the user to any page we want.
All right so here we will have an anchor tag and a velocity with a class called get plan button and for the s refuge's type hash for now you can just type the page you want the user to be taken over.
Here and inside the anchor tag we'll just type get plan alright so that's it with our first plan so let's copy this whole planned division from here and we paste.
It two more times and let's change some text over here so we have entered all our information over here now the last thing you need to do is to add a class for this best value.
Tag so we have the best value for the gold plan so let's go to the gold plan and for this division will also give a class called best value so you can name this class as anything you want so we'll.
Go to our CSS and style a division with classes of best value and plan so that's basically with our HTML now let's go to our CSS and start styling our page alright so here I am in my CSS so first.
Of all let's target the division called pricing container and for the pricing container we will give a margin of 50 pixels for top and bottom and 0 for left and right so that even if we have some.
Text or some other content on the page
Will have some spacing for this pricing container now I will also give it a font family of Roboto and next we will set the display to flex so this is basically.A way for us to arrange things on our webpage so we can see that when we set the display to flex all our divisions are stacked horizontally now we'll also give it a maximum width.
Of 800 pixels and then we'll also set a line height of 1 now we're sitting the line height over here because a lot of themes may have different line heights so it may affect our design so will.
Override the value of line height for this pricing container now let's move on to the plan division inside the pricing container so first of all we'll text align it to the center and we'll give a.
Background color and we'll set a linear gradient and we will sell it 125 degrees and then we'll have two colors the first one is 3 6 F for de and the next color is 4 0 9 4 d 6 all right now let's set.
Some margin over here for each of these plans so we set the margin as zero for top and bottom and eight pixels for left and right now he just give a background.
Color to our pricing container we can see that the pricing container division has a larger width but these plans are not taking up all the width so for that we have an option called flex and we can.
Set it to a number so if you set it to the same number for all the plans then all of them will take the entire width so now we can see all the width is taken by these plans so let's remove this.
Background color now I will also give a box shadow and visit the Box shadow to 0 4 pixels 16 pixels minus 2 pixels rgba 0 0 0 and 0.4 and we'll also be adding some horror animation so for that we'll.
Just set the transition to 400 milliseconds so we'll have a smooth animation now let's target the edge to inside the pricing container and for the h2 we'll.
Have a margin of 0 font size of 32 pixels padding of 20 pixels and the color of the text to 143 a46 knowledge style the price so pricing container price and for the price we.
Will set a padding of 16 pixels we'll set the font size to 36 pixels and the font weight to bald and the background color to dark gray and the color of the text to light gray now let's style the.
Duration so I'll try pricing container duration and for duration we will set the font size to 16 pixels and the font weight to normal we just give a spacing in between these two so we'll go to our.
Index dot HTML and before the span we'll just give a space and we also have different prices for different plans so for the last one we have a price of 49 and for the gold plan.
We have a price of 99 and it is per year or I so let's go back to our CSS and continue with our styling now let's style the features so pricing container features and the features is basically.
The UL so we'll just set the list style to none so we'll just get rid of these bullets and then set the font size to 20 pixels and a padding of 0 and the color of the.
Text to 1 3 1 3 1 3 and let's style the list items inside features and we'll give them a margin of 16 pixels top and bottom and 0 for left and right now we'll style the button so pricing.
Container get plan button and first of all we'll remove this underline from here so we set the text decoration to none and then we'll set the color of the text to 2 to 2 and we'll give a margin.
Bottom of 24 pixels and the margin bottom is not being applied to our anchor tags that's because anchor tags are basically inline elements so we'll just set the display to inline block all.
Right so now we can see we have the margin so we'll set the background color to transparent and we'll set a border of 2 pixels solid and we'll give it a color of - 9 - 9 - 9 and let's give it a.
Border radius of 8 pixels and padding of 8 pixels and 32 pixels and let's also change the font size to 18 pixels and we'll set the text transform to uppercase and the font weight to bald.
Now we'll be having hover animations for buttons so we'll give it a transition of 400 milliseconds for smooth animation now we also need to give a best value tag over here for the gold plan so if.
You go to our index dot HTML for the gold plan we have already given a class called best value so here we will type pricing container dot plan dot best value and this will target a division.
Which has classes of both plan and best value now we'll use a pseudo element to add the tag over here so we'll use the after pseudo element so for that you have to type colon colon after so here.
You have to type content and here you have to type the content so I'll just type best over here so now we can see best is being written over here after the element now don't worry about the.
Positioning because we'll set the position as absolute so we can position it anywhere we want so you just type position absolute and we'll set the top two four pixels now here you can see.
That the position is relative to the body and not to this plan division so we'll go to our plan division and here we'll type position relative so now we can see that the position of the after.
Is relative to the plan and we'll give a right position of minus 34 pixels so I have tried and tested different values over here and I came up with this conclusion so you can go ahead and test.
Different values for top and right and set the position according to your needs all right so now if you'll rotate our text so I'll type transform and rotate so we'll rotate it 40 degrees and we'll.
