My name's Kyle and this is webbed of simplified, where we make the Web easy and accessible for everyone so that you can realize your dream of becoming a better Web developer.

In this video, we're going to take care of creating the simple Morgan screen that you see here.

So let's get started now to get started.

I have a visual studio project that links the font that we're going to be using from Google funds as well as the style sheet that we're going to be putting all of our styles inside of to get started.

We need to create all the HTML for this log.

Inform that you see on the right here there's gonna be a bit more 18 more than usual for this series.

So stick with me.

The first thing we want to do is create a div that are full screen image is going to sit inside of.

We could just give this a class of full screen container and then inside of here we're going to want to put the actual container for a log in form.

So again, let's create another dude.

We're gonna give it the class of log in container and then inside of here we're going to have our header which says welcome as well as our form.

So it's first put our header, which will be in H three.

We could give it a class of organ title and then it started here we just put our welcome text and then outside of this, we're going to create our form and inside of our form here, we're going to want to put our email field with a label our password feel with a label and our Sinan button.

So to do that well, first wrap all of these inside of groups.

So what haven't input group for each one of our inputs And inside of that input group, we're going to put the label which is going to be E mail for the 1st 1 and then we're gonna put our input of type email.

Since this is an email input and every go now we have our email and put down.

We could just copy this and paste it to do our password input.

We just need to change it to say password, and we need to change the type as well to be password.

And then lastly, we just need to add a submit button to the end.

Here.

So what is going here?

What a button.

I'm gonna give it the type of Smith so that our cage knows this is mid button.

I'm gonna give it a class of logging button so they can style it later.

And then inside that button just for the text signing.

And now we could just open that up using live server on DDE.

You see that we now have our welcome message as balls are two inputs for our form anise and unbutton that allows the sign in from our form.

So now we need to do is start applying the styles that will make this log inform look exactly like this lock in form to get started inside of her style.

Shoot.

I've already changed our box sizing the border box as well as applied the font to all the elements on our page that we imported from our head of our HTML earlier.

So they get started.

The first thing I want to do is apply the styles that we need for our background image.

As many of you know, the body element has margins on it by default.

So we want to remove these margins from the body element so that our image will take up the full screen of our page.

So we'll do that before we get started with anything else.

The next thing we'll do is we'll select that full screen container class that we created earlier.

And instead of here, we're going to apply the background image for our image that we're going to be using is the background which is linked right here inside of our project.

So instead of here, we're gonna put background image and we're going to set it to be a euro of that background image, J.

Peg.

And now you say that you see that we now have our background image being shown on our page, which is exactly what we want.

Next thing we want to do is we want to make us so that image will take up the full height and width of the screen.

In order to do that, we can set the height to be 100 view height, which is 100% of the screen size.

I would do the same thing with the with 100 of you wits.

And now if we say that, you'll see our image takes of the full size of our screen, which is perfect.

But we want our image to be scaled down so that it'll fit inside of our browser, just as it does over here.

To do that, we're going to use the background size property instead of to cover, so our image will fill the entire space of our screen and keep its aspect ratio.

And we're also going to set the background position property to be center.

So that way our image will be centered always, no matter what size are browsers.

And if you say that you now see that our image is perfectly centered and scaled inside, her browser just is on another page.

The next thing we want to do is you want to set a few display properties for our container, so that way our log in form here will be in the center of our page.

To do that, we'll just use fuck sparks so we'll set a display of flex, will justify the contents center and align the items in the center so that our long inform full up here in the very center of our page.

And now we've already got a great start on making our wagon page look exactly like this.

Now let's move on to styling the container for a log in form.

We'll do this place selecting our log in container class, and the first thing we want to do is apply the background color that we have right here.

So in order to do that, what is going to use background color?

And I have decided to use H S O for my background color because all the colors on the page, but I have are just a different shade of the same blue.

So it's either a darker or lighter version of the same blue and hs help makes it very easy to change that with just one of the numbers.

So I'll paste in here.

The color that I have chosen and you could see to a one is the hue of blue that we're going to be using on the entire page and this lightness value over here, we're going to be changing for all the different elements to get either a brighter or a darker blue color Now if we say that and look at our form, you see that we now have a blue background around the outside, just like we want with 60% hope a city.

And now we just need to add a little bit of padding to our form so that it'll take up a little bit of extra space and look a little cleaner.

So we used 50 pixels on the top and bottom and 36 is on the weapon, right?

And if you say that you see, we now have a nice large log in form for our uses to use.

The last thing we want to do is make the size of our log inform scale.

With the size of our browser, we'll make us that the wind is going to be 50%.

We'll also add in a minimum with here.

So we know that our Morgan form will never be smaller than 400 pixels.

We also added a maximum with so we know it will never be larger than 600 pixels.

Now, if you say that and if we scale the size of her browser, you can see that our wagon form will scale as our browser increases until it gets to a certain point, it'll stop scaling and same thing with when we shrink.

It wants to get to a certain point.

It'll stop shrinking, and that's exactly what we want.

