Featured Card Styles

[00:00:00]
>> Okay, so now we need to take a look at this featured item up here at the top. The featured item is laying out exactly the same way. Why is that?
>> There's a different class.
>> Yeah, it includes the card class.
>> It includes the card class, see that?

[00:00:16]
So it has the card class and it has the feature class. So right now, it's using that same card layout here to layout all the information here at the top of the screen, which is great, except that's not what we want. We want something different for our featured card.

[00:00:34]
So if we go back to take a look at our mobile version of the site here, the featured card should have our headline, should have our image and it should have our button. So this block of text here should not be showing, and we shouldn't have two columns, right?

[00:00:50]
So after all of my card styles, because I want my featured styles to override those card styles, we're gonna say .feature img, we can say grid column: 1/3. In other words, stretch all the way across. And we can say grid-row: 2/3, because we wanna have the title on top, followed by the card itself.

[00:01:21]
Then we need to send our button here to the bottom. It's kind of there now, but it's really squashed up against this picture, so I'm gonna add some styling for that. .feature, oops, p:last-child, so the last paragraph there in the feature markup cuz we have two. We have the actual text, and then you have the one with the button.

[00:01:48]
We're gonna say our grid-row is 3/4, it's probably is already there, and then we'll say margin-top: 2rem. And that'll give us a little bit of breathing room between our picture and our button. Make sense? All right, now, we need to hide the text here. This lorem ipsum that we have here, that needs to get hidden.

[00:02:13]
And so we may do something like .feature p, and we say display: none. That will actually hide both that paragraph and our button because both of them are Ps, correct? Okay, so I wanna just hide the one that is not the button. And for those of you who are funky selector collectors like me, there's a cool way of doing this.

[00:02:44]
So we can say four paragraphs that are not, :has(a), that is a really funky one. So has anyone seen a selector like that before? Selectors, we read from right to left even though we write them from left to right. So that's your first secret of CSS, you always have to read your selectors from the right.

[00:03:13]
So this says for any paragraphs that do not have a link inside of them. That would be this paragraph here. Cool, so it will hide just the one with the link inside of it. That's our button, yes.
>> Why doesn't feature P first child?
>> That would absolutely work as well.

[00:03:38]
>> Was it?
>> Yeah, yep, but I just decided to put in a funky one for the fans and the audience, cuz I'm a fan of spunky selectors. Okay, so at this point, what do you think? Let's compare our design here. We go, planets and moons. There's all the cards.

[00:04:03]
And let's take a look at our code pad. What do you think? Pretty much the same? Not so bad, right? Not so hard.