1 00:00:02,230 --> 00:00:07,730 So with the links styled, let's continue styling our package boxes here, 2 00:00:07,890 --> 00:00:14,950 let's style the title, the subtitle and the description and for that, I'll use classes again to not use combinators 3 00:00:15,010 --> 00:00:15,970 only 4 00:00:16,150 --> 00:00:22,680 and I'll add a class of package title to the h1 tag, 5 00:00:23,080 --> 00:00:32,850 I'll add a class of package subtitle to my h2 tag here and a class to that paragraph, 6 00:00:32,960 --> 00:00:36,410 maybe package info, 7 00:00:36,630 --> 00:00:39,100 the names of course as always are up to you 8 00:00:39,330 --> 00:00:45,500 and we should add these classes to all our packages or plans here, 9 00:00:45,630 --> 00:00:52,690 so let's do that for all the elements in all the plans. 10 00:00:52,730 --> 00:00:58,230 Now with that set up, we got all we need to target the different elements and apply some styling. 11 00:00:58,340 --> 00:01:00,880 So back in the packages.css file, 12 00:01:01,130 --> 00:01:02,980 let's start with the subtitle, 13 00:01:02,990 --> 00:01:04,610 I'll leave the title for now. 14 00:01:04,880 --> 00:01:17,440 So subtitle, package subtitle, that class will receive a color of let's say a grey color, maybe a little 15 00:01:17,440 --> 00:01:18,810 bit darker than that, 16 00:01:18,820 --> 00:01:20,780 let's go down a little bit, 17 00:01:21,530 --> 00:01:24,370 somewhere around that and I'll turn this to a hex code again, 18 00:01:24,380 --> 00:01:29,140 so #979797. If we save that and we reload the page, 19 00:01:29,150 --> 00:01:35,840 now we got that dark grey look for the subtitle which looks good in my opinion and for the info, 20 00:01:35,920 --> 00:01:39,070 let's also target that with package info, 21 00:01:39,110 --> 00:01:41,150 so that's the description text. 22 00:01:41,150 --> 00:01:52,210 Let's set a padding of let's say 16 pixels and a border of one pixel solid and then that dark green 23 00:01:52,990 --> 00:02:01,410 and a font size of 20 pixels maybe and then a text color of the dark green too. If we save that, it's pushed 24 00:02:01,410 --> 00:02:04,960 in a little and it's in that border so that's nice, 25 00:02:04,960 --> 00:02:11,140 so the text pushed it inside of that border I should say. One other thing I want to do is I want to add 26 00:02:11,200 --> 00:02:18,030 different backgrounds to the different plans and each plan should have its own background and for that, 27 00:02:18,070 --> 00:02:24,220 I'll assign IDs to the plans because if I need to select every plan differently, then IDs are the 28 00:02:24,220 --> 00:02:25,730 best way of doing that. 29 00:02:25,840 --> 00:02:30,970 So the first plan will get an ID of plus because it's a plus plan, 30 00:02:30,970 --> 00:02:36,670 the second one is the free plan so this will get an ID of free and the third one, this third section 31 00:02:36,850 --> 00:02:38,830 will get the ID premium 32 00:02:38,830 --> 00:02:46,120 and of course you could name this premium plan, free plan, plus plan, whatever you like. With these plan IDs 33 00:02:46,260 --> 00:02:54,670 added, we can target the plus plan for example and give it a background color of let's say a light green 34 00:02:55,120 --> 00:03:02,200 which actually also is slightly transparent. So let's add the rgba function here to be able to create 35 00:03:02,230 --> 00:03:05,970 a slightly transparent color and the color I prepared for this 36 00:03:05,980 --> 00:03:17,950 but of course you are free to choose a different one, has values 213, 255 and 220 and then 0.95 as 37 00:03:18,670 --> 00:03:22,420 value for the transparency, so this is almost not transparent, 38 00:03:22,420 --> 00:03:25,880 one would be fully opaque, zero would be fully transparent, 39 00:03:25,900 --> 00:03:28,740 this only has a slight transparency. 40 00:03:28,960 --> 00:03:37,240 Now I'll assign a style for the free plan and the free plan will get a background color with the rgba 41 00:03:37,300 --> 00:03:39,940 function with a slightly different green. There 42 00:03:39,990 --> 00:03:52,680 I prepared 234, 252, 237 and then again 0.95 for the transparency and the premium plan, 43 00:03:52,690 --> 00:03:58,810 that plan will actually receive a color of a darker green, 44 00:03:58,810 --> 00:04:11,960 so rgba again but here it's 14, 79, 31 and then 0.95. With that if we now save that, we get that green 45 00:04:12,080 --> 00:04:18,260 color, we get these green colors, we see we'll need to adjust the text colors of the last plan because 46 00:04:18,260 --> 00:04:20,200 it's dark, it's dark on purpose, 47 00:04:20,210 --> 00:04:25,280 we want to kind of emphasize our premium plan, it should look premium 48 00:04:25,280 --> 00:04:31,460 and one other thing I want to do is I want to give these descriptions a white background so that they 49 00:04:31,460 --> 00:04:33,610 stand out from the rest. 50 00:04:33,620 --> 00:04:41,200 So for that back in our code on package info, I'll assign a background of white to assign a white color, 51 00:04:41,360 --> 00:04:43,620 so now this looks like that. 52 00:04:43,700 --> 00:04:44,930 So this is all looking good 53 00:04:45,080 --> 00:04:50,460 but as I said, the premium plan needs to get different text colors. 54 00:04:50,540 --> 00:04:57,110 So at the bottom, I'll add my premium selector and then use a combinator, the descendant combinator again, 55 00:04:57,350 --> 00:05:02,230 as you see this is a combinator you use a lot, to select my package title, 56 00:05:02,390 --> 00:05:08,720 so we defined that class, haven't used it before but here we need it and give this a white color maybe 57 00:05:09,020 --> 00:05:15,430 and also select my package subtitle here and there, 58 00:05:15,680 --> 00:05:24,930 I will stick to a grey but to a different grey, not as dark as the previous one, here I will use #bbb. With 59 00:05:24,930 --> 00:05:26,870 that if we now save this and reload, 60 00:05:27,120 --> 00:05:28,400 that's easier to read 61 00:05:28,530 --> 00:05:34,710 and now I like the look of these plans. This is actually what I wanted you to do, 62 00:05:34,710 --> 00:05:40,160 one thing missing though, I want to have a hover effect if we hover over such a plan. 63 00:05:40,260 --> 00:05:46,630 So if we go up to our package here, for the entire package not just for the link, 64 00:05:46,800 --> 00:05:52,500 actually both is the same because package A, so the anchor tag has display block so it fills the entire 65 00:05:52,500 --> 00:05:55,940 package but the package also includes that border. 66 00:05:56,220 --> 00:06:03,030 Therefore for that package, I want to add a hover effect and an active effect 67 00:06:04,670 --> 00:06:07,110 and add a box-shadow and there, 68 00:06:07,130 --> 00:06:15,440 I'll add 2 pixels, 2 pixels, 2 pixels or maybe 4 pixels as a blur factor and no spread and then I'll 69 00:06:15,440 --> 00:06:18,100 add this transparent grey 70 00:06:18,170 --> 00:06:20,160 I already used earlier, so 71 00:06:20,200 --> 00:06:22,280 like this. 72 00:06:22,320 --> 00:06:30,800 Now finally I want to add a border color here and that border color will be #ff5454. 73 00:06:30,870 --> 00:06:37,990 If we save that and we reload, we see this is looking pretty good, 74 00:06:37,990 --> 00:06:39,610 I like that style. 75 00:06:39,820 --> 00:06:41,050 So that's looking good, 76 00:06:41,050 --> 00:06:44,420 we got our different plans now highlighted 77 00:06:44,680 --> 00:06:45,990 and that is the state 78 00:06:46,000 --> 00:06:47,570 I wanted you to reach. Now 79 00:06:47,580 --> 00:06:53,810 chances are you used different colors or maybe you found a different solution for some of the stylings 80 00:06:53,820 --> 00:06:55,290 applied here. 81 00:06:55,300 --> 00:07:00,960 Definitely compare your solution to mine and feel free to share yours with your fellow students, discuss 82 00:07:01,020 --> 00:07:07,960 them with your fellow students and let's together now add one more thing because I want to ensure that 83 00:07:07,960 --> 00:07:13,020 this middle plan, the free one actually is positioned on the right of our page.