1
00:00:00,210 --> 00:00:08,160
All right, and I think I'm going to focus on the card columns first and then we're going to do card

2
00:00:08,160 --> 00:00:14,070
totals and only then we'll work on card item because, of course, there's more functionality in the

3
00:00:14,070 --> 00:00:14,610
card item.

4
00:00:14,850 --> 00:00:19,770
So let's start with card columns, and we simply need to navigate that component.

5
00:00:19,770 --> 00:00:23,430
As you can see, there's not that many imports over there.

6
00:00:23,670 --> 00:00:25,170
And I'm going to go with rapper.

7
00:00:26,170 --> 00:00:33,640
And instead of the rapper I'm just going to go with there out a class name of content, and you have

8
00:00:33,640 --> 00:00:39,130
probably noticed that it's pretty nifty that we can keep on reusing this generic name.

9
00:00:39,400 --> 00:00:44,980
So every time I would want to add some kind of weird pretty much the same class name, I can easily

10
00:00:44,980 --> 00:00:47,730
do that since we are using style components.

11
00:00:48,010 --> 00:00:50,020
And then I just want to set up my columns.

12
00:00:50,170 --> 00:00:52,660
That's all we're doing navigate.

13
00:00:52,880 --> 00:00:56,500
So we have one for item price, quantity and subtotal.

14
00:00:56,710 --> 00:01:00,820
And then there's also going to be a fifth one that doesn't have the name, but it's just going to be

15
00:01:00,820 --> 00:01:01,290
added.

16
00:01:01,480 --> 00:01:07,100
So our success matches to that one in the cart ihram component.

17
00:01:07,450 --> 00:01:13,930
So it just set up adding five or say ihram, I'll copy and paste four times and then I'll just write

18
00:01:13,930 --> 00:01:15,040
some values price.

19
00:01:15,540 --> 00:01:17,080
Then I'm looking for quantity.

20
00:01:19,500 --> 00:01:22,080
And the last one will be subtotal.

21
00:01:23,310 --> 00:01:30,360
And like I said, there's going to be a span with nothing in it, just so we have the same styling as

22
00:01:30,360 --> 00:01:35,600
the cart item, and then right next to there, I'm going to set up my horizontal line.

23
00:01:35,970 --> 00:01:40,400
Now, don't freak out if you don't see it on a small screen.

24
00:01:40,830 --> 00:01:47,010
So essentially the reason why I set it up is because I only would want to display them once we get the

25
00:01:47,010 --> 00:01:47,600
big screen.

26
00:01:47,970 --> 00:01:48,920
So let's navigate here.

27
00:01:48,970 --> 00:01:51,690
Notice how we can nicely display them.

28
00:01:51,960 --> 00:01:56,180
And by the way, you know, I'm starting to think that there's some issue over here.

29
00:01:56,580 --> 00:01:58,800
So I have a section and yeah, there it is.

30
00:01:59,040 --> 00:02:01,230
So, of course, I misspelled the name.

31
00:02:01,240 --> 00:02:03,060
It should be section.

32
00:02:03,060 --> 00:02:05,040
And then we're going to have somebody again.

33
00:02:05,370 --> 00:02:09,630
We won't be able to see the card columns on the small screen.

34
00:02:09,930 --> 00:02:11,310
So that's done on purpose.

35
00:02:11,610 --> 00:02:15,590
Only once we get to the big screen, then we can see the columns.

36
00:02:15,600 --> 00:02:16,270
So check it out.

37
00:02:16,720 --> 00:02:20,130
Notice if I make my brother bigger, I'm sorry, smaller.

38
00:02:20,460 --> 00:02:23,280
Then of course the card columns are hidden.

39
00:02:23,610 --> 00:02:30,420
But then once we get the bigger screen, there is now we have our columns and once we're done setting

40
00:02:30,420 --> 00:02:31,980
up our card columns.

41
00:02:31,980 --> 00:02:35,490
Now, of course, I would want to set up my totals as well.