1 00:00:00,650 --> 00:00:01,230 ‫Hey, there. 2 00:00:01,250 --> 00:00:01,970 ‫Welcome back. 3 00:00:02,120 --> 00:00:07,610 ‫Now let us continue our task with our current project, as I said in the previous lecture, I want to 4 00:00:07,610 --> 00:00:12,320 ‫first just start walking with The Fonz as well as the current image. 5 00:00:12,890 --> 00:00:18,740 ‫So the first thing I'm going to do is I'm going to just add some spacing, padding, whatever I want 6 00:00:18,740 --> 00:00:20,810 ‫with this image along with the border. 7 00:00:21,260 --> 00:00:23,390 ‫So that will be some simple task. 8 00:00:23,450 --> 00:00:27,860 ‫All I have to do is just jump here and inside my image part. 9 00:00:27,950 --> 00:00:33,350 ‫I just need to add basic setting since I already have this work and the height is already arranged. 10 00:00:33,350 --> 00:00:36,110 ‫But if you want, you can add up fixed height. 11 00:00:36,350 --> 00:00:43,460 ‫Since my image was already in the ratio of one by one, that means a 400 pixel by 400 pixels. 12 00:00:43,820 --> 00:00:46,430 ‫Otherwise, you need to add some fixed height as well. 13 00:00:46,490 --> 00:00:51,920 ‫So nothing is going to affect much because I already had a corrected issue image. 14 00:00:52,370 --> 00:00:54,050 ‫So remember this point? 15 00:00:54,560 --> 00:00:57,230 ‫So here now I have it, as well as height. 16 00:00:57,530 --> 00:01:00,290 ‫I already converted them into blocks. 17 00:01:00,830 --> 00:01:06,260 ‫The first thing I'm going to do is add a border as soon as I want to add border radius. 18 00:01:06,500 --> 00:01:11,600 ‫So simple thing is just add a border radius 50 percent if you do that. 19 00:01:12,810 --> 00:01:14,720 ‫Your images already in ASARCO. 20 00:01:15,090 --> 00:01:16,230 ‫That's great thing. 21 00:01:16,650 --> 00:01:19,140 ‫I just need to add some mortar radius now. 22 00:01:19,650 --> 00:01:25,830 ‫So the simple thing is just our order and 0.2 them should be fine. 23 00:01:26,200 --> 00:01:31,620 ‫I'm going to use salad and then I need to utilize the column as select the colors. 24 00:01:33,500 --> 00:01:37,250 ‫And let me save this one much better. 25 00:01:37,730 --> 00:01:39,110 ‫But head, if you observe. 26 00:01:40,830 --> 00:01:45,360 ‫We are just touching it at the top, which is the problem. 27 00:01:45,570 --> 00:01:48,210 ‫If you observe, how do we have certain space, right? 28 00:01:49,110 --> 00:01:51,660 ‫The easiest thing you can do is add batting. 29 00:01:51,900 --> 00:01:55,110 ‫So in this way, you will create some space from the top. 30 00:01:57,270 --> 00:02:03,480 ‫So how if you jump back and if you remember we created this whole section, and I just want to skip 31 00:02:03,510 --> 00:02:05,860 ‫this whole personal section of it down. 32 00:02:06,570 --> 00:02:07,710 ‫That's my main aim. 33 00:02:08,040 --> 00:02:11,470 ‫If I do parting with the image, it will create padding inside itself. 34 00:02:11,490 --> 00:02:14,950 ‫That means it will create padding from border to image. 35 00:02:14,970 --> 00:02:18,420 ‫Remember that that we discussed during the backstory. 36 00:02:18,720 --> 00:02:22,320 ‫If I add padding with the major to create space in itself. 37 00:02:23,040 --> 00:02:25,050 ‫Now here, let me add some padding. 38 00:02:26,090 --> 00:02:30,290 ‫And this time the padding should be maybe five nine. 39 00:02:32,680 --> 00:02:35,230 ‫But that will add binding on all sides. 40 00:02:35,290 --> 00:02:40,150 ‫I don't want that actually until this is too much in my head. 41 00:02:40,900 --> 00:02:49,480 ‫So let me use batting maybe as 2.5m for now and then for my left, I don't want any and on boredom, 42 00:02:49,480 --> 00:02:52,480 ‫let me add 1.5m and right. 43 00:02:52,500 --> 00:02:56,380 ‫I don't want any saving this one much better. 44 00:02:56,530 --> 00:03:01,650 ‫So I just added at the top bottom, nothing is here for this whole section. 45 00:03:01,690 --> 00:03:04,330 ‫Remember, we have selected the whole section. 46 00:03:05,440 --> 00:03:06,610 ‫This looks fine now. 47 00:03:07,030 --> 00:03:09,640 ‫Now the next thing I want to discuss about the phone. 48 00:03:10,060 --> 00:03:15,580 ‫So the first thing I'm definitely going to discuss is about this Google one, but before that, let 49 00:03:15,580 --> 00:03:20,230 ‫me increase the size so we have much better understanding about everything. 50 00:03:22,320 --> 00:03:27,330 ‫So instead of selecting them differently, what I'm going to do is I'm going to give them glasses. 51 00:03:28,470 --> 00:03:33,540 ‫The specific views on this, we are going to have multiple paragraphs elsewhere, and I don't want to 52 00:03:33,540 --> 00:03:39,330 ‫mess things, so what I can do is I can give different classes or name and then this will be for our 53 00:03:39,330 --> 00:03:42,480 ‫country and then had I can call this as stock. 54 00:03:44,970 --> 00:03:50,370 ‫This looks fine, so the simplest thing I'm going to do is I'm going to add a class on name. 55 00:03:51,630 --> 00:03:53,100 ‫This is going to be a personal. 56 00:03:54,370 --> 00:03:55,600 ‫And not name. 57 00:03:56,380 --> 00:03:59,380 ‫And then I have option to control everything here. 58 00:03:59,560 --> 00:04:04,750 ‫So for now, I'm just going to increase the font size and call this as five a.m.. 59 00:04:06,090 --> 00:04:12,750 ‫Getting back have a pretty big, pretty big, I know, but the aim is to understand the fonts. 60 00:04:13,440 --> 00:04:16,080 ‫So currently we are utilizing the default font. 61 00:04:16,440 --> 00:04:22,650 ‫We just said and our code, which is also supported by our browser, but that our chances are if you 62 00:04:22,650 --> 00:04:28,710 ‫want to delay some other fonts, maybe you want to utilize these, these different beautiful fonts, 63 00:04:29,160 --> 00:04:31,200 ‫or maybe with your company that you're walking. 64 00:04:31,200 --> 00:04:37,050 ‫They have created their own, like most of the big companies, create their own own and then Open-Source 65 00:04:37,050 --> 00:04:40,830 ‫it, like Uber, has its own font or maybe any other website. 66 00:04:41,070 --> 00:04:43,050 ‫They usually have their own font. 67 00:04:43,470 --> 00:04:47,040 ‫So that's where this whole font changing system comes into picture. 68 00:04:47,460 --> 00:04:54,450 ‫Suppose if I scroll up, if I want to use this roboto, what I need to do is I kind of selective on 69 00:04:54,450 --> 00:04:54,660 ‫that. 70 00:04:54,660 --> 00:04:55,620 ‫I want to import. 71 00:04:55,740 --> 00:04:57,900 ‫Maybe I just want him or this one. 72 00:04:57,900 --> 00:05:00,810 ‫Only this one regular 400. 73 00:05:01,410 --> 00:05:05,190 ‫Select this one, and then I have Option two imported. 74 00:05:05,790 --> 00:05:11,400 ‫So if I just utilized this that it import, I can do that on my thesis itself. 75 00:05:11,610 --> 00:05:13,170 ‫So I copied this one. 76 00:05:14,100 --> 00:05:16,650 ‫Get back here at the top of my CIUSSS. 77 00:05:16,650 --> 00:05:23,120 ‫I can do that, or I can directly select the link, the link part and in order in my email. 78 00:05:23,130 --> 00:05:26,610 ‫But here we can import all our required fonts at the top. 79 00:05:27,680 --> 00:05:32,810 ‫And then use inside our body or whatever the specific position we want. 80 00:05:33,910 --> 00:05:40,840 ‫So I simply need to turn this thing off my phone family, and then I need to find which one they want. 81 00:05:42,330 --> 00:05:48,900 ‫For example, they will have information, use one family, then Gobodo, and then I have option for 82 00:05:48,930 --> 00:05:50,550 ‫this default fund. 83 00:05:51,150 --> 00:05:57,690 ‫That means if by any chance this Roberto doesn't work, maybe the browser doesn't support on. 84 00:05:57,690 --> 00:05:59,470 ‫Maybe this file is not loading. 85 00:05:59,490 --> 00:06:01,140 ‫Or maybe Google is down. 86 00:06:01,530 --> 00:06:02,820 ‫Anything can be a reason. 87 00:06:03,330 --> 00:06:08,230 ‫So then this default fund will come and save this one. 88 00:06:08,280 --> 00:06:09,210 ‫Get back here. 89 00:06:10,480 --> 00:06:12,640 ‫You can see my forms are changed now. 90 00:06:12,940 --> 00:06:16,990 ‫Now here I have specifically joined our regular sending. 91 00:06:16,990 --> 00:06:21,550 ‫That means this is going to be only 400 if you remember 400. 92 00:06:21,730 --> 00:06:26,370 ‫This is different way, but I don't want to utilize Roberto. 93 00:06:26,380 --> 00:06:27,700 ‫I want to get back. 94 00:06:29,340 --> 00:06:33,300 ‫And select some of that one, this looks fine, actually, Maupin's. 95 00:06:34,420 --> 00:06:35,350 ‫Select this one. 96 00:06:35,950 --> 00:06:41,470 ‫Actually, I have the complete length of this, and I did hear. 97 00:06:44,150 --> 00:06:44,390 ‫And. 98 00:06:45,800 --> 00:06:46,580 ‫Get back here. 99 00:06:47,000 --> 00:06:51,740 ‫So this is the current one that we are going to analyze again, this looks fine. 100 00:06:52,880 --> 00:06:53,990 ‫Now get back in. 101 00:06:55,420 --> 00:06:57,010 ‫Actually, let me get back here. 102 00:06:57,400 --> 00:06:57,780 ‫Yeah. 103 00:06:58,460 --> 00:07:02,290 ‫So this looks fine, and I can now remove this one size. 104 00:07:04,770 --> 00:07:05,250 ‫OK. 105 00:07:06,120 --> 00:07:07,230 ‫Back to reality. 106 00:07:07,920 --> 00:07:14,910 ‫Let us start talking with different content, so the first thing I am seeing this, all these contenders 107 00:07:14,910 --> 00:07:16,290 ‫in the center. 108 00:07:16,740 --> 00:07:23,280 ‫So what I can do is I can individually are next text line because if you just right click and click 109 00:07:23,280 --> 00:07:24,300 ‫on Inspector. 110 00:07:25,170 --> 00:07:27,570 ‫You will see all of them are blog content. 111 00:07:27,570 --> 00:07:31,640 ‫So if I see Text Align Center, it will be at the center. 112 00:07:31,680 --> 00:07:40,920 ‫Since this is already blog content and I can do that, so support if I see text align center, save 113 00:07:40,930 --> 00:07:41,460 ‫this one. 114 00:07:42,960 --> 00:07:48,900 ‫You know, this is working fine, so I can select for all of them, if I don't have multiple properties 115 00:07:48,900 --> 00:07:52,910 ‫about them, then I'm going to club them, combine them, head itself. 116 00:07:52,920 --> 00:07:57,600 ‫But I think I'm going to do a lot of things in future for each individual item. 117 00:07:58,290 --> 00:08:02,400 ‫So what I'm going to do is I'm going to create a country here. 118 00:08:03,980 --> 00:08:08,720 ‫And then also, I'm going to take stock, so you get back here. 119 00:08:10,480 --> 00:08:11,650 ‫OK, this is fine. 120 00:08:13,210 --> 00:08:19,990 ‫Now heard, if I do text align with the button, since it's an inline element, it will align the text 121 00:08:19,990 --> 00:08:21,490 ‫off message at the center. 122 00:08:22,150 --> 00:08:28,840 ‫Also, this following will be center inside the button since this is the block and this is the text. 123 00:08:30,170 --> 00:08:34,430 ‫So I need to do something with them, but before that, I need to just settle this out. 124 00:08:34,760 --> 00:08:36,820 ‫So I need to increase the font size. 125 00:08:36,830 --> 00:08:40,070 ‫I also need to increase the padding and all the other things. 126 00:08:40,850 --> 00:08:41,450 ‫OK. 127 00:08:42,870 --> 00:08:47,910 ‫So the first thing I'm going to do, ask for my country, I'm going to change the font size and I'm 128 00:08:47,910 --> 00:08:49,950 ‫going to use 1.3 RAM. 129 00:08:51,170 --> 00:08:57,410 ‫And again, the text alone should be central, which we already did, but I also want to add some space 130 00:08:57,410 --> 00:08:58,430 ‫between these two. 131 00:08:59,450 --> 00:09:05,270 ‫So I can directly use margin because these are two different blogs that are connected and I can use 132 00:09:05,270 --> 00:09:08,270 ‫margin as zero point to save this one. 133 00:09:08,300 --> 00:09:10,520 ‫Get back here much better. 134 00:09:11,030 --> 00:09:12,170 ‫I did one mistake. 135 00:09:12,170 --> 00:09:17,000 ‫I don't know if you remember, but if you noticed, but I have made an interesting mistake related to 136 00:09:17,090 --> 00:09:23,240 ‫one, just keep on falling also for stock that moves forward. 137 00:09:24,260 --> 00:09:30,380 ‫And his size will be one point six REM because this is much bigger. 138 00:09:31,180 --> 00:09:38,150 ‫Text is already center and let me add some margin, so I'm going to prefer margin top, which is going 139 00:09:38,150 --> 00:09:39,950 ‫to be 2.5 billion. 140 00:09:40,160 --> 00:09:42,080 ‫Same this one back here. 141 00:09:42,740 --> 00:09:43,910 ‫OK, much better. 142 00:09:47,030 --> 00:09:50,360 ‫Let me change this stock as capital. 143 00:09:54,070 --> 00:10:00,160 ‫Have you noticed the difference between font This's not matching this, right? 144 00:10:00,640 --> 00:10:01,870 ‫But we encoded it. 145 00:10:02,140 --> 00:10:05,080 ‫Why this is happening, we did something wrong with --. 146 00:10:05,710 --> 00:10:08,680 ‫The thing is, we never replaced this. 147 00:10:10,960 --> 00:10:12,580 ‫This is the real life example. 148 00:10:12,610 --> 00:10:19,210 ‫What happened is you ordered this one, but you are using an all volunteer which doesn't exist now for 149 00:10:19,210 --> 00:10:21,730 ‫this whole system or this one style audiences. 150 00:10:22,270 --> 00:10:25,690 ‫So by default, it is dependent on this white. 151 00:10:26,950 --> 00:10:28,360 ‫That means this one type. 152 00:10:28,390 --> 00:10:34,530 ‫So in general, we are currently using this as a backup and this is currently working at. 153 00:10:34,960 --> 00:10:39,070 ‫So if you want to use weapons, you need to replace this. 154 00:10:41,520 --> 00:10:48,090 ‫So get back here now you can see much better similarity, I hope you got the idea. 155 00:10:48,660 --> 00:10:54,000 ‫So this is the practical use case that he really wanted to give that some back up things. 156 00:10:55,230 --> 00:10:56,550 ‫So that's done now. 157 00:10:56,550 --> 00:10:59,520 ‫We have these three settings done much better. 158 00:10:59,850 --> 00:11:01,290 ‫You need to work on buttons. 159 00:11:01,560 --> 00:11:03,690 ‫So I hope you got the idea with this lecture. 160 00:11:03,690 --> 00:11:11,040 ‫You got certain information about phone as well as a few other settings and how to remember the numbers 161 00:11:11,040 --> 00:11:13,590 ‫that I'm taking is calculated. 162 00:11:13,590 --> 00:11:15,420 ‫I did this project earlier. 163 00:11:15,660 --> 00:11:21,020 ‫So maybe if you are doing for the very first time, maybe you start with zero point five and you realize, 164 00:11:21,030 --> 00:11:27,360 ‫OK, this is low, then you try to increase score one point five and you're not satisfied, then you 165 00:11:27,360 --> 00:11:27,960 ‫change it. 166 00:11:28,230 --> 00:11:29,190 ‫So this happens. 167 00:11:29,190 --> 00:11:34,740 ‫I want to give you an idea that maybe I did this project earlier, so I have some idea. 168 00:11:34,740 --> 00:11:37,290 ‫OK, if this is too big, it should be 2.5. 169 00:11:37,530 --> 00:11:39,840 ‫But my general habit, I understand these things. 170 00:11:40,230 --> 00:11:46,020 ‫So don't worry if you don't get things right in the first time, you might dig three or four johns. 171 00:11:46,020 --> 00:11:50,280 ‫But since it's visible, you can change this any time. 172 00:11:51,600 --> 00:11:54,030 ‫So that's all for this lecture and the next lecture. 173 00:11:54,360 --> 00:11:55,980 ‫Let us complete this part. 174 00:11:56,370 --> 00:11:58,980 ‫A lot of interesting things going to happen. 175 00:11:59,250 --> 00:12:01,110 ‫We need to talk about this icon. 176 00:12:01,350 --> 00:12:07,050 ‫Also, we are going to change this button, so we are going to change this current information. 177 00:12:07,890 --> 00:12:10,110 ‫Thank you and see you guys in the next one.