1 00:00:00,870 --> 00:00:06,990 So now what we need to do is that we need to display the, the orders here below the below the account 2 00:00:06,990 --> 00:00:08,790 info on the belong they change password. 3 00:00:09,330 --> 00:00:13,560 So what I'm going to do is that in the cart, we already have a code that we can use. 4 00:00:13,980 --> 00:00:19,110 So instead of anything because from scratch, what I'm going to do is that I'm going to close this cart 5 00:00:19,470 --> 00:00:20,760 and then I'm going to copy the cart. 6 00:00:21,180 --> 00:00:27,180 And then in the account I'm going to close this account, and then below it I'm going to copy. 7 00:00:27,180 --> 00:00:28,200 I'm going to basically cart. 8 00:00:28,950 --> 00:00:30,150 So let me base it on. 9 00:00:30,150 --> 00:00:33,720 Let me close it and then let me show you what I'm going to change. 10 00:00:34,110 --> 00:00:35,670 First, I'm going to say your orders. 11 00:00:36,450 --> 00:00:43,170 And instead of instead of displaying instead of saying your cart, I'm going to say orders. 12 00:00:44,010 --> 00:00:45,870 And we need to change many things. 13 00:00:46,290 --> 00:00:50,270 First of all, I'm going to remove your this column. 14 00:00:50,460 --> 00:00:51,930 I'm going to only display two columns. 15 00:00:52,320 --> 00:00:57,120 The first column is going to say product, and the second column is just going to display date. 16 00:00:58,770 --> 00:00:59,250 Date. 17 00:01:02,050 --> 00:01:04,030 And here I'm going to say your orders. 18 00:01:05,700 --> 00:01:08,610 And we don't need all of these things. 19 00:01:08,640 --> 00:01:12,990 Instead, we just need a linear removal of all these. 20 00:01:13,740 --> 00:01:20,070 Starting from here, I'm just going to keep this TV empty, and I'm going to keep another TV empty. 21 00:01:28,810 --> 00:01:32,590 So I don't want to confuse you, Lainey, here at another tree. 22 00:01:32,980 --> 00:01:37,000 So we need to tease the first tree in the first tree. 23 00:01:37,360 --> 00:01:38,770 I'm going to say you're dense. 24 00:01:40,510 --> 00:01:43,390 Dense, and then I'm going to display the image. 25 00:01:43,930 --> 00:01:45,500 So I'm going to first give it a class. 26 00:01:45,520 --> 00:01:49,870 I'm going to say class, and then I'm going to say product info. 27 00:01:51,660 --> 00:01:58,740 And inside it, I'm going to play the image and we say IMG and then source assets. 28 00:02:00,470 --> 00:02:03,470 Images featured one. 29 00:02:05,520 --> 00:02:08,490 And below the image. 30 00:02:09,950 --> 00:02:18,710 I'm going to also display here B with a glass margin top three, and I'm going to display the name of 31 00:02:18,710 --> 00:02:19,900 the product side. 32 00:02:24,040 --> 00:02:25,710 And this is for the first CD. 33 00:02:26,050 --> 00:02:26,950 The second tree. 34 00:02:27,640 --> 00:02:29,890 I'm just going to play the beat, so I'm going to sing it here. 35 00:02:31,180 --> 00:02:31,720 Span. 36 00:02:35,120 --> 00:02:36,260 On any date you want. 37 00:02:47,450 --> 00:02:51,290 They became a flaming hit and over to the browser and show you how this would look like. 38 00:02:51,290 --> 00:02:56,240 So we have your orders and we have the image and we have the date. 39 00:02:56,690 --> 00:02:58,730 However, we need to work on the design. 40 00:02:59,300 --> 00:03:05,270 So let me go back and let me get in over to the cart, to the CCS. 41 00:03:06,370 --> 00:03:09,670 I think this he says, I'm going to create a new section here. 42 00:03:09,910 --> 00:03:13,750 I'm going to add a new comment and I'm going to say orders. 43 00:03:15,520 --> 00:03:22,870 And here the first thing that we need to add for the orders is that we need to work on the orders itself, 44 00:03:22,900 --> 00:03:25,990 on the orders ID that we created. 45 00:03:26,650 --> 00:03:30,070 So I'm going to sit here, got orders. 46 00:03:31,570 --> 00:03:32,050 Not. 47 00:03:34,430 --> 00:03:35,000 Borders. 48 00:03:36,930 --> 00:03:42,360 And then table we have the order table for the table I'm going to see with 100%. 49 00:03:43,290 --> 00:03:48,000 And then the border border collapse. 50 00:03:49,370 --> 00:03:49,970 Collapse. 51 00:03:52,690 --> 00:03:53,360 Lot of clubs. 52 00:03:53,810 --> 00:03:56,780 Then we want to use this order. 53 00:03:57,930 --> 00:03:58,520 Order. 54 00:03:59,090 --> 00:04:00,830 And then we need to say product info. 55 00:04:01,190 --> 00:04:11,390 So for the product info, we need to change the display to be flex, display, flex and the wrap. 56 00:04:13,130 --> 00:04:13,940 Let's wrap. 57 00:04:16,200 --> 00:04:18,300 Let's wrap our wrap. 58 00:04:20,060 --> 00:04:29,090 So this is going to fix the image and then we need to say orders or there's the edge, so forth at the 59 00:04:29,090 --> 00:04:29,430 edge. 60 00:04:29,750 --> 00:04:31,760 I'm going to first change the text align. 61 00:04:32,960 --> 00:04:40,490 Text, a line left and the padding reporting is going to be five. 62 00:04:40,520 --> 00:04:43,160 Top and bottom and in left and right. 63 00:04:43,910 --> 00:04:46,430 And for the color, the color is going to be white. 64 00:04:47,210 --> 00:04:48,590 Color white. 65 00:04:49,040 --> 00:04:50,930 And the background color is orange. 66 00:04:51,740 --> 00:04:54,140 Background color orange. 67 00:04:54,650 --> 00:04:56,390 Let me show you how this would look like. 68 00:04:56,390 --> 00:04:58,910 So now in the browser, let me refresh. 69 00:04:59,630 --> 00:05:01,040 And as you can see, this is the bar. 70 00:05:01,550 --> 00:05:05,510 It's the color is white and the background is orange. 71 00:05:06,140 --> 00:05:06,770 Our next. 72 00:05:07,800 --> 00:05:14,190 We want to say that orders, orders so far for the orders TV. 73 00:05:14,610 --> 00:05:17,610 I want to change the batting order planning. 74 00:05:17,880 --> 00:05:24,000 So the planning is going to be ten weeks top and bottom and 20 left and right. 75 00:05:25,490 --> 00:05:26,450 For the inputs. 76 00:05:27,410 --> 00:05:30,830 Or the inputs we hear. 77 00:05:30,860 --> 00:05:32,270 Let me check the cart. 78 00:05:32,750 --> 00:05:36,950 We don't have any input, so we remove the inputs so there is no need for the input. 79 00:05:37,940 --> 00:05:41,270 Next, we need to fix the image. 80 00:05:41,990 --> 00:05:44,460 So the image to fix the image. 81 00:05:44,480 --> 00:05:49,010 We need to say that order orders to the image. 82 00:05:49,610 --> 00:05:54,460 So for the image, we need to specify a specific area, a width and height. 83 00:05:54,470 --> 00:05:55,970 So the width 80 x. 84 00:05:57,970 --> 00:05:59,200 And hide also. 85 00:06:02,310 --> 00:06:06,240 And margin will write margin. 86 00:06:06,240 --> 00:06:06,750 Right. 87 00:06:07,290 --> 00:06:08,100 Twin Peaks. 88 00:06:09,450 --> 00:06:12,690 Let me see even let me show you how this looks like. 89 00:06:12,880 --> 00:06:16,770 So as you can see, this is this is the account. 90 00:06:16,770 --> 00:06:19,680 So we have well, we need to remove actually many things. 91 00:06:19,890 --> 00:06:22,620 We need to remove this subtotal and we need to remove these two. 92 00:06:23,100 --> 00:06:26,880 So before I continue me here, remove. 93 00:06:28,290 --> 00:06:28,800 Here. 94 00:06:28,800 --> 00:06:30,510 I need to remove this subtotal. 95 00:06:30,900 --> 00:06:33,150 So for this subtotal, remember, we have this table. 96 00:06:33,150 --> 00:06:35,400 We need to remove this table, and we need to it. 97 00:06:35,430 --> 00:06:40,140 We need to remove the checkout button and we need to remove this. 98 00:06:40,530 --> 00:06:41,190 The R. 99 00:06:43,460 --> 00:06:45,530 And we need to remove also this tr. 100 00:06:47,410 --> 00:06:50,290 And we need to be left only with the one tr. 101 00:06:50,890 --> 00:06:51,670 Let me save a lady. 102 00:06:51,670 --> 00:06:54,580 Show you that now we will have only one product. 103 00:06:55,240 --> 00:06:56,500 So now it looks amazing. 104 00:06:57,580 --> 00:07:06,220 The last thing that we need to work on is the, uh, is the here. 105 00:07:06,940 --> 00:07:09,160 We need to center this order. 106 00:07:09,170 --> 00:07:10,000 We need to center it. 107 00:07:10,540 --> 00:07:16,360 So to center it, we can here for, say, for the first, I'm going to make less margin. 108 00:07:17,710 --> 00:07:18,850 It makes order. 109 00:07:19,330 --> 00:07:24,160 And also the text here, we need to say text. 110 00:07:25,180 --> 00:07:26,680 A lion takes centre. 111 00:07:27,820 --> 00:07:29,410 This should centre the text. 112 00:07:31,510 --> 00:07:33,890 So the text has been centered here. 113 00:07:33,890 --> 00:07:38,140 It says your orders and we have the orders and everything now looks amazing. 114 00:07:38,620 --> 00:07:41,320 We just need to decrease the space. 115 00:07:41,950 --> 00:07:48,820 So to decrease this space, I'm going to here change this from five to only two, and this should decrease 116 00:07:48,820 --> 00:07:49,360 the space. 117 00:07:51,440 --> 00:07:56,090 So as you can see, the space now is smaller, but I think we need to decrease the space further. 118 00:07:57,470 --> 00:08:00,560 Actually, I need to decrease this and keep this. 119 00:08:00,560 --> 00:08:00,980 Fine. 120 00:08:01,670 --> 00:08:06,770 Let me keep this five and let me decrease the crease only the margin top. 121 00:08:07,550 --> 00:08:09,080 So if I decrease the margins up. 122 00:08:10,070 --> 00:08:12,710 The margin top will be much smaller. 123 00:08:13,370 --> 00:08:19,520 Smaller, and we can, we can decrease the, uh, the Y here. 124 00:08:19,520 --> 00:08:21,410 We can say py3. 125 00:08:22,430 --> 00:08:25,010 This will also have an effect on the space here. 126 00:08:25,760 --> 00:08:34,280 So as you can see, the space is smaller and this date we can push it to the right more so in the stylus. 127 00:08:34,280 --> 00:08:38,150 SS So here you can see takes the line center. 128 00:08:39,130 --> 00:08:41,500 Or a line left, let's say center. 129 00:08:42,360 --> 00:08:43,410 If I say center. 130 00:08:45,270 --> 00:08:45,720 All right. 131 00:08:45,720 --> 00:08:47,430 Actually, instead of left, we can say, right. 132 00:08:48,180 --> 00:08:51,570 So I'm going to remove the left and then I'm going to say center and instead of left. 133 00:08:52,540 --> 00:08:52,930 Now. 134 00:08:52,930 --> 00:08:53,290 It should. 135 00:08:53,770 --> 00:08:56,530 This should be displayed on the in the middle. 136 00:08:56,530 --> 00:08:58,480 As you can see, it looks now better here. 137 00:08:58,480 --> 00:09:05,830 It's in the middle or you can say on the right side and you can apply it only to one element. 138 00:09:06,400 --> 00:09:11,800 So instead of applying to applying it to, to, to the two elements, we can see, we can see left. 139 00:09:12,280 --> 00:09:15,460 But to the second, we can see that order. 140 00:09:17,310 --> 00:09:22,800 And then in Child the Age. 141 00:09:24,200 --> 00:09:25,990 A child. 142 00:09:27,280 --> 00:09:32,080 And Child two and then text. 143 00:09:33,190 --> 00:09:34,090 Takes a lion. 144 00:09:34,390 --> 00:09:37,390 Right now, it should fix this problem. 145 00:09:37,900 --> 00:09:44,320 So as you can see now, the products should be displayed on their far left side, whereas it will be 146 00:09:44,320 --> 00:09:45,850 displayed on the far right side. 147 00:09:46,420 --> 00:09:47,560 And now it looks amazing. 148 00:09:48,850 --> 00:09:54,820 So this is the account page where it has now three important elements the account information, the 149 00:09:54,820 --> 00:10:00,970 change password functionality and the orders that the user made earlier.