‫Hey, there.
‫Welcome back, Shabangu, decide.
‫Now let us start with our new project in which we are going to realize the previous concept about HDMI
‫as well as CCS and also understand about some new concept.
‫That's how we are going to grow.
‫The first thing is that us quickly check out the demo what we are going to be.
‫It's a simple log form.
‫We have some log in then online that is basically born at the bottom.
‫Then we have two fields.
‫Again, we have some links, then we have a button and then registration link at simple form like we
‫did earlier with our profile card.
‫Now had one important thing.
‫You can see the difference in background.
‫Also, we have some fixed button.
‫I hope you got the idea what we are trying to do.
‫You can also check out the working demo, either on cold pin or on new direct link through resource
‫part.
‫So this is the code PIN right now.
‫That's it, I hope you got the idea, what we are trying to do.
‫Also, I have a title and fabric on the wall so we can start from the basics.
‫Next thing I was included in my phone.
‫That means with foreign families, you can directly utilize Poppins.
‫So that's all.
‫That's the basic thing that we need to understand how we can start our journey.
‫Again, first thing for us, I need to add a background, so what I'm going to do is jump onto body.
‫Now, head, I cannot any day walk alone.
‫So maybe I want to walk with aqua addiction and then say it's working fine.
‫But remember, in this particular case, we are going to work with gradient colors.
‫Yup, you heard it right gradient.
‫What is this and how we are going to utilize it?
‫So the best thing you can do right now is visit CIUSSS Gradient Dot I'll.
‫One great Web website to understand different type of gradient.
‫Not only did Gradient Park, but also have some background, so you can just jump onto the background
‫part and you can see different backgrounds.
‫For example, let me copy this one.
‫Get back here.
‫And let me save this one.
‫So that's how we are going to include background creating the first thing they include a background
‫color in case this gradient doesn't work or maybe some browser don't support this type of color.
‫So this is for backup.
‫The second thing when we add some grading as background, we utilized the background image.
‫Now there are two types of gradient color.
‫The first one is linear and the second one is gradient red linear.
‫We move from top to bottom in terms of shade.
‫So this is our direction.
‫By default, it's top to bottom.
‫This is the color one.
‫This is the color to.
‫Now, I heard, if I jump, you can see we are moving from top to bottom.
‫That means the first column will be at the top and then we slowly transition to second color.
‫We can also change direction using either degrees.
‫So this is a base idea how great India is going to work now, if I see the changes and jump back to
‫my page, you will see.
‫This is an gradient.
‫This is actually the default color of each visitor.
‫This is actually the backup policy.
‫If I change this to something great and save, this one can rock here.
‫This is not gradient.
‫Now, what's the problem?
‫Remember, when we use any type of image, we need width and height by default, this is just a gradient
‫color.
‫So we need to provide some height and we know that, OK, bodies covering the whole screen.
‫But we haven't put wide width and height for this image.
‫That means we need to provide some width and height for body, basically.
‫And that's where an important part comes whenever you are trying to apply any type of gradient, anywhere
‫or even the background image.
‫Make sure to provide a height by default.
‫Every image has some height.
‫If I use my own image, there will be some height.
‫There will be some weight.
‫But here we are creating an image, basically.
‫So we are going to analyze a height or demo for both.
‫Let me save this as their them.
‫And if I save this one, get back here.
‫You can see this is one image.
‫This is one image, actually.
‫Then this is second image.
‫So it's repeating itself, and here we need to pass some proper height.
‫Either you can pass some big number 110 and see this.
‫You can see now it's scrollable.
‫The other option is the better option is using Henry v Edge.
‫That means hundreds view board height.
‫So whatever we try to see here is our viewpoint.
‫So this is the word that means viewport work and this is the height.
‫If I try to decrease the size hair, so I had my viewpoint versus decreasing, basically if you see
‫at the top, that's how we are going to affect viewport height as well as viewport width.
‫Now, whenever we are working with any type of element, their height is an important factor viewpoint
‫going to help you a lot.
‫We have a dedicated lecture tour, this viewport section that means our understanding about viewport
‫height, viewport width and also how the certain calculation.
‫Don't worry, we will discuss about this for now.
‫Here we are just speaking viewport height so we can cover 100 percent of screen.
‫Now, what about these numbers?
‫OK.
‫Let me explain this whole concept on our different window.
‫Head, if you observe, I created a blank page with just style or scissors, and I have added these
‫three properties, which is my background color image as well as height.
‫Now, I guess by now, you already know that we have our direction, which is top to bottom by default.
‫But how do we have changed direction with 160 degrees?
‫Now, by default, this is 180 degrees, which is top to bottom.
‫And if I go zero degrees, it will be bottom to top.
‫I hope you got the idea, OK?
‫So what this top to water means?
‫What this 180 degree means is this color will be at the top.
‫And this color will be at the bottom.
‫If I say zero degrees, that will be a bottom to top.
‫That means this color will be at the bottom.
‫And this color will be at the top.
‫I hope you got the idea now.
‫OK, let me switch back to the previous one.
‫Which is around 160 degrees, I guess.
‫Now we know this is going to be our fourth color and this is going to be our second color, that's we
‫know why now.
‫But what is this zero percent and what is this 100 percent?
‫Well, this is the start point from where we need to start the transition, and this is going to be
‫the end point.
‫By then, we should end the transition.
‫So if I go over different direction from top to bottom, save this one.
‫Get back here.
‫You can see we start from zero percent and our transition move from zero to 100.
‫One better way to observe is to take some different color.
‫Let's say red and blue.
‫OK, if I jump here, you can see we start from zero percent, then we have our own transition and then
‫by the 100 percent, we are in blue.
‫Now, if I say 50 percent, that means my transition will start from 50 percent if I get back here.
‫So from zero to 15, nothing happens, but our transition start from 50 percent year.
‫If I get back and if I say 75 percent here, that means from zero to 50, we are going to have red from
‫50 to 75.
‫We are going to have a transition phase and then from 75 to 100, we are going to have Blu ray.
‫Get back here.
‫You can see zero to 50 red, 50 to 75.
‫We have we are going to have a transition phase and then from 75 200, we are going to have blue eyes
‫that a lot of the values that you can play with.
‫But this is the basic common one, which is zero 100.
‫So you are going to have a smooth transition phase.
‫One important recommendation here, which is modern dogs make sure to read about linear gradient.
‫There are too many other values that you're going to explore, too many different designs that you can
‫build on.
‫And you can also learn about radial gradient with the help of this amnion dog itself.
‫Remember 180 degrees from top to bottom?
‫And if I use 160 and if I get back here, I haven't saved this one.
‫So if I use 160, it will be a bit tilted.
‫So if I save this one, get back in.
‫You can sit still there now.
‫If I see maybe 90 degree, it will be horizontal.
‫So if I get back here, you can see we are moving from this site to this site.
‫I hope you are the best idea why this direction is important.
‫By default, it be zero will be from bottom to top.
‫That means Discolor will be at the bottom and this will be at the top.
‫You'll see more than all.
‫Let me get back to 160 now, so I hope you got the idea.
‫The second topic that I really wanted to discuss quickly is really gradient.
‫That means we are going from center to outback.
‫So if I scroll down a bit, you will see this type of image.
‫You start from centre and move our direction in the outer part head.
‫If you see we are moving from top to bottom, left to right, McCarey start from centre and then start
‫fading or whatever the colour we are choosing.
‫So if I scroll up a bit here, you can see these are the four common directions.
‫At this point of time, we are taking directions in degrees or linear Martin Radial.
‫We need to provide one of these direction.
‫And the second thing is we are going to pass two colours.
‫The first one will be what colour will be at the centre?
‫And the second one will be what colour will be on the outer part.
‫So let's play with red and blue itself.
‫So red will be at the centre.
‫Blue will be the outer one.
‫And here let me take radial.
‫We are not going to have directions and degree.
‫But with this keyword.
‫So let's say close this side and if I get back, save this one, you can see that side is going to work.
‫So this is a dissenter and it is going to transition to blue from red to blue.
‫And these are multiple election.
‫You can see how they are going to walk.
‫So I hope you got the idea about Radian as well as Lynya.
‫Now let me switch and go back to our previous window.
‫That's done.
‫That's the first basic task.
‫Let me also correct this one, which is on backup on our.
‫In case of this doesn't work, our backup pilot is going to help us a lot.
‫OK, this looks fine.
‫Also, remember the scissors gradient I going to help your lord, not just with these gradient colors
‫that is default available background colors, but also we can create our own color.
‫So maybe if I want to create something like this shared, if you look at the top here, I can create
‫some gradient color.
‫I hope you got the idea.
‫So if I get back.
‫Our head by default, we are falling top to bottom.
‫The next thing is about our caller one and then Colorado.
‫This looks fine to me.
‫You can change these degrees, you can change the color and it should work fine.
‫So, for example, if I use any other color.
‫And save this one.
‫Get back here, you can exchange.
‫So I'm creating an image with these two colors and then repeating it with the 19 degree.
‫OK, that's the best thing.
‫Also, one important thing and I should add font family size should use font family.
‫And then I directly need to add opens.
‫And the second thing that I need to add is the default one, which is sensitive.
‫This looks fine.
‫So our basic setup is done.
‫The next thing we need to do is start walking with our HDMI.
‫That means set up some structure.
‫So if I jump here, let me create a section inside this section.
‫Let me Howard division and make all this division as OK.
‫This looks fine, and after this election, I'm going to create a photo on inside this folder, I just
‫need to add a paragraph which is going to include the information and not a member.
‫Sign up.
‫Get back here.
‫OK, this is done, so we have a vision and some.
‫Get back here.
‫I hear I need to add a log index, so that should be inside of my age when done.
‫Inside my heart.
‫So the first thing I'm going to do is have our H1 and qualifiers log in now after log in, I have a
‫quick form.
‫So if I jump back here, this is my form.
‫And inside this, I can have these four fields, which is username, password, forgot password and
‫then log in button on.
‫I have to do is get to create a form.
‫I will add certain details later.
‫But the first thing I need to add is the input field.
‫And this should be about text, type, name and I.D. should we use any?
‫One thing here you need to notice is that there is no label as soon as I write something here.
‫This is directly the input field.
‫There is no label.
‫Remember that?
‫So I don't need to apply any type of liberal I can medically use my empathy.
‫And the second thing is about my password again, I'm going to give them name as well as ID password.
‫Now, a few other settings.
‫Quickly, I want to mention that if you observe whenever I click here, I don't get a suggestion.
‫That means there is a attribute which is known as autocomplete.
‫And it is done as off, if you're young, won't do any type of form.
‫You get some auto completion when you write, maybe I will get information about my different militaries
‫that I already have on my browser.
‫But here I'm not getting why, because the auto computer's off.
‫The second property, I want to add, is a place holder.
‫That means a new attribute, which is placeholder holder, and I should call this honest username.
‫And if this is a required field, make sure to mention required.
‫This looks fine to me.
‫Something similar I need to do here at a place holder, and I'm going to call this as password.
‫The second thing is it should be required.
‫Now why are required?
‫Because if you try to click on, log in, if these fields are not filled, you are going to get a pop
‫up.
‫So it's important to have required if the field is important.
‫That's done now off the back, we have our text, so I'm going to add this next paragraph, and I'm
‫going to call this ask.
‫Forgot password.
‫And this looks fine, the only thing that is remaining is a button.
‫So definitely the type of button will be summit.
‫I can add some metaphorically and I just need to add an extra log in.
‫Save this one.
‫Get back here.
‫OK.
‫Is good, but remember, I haven't zoomed in because it will change the structure according to our requirements,
‫so I'm trying to follow the normal structure.
‫I know this is pretty small for your eyes right now with this lecture.
‫But don't worry, we are going to increase the font size in a bit.
‫But before that one quick update and adding that content Infratel, let me add it inside my authentic
‫self and inside.
‫For that, I can radically add the image so I don't want to mess things.
‫So this will be here.
‫But the WhatsApp image I will add inside the photo so hard I should add img and head.
‫I'm going to add the WhatsApp image.
‫OK, this looks fine.
‫Currently, this is not visible because there is no content.
‫These are the U.S. the first section, then I have a devil inside that there I have a line from.
‫And then some of that information looks find a lot.
‫Now let me start doing some changes.
‫The first thing is I'm going to define some way as well as some properties to this section.
‫Also, some background color.
‫So I like to do this jump pad and I can directly select this section or I can select this.
‫So here I'm going to use art.
‫And here I'm going to define some background color.
‫This is white so I can use.
‫Traveller, get back here, OK?
‫Walking fine.
‫The next thing I'm going to do is I can do this either in block or I can set our weight.
‫So here let me select display in line block.
‫OK.
‫Looks fine.
‫But I also need to center it.
‫So what I'm going to do is I am going to our position and this will be absolute.
‫Now I need to pass information from top.
‫It will be 50 percent again from right.
‫It will be 50 percent.
‫Save this one.
‫Get back here.
‫Looks fine from top.
‫It is 50 percent.
‫And from right, it does have eight percent.
‫What I can do is I can use Transform Translate to move 50 percent here, as well as to move 50 percent
‫on my access.
‫Now things are repeating if you have watched the profile card section, so I have to use Transform and
‫then I can use translate.
‫It is going to take two values.
‫The first one will be the x axis.
‫And then the second one will be my access.
‫Looks fine to me.
‫OK.
‫This is center.
‫Let me add some padding here and change that structure.
‫So let me add some padding and I'm going to qualify student save much better.
‫The next thing I can visualize is these corners.
‫So simply add border.
‫So that means border radius actually on head, I'm going to use zero point five rim.
‫OK, much, much better, we are going much faster this time.
‫So this time it was pretty easy to figure out these things.
‫Now in the next lecture, let us continue the stuff.
‫What I should say our current mess in the next lecture.
‫Thank you for following.
‫I hope this lecture was helpful and I see you guys in the next one.