1 00:00:00,900 --> 00:00:03,000 So let's write for the NAB. 2 00:00:06,270 --> 00:00:10,680 So will provide a class name here to inside the NAB that will be a background color, first of all. 3 00:00:11,670 --> 00:00:18,330 And background color, I have already found the color, so I'll write just the hex code for it. 4 00:00:18,960 --> 00:00:21,090 That will be zero zero eight 190. 5 00:00:23,580 --> 00:00:27,900 Next, we'll be having a parenting role of parenting is important. 6 00:00:31,130 --> 00:00:35,150 And that will be one point to fight in. 7 00:00:36,960 --> 00:00:40,980 While the top and bottom and tourism for the left and right. 8 00:00:41,990 --> 00:00:45,770 Let me just save and see if CSIS is getting ready or not. 9 00:00:46,490 --> 00:00:51,590 No, it's not because we have not imported it, I guess, and starting next are just fine. 10 00:00:53,420 --> 00:00:54,550 No, no, no, no, no. 11 00:00:54,560 --> 00:00:55,640 We have important it. 12 00:00:56,950 --> 00:00:59,320 But for some reason, it doesn't work. 13 00:01:03,850 --> 00:01:06,010 So what is the issue here? 14 00:01:06,340 --> 00:01:08,500 Oh, I'm sorry, the screen was not visible. 15 00:01:12,500 --> 00:01:18,800 OK, the thing is, we have we have given it a dog like dog, does it given to the class name, which 16 00:01:18,800 --> 00:01:22,100 we don't like the custom glass name, but this is not a custom class. 17 00:01:22,120 --> 00:01:26,360 This is like the component, this element that doesn't need a class name. 18 00:01:27,900 --> 00:01:32,700 Now, when you see on the browser, you can see at least you can see what we wrote in the CSIS. 19 00:01:32,760 --> 00:01:35,970 Obviously, it's not that accurate, but we'll make it work. 20 00:01:36,450 --> 00:01:36,870 All right. 21 00:01:37,830 --> 00:01:41,050 So next to what we'll do is we'll start. 22 00:01:41,310 --> 00:01:43,500 We'll style the nav center component. 23 00:01:43,530 --> 00:01:43,950 All right. 24 00:01:44,370 --> 00:01:49,680 So in the NAB Center is the main like Deb, which contains everything. 25 00:01:50,370 --> 00:01:50,740 All right. 26 00:01:51,000 --> 00:02:00,960 So here we'll provide a maximum width of four to be variable and we can just provide fixed with here. 27 00:02:03,150 --> 00:02:03,350 And. 28 00:02:04,810 --> 00:02:04,990 We. 29 00:02:10,410 --> 00:02:13,580 That that means the maximum is fixed. 30 00:02:14,670 --> 00:02:17,670 And will provide us with a 100 percent. 31 00:02:20,890 --> 00:02:26,890 Next, there will be the margin, and for top and bottom, that will be zero and four left and right 32 00:02:26,890 --> 00:02:27,700 that will be out of. 33 00:02:29,320 --> 00:02:30,250 Next, we'll be having. 34 00:02:31,840 --> 00:02:40,310 Like, we'll be implementing Flex Block Flexbox here, not Flex Blocks, lacks box or display flex. 35 00:02:40,330 --> 00:02:43,900 We are going to use some to make things a little bit more responsive. 36 00:02:44,650 --> 00:02:49,630 Next, we'll be having to fight content space between what does this mean? 37 00:02:49,660 --> 00:02:56,740 This means that whatever the content is presented inside that particular day that they will have some 38 00:02:57,490 --> 00:03:03,000 amount of space in between, they will not be like, like attached or too close to each other. 39 00:03:03,040 --> 00:03:10,940 There will be some space between those particular content and then will be giving a items to be center. 40 00:03:11,410 --> 00:03:15,820 The most common thing, the most common line of courses, which I use. 41 00:03:16,960 --> 00:03:22,630 Let us go to the browser and see, OK, we are getting closer, but not so much. 42 00:03:23,560 --> 00:03:24,400 Not so much. 43 00:03:26,590 --> 00:03:30,670 And then will give the style to date three. 44 00:03:30,920 --> 00:03:34,690 Now what do they three, these three is the. 45 00:03:36,690 --> 00:03:42,270 Is the head or the brand name that will be the margin bottom of. 46 00:03:44,440 --> 00:03:49,360 Margin bottom of Zito, then we give. 47 00:03:51,210 --> 00:03:54,300 Color and color. 48 00:03:54,480 --> 00:03:56,790 I would just like to give it a wide color. 49 00:03:58,580 --> 00:04:01,130 As simple as it could be. 50 00:04:02,780 --> 00:04:10,120 Now we are getting this extra amount of padding and margin right now that is being provided by the like 51 00:04:10,130 --> 00:04:10,710 before. 52 00:04:11,840 --> 00:04:12,170 Yes. 53 00:04:12,380 --> 00:04:14,020 In the obnoxious us, me and me. 54 00:04:14,030 --> 00:04:18,740 So let me just write in the obnoxious as modern. 55 00:04:21,310 --> 00:04:22,520 Not like this. 56 00:04:23,800 --> 00:04:25,240 Darts star. 57 00:04:27,050 --> 00:04:36,290 And Mod Gin is equal to zero and by adding. 58 00:04:38,200 --> 00:04:39,370 Is also zero. 59 00:04:40,910 --> 00:04:45,710 I hope it's gone now, and I know it doesn't. 60 00:04:46,660 --> 00:04:55,660 So let in just doing all this and go to the next door to see this only and like. 61 00:04:57,220 --> 00:04:58,300 Well, the whole body. 62 00:04:59,690 --> 00:05:06,140 Like, we'll be disabling this mod into the whole party, and that will be not our dart because it's 63 00:05:06,140 --> 00:05:09,290 not a customized class name. 64 00:05:09,810 --> 00:05:17,060 That'll be margin of zero and that will be Baoding of zero. 65 00:05:19,040 --> 00:05:20,050 Okay. 66 00:05:20,090 --> 00:05:21,110 Okay, it worked. 67 00:05:21,110 --> 00:05:22,280 It worked out for us. 68 00:05:23,300 --> 00:05:23,780 Now. 69 00:05:25,150 --> 00:05:31,420 We go back to the ceasefire and we'll style the nerve container for the. 70 00:05:35,070 --> 00:05:36,070 Not nerve center. 71 00:05:36,090 --> 00:05:38,370 Right now, we are working on the NAB container. 72 00:05:39,790 --> 00:05:46,360 So the nav container we will be displaying block now, y we'll be doing this. 73 00:05:46,540 --> 00:05:47,980 You will get this in a moment. 74 00:05:49,370 --> 00:05:57,530 Next, we'll be giving the position to a relative because the amount which will be shown like the total 75 00:05:57,530 --> 00:06:02,180 count of the product will be shown that should be shown. 76 00:06:02,330 --> 00:06:04,310 Like about as big. 77 00:06:04,820 --> 00:06:05,180 All right. 78 00:06:05,810 --> 00:06:08,840 That's why we've done it does go back. 79 00:06:10,230 --> 00:06:11,780 And things are not. 80 00:06:12,740 --> 00:06:15,560 Things have not changed, but that's alright. 81 00:06:17,590 --> 00:06:19,540 Nap containers, spellings right now. 82 00:06:20,380 --> 00:06:21,460 Yeah, it is. 83 00:06:21,820 --> 00:06:24,190 OK, so now let's dial the amount. 84 00:06:25,240 --> 00:06:26,060 Containers. 85 00:06:28,250 --> 00:06:29,030 So. 86 00:06:30,230 --> 00:06:32,480 The mound container would be. 87 00:06:34,610 --> 00:06:43,160 Position would be absolute, actually, because that is above the that should be displayed above the. 88 00:06:44,240 --> 00:06:48,080 Bag in the bag, I can't. 89 00:06:48,860 --> 00:06:56,660 That would be a top margin, or you can say, padding of pointed five audience. 90 00:06:59,110 --> 00:07:01,690 Like, I think Sears is from coast to coast. 91 00:07:02,350 --> 00:07:03,920 There's so much time consuming. 92 00:07:03,970 --> 00:07:10,510 That's why I like to do it in advance and then I just directly implement it. 93 00:07:11,200 --> 00:07:16,260 So we'll be doing that only from the next two years will not be writing this from scratch because it's 94 00:07:16,270 --> 00:07:17,590 almost time consuming and. 95 00:07:18,820 --> 00:07:20,920 We will miss like the important things. 96 00:07:24,110 --> 00:07:27,680 We are doing this on one, seven, five of Went. 97 00:07:29,870 --> 00:07:33,970 One owned by all party and via forthright Adam here. 98 00:07:35,270 --> 00:07:38,330 Because it will have no meaning if I don't give it a unique. 99 00:07:40,050 --> 00:07:40,400 OK. 100 00:07:40,580 --> 00:07:43,560 That is a word that is a height. 101 00:07:43,580 --> 00:07:49,070 Of course, that is a word that would be a height that is also the same. 102 00:07:51,320 --> 00:07:52,640 Writings, he says. 103 00:07:55,990 --> 00:08:00,220 So border really is not border or a radius. 104 00:08:01,580 --> 00:08:05,060 Border radius would be 50 percent. 105 00:08:06,990 --> 00:08:15,150 Now, you know why whenever you give border radius 50 percent to a container or an element basically 106 00:08:15,150 --> 00:08:17,490 that is converted into a circle? 107 00:08:18,150 --> 00:08:25,300 Of course, because what is border radius use for border radius is used to give golf to a particular 108 00:08:26,230 --> 00:08:27,900 a particular element. 109 00:08:28,140 --> 00:08:31,530 And if you go to the 50 percent, obviously it is be. 110 00:08:31,560 --> 00:08:33,450 It's now converted to a circle. 111 00:08:33,460 --> 00:08:35,210 So that's what I wondered. 112 00:08:35,790 --> 00:08:38,310 That's what I converted into a circle. 113 00:08:38,310 --> 00:08:44,550 So now I'm giving a background color to that particular component or the element. 114 00:08:44,550 --> 00:08:44,970 So. 115 00:08:46,610 --> 00:08:52,520 I can't remember the Hex code, because one three, one six three. 116 00:08:53,930 --> 00:08:54,350 OK. 117 00:08:56,150 --> 00:08:56,480 Yeah. 118 00:08:57,420 --> 00:09:05,460 Then we'll be displaying flags, this blue flag is just to make things responsive, a line item center, 119 00:09:05,470 --> 00:09:14,970 my favorite line of CSIS and justified content of my other favorite line justify content, not items. 120 00:09:16,860 --> 00:09:22,630 Broken turns to OK, now let us see what we have done so far. 121 00:09:24,080 --> 00:09:24,710 OK. 122 00:09:25,340 --> 00:09:30,980 Things have become to look a little similar, but not so much so. 123 00:09:32,430 --> 00:09:34,530 We need to write a little more thesis for it. 124 00:09:36,420 --> 00:09:43,350 Full story, what I'm noticing here is that see this big a lot of our time. 125 00:09:43,890 --> 00:09:49,170 But what will be doing next is really just like I've already created this project and I will do design 126 00:09:49,170 --> 00:09:51,840 this year so that we'll be using that system only. 127 00:09:52,170 --> 00:09:56,790 Of course, I'll be explaining each line, but we're not tapping the scissors from scratch because that 128 00:09:56,790 --> 00:10:03,360 is taking a lot of time, and we might miss the important concept of risk by doing CSI only. 129 00:10:03,600 --> 00:10:10,200 It will be like doing it now from the next time we'll be just grabbing this surface from my files and 130 00:10:10,200 --> 00:10:11,370 we'll be just pasting into.