Cards Overview

[00:00:00]
>> This one I call the Outrageous Cards. We have a bunch of different layouts all baked into one card and I am going to show this to you at the end state so you get a sense of how this goes. All right. All right, so at Desktop Dimensions, this would be an ordering page for our coffee shop.

[00:00:31]
We have the Our Coffee up here on the top, and you'll notice that we have cards, because it's in the name. We have the name of the item, we have the picture of the item, we have the text underneath, and we have buttons. And of course those buttons have hover states associated with them.

[00:00:49]
So, notice we have three across here to start with, but notice that the two on the bottom are centered underneath the three on the top. So, you're gonna have to give some thought as to how we make that magic happen. How do we get these two to show up kind of like that on the row versus the three like this?

[00:01:10]
Okay, so that's your first thing to think about there on the desktop. As we make this smaller, there we go. We'll hit our break point. Notice what we've done here. Coffee is now over here and it's on Let's side, okay? We have a big picture of the coffee, we have our text here and our ordering button here.

[00:01:37]
Okay, so that's the way this page looks. Very lovely. Then we're gonna make the page even smaller. Okay, and our next breakpoint, what we're gonna do is move that order button to go on top of the image. [SOUND] Good times. Okay, on top of the image with the text underneath, and the titles are still turned on their sides.

[00:02:08]
Okay, and then at our last breakpoint, I have to show I have to go back here to our source code. And I have to crunch this thing down because my browser doesn't go small enough. So, at our last break point, these are fairly simple cards. So, we have the title, the picture, the text, and the button underneath just like this.

[00:02:34]
Okay, so, What do we wanna think about as we start putting these cards together? Anything come to mind you wanna mention, Andrew? Anything strikes you about these cards? Anything you wonder about, perhaps?
>> I'm certainly wondering how to do a vertical text like that.
>> Yeah, how do we do the vertical text like this?

[00:03:02]
That is craziness, okay? You may be wondering how to put a button on top of your image like this. You just saw how to do something like this with absolute positioning, but spoiler alert, you can also do it with CSS grid. So that might be something to think about for that.