1 00:00:01,330 --> 00:00:02,360 ‫Hey, there, welcome back. 2 00:00:02,380 --> 00:00:05,950 ‫Let us continue our journey with our current profiling card. 3 00:00:06,730 --> 00:00:08,790 ‫So let me try to drag it here. 4 00:00:08,830 --> 00:00:10,360 ‫We can work with all defiance files. 5 00:00:11,260 --> 00:00:12,460 ‫OK, this looks fine. 6 00:00:13,240 --> 00:00:19,270 ‫Now the next thing I'm going to do is if you see I have all the content on some simple things that I 7 00:00:19,270 --> 00:00:22,720 ‫can do is just add a border, add something like this. 8 00:00:22,720 --> 00:00:24,940 ‫But the thing is, let's walk with S.. 9 00:00:25,600 --> 00:00:31,620 ‫The first thing I'm going to do is Andy Cohen corner back here because I think now you have information. 10 00:00:31,630 --> 00:00:33,490 ‫What a rough section we are working. 11 00:00:34,590 --> 00:00:40,310 ‫For temporary purposes, this white collar that will be easy for you to recognize, but I think now 12 00:00:40,440 --> 00:00:43,050 ‫it's good time for you to understand how we are going to walk. 13 00:00:43,590 --> 00:00:47,220 ‫So, OK, now we can visualize the problem that we are going to face. 14 00:00:47,580 --> 00:00:49,320 ‫The first problem is about the. 15 00:00:50,640 --> 00:00:56,160 ‫So I'm going to select the font color, just jump onto body and I'm going to change default color for 16 00:00:56,160 --> 00:00:56,840 ‫everything. 17 00:00:56,850 --> 00:00:57,300 ‫Why? 18 00:00:57,690 --> 00:01:00,450 ‫Because this is the only text that we are going to walk. 19 00:01:00,720 --> 00:01:03,300 ‫So it's better for me to change her accent. 20 00:01:03,810 --> 00:01:07,400 ‫So I just select color hair on her. 21 00:01:07,410 --> 00:01:09,540 ‫Let me try to use white for now. 22 00:01:11,340 --> 00:01:12,270 ‫Save this one. 23 00:01:12,300 --> 00:01:13,110 ‫Get back here. 24 00:01:14,900 --> 00:01:15,690 ‫OK, much better. 25 00:01:15,800 --> 00:01:22,220 ‫But I want something light so that you can jump and use the exact color that you want. 26 00:01:22,940 --> 00:01:26,510 ‫Since I have already selected it so I can directly either test. 27 00:01:27,580 --> 00:01:28,510 ‫Save the Swan. 28 00:01:31,790 --> 00:01:33,680 ‫OK, so this is the exact color. 29 00:01:34,100 --> 00:01:39,230 ‫There are fewer things that you will realize that OK in the font is pretty different how we are going 30 00:01:39,230 --> 00:01:40,130 ‫to control that. 31 00:01:40,490 --> 00:01:43,400 ‫So don't worry, we are going to utilize Google Fonts. 32 00:01:43,820 --> 00:01:49,370 ‫We are not going to realize the direction which our default with our current browser or our current 33 00:01:49,370 --> 00:01:49,790 ‫code. 34 00:01:50,210 --> 00:01:52,370 ‫We are going to try this without Google. 35 00:01:52,380 --> 00:01:54,890 ‫Font will be doing that a bit later. 36 00:01:55,220 --> 00:01:57,410 ‫But for now, let's work with this section. 37 00:01:57,980 --> 00:02:02,630 ‫So the first thing I want is I want this image to be at the center. 38 00:02:03,020 --> 00:02:05,390 ‫And also, this will be at the top here. 39 00:02:06,050 --> 00:02:11,240 ‫What I can do is simply select the image, do some center things, and that should be fine. 40 00:02:11,810 --> 00:02:13,050 ‫It's not that simple. 41 00:02:13,330 --> 00:02:18,860 ‫I can jump if you remember the concept of whole in line and block. 42 00:02:19,340 --> 00:02:21,400 ‫So this is in line again. 43 00:02:21,410 --> 00:02:22,850 ‫The image is also in line. 44 00:02:23,210 --> 00:02:29,570 ‫That means to move it at the center, either I have to select their position and do that, or what I 45 00:02:29,570 --> 00:02:33,670 ‫can do is I can convert this into a block and then centric. 46 00:02:34,360 --> 00:02:35,990 ‫That will be much, much better. 47 00:02:36,380 --> 00:02:42,740 ‫So what I can do is select my image and then convert it into a block so that I can use display. 48 00:02:42,770 --> 00:02:47,000 ‫And by default, it's in line for image and had I can use block. 49 00:02:47,570 --> 00:02:56,120 ‫Now it's a new block and you can see now I can say, OK, Martin left and margin light as auto. 50 00:02:56,180 --> 00:02:58,940 ‫That means port side margin will be equal. 51 00:02:59,270 --> 00:03:00,710 ‫Audiovisual beard center. 52 00:03:01,010 --> 00:03:06,360 ‫So suppose here I say margin as auto on. 53 00:03:06,380 --> 00:03:09,770 ‫If I get back here, you can see other images are this enter? 54 00:03:10,560 --> 00:03:12,910 ‫We can convert this into our entire block. 55 00:03:12,920 --> 00:03:18,560 ‫And then I added equal space on or decide it's working fine. 56 00:03:19,160 --> 00:03:21,320 ‫Now I need to do something with this pro. 57 00:03:21,320 --> 00:03:25,370 ‫This law is not following the online thing or anything else. 58 00:03:26,240 --> 00:03:29,360 ‫Now, first thing is, this pro doesn't looks normal to me. 59 00:03:30,110 --> 00:03:36,890 ‫What we can do is we can use absolute and then decided its position from top and from the left itself. 60 00:03:37,370 --> 00:03:43,550 ‫Since this is inside a container, it will depend on a patent or top and bottom so we can add it here. 61 00:03:44,150 --> 00:03:47,650 ‫So what I'm going to do is I'm going to give it a name. 62 00:03:47,720 --> 00:03:53,600 ‫So here, let me jump on to my spine and I'm going to call this class as proof. 63 00:03:55,660 --> 00:03:57,730 ‫And now inside my personal. 64 00:03:59,390 --> 00:04:01,010 ‫I can select this room. 65 00:04:02,350 --> 00:04:04,570 ‫And then I can do whatever I want. 66 00:04:04,600 --> 00:04:11,740 ‫The first thing I want to do is I want to add a background Colorado corn cutter and do the normal things. 67 00:04:12,160 --> 00:04:16,450 ‫So here I'm going to select background color, jump hair. 68 00:04:18,700 --> 00:04:20,440 ‫Selective background color that you want. 69 00:04:24,180 --> 00:04:26,970 ‫OK, this looks much better. 70 00:04:30,090 --> 00:04:36,410 ‫The next thing is, I want to change the text color, so definitely I'm going to utilize the dark coercion. 71 00:04:38,760 --> 00:04:39,960 ‫Once that is done. 72 00:04:41,200 --> 00:04:47,920 ‫We need the hard border, we need to take up our position and also change the font size, so the best 73 00:04:47,920 --> 00:04:50,650 ‫thing I can do is question the font size had. 74 00:04:51,730 --> 00:04:56,920 ‫On site, let me take one point six and save this one. 75 00:04:59,720 --> 00:05:00,830 ‫This looks too big. 76 00:05:01,250 --> 00:05:04,340 ‫Let me try to use one point for him. 77 00:05:06,570 --> 00:05:07,350 ‫Much better. 78 00:05:07,830 --> 00:05:14,010 ‫OK, now we need to give it correct position, actually, the current position is not the right one 79 00:05:14,010 --> 00:05:14,810 ‫for this photo. 80 00:05:15,420 --> 00:05:19,050 ‫So what I can do is I can utilize position absolute. 81 00:05:24,820 --> 00:05:28,190 ‫Remember, this is, you know, zero zero zero. 82 00:05:28,570 --> 00:05:31,330 ‫So I can give dolphin and everything. 83 00:05:31,480 --> 00:05:41,380 ‫That means values also quick revision here position absolute depends on ancestor or DPD, which currently 84 00:05:41,380 --> 00:05:43,120 ‫have opposition property. 85 00:05:43,600 --> 00:05:46,360 ‫Remember, we are looking for the nearest ancestor. 86 00:05:47,020 --> 00:05:53,830 ‫In our case, if you observe our Dziedzic beta, which is the bill and currently this debate, don't 87 00:05:53,860 --> 00:05:56,110 ‫hold any type of position property. 88 00:05:57,040 --> 00:05:58,870 ‫And if you observe our section. 89 00:05:59,600 --> 00:06:03,850 ‫Yes, currently, the section holds opposition position, property of absolute. 90 00:06:04,540 --> 00:06:11,710 ‫So that means if we pass any type of value related to top, bottom left and right along with Z Index, 91 00:06:12,100 --> 00:06:15,010 ‫it will depend on this whole section. 92 00:06:15,670 --> 00:06:18,250 ‫I hope you remember the concept of position. 93 00:06:19,600 --> 00:06:24,340 ‫So her top should be one and then left should be one of them. 94 00:06:27,220 --> 00:06:28,420 ‫This looks fine to me. 95 00:06:28,450 --> 00:06:29,300 ‫Get back here. 96 00:06:30,280 --> 00:06:31,890 ‫OK, this is too small. 97 00:06:32,650 --> 00:06:34,570 ‫It may try to zoom a bit. 98 00:06:35,080 --> 00:06:36,580 ‫You can say it's too small. 99 00:06:39,120 --> 00:06:43,900 ‫What I can use is 1.5 here and two here. 100 00:06:44,310 --> 00:06:49,950 ‫To be honest, I have more idea about these room because I've already designed something similar. 101 00:06:49,980 --> 00:06:57,600 ‫I know the exact points here, so I just try to use different values so you get experience. 102 00:06:58,730 --> 00:06:59,870 ‫This is much better. 103 00:06:59,960 --> 00:07:05,570 ‫Now I also need to add certain padding there so that I pro as much veteran champ. 104 00:07:06,110 --> 00:07:12,230 ‫What I'm going to do is add some padding for top as well as for the excesses as well as the y axis. 105 00:07:12,770 --> 00:07:18,610 ‫So what I'm going to do is regard padding here and I'm going cross-legged 0.4 one then. 106 00:07:18,830 --> 00:07:21,410 ‫And also I'm going to select 0.5 RAM. 107 00:07:21,890 --> 00:07:23,940 ‫This is going to be for top and bottom. 108 00:07:23,960 --> 00:07:26,320 ‫This is going to be four left and right. 109 00:07:26,330 --> 00:07:27,230 ‫Save this one. 110 00:07:28,620 --> 00:07:28,970 ‫OK. 111 00:07:29,010 --> 00:07:30,480 ‫This is much better now. 112 00:07:31,730 --> 00:07:33,320 ‫Let me add some more space. 113 00:07:35,790 --> 00:07:37,080 ‫0.7 REM. 114 00:07:39,150 --> 00:07:39,960 ‫OK, perfect. 115 00:07:39,990 --> 00:07:42,360 ‫The only thing is, I think we need to add water. 116 00:07:42,390 --> 00:07:43,380 ‫Everything is fine. 117 00:07:43,860 --> 00:07:46,650 ‫So what I can do is I can simply add water here. 118 00:07:47,940 --> 00:07:49,170 ‫Let me add water. 119 00:07:49,650 --> 00:07:52,340 ‫It should be one fix. 120 00:07:52,830 --> 00:07:58,440 ‫Then I'm working on solid and then I'm going to use exact same color for background. 121 00:08:00,930 --> 00:08:04,080 ‫And once that is done, I can simply add a border radius. 122 00:08:05,130 --> 00:08:09,690 ‫And this time this is going to be zero going to them saying this one. 123 00:08:12,260 --> 00:08:17,630 ‫OK, this looks much better for this part, has done this whole part is done. 124 00:08:17,990 --> 00:08:23,090 ‫We need to add certain spacing in all the other things, but this part looks much better now. 125 00:08:23,750 --> 00:08:30,230 ‫The first thing I want to do is just to make this whole thing look better is the first thing is prove 126 00:08:30,230 --> 00:08:33,740 ‫are formed and also to our basic setting. 127 00:08:33,740 --> 00:08:38,750 ‫Like I need to add a bar that I know had I need to add some border radius to make it like this. 128 00:08:39,140 --> 00:08:41,540 ‫Add some padding here and change the color. 129 00:08:41,960 --> 00:08:44,930 ‫So let's do this to task in the next lecture. 130 00:08:45,230 --> 00:08:51,140 ‫In this lecture, we just completed the pro part and just had a better format in the next lecture. 131 00:08:51,140 --> 00:08:52,640 ‫Let us do something more. 132 00:08:53,210 --> 00:08:57,030 ‫I hope you are understanding about this whole thing in the next election. 133 00:08:57,030 --> 00:08:58,130 ‫Let us continue that.