So with the links styled, let's continue styling our package boxes here,
let's style the title, the subtitle and the description and for that, I'll use classes again to not use combinators
only
and I'll add a class of package title to the h1 tag,
I'll add a class of package subtitle to my h2 tag here and a class to that paragraph,
maybe package info,
the names of course as always are up to you
and we should add these classes to all our packages or plans here,
so let's do that for all the elements in all the plans.
Now with that set up, we got all we need to target the different elements and apply some styling.
So back in the packages.css file,
let's start with the subtitle,
I'll leave the title for now.
So subtitle, package subtitle, that class will receive a color of let's say a grey color, maybe a little
bit darker than that,
let's go down a little bit,
somewhere around that and I'll turn this to a hex code again,
so #979797. If we save that and we reload the page,
now we got that dark grey look for the subtitle which looks good in my opinion and for the info,
let's also target that with package info,
so that's the description text.
Let's set a padding of let's say 16 pixels and a border of one pixel solid and then that dark green
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
in a little and it's in that border so that's nice,
so the text pushed it inside of that border I should say. One other thing I want to do is I want to add
different backgrounds to the different plans and each plan should have its own background and for that,
I'll assign IDs to the plans because if I need to select every plan differently, then IDs are the
best way of doing that.
So the first plan will get an ID of plus because it's a plus plan,
the second one is the free plan so this will get an ID of free and the third one, this third section
will get the ID premium
and of course you could name this premium plan, free plan, plus plan, whatever you like. With these plan IDs
added, we can target the plus plan for example and give it a background color of let's say a light green
which actually also is slightly transparent. So let's add the rgba function here to be able to create
a slightly transparent color and the color I prepared for this
but of course you are free to choose a different one, has values 213, 255 and 220 and then 0.95 as
value for the transparency, so this is almost not transparent,
one would be fully opaque, zero would be fully transparent,
this only has a slight transparency.
Now I'll assign a style for the free plan and the free plan will get a background color with the rgba
function with a slightly different green. There
I prepared 234, 252, 237 and then again 0.95 for the transparency and the premium plan,
that plan will actually receive a color of a darker green,
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
color, we get these green colors, we see we'll need to adjust the text colors of the last plan because
it's dark, it's dark on purpose,
we want to kind of emphasize our premium plan, it should look premium
and one other thing I want to do is I want to give these descriptions a white background so that they
stand out from the rest.
So for that back in our code on package info, I'll assign a background of white to assign a white color,
so now this looks like that.
So this is all looking good
but as I said, the premium plan needs to get different text colors.
So at the bottom, I'll add my premium selector and then use a combinator, the descendant combinator again,
as you see this is a combinator you use a lot, to select my package title,
so we defined that class, haven't used it before but here we need it and give this a white color maybe
and also select my package subtitle here and there,
I will stick to a grey but to a different grey, not as dark as the previous one, here I will use #bbb. With
that if we now save this and reload,
that's easier to read
and now I like the look of these plans. This is actually what I wanted you to do,
one thing missing though, I want to have a hover effect if we hover over such a plan.
So if we go up to our package here, for the entire package not just for the link,
actually both is the same because package A, so the anchor tag has display block so it fills the entire
package but the package also includes that border.
Therefore for that package, I want to add a hover effect and an active effect
and add a box-shadow and there,
I'll add 2 pixels, 2 pixels, 2 pixels or maybe 4 pixels as a blur factor and no spread and then I'll
add this transparent grey
I already used earlier, so
like this.
Now finally I want to add a border color here and that border color will be #ff5454.
If we save that and we reload, we see this is looking pretty good,
I like that style.
So that's looking good,
we got our different plans now highlighted
and that is the state
I wanted you to reach. Now
chances are you used different colors or maybe you found a different solution for some of the stylings
applied here.
Definitely compare your solution to mine and feel free to share yours with your fellow students, discuss
them with your fellow students and let's together now add one more thing because I want to ensure that
this middle plan, the free one actually is positioned on the right of our page.