1 00:00:00,050 --> 00:00:00,320 All right. 2 00:00:00,320 --> 00:00:01,970 We're pretty much done with the project. 3 00:00:01,970 --> 00:00:06,670 We just want to set up the CSS for page button container. 4 00:00:06,680 --> 00:00:10,580 So let's navigate to assets wrappers. 5 00:00:10,580 --> 00:00:13,580 And we're looking for page button container. 6 00:00:14,230 --> 00:00:18,520 We want to remove all of this code and we'll set it together from the scratch. 7 00:00:19,030 --> 00:00:20,950 So let me remove everything. 8 00:00:21,490 --> 00:00:24,430 And we want to start by setting up some kind of height. 9 00:00:25,180 --> 00:00:27,570 My case, I'm going to go with six rims. 10 00:00:27,630 --> 00:00:30,690 Then let's go with margin top. 11 00:00:30,690 --> 00:00:34,260 And in my case, it's going to be equal to two rims. 12 00:00:34,470 --> 00:00:36,360 Then let's go with display flex. 13 00:00:36,360 --> 00:00:43,500 So in this case, I'm talking about the entire container and I want to align everything in the center 14 00:00:43,500 --> 00:00:44,730 so vertically. 15 00:00:44,860 --> 00:00:47,100 Then also, as far as the. 16 00:00:47,930 --> 00:00:49,550 Content horizontally. 17 00:00:49,550 --> 00:00:54,470 I actually want to place it all the way on the left hand side or I'm sorry, right hand side. 18 00:00:54,470 --> 00:00:57,680 So I'm going to go with justify content and I'll set it equal to. 19 00:00:57,680 --> 00:01:01,730 And then as far as the flex wrap, I'm going to go with wrap. 20 00:01:01,730 --> 00:01:08,240 So if there is not enough space, then we'll set up a new line and we can nicely use Gap. 21 00:01:09,210 --> 00:01:12,440 In my case, I'm going to go with one Rmse. 22 00:01:12,460 --> 00:01:15,850 So essentially this is going to be gap between the items. 23 00:01:16,090 --> 00:01:18,610 Then let's style the button container. 24 00:01:18,610 --> 00:01:21,580 So this is where we have most of our buttons. 25 00:01:21,580 --> 00:01:25,180 Well, I guess that depends on search query, but in general. 26 00:01:25,180 --> 00:01:25,590 Yeah. 27 00:01:25,960 --> 00:01:28,150 Then let's go with background. 28 00:01:28,180 --> 00:01:35,110 We want to set it equal to var, then hyphen hyphen, then let's set up background hyphen. 29 00:01:35,870 --> 00:01:37,130 Secondary. 30 00:01:38,370 --> 00:01:39,510 Hyphen color. 31 00:01:40,430 --> 00:01:42,110 Let's go here with semicolon. 32 00:01:42,850 --> 00:01:44,530 We also have border radius. 33 00:01:45,650 --> 00:01:48,230 And we'll set it equal to a CSS variable. 34 00:01:48,230 --> 00:01:50,900 So hyphen hyphen border. 35 00:01:51,670 --> 00:01:52,420 Radius. 36 00:01:53,340 --> 00:01:54,030 Let's save it. 37 00:01:54,030 --> 00:01:56,820 And then we want to go with Display Flex. 38 00:01:56,970 --> 00:02:03,150 So I'm setting up display flex for the entire wrapper, but also for button container. 39 00:02:03,150 --> 00:02:05,670 I'm going to go with display flex. 40 00:02:06,060 --> 00:02:12,920 And then let's style the page button and I guess then we'll worry about the next preview. 41 00:02:13,170 --> 00:02:18,540 So as far as the page button, we want to add background transparent. 42 00:02:22,210 --> 00:02:25,210 We also want to go with border color and same deal. 43 00:02:25,240 --> 00:02:27,310 We want to go with Transparent. 44 00:02:29,150 --> 00:02:31,690 After that, we want to set up some kind of width. 45 00:02:31,700 --> 00:02:36,650 In my case, it's going to be 50 pixels height. 46 00:02:37,130 --> 00:02:39,080 I'm going to go with 40. 47 00:02:40,310 --> 00:02:42,980 Pixels then font weight. 48 00:02:45,420 --> 00:02:48,150 We're going to go with 700. 49 00:02:49,590 --> 00:02:52,580 And let's also increase the font size. 50 00:02:52,590 --> 00:02:54,600 So in this case, it's going to be. 51 00:02:55,260 --> 00:02:57,650 1.25 Rems. 52 00:02:57,660 --> 00:03:00,990 Then when it comes to color, I'll actually go with the primary one. 53 00:03:00,990 --> 00:03:04,080 So var hyphen hyphen primary. 54 00:03:05,080 --> 00:03:07,390 And I'm looking for 500. 55 00:03:07,630 --> 00:03:11,170 Then let's set up some kind of border radius. 56 00:03:11,810 --> 00:03:12,400 You know what? 57 00:03:12,490 --> 00:03:14,110 It's going to be exactly the same. 58 00:03:14,110 --> 00:03:16,330 So let me copy and paste. 59 00:03:16,510 --> 00:03:19,450 And I also want to add the cursor. 60 00:03:20,260 --> 00:03:22,460 And I want to set it equal to a pointer. 61 00:03:22,480 --> 00:03:24,370 Then let's scroll down. 62 00:03:24,960 --> 00:03:27,930 So you can see it better, or at least I will do that. 63 00:03:27,930 --> 00:03:30,320 And then let's style the active one. 64 00:03:30,330 --> 00:03:35,220 So when it comes to the active one, I want the background to be the primary. 65 00:03:36,200 --> 00:03:38,210 Let me just use this value over here. 66 00:03:38,900 --> 00:03:42,170 And when it comes to a color, I'm going to go with the white one. 67 00:03:42,320 --> 00:03:47,930 So instead of this one here, let's go with var and hyphen, hyphen and white. 68 00:03:48,650 --> 00:03:50,120 Okay, beautiful. 69 00:03:50,480 --> 00:03:57,620 And then let's style the next and prev and also at the very end we're going to go with the dots. 70 00:03:58,320 --> 00:04:02,220 So in here we want to go with the. 71 00:04:02,930 --> 00:04:07,250 Class of prev btn, then next btn. 72 00:04:08,590 --> 00:04:10,060 And for both of them. 73 00:04:11,550 --> 00:04:14,310 We will copy some of these values over here. 74 00:04:14,310 --> 00:04:19,079 So let me take all of this and then we'll just change some things around. 75 00:04:19,079 --> 00:04:26,040 So copy and paste background, we're actually going to go with the variable, so this will be equal 76 00:04:26,040 --> 00:04:31,470 to var hyphen hyphen background and I'm going to go with secondary color. 77 00:04:32,380 --> 00:04:34,240 Secondary color. 78 00:04:34,940 --> 00:04:40,580 Then Porter is going to be transparent, so that stays the same. 79 00:04:41,460 --> 00:04:43,350 We'll also add here border radius. 80 00:04:43,380 --> 00:04:45,090 Okay, that's good. 81 00:04:45,120 --> 00:04:48,840 Then let's set up the width. 82 00:04:49,050 --> 00:04:54,510 Or in this case, we're going to go with 100 and height is still going to stay the same, so we're going 83 00:04:54,510 --> 00:04:57,090 to still go with the 40 pixels. 84 00:04:57,450 --> 00:05:00,210 Then we have a color. 85 00:05:01,090 --> 00:05:04,990 And again, we'll copy this one because this will be exactly the same. 86 00:05:05,620 --> 00:05:08,860 And we have text transform letter spacing. 87 00:05:08,860 --> 00:05:15,920 And since we have in there the icon as well, again, I want to place everything in the center. 88 00:05:15,940 --> 00:05:22,390 So let's go here with text transform and we want to set it equal to capitalize. 89 00:05:22,690 --> 00:05:24,880 Then we want to go with letter spacing. 90 00:05:26,610 --> 00:05:29,220 And we will set that one equal to. 91 00:05:30,170 --> 00:05:33,200 Our variable letter spacing. 92 00:05:34,030 --> 00:05:37,180 Then let's go with display Flex. 93 00:05:38,090 --> 00:05:40,370 We want to align everything in the center. 94 00:05:40,370 --> 00:05:43,980 So align items center, then justify content. 95 00:05:44,000 --> 00:05:44,840 Same deal. 96 00:05:46,080 --> 00:05:48,060 Let's place everything in the center. 97 00:05:48,090 --> 00:05:52,270 Let's add some gap here because we have icon and a text, remember? 98 00:05:52,290 --> 00:05:58,590 So this will be equal to 0.5 Rems and then cursor will be equal to a pointer. 99 00:05:59,270 --> 00:06:01,760 Then let's set up hover effect. 100 00:06:03,090 --> 00:06:04,820 So let me copy these ones. 101 00:06:04,830 --> 00:06:05,970 Copy and paste. 102 00:06:05,970 --> 00:06:10,470 And here we're looking for one hover and then the second hover. 103 00:06:10,500 --> 00:06:15,380 Now, as far as the values, we're going to go with background color and the transition. 104 00:06:15,390 --> 00:06:18,600 So let me see where I have both of them. 105 00:06:19,330 --> 00:06:21,070 So I don't have to waste too much time. 106 00:06:21,070 --> 00:06:24,250 So background is equal to actually this one. 107 00:06:24,250 --> 00:06:27,520 So primary 500 color is going to be equal to white. 108 00:06:27,610 --> 00:06:33,070 And then we want to go with transition and we'll set it equal to var and then hyphen hyphen. 109 00:06:33,680 --> 00:06:35,120 Transition. 110 00:06:35,340 --> 00:06:37,090 And lastly, let's style those dots. 111 00:06:37,100 --> 00:06:39,890 So we're going to go over here with our class. 112 00:06:39,890 --> 00:06:42,920 Then let's go with display grid. 113 00:06:43,370 --> 00:06:46,300 After that, let's place everything in the center. 114 00:06:46,310 --> 00:06:49,970 So we're going to go with place items equals to a center. 115 00:06:49,970 --> 00:06:55,940 And then as far as the cursor, I don't want it to be pointer, so I'm just going to go with text. 116 00:06:56,270 --> 00:06:57,110 Let's save it. 117 00:06:57,110 --> 00:07:04,820 Let's navigate back to our project, let's refresh and if everything is correct, this is how our page 118 00:07:04,820 --> 00:07:08,000 BTN container is going to look like.