How To Design A Responsive Pricing Table Using HTML & CSS - Part 2 BlogSpot

How To Design A Responsive Pricing Table Using HTML & CSS - Part 2 BlogSpot Hi everybody welcome to live blogger in this tutorial series we are designing this pricing table from scratch using html and css and in the previous video i showed you how to write the html and.

This is how our page looks right now now in this video we're going to add some css and make it look like this so let's get started .

All right this is our html and we have 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 send 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 start 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.

• Id Card Maker In Excel (Pro).
• Best Templates Free.
• Jobs with digital Marketing.

I'll just have border radius Wesdigital

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 all right now let's style this 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 two.

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 start 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 zero.

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 0 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.

Right now let's tile 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 column hover and let's set a background color of a b e for ef.

And now if you hover 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 ease 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 we'll set 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.

DISCLAIMER: In this description contains affiliate links, which means that if you click on one of the product links, I'll receive a small commission. This helps support the channel and allows us to continue to make videos like this. All Content Responsibility lies with the Channel Producer. For Download, see The Author's channel. The content of this Post was transcribed from the Channel: https://www.youtube.com/watch?v=VMLSMkEUXYQ