The next thing that we want to do is tackle the title of Welcome instead of our Lord and farm.

Let's get out here like that with logging title and the first thing that we want to change the color to be white and we want to text line in the center so that our welcome well here in the center of our screen, we say that you see, that's already starting to look better.

We're going to remove all the margins from this because we used it H three element inside of our index here, and H three elements by default have a margin, and we don't want any margin on our welcome element on the top.

So to remove all of our margins, we put marching zero and then, since we do want a margin on the bottom Well, Adam, margin bottom here, 40 pixels.

Just so.

We have a little bit of space between our input elements and our title of top.

The last thing we need to do is increase the font size and decrease the fun.

Wait, so we'll increase the font size 2.5 e m.

And then we'll decrease the fun.

Wait a bit so that it's a little bit later and we'll just change its normal font late.

And if you say that you now see that our log in form is starting to look a lot like our long and form over here, the next thing we need to do is tackle the actual grouping of our inputs, which we surrounded both of our infants with this input group class.

So we'll select that include group, and what we want to do is really use display flex in order to create a column basically out for email as well.

Is there a male infant?

So we used display flex here, and we use the fuck's direction of column so these will stack on top of each other instead of being side by side.

As you can see it just like this, and the next thing we want to do is add a little bit of a margin, so there's space between them We'll just use a margin bottom and we'll put 20 faces and then we go next.

We're gonna be moving on to the actual labels for a different input elements.

So up to select those, we're going to select the input group class that we created.

And we want to select any label inside of that book Crue classe, and we're going to change the color to be white.

We want to make the front wait really light front ways will use lighter as our farm wade and then lastly, will increase the font size a little bit.

The 1.5 e m.

And add a small margin comes the bottom so that it separates it from our input a little bit more.

Just say seven pixels.

And if you say that, you nasty that we have this nice, then clean looking labels that are slightly separated from our input element and next thing to style is going to be our input element, which is a bit more involved than it first looks.

So just like that, we use input group and we'll select our input element inside of that input group.

And the first thing you wanna do is remove all the default styles better applied this input.

So we're going to take the background.

We're going to completely remove it.

So we used background done that'll get rid of the background on the element.

Next time you want to do is remove the border with border none.

And then if you click inside of an input, it gets an outline around it.

So we want almost remove that outline by using outline of none.

And now they got rid of all the default styles of the element.

And we cannot override these with our own styles ourselves.

So the first thing we want to do is use a background color for our different elements so we could come into here.

We can change our back home to be background color, and then we can use this a chess set, el Color, which is just a much lighter version of that hue of to a one that we used earlier within a pasty of 30%.

And now if you say that we have this nice, partially opaque, slightly blue but mostly white background color which complements the other blue colors in our design, the next thing that we want to do is increase the font size and add some padding tour input element to make a look a little bit cleaner.

So we'll add fun size here to be 1.5 a.

M.

We're also going to add a padding of 0.1 e m on the top and bottom and 0.25 p.

M on the left and right.

And if you say that you nasty that we have a much larger and cleaner looking and put element to work with.

Next, we want to select our border and apply our own unique border to this element.

We're going again.

Take a shade of blue.

So we'll do one pixel solid with H S.

L.

We have that same hue of 21 But now it's a 6% brightness, which may just going to be a very dark, almost black blue color.

So if you say that we not have this nice, really dark blue color around are very like our blue input element, all we need to do next is change our border radio.

So we have a slight bend onto the corners of our boxes.

Soldiers at five pixels Here we want to make the color of text the white so that it shows easily on our dark background.

And then lastly, we want to make our won't wait to be lighter so that it looks very somewhere toe are labels.

And if you say that we type in here united, see that we have a very clean looking input element that matches our input element from this page except for all we need to do is make us that highlights and blue when we focus on it.

So to do that, we just need a select our moment by going down here Input group selected input element and use the focus after you to say only so find these styles when we're focusing on the element and we want to just change the border so we'll make it one pixel.

We're gonna use a solid color.

We're gonna use that same exact blue hue.

But instead of having a lightness of 6% we're gonna use 50% which means you wanted to be as blue as possible, with no extra white horrible added to it.

Now, if we say that we focus on Elise input.

You see, we now get that nice blue highlight around it, just like in our example over here.

So now the last thing that we have left to style is going to be a sign in button down to the bottom.

Here, we're going to select our logging button and again, just like we did with the input.

We want to remove all the default styles.

So first, we're going to set the background to be known yes, at the border to be none.

And we're gonna set the outline to be none.

And now, as you can see, we removed all the default styles from a button and we're ready to start applying our own styles.

So the first thing is, we can take our background color.

We can change it.

Here we go said background color, and we can apply that same hue, but with a different pacenti.

And if you say that you nasty, we get a little bit of a slight opaque background on our button, which is perfect, so that way we can distinguish it as a clickable element.

We also want to add a lot of padding to our buttons, so it'd be quite a bigger, so out of padding here of 10 pixels on the top and bottom and 30 pixels on a weapon.