And now this is a bit of a special design because I posted my original design on Twitter and I said, Hey, give me any suggestions I can to improve this.

I'm gonna make it story on it tomorrow.

And quite a few people suggested changes, and then one person in particular posted an entire mock up a redesign of it, and it looks amazing.

So I went through, made all the changes that are design is gonna look just like this mock up and it's gonna be incredibly fun to do, so I can't wait to get started now way.

Welcome back to Webb has simplified my name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

So that sounds interesting.

Make sure you subscribe to my channel for more videos just like this one.

And he had started, As you can see on the right hand side here I have the incredible design that was supplied to me over Twitter for this price comparison table and on the left, I have a visual studio code project which just has to spg icons which you confined in the get have repo left in the description.

Or you can go to feather icons, which is where I got these icons from now to get started, we obviously need to create an index dot html file and we could just put exclamation point to initialize it with all the default values that we're going to need.

Now we can just title this as price comparison table just like that.

And now inside of the body, we need to get started by creating the main section for all over content to come inside of.

So it's just creative section.

I'm gonna call it here a class of price comparison because there's gonna be holding our price comparison.

You can imagine this is gonna be a section inside of a larger Web application because obviously, just the price application on its own is not very useful now.

Next thing we need to do is create these columns because this price comparison is going to contain our three columns.

So it's create these were just gonna make them gives.

And we're gonna call them Price column just like that.

So now we have a div with the class of Price column.

You can imagine this left side if here, if I zoom in, this is going to be our main price column we're gonna work on.

And as you can see inside this price column, we have our heading section, which is going to be this dollar sign text month, the name of the plan.

And then we have a divider.

This really light, faint line here you can barely see.

It's a lot more visible in this purple and then below that, all of our futures and our button.

So inside here, the first thing that we need to do is you want to create our price header on this price header is going to contain all of that top information that I talked about.

So it's gonna have this dollar sign and all of this numbers.

So the first thing we're gonna have is our price section, and this is going to be this very top three numbers appear this number dollar sign and the month So inside of here we can just have a dollar sign instead of here.

Obviously, we just put our dollar sign.

The next thing we're gonna have is our number, which in our case is 10.

And then lastly, we're gonna have the per month.

And this is just gonna have slush and O, as you can see here now, if we say that and we open up of life server, you're gonna be greeted with a very ugly rendition.

Never go.

We have this so far, but this is just the HTML.

We're just trying to get this show of our content out before we actually start implementing all of the CSS.

Now, the reason that I put this price section inside of its own div is that we can put it all on the same line and civic and properly style.

Everything inside of here toe look similar.

But outside of that Dave, while still inside of our price header, the next thing we need to do is have the burning for the plan.

I'm sorry.

Plan, name and the plane name for this one is just kind of basic.

Just like that.

And Now this section right here is going to comprise all of our price header information and before we start moving on all the features and the button, I think we should start with CSS for this and try to break it down piece by piece.

So let's create that styles Nazi SS right here.

We want to make sure that we include that source here.

So link and we'll do styles Nazi SS just like that.

One other thing to note is we're actually using to Google fonts for this application.

We're using Lotto and Poppins.

If you go to the Google Funds website and add Poppins and Lotto font, you can just copy this exact code right here.

They'll give it to you on their website and just paste it in.

And then you'll have access to both of these farms for us to use inside of our CSS.

Over here and now, the very first thing I like to do in every single project that I'm working on is to make sure I set the before the after and the all content selector tohave box sizing flips box sizing of border box.

This just makes styling, wits and heights of elements so much easier.

The next thing I want to do is actually we're very lucky and had this nice design guide over here telling us all of the different parts of our application.

So I want to set up some variables for all of these design elements.

Very first thing is our accent color, so we can create a variable called accent color.

And we just want to set that here.

2641 b f f.

Just like that.

Next thing, there's a dark color we don't really need to worry about.

It's just black.

That's easy to remember.

This border of light color is only used in one place.

We don't need a variable saying with his background color, but our fonts over here are used in multiple places, so we can have here a heading funds family, and this heading fund family is going to be Poppins, and we're also going to have here a fallback of Sands.

Serif hopes to serve now, as you see over here, says the body found, is SF Pro.

I ended up going with Lotto because it's on Google funds, so it's a lot easier to use So we're gonna create a body front family, which is going to be blotto.

What about two?

And of course, it's going to have a fallback, which is going to be Sand Saref.

Now, if we jump over back to our design right here, we can see exactly what we need to do and the first thing we want to do a style, our body.

So if we just select our body here, the first thing I wanna do is remove any margin and we have on the body.

And we also want to set the background color to this nice, faded background color.

And if we look here, we have this background color right here, so we can just say that's f ate half nine f b.

And if we save that and go back over here, you see, we have that very faint darkish back on course is very faint off white.

How we could go back and start looking at this again.

And if I zoom out, you'll notice over content is centered inside the page, which is something that I want to do as well.

