1 00:00:01,020 --> 00:00:01,660 ‫Hey, there. 2 00:00:01,710 --> 00:00:03,540 ‫Welcome back, Shabangu, decide. 3 00:00:04,140 --> 00:00:09,770 ‫Now let us start with our new project in which we are going to realize the previous concept about HDMI 4 00:00:09,850 --> 00:00:13,590 ‫as well as CCS and also understand about some new concept. 5 00:00:13,920 --> 00:00:15,330 ‫That's how we are going to grow. 6 00:00:15,930 --> 00:00:20,070 ‫The first thing is that us quickly check out the demo what we are going to be. 7 00:00:20,490 --> 00:00:21,900 ‫It's a simple log form. 8 00:00:22,020 --> 00:00:26,940 ‫We have some log in then online that is basically born at the bottom. 9 00:00:27,300 --> 00:00:28,790 ‫Then we have two fields. 10 00:00:29,340 --> 00:00:36,510 ‫Again, we have some links, then we have a button and then registration link at simple form like we 11 00:00:36,510 --> 00:00:39,180 ‫did earlier with our profile card. 12 00:00:39,720 --> 00:00:41,190 ‫Now had one important thing. 13 00:00:41,250 --> 00:00:44,040 ‫You can see the difference in background. 14 00:00:44,640 --> 00:00:46,770 ‫Also, we have some fixed button. 15 00:00:47,580 --> 00:00:50,010 ‫I hope you got the idea what we are trying to do. 16 00:00:52,020 --> 00:00:56,900 ‫You can also check out the working demo, either on cold pin or on new direct link through resource 17 00:00:56,910 --> 00:00:57,240 ‫part. 18 00:00:57,720 --> 00:00:59,520 ‫So this is the code PIN right now. 19 00:01:01,860 --> 00:01:04,680 ‫That's it, I hope you got the idea, what we are trying to do. 20 00:01:04,920 --> 00:01:09,900 ‫Also, I have a title and fabric on the wall so we can start from the basics. 21 00:01:10,740 --> 00:01:13,530 ‫Next thing I was included in my phone. 22 00:01:13,710 --> 00:01:17,250 ‫That means with foreign families, you can directly utilize Poppins. 23 00:01:17,970 --> 00:01:19,430 ‫So that's all. 24 00:01:19,440 --> 00:01:23,790 ‫That's the basic thing that we need to understand how we can start our journey. 25 00:01:24,880 --> 00:01:30,010 ‫Again, first thing for us, I need to add a background, so what I'm going to do is jump onto body. 26 00:01:31,960 --> 00:01:33,940 ‫Now, head, I cannot any day walk alone. 27 00:01:34,120 --> 00:01:39,700 ‫So maybe I want to walk with aqua addiction and then say it's working fine. 28 00:01:40,240 --> 00:01:45,520 ‫But remember, in this particular case, we are going to work with gradient colors. 29 00:01:45,760 --> 00:01:47,860 ‫Yup, you heard it right gradient. 30 00:01:48,550 --> 00:01:51,040 ‫What is this and how we are going to utilize it? 31 00:01:51,520 --> 00:01:56,530 ‫So the best thing you can do right now is visit CIUSSS Gradient Dot I'll. 32 00:01:57,560 --> 00:02:01,340 ‫One great Web website to understand different type of gradient. 33 00:02:01,520 --> 00:02:06,980 ‫Not only did Gradient Park, but also have some background, so you can just jump onto the background 34 00:02:06,980 --> 00:02:09,410 ‫part and you can see different backgrounds. 35 00:02:09,980 --> 00:02:11,840 ‫For example, let me copy this one. 36 00:02:12,230 --> 00:02:13,100 ‫Get back here. 37 00:02:15,330 --> 00:02:16,560 ‫And let me save this one. 38 00:02:17,040 --> 00:02:22,500 ‫So that's how we are going to include background creating the first thing they include a background 39 00:02:22,500 --> 00:02:29,430 ‫color in case this gradient doesn't work or maybe some browser don't support this type of color. 40 00:02:29,730 --> 00:02:31,530 ‫So this is for backup. 41 00:02:32,570 --> 00:02:38,210 ‫The second thing when we add some grading as background, we utilized the background image. 42 00:02:38,930 --> 00:02:41,000 ‫Now there are two types of gradient color. 43 00:02:41,030 --> 00:02:46,080 ‫The first one is linear and the second one is gradient red linear. 44 00:02:46,250 --> 00:02:49,580 ‫We move from top to bottom in terms of shade. 45 00:02:50,120 --> 00:02:51,890 ‫So this is our direction. 46 00:02:52,040 --> 00:02:54,020 ‫By default, it's top to bottom. 47 00:02:54,230 --> 00:02:55,400 ‫This is the color one. 48 00:02:55,730 --> 00:02:56,840 ‫This is the color to. 49 00:02:57,970 --> 00:03:01,840 ‫Now, I heard, if I jump, you can see we are moving from top to bottom. 50 00:03:01,930 --> 00:03:07,630 ‫That means the first column will be at the top and then we slowly transition to second color. 51 00:03:08,790 --> 00:03:12,180 ‫We can also change direction using either degrees. 52 00:03:12,900 --> 00:03:19,200 ‫So this is a base idea how great India is going to work now, if I see the changes and jump back to 53 00:03:19,200 --> 00:03:21,450 ‫my page, you will see. 54 00:03:21,630 --> 00:03:23,010 ‫This is an gradient. 55 00:03:23,280 --> 00:03:26,310 ‫This is actually the default color of each visitor. 56 00:03:27,330 --> 00:03:29,160 ‫This is actually the backup policy. 57 00:03:29,160 --> 00:03:33,270 ‫If I change this to something great and save, this one can rock here. 58 00:03:33,540 --> 00:03:34,890 ‫This is not gradient. 59 00:03:36,130 --> 00:03:37,540 ‫Now, what's the problem? 60 00:03:37,930 --> 00:03:43,990 ‫Remember, when we use any type of image, we need width and height by default, this is just a gradient 61 00:03:43,990 --> 00:03:44,410 ‫color. 62 00:03:45,010 --> 00:03:50,020 ‫So we need to provide some height and we know that, OK, bodies covering the whole screen. 63 00:03:50,380 --> 00:03:53,080 ‫But we haven't put wide width and height for this image. 64 00:03:53,290 --> 00:03:57,040 ‫That means we need to provide some width and height for body, basically. 65 00:03:57,520 --> 00:04:04,030 ‫And that's where an important part comes whenever you are trying to apply any type of gradient, anywhere 66 00:04:04,600 --> 00:04:06,160 ‫or even the background image. 67 00:04:06,400 --> 00:04:09,790 ‫Make sure to provide a height by default. 68 00:04:09,790 --> 00:04:11,200 ‫Every image has some height. 69 00:04:11,230 --> 00:04:13,850 ‫If I use my own image, there will be some height. 70 00:04:13,870 --> 00:04:14,890 ‫There will be some weight. 71 00:04:15,280 --> 00:04:18,580 ‫But here we are creating an image, basically. 72 00:04:19,180 --> 00:04:22,840 ‫So we are going to analyze a height or demo for both. 73 00:04:22,840 --> 00:04:25,360 ‫Let me save this as their them. 74 00:04:25,870 --> 00:04:28,150 ‫And if I save this one, get back here. 75 00:04:28,600 --> 00:04:30,280 ‫You can see this is one image. 76 00:04:30,760 --> 00:04:32,980 ‫This is one image, actually. 77 00:04:33,340 --> 00:04:34,630 ‫Then this is second image. 78 00:04:35,020 --> 00:04:39,040 ‫So it's repeating itself, and here we need to pass some proper height. 79 00:04:40,730 --> 00:04:44,990 ‫Either you can pass some big number 110 and see this. 80 00:04:46,010 --> 00:04:47,600 ‫You can see now it's scrollable. 81 00:04:48,290 --> 00:04:54,350 ‫The other option is the better option is using Henry v Edge. 82 00:04:54,890 --> 00:04:57,540 ‫That means hundreds view board height. 83 00:04:58,010 --> 00:05:02,510 ‫So whatever we try to see here is our viewpoint. 84 00:05:02,930 --> 00:05:07,760 ‫So this is the word that means viewport work and this is the height. 85 00:05:08,840 --> 00:05:15,440 ‫If I try to decrease the size hair, so I had my viewpoint versus decreasing, basically if you see 86 00:05:15,440 --> 00:05:20,180 ‫at the top, that's how we are going to affect viewport height as well as viewport width. 87 00:05:21,650 --> 00:05:27,170 ‫Now, whenever we are working with any type of element, their height is an important factor viewpoint 88 00:05:27,170 --> 00:05:28,310 ‫going to help you a lot. 89 00:05:28,970 --> 00:05:34,850 ‫We have a dedicated lecture tour, this viewport section that means our understanding about viewport 90 00:05:34,850 --> 00:05:39,080 ‫height, viewport width and also how the certain calculation. 91 00:05:39,350 --> 00:05:41,990 ‫Don't worry, we will discuss about this for now. 92 00:05:42,230 --> 00:05:47,390 ‫Here we are just speaking viewport height so we can cover 100 percent of screen. 93 00:05:49,520 --> 00:05:51,650 ‫Now, what about these numbers? 94 00:05:52,430 --> 00:05:52,850 ‫OK. 95 00:05:53,000 --> 00:05:56,390 ‫Let me explain this whole concept on our different window. 96 00:05:57,430 --> 00:06:03,580 ‫Head, if you observe, I created a blank page with just style or scissors, and I have added these 97 00:06:03,580 --> 00:06:07,390 ‫three properties, which is my background color image as well as height. 98 00:06:07,930 --> 00:06:14,890 ‫Now, I guess by now, you already know that we have our direction, which is top to bottom by default. 99 00:06:15,430 --> 00:06:18,730 ‫But how do we have changed direction with 160 degrees? 100 00:06:19,240 --> 00:06:23,470 ‫Now, by default, this is 180 degrees, which is top to bottom. 101 00:06:23,860 --> 00:06:28,000 ‫And if I go zero degrees, it will be bottom to top. 102 00:06:28,960 --> 00:06:30,670 ‫I hope you got the idea, OK? 103 00:06:31,150 --> 00:06:33,670 ‫So what this top to water means? 104 00:06:33,820 --> 00:06:38,800 ‫What this 180 degree means is this color will be at the top. 105 00:06:38,950 --> 00:06:41,140 ‫And this color will be at the bottom. 106 00:06:41,890 --> 00:06:45,580 ‫If I say zero degrees, that will be a bottom to top. 107 00:06:45,590 --> 00:06:47,770 ‫That means this color will be at the bottom. 108 00:06:48,160 --> 00:06:50,110 ‫And this color will be at the top. 109 00:06:50,800 --> 00:06:52,510 ‫I hope you got the idea now. 110 00:06:53,160 --> 00:06:56,740 ‫OK, let me switch back to the previous one. 111 00:06:58,220 --> 00:07:00,560 ‫Which is around 160 degrees, I guess. 112 00:07:01,280 --> 00:07:07,070 ‫Now we know this is going to be our fourth color and this is going to be our second color, that's we 113 00:07:07,070 --> 00:07:07,800 ‫know why now. 114 00:07:08,180 --> 00:07:11,300 ‫But what is this zero percent and what is this 100 percent? 115 00:07:11,900 --> 00:07:18,110 ‫Well, this is the start point from where we need to start the transition, and this is going to be 116 00:07:18,110 --> 00:07:18,920 ‫the end point. 117 00:07:19,250 --> 00:07:21,680 ‫By then, we should end the transition. 118 00:07:22,280 --> 00:07:26,250 ‫So if I go over different direction from top to bottom, save this one. 119 00:07:26,270 --> 00:07:27,080 ‫Get back here. 120 00:07:27,650 --> 00:07:33,420 ‫You can see we start from zero percent and our transition move from zero to 100. 121 00:07:34,190 --> 00:07:38,300 ‫One better way to observe is to take some different color. 122 00:07:38,420 --> 00:07:41,360 ‫Let's say red and blue. 123 00:07:42,410 --> 00:07:48,410 ‫OK, if I jump here, you can see we start from zero percent, then we have our own transition and then 124 00:07:48,650 --> 00:07:51,440 ‫by the 100 percent, we are in blue. 125 00:07:52,430 --> 00:08:00,410 ‫Now, if I say 50 percent, that means my transition will start from 50 percent if I get back here. 126 00:08:00,800 --> 00:08:05,930 ‫So from zero to 15, nothing happens, but our transition start from 50 percent year. 127 00:08:06,970 --> 00:08:16,180 ‫If I get back and if I say 75 percent here, that means from zero to 50, we are going to have red from 128 00:08:16,180 --> 00:08:17,630 ‫50 to 75. 129 00:08:17,650 --> 00:08:23,680 ‫We are going to have a transition phase and then from 75 to 100, we are going to have Blu ray. 130 00:08:23,720 --> 00:08:24,490 ‫Get back here. 131 00:08:25,000 --> 00:08:28,970 ‫You can see zero to 50 red, 50 to 75. 132 00:08:28,990 --> 00:08:35,990 ‫We have we are going to have a transition phase and then from 75 200, we are going to have blue eyes 133 00:08:36,010 --> 00:08:38,430 ‫that a lot of the values that you can play with. 134 00:08:38,440 --> 00:08:44,110 ‫But this is the basic common one, which is zero 100. 135 00:08:44,320 --> 00:08:46,990 ‫So you are going to have a smooth transition phase. 136 00:08:48,880 --> 00:08:55,060 ‫One important recommendation here, which is modern dogs make sure to read about linear gradient. 137 00:08:55,090 --> 00:08:59,950 ‫There are too many other values that you're going to explore, too many different designs that you can 138 00:08:59,950 --> 00:09:00,520 ‫build on. 139 00:09:00,970 --> 00:09:07,060 ‫And you can also learn about radial gradient with the help of this amnion dog itself. 140 00:09:08,020 --> 00:09:12,240 ‫Remember 180 degrees from top to bottom? 141 00:09:12,730 --> 00:09:17,290 ‫And if I use 160 and if I get back here, I haven't saved this one. 142 00:09:17,590 --> 00:09:20,020 ‫So if I use 160, it will be a bit tilted. 143 00:09:20,200 --> 00:09:22,480 ‫So if I save this one, get back in. 144 00:09:22,810 --> 00:09:24,370 ‫You can sit still there now. 145 00:09:26,620 --> 00:09:29,830 ‫If I see maybe 90 degree, it will be horizontal. 146 00:09:30,170 --> 00:09:33,940 ‫So if I get back here, you can see we are moving from this site to this site. 147 00:09:35,440 --> 00:09:38,950 ‫I hope you are the best idea why this direction is important. 148 00:09:39,990 --> 00:09:45,450 ‫By default, it be zero will be from bottom to top. 149 00:09:45,600 --> 00:09:48,600 ‫That means Discolor will be at the bottom and this will be at the top. 150 00:09:49,380 --> 00:09:50,510 ‫You'll see more than all. 151 00:09:52,600 --> 00:09:56,350 ‫Let me get back to 160 now, so I hope you got the idea. 152 00:09:58,420 --> 00:10:02,950 ‫The second topic that I really wanted to discuss quickly is really gradient. 153 00:10:03,310 --> 00:10:06,670 ‫That means we are going from center to outback. 154 00:10:07,000 --> 00:10:10,870 ‫So if I scroll down a bit, you will see this type of image. 155 00:10:11,200 --> 00:10:16,720 ‫You start from centre and move our direction in the outer part head. 156 00:10:16,720 --> 00:10:23,020 ‫If you see we are moving from top to bottom, left to right, McCarey start from centre and then start 157 00:10:23,020 --> 00:10:25,690 ‫fading or whatever the colour we are choosing. 158 00:10:26,320 --> 00:10:31,240 ‫So if I scroll up a bit here, you can see these are the four common directions. 159 00:10:31,240 --> 00:10:36,220 ‫At this point of time, we are taking directions in degrees or linear Martin Radial. 160 00:10:36,430 --> 00:10:38,920 ‫We need to provide one of these direction. 161 00:10:39,520 --> 00:10:42,760 ‫And the second thing is we are going to pass two colours. 162 00:10:42,790 --> 00:10:45,790 ‫The first one will be what colour will be at the centre? 163 00:10:46,120 --> 00:10:49,660 ‫And the second one will be what colour will be on the outer part. 164 00:10:50,050 --> 00:10:54,490 ‫So let's play with red and blue itself. 165 00:10:54,730 --> 00:10:56,680 ‫So red will be at the centre. 166 00:10:56,800 --> 00:10:58,210 ‫Blue will be the outer one. 167 00:10:58,570 --> 00:11:00,100 ‫And here let me take radial. 168 00:11:01,640 --> 00:11:03,950 ‫We are not going to have directions and degree. 169 00:11:04,130 --> 00:11:05,900 ‫But with this keyword. 170 00:11:06,650 --> 00:11:16,520 ‫So let's say close this side and if I get back, save this one, you can see that side is going to work. 171 00:11:16,760 --> 00:11:21,830 ‫So this is a dissenter and it is going to transition to blue from red to blue. 172 00:11:22,460 --> 00:11:24,230 ‫And these are multiple election. 173 00:11:31,890 --> 00:11:34,200 ‫You can see how they are going to walk. 174 00:11:35,550 --> 00:11:39,870 ‫So I hope you got the idea about Radian as well as Lynya. 175 00:11:41,280 --> 00:11:44,190 ‫Now let me switch and go back to our previous window. 176 00:11:45,300 --> 00:11:46,000 ‫That's done. 177 00:11:46,020 --> 00:11:47,760 ‫That's the first basic task. 178 00:11:48,120 --> 00:11:52,010 ‫Let me also correct this one, which is on backup on our. 179 00:11:59,020 --> 00:12:03,130 ‫In case of this doesn't work, our backup pilot is going to help us a lot. 180 00:12:05,810 --> 00:12:06,890 ‫OK, this looks fine. 181 00:12:06,920 --> 00:12:13,400 ‫Also, remember the scissors gradient I going to help your lord, not just with these gradient colors 182 00:12:14,300 --> 00:12:18,590 ‫that is default available background colors, but also we can create our own color. 183 00:12:18,980 --> 00:12:25,250 ‫So maybe if I want to create something like this shared, if you look at the top here, I can create 184 00:12:25,250 --> 00:12:26,300 ‫some gradient color. 185 00:12:27,530 --> 00:12:28,790 ‫I hope you got the idea. 186 00:12:29,000 --> 00:12:30,200 ‫So if I get back. 187 00:12:31,940 --> 00:12:34,640 ‫Our head by default, we are falling top to bottom. 188 00:12:34,850 --> 00:12:38,990 ‫The next thing is about our caller one and then Colorado. 189 00:12:39,620 --> 00:12:40,880 ‫This looks fine to me. 190 00:12:41,480 --> 00:12:45,740 ‫You can change these degrees, you can change the color and it should work fine. 191 00:12:45,770 --> 00:12:48,590 ‫So, for example, if I use any other color. 192 00:12:50,350 --> 00:12:51,460 ‫And save this one. 193 00:12:51,730 --> 00:12:53,770 ‫Get back here, you can exchange. 194 00:12:54,900 --> 00:13:00,000 ‫So I'm creating an image with these two colors and then repeating it with the 19 degree. 195 00:13:00,780 --> 00:13:02,190 ‫OK, that's the best thing. 196 00:13:03,030 --> 00:13:09,300 ‫Also, one important thing and I should add font family size should use font family. 197 00:13:09,630 --> 00:13:12,120 ‫And then I directly need to add opens. 198 00:13:13,530 --> 00:13:18,470 ‫And the second thing that I need to add is the default one, which is sensitive. 199 00:13:19,020 --> 00:13:20,130 ‫This looks fine. 200 00:13:21,250 --> 00:13:22,900 ‫So our basic setup is done. 201 00:13:23,350 --> 00:13:26,860 ‫The next thing we need to do is start walking with our HDMI. 202 00:13:27,190 --> 00:13:29,440 ‫That means set up some structure. 203 00:13:30,160 --> 00:13:33,860 ‫So if I jump here, let me create a section inside this section. 204 00:13:33,880 --> 00:13:38,740 ‫Let me Howard division and make all this division as OK. 205 00:13:41,740 --> 00:13:47,770 ‫This looks fine, and after this election, I'm going to create a photo on inside this folder, I just 206 00:13:47,770 --> 00:13:53,650 ‫need to add a paragraph which is going to include the information and not a member. 207 00:13:55,690 --> 00:13:56,290 ‫Sign up. 208 00:13:59,820 --> 00:14:00,660 ‫Get back here. 209 00:14:00,940 --> 00:14:04,180 ‫OK, this is done, so we have a vision and some. 210 00:14:05,100 --> 00:14:05,850 ‫Get back here. 211 00:14:06,540 --> 00:14:11,430 ‫I hear I need to add a log index, so that should be inside of my age when done. 212 00:14:13,770 --> 00:14:14,820 ‫Inside my heart. 213 00:14:15,030 --> 00:14:20,940 ‫So the first thing I'm going to do is have our H1 and qualifiers log in now after log in, I have a 214 00:14:20,940 --> 00:14:21,660 ‫quick form. 215 00:14:22,530 --> 00:14:26,040 ‫So if I jump back here, this is my form. 216 00:14:26,160 --> 00:14:31,950 ‫And inside this, I can have these four fields, which is username, password, forgot password and 217 00:14:31,950 --> 00:14:33,810 ‫then log in button on. 218 00:14:33,810 --> 00:14:36,210 ‫I have to do is get to create a form. 219 00:14:36,690 --> 00:14:38,700 ‫I will add certain details later. 220 00:14:40,020 --> 00:14:43,430 ‫But the first thing I need to add is the input field. 221 00:14:44,160 --> 00:14:48,330 ‫And this should be about text, type, name and I.D. should we use any? 222 00:14:51,630 --> 00:14:57,060 ‫One thing here you need to notice is that there is no label as soon as I write something here. 223 00:14:57,750 --> 00:14:59,820 ‫This is directly the input field. 224 00:14:59,940 --> 00:15:00,930 ‫There is no label. 225 00:15:01,260 --> 00:15:02,040 ‫Remember that? 226 00:15:03,190 --> 00:15:06,850 ‫So I don't need to apply any type of liberal I can medically use my empathy. 227 00:15:07,450 --> 00:15:13,210 ‫And the second thing is about my password again, I'm going to give them name as well as ID password. 228 00:15:14,180 --> 00:15:15,200 ‫Now, a few other settings. 229 00:15:15,380 --> 00:15:20,940 ‫Quickly, I want to mention that if you observe whenever I click here, I don't get a suggestion. 230 00:15:20,960 --> 00:15:25,820 ‫That means there is a attribute which is known as autocomplete. 231 00:15:27,700 --> 00:15:32,380 ‫And it is done as off, if you're young, won't do any type of form. 232 00:15:32,890 --> 00:15:39,640 ‫You get some auto completion when you write, maybe I will get information about my different militaries 233 00:15:39,640 --> 00:15:41,740 ‫that I already have on my browser. 234 00:15:42,100 --> 00:15:45,850 ‫But here I'm not getting why, because the auto computer's off. 235 00:15:46,300 --> 00:15:49,050 ‫The second property, I want to add, is a place holder. 236 00:15:49,060 --> 00:15:55,030 ‫That means a new attribute, which is placeholder holder, and I should call this honest username. 237 00:15:56,050 --> 00:15:59,740 ‫And if this is a required field, make sure to mention required. 238 00:16:02,550 --> 00:16:04,020 ‫This looks fine to me. 239 00:16:04,540 --> 00:16:10,320 ‫Something similar I need to do here at a place holder, and I'm going to call this as password. 240 00:16:11,310 --> 00:16:13,710 ‫The second thing is it should be required. 241 00:16:14,100 --> 00:16:15,110 ‫Now why are required? 242 00:16:15,120 --> 00:16:22,060 ‫Because if you try to click on, log in, if these fields are not filled, you are going to get a pop 243 00:16:22,080 --> 00:16:22,220 ‫up. 244 00:16:22,560 --> 00:16:25,650 ‫So it's important to have required if the field is important. 245 00:16:29,130 --> 00:16:35,970 ‫That's done now off the back, we have our text, so I'm going to add this next paragraph, and I'm 246 00:16:35,970 --> 00:16:37,080 ‫going to call this ask. 247 00:16:40,660 --> 00:16:41,650 ‫Forgot password. 248 00:16:42,060 --> 00:16:45,340 ‫And this looks fine, the only thing that is remaining is a button. 249 00:16:45,610 --> 00:16:48,070 ‫So definitely the type of button will be summit. 250 00:16:48,160 --> 00:16:53,620 ‫I can add some metaphorically and I just need to add an extra log in. 251 00:16:55,130 --> 00:16:55,910 ‫Save this one. 252 00:16:55,940 --> 00:16:56,750 ‫Get back here. 253 00:16:58,290 --> 00:16:59,060 ‫OK. 254 00:17:00,380 --> 00:17:06,550 ‫Is good, but remember, I haven't zoomed in because it will change the structure according to our requirements, 255 00:17:06,550 --> 00:17:09,090 ‫so I'm trying to follow the normal structure. 256 00:17:09,090 --> 00:17:12,780 ‫I know this is pretty small for your eyes right now with this lecture. 257 00:17:13,140 --> 00:17:16,080 ‫But don't worry, we are going to increase the font size in a bit. 258 00:17:16,920 --> 00:17:24,420 ‫But before that one quick update and adding that content Infratel, let me add it inside my authentic 259 00:17:24,420 --> 00:17:25,830 ‫self and inside. 260 00:17:25,830 --> 00:17:29,130 ‫For that, I can radically add the image so I don't want to mess things. 261 00:17:29,550 --> 00:17:30,570 ‫So this will be here. 262 00:17:30,930 --> 00:17:38,910 ‫But the WhatsApp image I will add inside the photo so hard I should add img and head. 263 00:17:38,910 --> 00:17:40,770 ‫I'm going to add the WhatsApp image. 264 00:17:42,130 --> 00:17:43,510 ‫OK, this looks fine. 265 00:17:43,550 --> 00:17:46,540 ‫Currently, this is not visible because there is no content. 266 00:17:48,130 --> 00:17:55,450 ‫These are the U.S. the first section, then I have a devil inside that there I have a line from. 267 00:17:55,600 --> 00:17:59,360 ‫And then some of that information looks find a lot. 268 00:18:00,370 --> 00:18:02,260 ‫Now let me start doing some changes. 269 00:18:02,410 --> 00:18:08,000 ‫The first thing is I'm going to define some way as well as some properties to this section. 270 00:18:08,050 --> 00:18:09,430 ‫Also, some background color. 271 00:18:09,820 --> 00:18:15,190 ‫So I like to do this jump pad and I can directly select this section or I can select this. 272 00:18:16,510 --> 00:18:18,930 ‫So here I'm going to use art. 273 00:18:19,690 --> 00:18:22,600 ‫And here I'm going to define some background color. 274 00:18:23,110 --> 00:18:24,800 ‫This is white so I can use. 275 00:18:27,860 --> 00:18:30,560 ‫Traveller, get back here, OK? 276 00:18:31,010 --> 00:18:31,780 ‫Walking fine. 277 00:18:32,980 --> 00:18:38,530 ‫The next thing I'm going to do is I can do this either in block or I can set our weight. 278 00:18:39,190 --> 00:18:42,970 ‫So here let me select display in line block. 279 00:18:46,020 --> 00:18:46,740 ‫OK. 280 00:18:46,760 --> 00:18:47,480 ‫Looks fine. 281 00:18:48,620 --> 00:18:50,240 ‫But I also need to center it. 282 00:18:50,510 --> 00:18:55,820 ‫So what I'm going to do is I am going to our position and this will be absolute. 283 00:18:58,310 --> 00:19:01,070 ‫Now I need to pass information from top. 284 00:19:01,310 --> 00:19:04,910 ‫It will be 50 percent again from right. 285 00:19:04,940 --> 00:19:06,620 ‫It will be 50 percent. 286 00:19:07,010 --> 00:19:07,810 ‫Save this one. 287 00:19:07,830 --> 00:19:08,570 ‫Get back here. 288 00:19:09,350 --> 00:19:11,000 ‫Looks fine from top. 289 00:19:11,000 --> 00:19:12,140 ‫It is 50 percent. 290 00:19:12,260 --> 00:19:14,270 ‫And from right, it does have eight percent. 291 00:19:15,170 --> 00:19:22,340 ‫What I can do is I can use Transform Translate to move 50 percent here, as well as to move 50 percent 292 00:19:22,460 --> 00:19:23,330 ‫on my access. 293 00:19:25,540 --> 00:19:31,780 ‫Now things are repeating if you have watched the profile card section, so I have to use Transform and 294 00:19:31,780 --> 00:19:33,220 ‫then I can use translate. 295 00:19:34,300 --> 00:19:35,930 ‫It is going to take two values. 296 00:19:35,950 --> 00:19:37,930 ‫The first one will be the x axis. 297 00:19:39,280 --> 00:19:41,470 ‫And then the second one will be my access. 298 00:19:42,980 --> 00:19:44,120 ‫Looks fine to me. 299 00:19:44,450 --> 00:19:44,960 ‫OK. 300 00:19:44,990 --> 00:19:46,030 ‫This is center. 301 00:19:46,940 --> 00:19:50,210 ‫Let me add some padding here and change that structure. 302 00:19:50,420 --> 00:19:57,050 ‫So let me add some padding and I'm going to qualify student save much better. 303 00:19:58,220 --> 00:20:00,860 ‫The next thing I can visualize is these corners. 304 00:20:01,250 --> 00:20:02,600 ‫So simply add border. 305 00:20:03,410 --> 00:20:08,000 ‫So that means border radius actually on head, I'm going to use zero point five rim. 306 00:20:10,270 --> 00:20:13,330 ‫OK, much, much better, we are going much faster this time. 307 00:20:13,750 --> 00:20:16,720 ‫So this time it was pretty easy to figure out these things. 308 00:20:17,470 --> 00:20:19,810 ‫Now in the next lecture, let us continue the stuff. 309 00:20:20,170 --> 00:20:22,930 ‫What I should say our current mess in the next lecture. 310 00:20:23,260 --> 00:20:24,260 ‫Thank you for following. 311 00:20:24,280 --> 00:20:27,820 ‫I hope this lecture was helpful and I see you guys in the next one.