Uh if we decrease the width of the browser window even more this is how will look on smartphones and these buttons also have hover effects so we can see that the.
Color changes of the background so let's go and create this using HTML and CSS let's get [Applause] [Music].
Started all right here I have created this folder called pricing and I just opened it with vs code now let's create the necessary file so let's create a new file called index.html.
Let's create another file called style. CSS and uh in vs code you can just type exclamation and press Tab and you'll have this basic HTML file code let's link our CSS file over.
The design we can see that we have this background color over here and if I zoom out we can see that the content is uh spanning only a Max width of a certain pixels so we have to add another.
Division for the content so let's create a division with the class of content and we will add the background color to the pricing container and uh we will add a Max width for this content now in the.
Content we will have two sections one for the left and one for the right so on the left section we will have this heading and this paragraph So let's create a left section.
And in that let's create an edge2 and uh let's copy this heading from here and let's paste it over here and let's create a paragraph and here let's copy this text.
And let's paste it over here so that's it with the left section so let's go and create another section and let's give it a class of right and in this right section we need.
Posts Related:
- Infographic PowerPoint Slide Design Tutorial
- Types of Transitions with Sound effects in Powerpoint Presentations
- VSTO e07 - Create Custom Ribbon using XML - Dynamic Label
To have these two different plans so
First of all let's open this in our browser and let's see how it looks so here I have installed this extension called live server so if you have this.Installed you can just right click in the stml file and click on open with live server and here we can see that our content is displayed in the browser let's go back to the design and let's.
Create these two different plans so here in the right section for each of these plans let's create a division so let's create a division with the class of card for each of.
Them and uh in the card we need to have the first section over here so let's give it a class of top and for this one we have startup so let's copy this and uh let's paste it over here I just add.
It in normal case we will make it uppercase in the CSS and then the next thing is the pricing so let's create a division with the class of price and in this we need to add the.
Pricing and we also need to add the dollar symbol or whatever currency symbol you want over here so we will add that using a before selector so let's add the pricing and uh after that we.
Need to add this text per month now we need to have a different styling for this per month text so we need to add it inside a span and let's give it a different class so let's create a span.
With a class of per and let's tap per month and here we have the text and after that we need to have these four different points so let's create a division with the class of points and in.
That we will have an unordered list and let's create list items and let's add all these points over here inside the list so I'll just duplicate this three more times and let's copy.
This and let's paste it over
Here and let's copy this let's paste it over here and then lastly we have the last point and let's add it over.Here and then in the end we have this but button with a text of learn more so let's go outside this points Division and let's create an anchor tag and you can add any link you want over here I'll.
Just type hash for now and let's type learn more and uh we'll also give it a class so that we can style it in the CSS so let's give it a class of BTN so that's.
It with the first plan so let's copy this card and uh let's duplicate it one more time and for the second card we need to change the text to Enterprise and here instead of price we.
Need to add this text get a Cote so let's copy this and uh let's add the text over here and here instead of the class price we will add a class of code so that we can style it differently and.
Then we have the points so we need to have these three points so let's copy this and let's paste it over here and let's copy this one and I'll.
Just paste it right here and then we have the last point and then lastly we have another button and here we need to add the text setup a.
Call and uh this button has a different styling so it has a light background color so let's add one more class over here called light and I think that's basically it with the HTML of our design.
So let's go ahead and start styling this using the CSS the first thing we will do is we will select everything and we will type box sizing border box so that we have the correct width and height for.
All the elements and then let's select the body and uh let's set the margin to zero so that the default margin of the browser is removed right now let's add a background color for the main division.
Which is pricing container so let's St do pricing container and let's set the background color to 02304.
7 right now let go and style the content so we have the content division inside pricing container so let's start pricing container content and let's set the font.
Family to popins and sorif and we need to get the font from Google fonts so let's do that and we need to have two fonts we need to have the Roboto font and also the.
Poppins font so here we have the Roboto font for the price so let's select Roboto so let's click on get font and let's go back and let's also search for popins let's select this and uh here we.
Need to have the regular and the Bold versions so let's click on get font and uh let's click on get embed code and here we have the embed code so let's go ahead and uh select import so.
This we can add in our CSS right now we can see that all these different weights have been selected you can also just select the weights you want I'll just select all of these and.
Uh let's go back to our CSS and let's paste it at the beginning right now let's go ahead and uh continue styling the content the next thing we will do is uh we will set the.
Color of all the text to White let's also add a padding of 50 pixels top and bottom and 32 pixels left and right and uh let's set the display to flex so that this content is on the left.
Side and both these cards are on the right side so let's type display of flex and let's add a gap of 30 pixels between the elements and let's type align items to the center justify content to the.
Center and let's add a Max width of 9 00 pixels and let's also bring it to the center so let's Ty margin in line which is margin left and right and let's set it to.
Auto right now let's style this heading so let's type pricing container H2 and let's set the font size to 40 pixels and let's set the line height to.
1.2 and let's add a margin bottom of 0 zero now the next thing we need to do is uh we need to have 1/3 of the width for this section because we have two cards over here so what we will do is we will.
Select the left division so let's Ty pricing container left and let's set the flex to one and now let's select the right division now in the right division we.
Have both the cards so let's set the flex to two so right will have two units of width and the left will have one unit of width right now for the right section we need to to have both these cards one.
Next to the other so here let's type display of flex and let's add a gap of 30 pixels right now let's style these cards so for the cards we have this division.
With the class of card so let's start pricing container write card and first of all let's add a background color of white and let's set the color of all the text to.
Black let's add a border radius which is rounded Corners to 8 pixels and uh let's add a padding of 24 pixels top and bottom 16 pixels left and right now we want both.
Of these to have the same width so let's set Flex to one and let's also make it a display of flex and uh let's tap Flex direction to column and now let go and style this top.
Division so we have this division with the class of top so let's start pricing container top and let's set the font size to 13 pixels let's set the text transform to.
