1 00:00:01,110 --> 00:00:01,680 ‫Hey, there. 2 00:00:01,800 --> 00:00:02,550 ‫Welcome back. 3 00:00:02,910 --> 00:00:08,670 ‫Now in this lecture, let us focus on this log in button then now we have been doing everything very 4 00:00:08,670 --> 00:00:11,730 ‫quickly and we have been understanding all the concept. 5 00:00:12,190 --> 00:00:15,000 ‫Now it's good time for us to focus on this log in button. 6 00:00:15,630 --> 00:00:20,640 ‫The first thing that you should get in mind and I want to be on walking with a button, right click 7 00:00:20,640 --> 00:00:24,000 ‫and this is an inline display. 8 00:00:25,390 --> 00:00:31,600 ‫So that means I need to do something together at the center, basic thing is I can convert it into a 9 00:00:31,600 --> 00:00:35,530 ‫blog and then move it at the center with the help of margin. 10 00:00:36,220 --> 00:00:39,160 ‫That's the base idea that we usually get. 11 00:00:39,370 --> 00:00:40,690 ‫And it worked fine. 12 00:00:41,140 --> 00:00:45,250 ‫So if I get back in, I'm going to select the button. 13 00:00:45,850 --> 00:00:47,010 ‫Let's try something else. 14 00:00:47,410 --> 00:00:49,180 ‫Don't try to select button directly. 15 00:00:49,180 --> 00:00:52,870 ‫We can also try using something like attribute selector. 16 00:00:54,920 --> 00:00:58,250 ‫So likely I'm going to select all and then I'm going to select Button. 17 00:00:58,490 --> 00:01:00,560 ‫It's going to work when I can do that. 18 00:01:00,830 --> 00:01:05,400 ‫But suppose I want to only select Button, which has bypass summit. 19 00:01:05,630 --> 00:01:09,080 ‫What I'm going to do is I'm Luke, utilize this attribute. 20 00:01:09,440 --> 00:01:14,990 ‫So here, suppose if I need to do that, I can use brackets and then I need to pass the attribute and 21 00:01:15,830 --> 00:01:17,720 ‫remember the attribute selector. 22 00:01:18,620 --> 00:01:24,620 ‫And then I'm going to convert this into block, or there's going to be a complete line, and then I 23 00:01:24,620 --> 00:01:29,090 ‫can directly add margin, which is going to be auto save this one. 24 00:01:29,960 --> 00:01:31,250 ‫You can see the center now. 25 00:01:31,610 --> 00:01:36,380 ‫So margin auto works really well whenever you want to send good things like this. 26 00:01:36,620 --> 00:01:39,020 ‫If this is a block, remember this point. 27 00:01:40,040 --> 00:01:42,980 ‫Also, Margin Auto is walking for on site. 28 00:01:43,280 --> 00:01:44,210 ‫Let me remove this. 29 00:01:44,210 --> 00:01:48,680 ‫Let me use them for top and bottom and then auto collecting, right? 30 00:01:50,370 --> 00:01:53,040 ‫The next thing is, I did everything with this button. 31 00:01:53,700 --> 00:01:59,430 ‫So what I'm going to do is cost increase, the font size, which is the basic property going to be used, 32 00:01:59,430 --> 00:02:04,320 ‫1.6 RAM should be fine, or maybe one point eight. 33 00:02:07,450 --> 00:02:08,410 ‫Look fine to me. 34 00:02:09,150 --> 00:02:15,820 ‫Well, check once we complete the button, next thing we need is to increase the button size that means 35 00:02:16,240 --> 00:02:20,390 ‫our distance between the content of button and the border. 36 00:02:21,100 --> 00:02:22,690 ‫So simply add padding here. 37 00:02:23,170 --> 00:02:31,150 ‫What they're going to do is add padding 0.9 then and then I'm going to save this one. 38 00:02:32,500 --> 00:02:33,790 ‫OK, big enough. 39 00:02:35,870 --> 00:02:41,930 ‫Or let me remove this one, and I'll wait here and try to use 90 percent, save this one. 40 00:02:43,370 --> 00:02:43,850 ‫OK? 41 00:02:43,880 --> 00:02:46,550 ‫This is much better to cover the whole button. 42 00:02:47,150 --> 00:02:51,080 ‫One thing I need to address padding on the top and bottom, that's for sure. 43 00:02:51,410 --> 00:02:53,150 ‫So I can use padding here. 44 00:02:53,810 --> 00:02:59,760 ‫And then for top and bottom, I can use 0.9 them and then let that be awkward. 45 00:02:59,780 --> 00:03:00,800 ‫Zero both in the. 46 00:03:01,400 --> 00:03:02,270 ‫Save this one. 47 00:03:03,140 --> 00:03:04,580 ‫You can see it's working fine. 48 00:03:05,510 --> 00:03:12,050 ‫So because of the workout partners as big as well as because of this padding, this is working fine. 49 00:03:13,940 --> 00:03:17,040 ‫The next thing if you focus is the bottom go. 50 00:03:17,300 --> 00:03:24,650 ‫So I need to add radios that has my border radius and this is going to be maybe to them. 51 00:03:26,490 --> 00:03:27,240 ‫It back here. 52 00:03:29,990 --> 00:03:31,880 ‫Let me take one point seven. 53 00:03:33,930 --> 00:03:34,770 ‫Much better. 54 00:03:34,980 --> 00:03:36,570 ‫OK, this looks fine, actually. 55 00:03:36,990 --> 00:03:44,520 ‫So now we have our button, but we need to remove the current background as well as the border should 56 00:03:44,520 --> 00:03:45,060 ‫be simple. 57 00:03:46,410 --> 00:03:49,110 ‫Remove the border simply are none. 58 00:03:51,090 --> 00:03:58,590 ‫And then I need background so I can use background, color and hat, I'm going to utilize our different 59 00:03:58,590 --> 00:03:59,490 ‫shade of blue. 60 00:04:01,260 --> 00:04:03,000 ‫Save this on get back here. 61 00:04:03,330 --> 00:04:04,260 ‫Much better. 62 00:04:04,440 --> 00:04:11,580 ‫OK, I need to update the font color as well as previous color at Simple White so I can use. 63 00:04:15,220 --> 00:04:16,720 ‫OK, much better. 64 00:04:16,750 --> 00:04:18,190 ‫OK, I know how I do this. 65 00:04:18,460 --> 00:04:21,270 ‫I need point that that should be simple. 66 00:04:21,340 --> 00:04:22,150 ‫Get back in. 67 00:04:24,160 --> 00:04:29,830 ‫I just need to copy these things that are cut here and simply are what effect? 68 00:04:31,560 --> 00:04:38,280 ‫And inside this, I need to add, Carson asked Point, I've seen this one get back here, looks fine. 69 00:04:41,360 --> 00:04:47,410 ‫And also, if you are working with these birds, you can change maybe a foreign rig. 70 00:04:47,600 --> 00:04:47,930 ‫Yeah. 71 00:04:48,470 --> 00:04:53,750 ‫So that our chances are that certain birds will have maybe 900, I'm just giving an example. 72 00:04:54,170 --> 00:05:00,080 ‫Or maybe they will have something like launders and button is pretty small and maybe something like 73 00:05:00,080 --> 00:05:04,580 ‫cancel button or maybe something else, depending on what angle button. 74 00:05:04,820 --> 00:05:06,920 ‫But the correct button looks fine to me. 75 00:05:07,400 --> 00:05:13,340 ‫If you want to change the font, which you can utilize maybe 600 700 or try something different. 76 00:05:13,880 --> 00:05:14,990 ‫So this looks fine. 77 00:05:15,770 --> 00:05:21,890 ‫Now the next one is about not on my action, which should be easy to catch. 78 00:05:23,210 --> 00:05:23,660 ‫OK. 79 00:05:23,870 --> 00:05:26,590 ‫One thing you realize that this isn't low. 80 00:05:28,230 --> 00:05:34,680 ‫That means I need to select this specifically, so what I'm going to do is I'm going to use using span. 81 00:05:36,010 --> 00:05:44,200 ‫Why is because Barney's and main property, and I don't need to change anything, so that means I can 82 00:05:44,200 --> 00:05:49,120 ‫still select this part only because spam is in line properly. 83 00:05:50,280 --> 00:05:56,010 ‫Otherwise, if I use Blue Dog, it will again create a new paragraph, I don't want that I want be and 84 00:05:56,010 --> 00:06:00,830 ‫then I want to select a specific text inside the B so I can utilize span. 85 00:06:01,770 --> 00:06:02,910 ‫I hope you got the idea. 86 00:06:03,360 --> 00:06:06,300 ‫So first, I need to select the speech and change. 87 00:06:06,300 --> 00:06:08,790 ‫The font size should be simple. 88 00:06:09,270 --> 00:06:10,120 ‫You have the speech. 89 00:06:10,140 --> 00:06:14,650 ‫Let me call this something otherwise if we have any other vehicle. 90 00:06:15,160 --> 00:06:20,280 ‫So I'm going to call this as maybe baby registry option or maybe as long in message. 91 00:06:20,400 --> 00:06:22,860 ‫So we can remember that on log in page. 92 00:06:22,860 --> 00:06:23,760 ‫This passage will. 93 00:06:24,120 --> 00:06:27,660 ‫Maybe if there is a registration page, there will be 13 other messages. 94 00:06:28,260 --> 00:06:32,150 ‫So a logging message should be to go. 95 00:06:33,270 --> 00:06:41,100 ‫If I get back here, what I'm going to do is I'm going to simply select the odd part and then inside 96 00:06:41,100 --> 00:06:42,240 ‫that there will be. 97 00:06:46,650 --> 00:06:52,110 ‫So the first thing I'm going to do is remember, this is a blog which is pre blog. 98 00:06:52,500 --> 00:06:54,540 ‫I want to align it at this point. 99 00:06:54,690 --> 00:06:58,650 ‫So what I can do is I can use text align center. 100 00:06:59,220 --> 00:07:00,300 ‫That is easy. 101 00:07:00,660 --> 00:07:06,210 ‫The next thing is I need to increase the font size basic property, just use font size. 102 00:07:06,840 --> 00:07:12,660 ‫And here I need maybe 1.8m because we have been using quite a few times now. 103 00:07:14,050 --> 00:07:15,250 ‫OK, much better. 104 00:07:16,480 --> 00:07:18,880 ‫And the next thing is select the spanner. 105 00:07:21,350 --> 00:07:22,890 ‫You guys are smart, actually. 106 00:07:22,910 --> 00:07:23,390 ‫So. 107 00:07:25,320 --> 00:07:29,040 ‫And if we remove this and what I'm going to do just like this one. 108 00:07:29,910 --> 00:07:33,540 ‫OK, you guys are smart and I just need to change your color. 109 00:07:34,330 --> 00:07:36,270 ‫And let me try to use discoloured self. 110 00:07:36,270 --> 00:07:36,980 ‫Save this one. 111 00:07:37,020 --> 00:07:37,650 ‫Get back here. 112 00:07:37,920 --> 00:07:38,640 ‫Much better. 113 00:07:39,000 --> 00:07:39,570 ‫What do you see? 114 00:07:39,570 --> 00:07:47,130 ‫This is some bold stuff, so that means the font weight is different on saddle color, the exact calories 115 00:07:47,130 --> 00:07:49,230 ‫this and then font weight. 116 00:07:50,410 --> 00:07:53,110 ‫Let me try it and send this one. 117 00:07:55,740 --> 00:07:58,170 ‫Looks fine to me if we try six hundred. 118 00:08:02,630 --> 00:08:03,770 ‫Looks fine to me. 119 00:08:04,790 --> 00:08:06,860 ‫OK, this is perfect for me, actually. 120 00:08:08,570 --> 00:08:15,020 ‫The only thing that is remaining is the Howard effect, if you see, yup, I need to add some hard effect. 121 00:08:15,350 --> 00:08:23,060 ‫What I'm going to do is jump here, select the exact same thing, and here I need to select our part. 122 00:08:24,260 --> 00:08:32,000 ‫And remove this content on our clothes, use Carson Point to save this one and get back here much better. 123 00:08:33,050 --> 00:08:36,150 ‫So I hope you got the idea what we just did. 124 00:08:36,820 --> 00:08:39,410 ‫Now there are two specific things are remaining. 125 00:08:39,420 --> 00:08:40,820 ‫That is my former image. 126 00:08:41,060 --> 00:08:45,440 ‫I need to add this whatever image and the fixed position. 127 00:08:46,310 --> 00:08:49,550 ‫Also, the other thing that is remaining is this. 128 00:08:50,330 --> 00:08:52,180 ‫I don't want this word. 129 00:08:52,190 --> 00:08:53,240 ‫I want something else. 130 00:08:53,690 --> 00:08:57,680 ‫So we are going to talk about minimumweight as well as maximum word concept. 131 00:08:58,790 --> 00:09:01,130 ‫I hope they know you understood everything. 132 00:09:01,640 --> 00:09:06,650 ‫Make sure if you have any doubt, rewatch the lectures on all of these basic concepts, we are just 133 00:09:06,650 --> 00:09:08,390 ‫understanding their implementation. 134 00:09:09,050 --> 00:09:10,550 ‫I hope this lecture was helpful. 135 00:09:10,760 --> 00:09:11,810 ‫Thank you for following. 136 00:09:12,080 --> 00:09:18,860 ‫And in the next lecture, let us understand about the concept, which is our worth as good as this quarter. 137 00:09:19,640 --> 00:09:22,100 ‫Thank you for calling and I see you guys in the next one.