So we can really easily do that by setting the men with the 100 view with the men height, toe, 100 view height.

This means the body will take up the full height and width of our page.

Then we can set the display here to flex.

We can set the justify content to center and the alliance items into the center.

And now, if we look back over here, you see, our content is going to be in the dead center of our page.

Lastly, all we have left to do is to set our fund family.

And we want to make sure that's our body find family.

And if we do that, you can immediately.

Sarah fund has changed, and it just looks a little bit nicer.

Now, in order to continue styling to make this all look good, we need to make sure that we actually have three different price columns.

So I'm gonna copy this price.

Kahlan, haste it down.

So we have another one and pay Sit down.

So we have one more and let's look back at what the numbers are gonna be.

So this last one is gonna be 50 and this is for enterprise, and this middle tier one is gonna be 20 and it's just hopes pro freshen l just like that.

Now, as you can see, we have all of our different text on the screen.

Obviously, it looks terrible, but we have this price comparison class that we can use that's wrapping our columns toe, actually lay them out side by side so we can select that price comparison and we can change it to display flex, and immediately are contents gonna be lined up side by side.

Next, we could just say that we again want this to be in the center so we'll say justify content center.

But this time we're gonna align our items stretch, and this is gonna make it so that our items are actually going to stretch to fill the same height.

So if one of these is shorter than the other one, they're all stretch out to be the exact same height of each other.

Also, we're gonna set here a wit of 100% and we're also gonna just give a little bit of margin around the sides of one r e m.

And there we go.

That's all we need to do for a price comparison and a lot of these changes we're gonna come into effect were started styling our price calling.

And if you remember right, that is the class that we gave to essentially all the content in each one of these columns.

This is where we're gonna define our background colors, our border radius, all of our spacing.

And the first thing that we can do is we can set the background color toe.

Wait.

Because as you remember, over here, we have a background color of white around this far left one, and we're focusing mostly on this left side because this is going to be our default price column layout.

The next thing we need to do is set up the little bit of shadow that you see around the boxes.

We can do that using box shadow and actually, just copy paste to this directly from you think machine.

Essentially, we have zero outward movement of this.

It's just based around the center.

And then we have a little bit of Blair, a little bit of spread, and this is really faint, dark ish color.

It's mostly transparent, so you won't really see it too much.

But if we look over here, you can see there's just a little bit of a border around here, a little bit of a box shadow that you can see around these elements.

It's nothing too harsh, but it's just there.

The next thing we need to do is start setting up our spacing and allowing these elements to go away from each other, because right now they're just so pressed up against each other on we can do that by setting, Colluded with Patty will say to R E M we're gonna have a nice large amount of space between them.

And already you see there started be padded around for each other.

Next thing you can do is working on a little bit of our fucks box stuff so we can say flex agro is gonna be one, and they'll actually grow to be upwards of their maximum size.

And in our case, we're going to set a max with of 275 pixels now, lastly so that all of these elements are the exact same size.

We can set the flex a basis to zero.

Now that should help make our elements all a similar size to each other.

Lastly, we're gonna set just a little bit of a border radius around these just to give them a little bit of a pop from the page.

So it's a border radius and eight pixels.

It also helps our box shadow show a little bit more around these corners.

If you remember from our design, though, this middle section is purple.

So in order to make that middle section purple, let's change this price calm at another class and we'll just call it popular because this is our most popular design.

So what we're gonna do is inside of here.

We can say dot price column got popular, and then we can define different styles, for example, or background color is going to be our accent color.

Now, if we say that you can see our background color has turned to that purple.

Also, our color inside of here is going to be white.

Since all of our context inside of here is gonna be white.

Text makes it easier to read.

But one thing you will notice is that there's rounded corners on the left and right hand side of these price columns, and it just looks a little bit weird.

We want to make it so that they but right up into this $20 a month professional section.

So to do that, we could just say price column, first, child.

Now we're gonna do this.

First child is this one.

We wantto make the border radius on these border suicide border top right radius, where you're gonna set that to zero.

That'll make it so this corner is no longer rounded.

And if we save that, you'll see that corner is now a quick 90 degree angle, and we'll do the exact same thing with the bottom, right?

Also, we're gonna make sure that we do this exact same thing, but with the last child, which is gonna be the right hand side one.

So we'll say last child.

Except for this time it's going to be the left and the left, just like that.

Now, these borders are completely perpendicular, and we can even see that a little bit more if we change our background color of our body So black.

You see, what we've done is we've just made these 90 degree corners over here so that they bought right up against this.

When we increase the size of this middle section.

Let's put that back to its original color just like that.

Now, if we go back to our popular design down here, we have a few more changes that we need to make in order to make it pop out from all the other ones.

The first thing is, we want to do a slightly different box shadow.

So we're again.

I'm just going to copy this straight from the design.

Do notice this the same box shadow properties up here.

It just has a slightly darker color to it with this slightly more opaque.

And if we say that it just was a little bit darker box shut up.