Login Page Development using HTML & CSS | CSS Flexbox | Basic web page build & explanation смотреть онлайн

In this video, I explained how to develop a simple login web page using HTML and CSS. The flexbox of CSS is also used in this basic project.

You may download the image used in development from : https://pixabay.com/photos/fields-meadow-grassland-haze-fog-6271173/

Closed Captioning:
We visit a lot of websites, and we know that each website has its own look and feel.
What makes these websites look cool and attractive is CSS, or cascading style sheets.

Let's say, we have a basic html file with few input elements and buttons.
This is what it looks like when displayed in a browser.
Now, to add styling to it, we will be writing styles in a css file, and linking it with the HTML file.
And then it looks like this.

In this video, let's transform this basic website into this.
To start with, we will create a CSS file, and we will name it 'my_style.css'
To link together this CSS file and the HTML file, we will use the 'link' tag in HTML.
The hypertext reference, or the href attribute of link tag needs to be used to specify the CSS file.
Since the CSS file and HTML file are both residing in the same folder, we just have to specify the filename here.
Also, we need to specify that the relation is 'stylesheet' using this attribute.

Before writing anything, let's visualize what we really want to build.
If we look at it, this is the body of HTML, which contains the background image..
Inside that, we will be placing the contents in the center.
Also, these contents have spaces around them.

We will start with the body of HTML.
In the CSS file, let's add the background image property.
Here we must specify which image needs to be used.
For that, I have downloaded an image from pixabay.
Download link is given in the video description below.
I will be placing this image in the project folder, and specify the url as, current folder/the image name.
This is the output.

Depending on the size of image and screen resolution, there can be a chance that the image repeats, in order to fill the screen.
To avoid that, we will set the CSS property background-repeat to no-repeat.
Also there can be a chance that the image gets stretched to the screen and looks ugly.
To avoid that, we will set the CSS property background-size to cover.
Now it looks like this.

Next, we will move the contents to the center of the screen.
For that, we will create a main div container.
Will give a class name 'main-container' to it.
In the CSS file, we will give styling to this class.
In order to specify that it is a class, we need to add a dot in the beginning.

We will set its height and width to 100%, so that the container takes up the entire screen.
Now we will set its display property to flex.
CSS flex or flexbox is a good option for setting the alignment and spacing of items inside a container.

After setting the display to flex, we can set the align-items property to 'center' to place the contents in the center vertically.
And also we can set the justify-content property to 'center' to place the contents in the center horizontally.

Now we have all the contents in the center of the screen.
Let's put all the contents inside a single div container.
We will give the class name 'elements-container'.
In the CSS file, let's now add styling to this class.

First we will set its width to 100%, so that it takes the entire width of the screen.
Now, in order to give spacing around the elements, we will set its display type to flex.
And we will set justify-content property to 'space-around'.

Next, we will style the displayed text.
Lets add the class text-style, and in the CSS file, we will add the styling for this.
First we will set the font-size to xxx-large.
Then we will set its color to white.
And also, we can give a drop-shadow filter using the filter property of CSS.

The drop-shadow function takes 4 parameters.
x-offset, y-offset, blur radius and color.
giving a positive value to x-offset moves the shadow in the positive x axis direction.
and giving a negative value to x-offset moves the shadow in the negative x axis direction.
Similarly, giving a positive value to y-offset moves the shadow in the positive y axis direction,
and giving a negative value to y-offset moves the shadow in the negative y axis direction
as we increase the blur radius, the shadow gets blurred.

Next, we will style the login part.
For the container holding the input elements, we will add a class 'input-container'.
We will set the background to white.
Then we will add a padding of 32px.
padding is the spacing between the border of the container and the inner elements.
To make the edges of the container look smooth and curved, we will add a border-radius to it.
we will add the drop-shadow filter to the container.

Also we will set the display type to flex.
By default, flex will be arranging the items in row direction.
That is, all the items will be distributed horizontally.
To distribute the flex items vertically, we have to set flex-direction to column.