5.5 Styling the Pricing Tables
In this lesson, you will get started on an interactive pricing table. Using some Bootstrap HTML markup as a starting point, you will jump in and start styling the panel headers.
1.Introduction3 lessons, 07:12
2.Animation Refreshers2 lessons, 15:09
3.Button Animations12 lessons, 1:53:20
4.Image Animations3 lessons, 25:57
5.Other Web Elements6 lessons, 1:07:16
6.Bonus Projects3 lessons, 26:43
7.Bonus Projects II3 lessons, 33:50
8.Conclusion1 lesson, 00:39
5.5 Styling the Pricing Tables
Hello, and welcome back to practical web animation for our final animation project we're gonna be taking something that you see quite often on websites. And that's a pricing table, but we're going to make it stand out a little bit more we're gonna give you the option to choose not based on a radio list. But based on the actual pricing tables that we see so we're gonna be able to click on one of basic packages that show up in these panels. And when we click on it we're going to get some really nice attractive feedback that lets us know that we've selected that particular package. So we can see some basic HTML has already been set up here and we are using bootstrap for this particular Code pen. And if we dip into our settings we can actually see we're using a few different things. If we go to our CSS, we're using bootstrap or also using a Google font called Arvo and then we're also using font awesome. And then, in a Java Script you'll see that we are using jQuery. So you can find the URL for this starting pen In your course notes and once you open that up let's go ahead and create a new fork and we'll get started with that. So as you can see we've already created some basic styles here. Most of the basic styles that you see here are just the default Bootstrap styles for some of these classes for example we have this panel class here. The panel class and the panel default class are both bootstrap classes. The option basic class is a class that I created that we're gonna use to style these three options separately. So we have option basic here and then we go down to the next panel and in that particular panel has a class of options starter. And then our third one as a class of option premium. Inside each of these panels, we also have a div with a class of panel heading, which is what gives it this gray background. That's another bootstrap class there, and then inside that heading we have an H3 this. H three has some text and then inside. A span with a class of price it has some more text. So we're going to as you might guess style this particular piece of text a little bit differently. And so, we've put a class of price on that text and then we have this fun For the check mark next to our text. Then inside the panel body which again is another bootstrap class we have a table with all of the features. And this table uses a class of table which is another bootstrap class that it uses to style these tables really nicely, and so on and so forth. So we have three different panels here and again you can scroll down to see all three of them. But let's get started really styling these up. Right now, as you can see I've add a little padding to the body itself for our h2 element which is this main heading right here. We've given it a fun family of Arvo which is that Google font that we referred to in our Settings and again you can get more information about Google fonts if you go to google.com/fonts. And then, we have text transform uppercase align center with a plate of blue color to it and giving it a little bit of bottom margin and then for the pricing class. Which is basically this entire div of that contains all three of those panels as well as this h2 here. We've given it a width of 900 any margin of zero auto to center it on the page. So let's take this a little bit further and I want to rank these three pricing tables up side by side. So it's going to look a lot like some of the pricing tables you might typically see online, and these are all contained within panels so we might point to the pricing class. And then, inside the pricing class point to our panel class. So again that panel class is a bootstrap class but we can also add more styles to it ourself. And so, the first thing I want to do is to float these items to the left and give them a set width of 300 pixels not 200. Let's do for 300 pixels there we go. And now we could see all three of them lined up side by side, and that's just how I want them. I want them touching. I want them right next to each other, and I also want to take off the border radius that Bootstrap applies to these panels. So for this panel class, I'm also going to add a border hyphen radius property here and set that equal to zero that will sharpen those corners. And then, I want to align all of the text in these panels to the centers we're gonna add a text align property here and give it a value of center. So that gets our layout about where we want it. Now I want to start styling some of the text and some of the colors and things like that. So by default, our bootstrap panel heading class gives this particular div a light gray background. And what I want for this class is I want a little bit of white around the edges, and then I wanna blue background on it. And so, to get those white edges, I'm actually gonna give this panel heading And again, that panel heading is this div right here that contains our h3. I'm going to give that panel heading a white background and a little bit of padding, and then we'll give the h3 inside that div a blue background and we'll make sure that it takes up most of the space. So there's going to be a little bit of white around the edge with the blue background in the middle. So let's jump into the Panel heading class let's skip a couple lines here and point to .panel-heading. And here I'm going to give it just a little bit of padding we're going to get two pixels of padding and we're going to change the background color to white. Now sometimes when you're changing the look and feel of a component in Bootstrap. Whenever you apply a background color or something like that it doesn't always take immediately. And in order to get around that we need to make sure that we're being as specific with our CSS rules as Bootstrap is. And there's only a couple ways that we can really find out how specific Bootstrap is being with that background color rule. And the easiest way to do that is simply to right click somewhere on that element. And click on Inspect and I'm using Chrome here to do this. So, when I click on Inspect, I can click on any of these HTML elements to see the CSS rules fort, and I'm looking for the panel heading here. And if we come over here to the right under the styles, we can see that background color being applied to panel heading and then just beneath that we can see our own rule. Where the background color of white is being crossed out, which means it's being overridden by this bootstrap rule. And if we take a look at the selector for this rule, we can see that it's being very specific, it's using the panel default class with the angle bracket. And then, the panel heading class just inside it that angle bracket means that it's looking for a panel heading class that is a direct child or direct descendant of the panel default class. So we're going to use this same selector here for our panel Heading class and see if it gets us where we're going. So I'm going to highlight this panel heading class and paste what we just saw and there you go. Now, we see that it is properly overwriting that gray color. So now, I want to attack the text inside or the H3 tags inside these headings. So let's use the same selector here. We'll just paste that again and then do space H3 because it's those H3 elements that we wanna target here. So first of all let's give it a background color. We're gonna give it a kind of a medium dark blue background 325d88 is the value we're going for. And then let's give it a text color of white and then want to give it quite a bit of padding. So I want to jump down to the next line. I'm gonna add a top bottom padding of 20 pixels on the left right padding of 10 pixels. That gives us a lot more room to work with, and I'm also going to play with the font family a little bit. We're going to use the same arvo font that we've already talked about, the Google arvo font there. So will do arvo comma, and then just serif as a back up. I'm going to set the font weight to 400, and then for the font size I'm going to set that to 16 pixels. So that brings our front size down quite a bit, and the next thing I want to do is I want to get rid of the margin around this h3 all h tags have margins around them by default. So we're just going to set our margin here to zero and that tightens everything up quite a bit. So now, we can see that little two pixels of white space just around the edges of our blue background there and that looks nice. So then I want to do a few more things with our text here make it look a little nicer. I want to set the text transform first of all to uppercase so that all the text is uppercase like so. And then, I want to put a dark text shadow behind it. So, we're going to use the text shadow property. We're going to give it an offset of one pixel by one pixel so it'll move to the right and down one pixel. We're going to give it a spread of four pixels or a blur of four pixels, and then we're going to set it to a color of black. It's going to be a dark black color, and there we go. Now we see that, that shadow behind the text. So that already looks a lot better. Now I want to target the price itself. So remember, each of these h3 tags has a span inside it with a class of price, and that's where the actual price is located. And we want that to be on a separate line with much larger text. So I'm gonna take this entire selector here, copy it, go to the next line paste it and then do space spans, so we're looking at the spans inside those h3 elements. So the first thing I want to do is I want to set the display to block so that those spans will show up on their own line. So now the free, $4.99 and $99.99 are all on their own line. And then, I want to give it a little bit of top margin because it's right up there against the text above it. So let's add a margin-top property here of 6 Pixels and that will nudge it down just enough. And then, I want to bring up the font size quite a bit. Let's bring it up to 28 pixels and then we have that nice large font there and I also want to make it heavier, so we're going to change the font-weight to 700. Now, you might notice that I'm using very specific values here I'm using 400 for our h3, and 700 for the bold font below it. And if we go back into our settings and look at our CSS, you can see that 400 and 700 are the two font weights that we've included with this Google font. And when you set that up in Google fonts and create your links, you can choose which font weights you want to include there. And since we've included 400 and 700, those are the two weights that we can use and it looks really nice so far. Now before we wrap up this particular lesson I want to finish up with this check Mark here. This check mark is not going to be here by default, this check mark is going to show up whenever we click on one of these options. So, initially we won't be able to see it but I do want to leave it there for moment while we position it because I want it to actually be positioned In the upper right hand corner. So, let's skip a couple lines here and we're going to point to our H3 tags, and inside the H3 tags we are looking for dot FA hyphen check. So we're looking for this font awesome class of FA check which contains this check mark that we see. So I'm going to set the position for these to absolute. And remember we want them to be positioned inside the header or inside that h3. So we want to make sure that we go up to the h3, which is the parent item, and we want to give it a position of relative. So that when we change the position here to absolute it will be relative to its parent. Then I'm gonna set the top position to ten pixels, and it moves up, and then we'll set the right position to ten pixels. So it'll move up to the upper right hand corner. I'm gonna take off the text shadow for this one. It's that text shadow that we applied to the rest of our h3. I have removed that so you can see the check mark does not have a shadow beneath it, it's just a nice flat image. And then now that we've got that in place, let's just set the opacity for now to zero. So now that we've got that done, let's save our changes and in the next lesson we'll finish styling up our pricing tables. Thank you for watching, and I'll see you then.