1 00:00:00,420 --> 00:00:06,330 So now what I'm going to do is that I'm going to work on these buttons and I'm going to change a few 2 00:00:06,330 --> 00:00:10,500 things about these buttons, and I'm going to add an awesome effect that you will see shortly. 3 00:00:11,040 --> 00:00:15,150 So here what I'm going to do is that I'm going to say dot product. 4 00:00:15,540 --> 00:00:26,430 And then by button we have remember we have a by PTEN, which is this we have this button by my now, 5 00:00:26,430 --> 00:00:28,470 which has a class called the buying button. 6 00:00:29,190 --> 00:00:34,440 So now for this buy button, I'm going to change the background color. 7 00:00:34,440 --> 00:00:37,230 So I'm going to name background color instead of black. 8 00:00:37,680 --> 00:00:38,880 I'm going to use this color. 9 00:00:39,840 --> 00:00:48,300 It's be 77 four, which is an orange color, and I'm going to add a transform. 10 00:00:50,220 --> 00:01:03,720 Transform y, transform y, translate y, translate y 50 b x, and then I'm going to also give it an 11 00:01:03,720 --> 00:01:10,200 opacity of zero and I'm going to give it a transition transition. 12 00:01:10,200 --> 00:01:14,580 So the transition is would be only 3 seconds all. 13 00:01:15,360 --> 00:01:19,410 Now if I save and refresh, you will find that the button is gone. 14 00:01:20,010 --> 00:01:21,200 These panels are gone. 15 00:01:21,780 --> 00:01:23,070 So why did I do this? 16 00:01:23,100 --> 00:01:27,960 The reason why I didn't do the reason why I did this is because I want this image. 17 00:01:27,970 --> 00:01:32,100 I want these mountains to to be displayed only if I hover over the product. 18 00:01:32,110 --> 00:01:36,450 Otherwise, I want these buttons to be to be hidden. 19 00:01:36,870 --> 00:01:44,970 So to make these buttons appear, if I hover over the product, I can use a product and then hover, 20 00:01:45,660 --> 00:01:46,230 hover. 21 00:01:46,500 --> 00:01:55,050 If I hover over the product, what they want to happen is that I want the buy button to be displayed. 22 00:01:55,440 --> 00:02:04,410 So to make this button, to make sure I'm going to say transform and then translate y 23 00:02:07,050 --> 00:02:08,400 translate y zero. 24 00:02:08,670 --> 00:02:17,820 If I say zero x now the button will go from 50 b, x, y, which is the y axis all the way to zero, 25 00:02:17,820 --> 00:02:21,120 which is the which is its original location. 26 00:02:21,570 --> 00:02:24,120 So it's going to go for it initially. 27 00:02:24,120 --> 00:02:31,680 It's going to be at 50 and then it's going to go to the to its original location. 28 00:02:32,970 --> 00:02:39,420 And I'm going to also change the opacity to one, because if you don't do this, the the button will 29 00:02:39,420 --> 00:02:39,900 be hidden. 30 00:02:39,900 --> 00:02:44,100 Opacity zero means that the button will not be there. 31 00:02:44,100 --> 00:02:46,020 It's not it's not going to show up. 32 00:02:46,410 --> 00:02:50,340 One, it means that it will have just the original opacity. 33 00:02:50,340 --> 00:02:51,810 Let me show you now what's going to happen. 34 00:02:52,740 --> 00:03:01,560 So if I hover over the product, the button will show up and if I have outside, the ribbon will not 35 00:03:01,560 --> 00:03:02,880 be displayed, which is awesome. 36 00:03:04,240 --> 00:03:05,290 So this is for Lebanon. 37 00:03:05,950 --> 00:03:10,080 Another thing that they want to work on is the is this separator. 38 00:03:10,090 --> 00:03:16,710 So for this separator, I'm going to use a H, R and then I'm going to give it first away. 39 00:03:16,810 --> 00:03:24,340 I'm going to decrease the width to only 30 x because as you can see here, it takes the complete width 40 00:03:24,340 --> 00:03:26,470 of the element of the parent. 41 00:03:26,470 --> 00:03:35,680 And I only want it to take a small width and I'm going to also change the height to be three to x important. 42 00:03:36,690 --> 00:03:41,130 Because I want to override the original design. 43 00:03:41,880 --> 00:03:49,620 Also, I'm going to give it opacity, one important and I'm going to change its background color. 44 00:03:50,100 --> 00:03:54,660 I'm going to use the the orange color that they used earlier, which is this color. 45 00:03:55,350 --> 00:03:57,960 SB seven seven for me. 46 00:03:59,440 --> 00:04:02,770 Let me now save and let me refresh. 47 00:04:03,700 --> 00:04:05,280 And as you can see, it's going to look like this. 48 00:04:05,290 --> 00:04:09,590 But we want to move this from the left side to the to the middle. 49 00:04:09,610 --> 00:04:10,480 How can we do this? 50 00:04:10,960 --> 00:04:12,370 To do this, it's super simple. 51 00:04:12,790 --> 00:04:15,460 You can use the h.r. 52 00:04:15,670 --> 00:04:18,010 You can use the here. 53 00:04:18,010 --> 00:04:24,180 You can use a bootstrap class called an x or an x or. 54 00:04:27,330 --> 00:04:29,830 This glass would center the edge. 55 00:04:30,000 --> 00:04:31,290 And I mean, I'm showing you this. 56 00:04:33,290 --> 00:04:35,150 As you can see, the line will be centered. 57 00:04:35,960 --> 00:04:38,260 Finally, I'm going to work on these stars. 58 00:04:38,270 --> 00:04:43,130 So instead of a black, I'm going to display them in gold color, in yellow color. 59 00:04:44,000 --> 00:04:45,110 So I'm going to say here. 60 00:04:47,620 --> 00:04:48,130 Star. 61 00:04:49,700 --> 00:04:51,890 Because we already have a class called Star here. 62 00:04:53,670 --> 00:04:54,420 Star. 63 00:04:54,450 --> 00:04:55,050 This class. 64 00:04:55,080 --> 00:04:55,500 Star. 65 00:04:56,940 --> 00:04:58,080 So here I'm going to say star. 66 00:04:58,080 --> 00:05:02,190 And then for the star, I'm going to give it first up, adding I'm going to say fanning. 67 00:05:02,790 --> 00:05:07,260 Then top and top and bottom and zero. 68 00:05:07,290 --> 00:05:08,100 Left and right. 69 00:05:09,390 --> 00:05:11,610 And for the star. 70 00:05:12,940 --> 00:05:13,510 I. 71 00:05:14,340 --> 00:05:15,730 I want to change its color. 72 00:05:16,300 --> 00:05:18,710 So first, I'm going to change the font size. 73 00:05:18,730 --> 00:05:23,470 I'm going to change its font size to be point nine frame. 74 00:05:24,100 --> 00:05:27,400 However, I'm going to give it a color. 75 00:05:29,080 --> 00:05:31,600 That's called, I'm going to say in Golden. 76 00:05:32,790 --> 00:05:33,670 Golden, right. 77 00:05:35,270 --> 00:05:39,640 Which is a yellow kind of a yellow color leaning out, save and refresh. 78 00:05:39,650 --> 00:05:42,350 And as you can see, it's going to look amazing.