Hi friends welcome to Tutor's Phoenix channel. Today I'm going to teach how to make this kind of
fader using HTML CSS flexbox. This is very simple to do this banner along with
flexbox. So how to do the step by step we'll teach. Now let's go to the tutorial
Now let's go to my project. Go to G drive. I'm going to make the new folder. I'm
going to make it as this one web banner. Here I'm going to make it as this one also
New here write side one. Make like this one side one. Here I'm going to make it as images
Another folder I'm going to make it as CSS. These are the two folders. So this kind of folders I'm
going to open on the VS Code editor. If you have not installed the VS Code editor please install the VS Code editor in your machine. After that you can type cmd
command to open the project into VS Code editor. Okay it is open up successfully
Now I'm going to go to create a new project. So click on the plus symbol
index.html. Here what I'm going to do is, here I'm going to hold down the shift key
down and press one key. One. Hold down the shift key down and press one. You can get this
mark. Click on it. Select this one. It is auto implement the HTML structure. This
is the HTML. It is nothing but the HTML standard. Okay this is nothing but the HTML standard
Now what you're going to do is here I'm going to go to do the thing is here I'm
going to first I'm going to go to do the thing is go to body inside the body. Here
you will be able to if you look at the banner you can see here this is at the
center screen. Okay these are the links. At the middle there will be the logo. First
you have to understand the concept. So first I'm going to make the do do tag
So do dot container. Press tab key on your keyboard it will be the container
First container I have created successfully. After that what I'm going to do is, you have to do the
second one we need a three do tags. So how to implement the three do tags
Do dot do dot. We have to name this one as a new bar. New links. Something new links
So we have to create three. I know three one need. Press the tab key. We need a we have a three item
This container contains three items. This is the one container. This container
contains three items. One, two, three. Okay so this all the item we have put it to one container
Okay so one is a new links one we have name it as. Second is a new links two
This is for logo. We have separate it. Okay we have separate it. This how we have separate it
First one we have to make it as a high value. H I H. H R E F. So you have to write this one
You have to write it. First one is a form. You have to make it as form. Copy this and paste it below
Here second one you have to make it as above. Second one you have to make it as above
Third one you have to make it as contact. This one is a service. Service. This all the things just copied and paste it below
This one here we have to called as contact us. Contact us. Event of the projects. That's it. That's the thing you have to write
So this is a blank site. You just save all. You can see this is a simple design. Save all without any without do the CSS type
If you look at the site. If you click on this here. Here it's a site. Simple site look like
Okay so if you are not install the extension which is a live server. You have to install the extension on VS Code Editor
The extension live server. So okay no problem I haven't put into my connector. That's why it happen
Okay that's a data here. Live server extension you have to install. Then only you will be able to edit it
Live server. This one. You have to install that. This is must. Then only you can test your website via the VS Code Editor
Okay so this is the extension I'm using to test my websites. How it's look like while making
Okay this is must. This is simple. Okay it automatically update after you done. After changes
After you make the changes it automatically update and you will be able to see
Now I'm going to go to CSS style. So this all the things we have done it. Now we have to make the CSS style only
So image also we have to implement the images. The logo also we have to have image
SRC. Image I'm going to implement this image. I'm going to implement the logo which I created
Like this one. Not this. This image I have to get it
I modified it yesterday. This one. Just copy it. Simple. Go to the VS Code Editor
Your project. This images folder. Right click. Reveal in the file explorer. Inside the images folder
The same perfect shape the images did. This is what we can test. That's our logo
So you have to import it. SRC call. It is resided on the images folder. This is the image
Okay you have to specify the height and width. Width I'm going to do this one
That's it. I need to automatically take off the height. Okay now let's file save all
And bring back to the application check. Yes this is the one. Now let's make it the styles. In order to make the styles I want to do that thing. Yes first what
I'm going to do. First we have to implement the style. Where are your styles? CSS style. We have
to link the CSS style. So how to link the CSS style? There is an attribute called link
relationship which is a style sheet. Style sheet. How to do that? href. Yeah. Inside the CSS folder
You have to make your CSS files. Okay now I want to create the styles.css
I not yet created the folder. We have to create the folder. Okay. We have to create the file. Not
folder. Create the file. We are not yet create the folder. Okay. Okay. That's it. Now let's go to the CSS. New. Sorry. CSS. Right click. New file. This file I'm going
to make it as style.css. This CSS file what I'm going to do is make the body
Open the CSS. First you have to margin zero. We will make this margin which must be zero
Padding must be zero. Padding must be zero. This is must. Okay. You have to first we have to get
the website. You have to make this. After the display you have to make it as flags
After that you have to make it as a justify content center. Justify content center
This all this must. After that you have to the container. Okay. This is the size. Justify
container mean display flags. Okay. This display flags. After that it will justify container
center mean it is aligned at the center. Okay. Design should be aligned at the center
You have to save all. Okay. Now I'm going to implement it. Okay. It's a body. Okay
After that you have to make the container. We may have to make a container style
This class. So how to make it? You have to dot container
Okay. So dot container. If it is a class you have to put it as a dot. Okay. This is a class
This is a class. So you have to make it as dot. Okay. So container display. Here also you have
to make it as flags. Flags direction flags. After that what I'm going to second one
We have to specify the justify container. You have to make it as center of this container center
Control S to save. Control S to save. After that what I'm going to third one. You have to make
it as a width. You have to give the width. Width is must. Thousand pixel. I need a thousand pixel
for the side. Height also. You have to make it as a website height. You have to specify the height
hundred pixel height. After that background color I'm going to make it as black. Background color
make it as black. I have made the black color change as black. Align item. I make it as center
Sorry center. I make it as center. After that padding I'm going to make it as it's starting from zero to hundred pixel. I have to explain
what I did here is. Okay. So it is a gap in between the gap each items which is a 30 pixel
Okay. What are the image we have a container consists of three
items. This one item, second item, third item. Each item the gap we need this gap which is a 30
30 pixel. We need a space. That's a gap. Okay. After that another one is a padding
zero to hundred pixel mean it is come under the thumb. Here it is the starting position of 200
Why it's not happening? CSS style. Sorry not CSS. That's the problem. Now let's take it. Now here it's one
Earlier I have a mistake here. It is starting position 200 pixel mean it will be starting
the position here. So I'm not, this one we no need them
We no need them. We just get rid of this line because I have to put it here
Justify content center and alignment content center mean it automatically take as a center
screen. We no need to put that one. Okay. Now here it is at the center screen. We no need that
That property we no need to call. It justifies content center alignment
aligned content center mean it is horizontally center. So this one horizontally center
and vertically center. It is horizontal center. It is vertically center. Okay. This is the height
of your face by the height of thousand hundred. It is, it is a horizontal center. Virtually center
it automatically took. Okay. After that, I'm going to do this. I won't do it here. Second one
navel links. What are the things you have to specify the navel links? You have to specify
the navel links. You have to specify the navel links. Okay
Flags. You have got the flags. Zero, zero. You have to type auto
Display flags. You have to type display flags. You have to type gap
Gap. Gap property each navel links. You have a 25th selection. Okay
After that navel, the navel links one, we have this one. It has a
anchor tags. The anchor tags, the link tags, we have to give the style as a text decoration
None. Color white. Text decoration white. After that, what I am specifying here is white font size
Font size 200px. That's it. File saver. Same thing, just copy and the same thing
just copy it. These two things, places below. This one should be there
Two. We have to check it with the navel links one is working or not. Yeah. These two things
we have a navel links one. This is that. Okay. Let's let's check it. It's working
but the navel links two, yeah, it's navel links one is working
Navel links two, this links two, just copy. Auto paste it over here
Okay. Right. Navel links two, that's also I am putting the same style
It's a 20. So the font size we have, we haven't given it a 20
It's the same style I have given. Okay. Now let's, I'll save all
Then back to the application here. It's all. This one is a simple
At the design, we have to make it as simple one. Okay. This is simple one
This also I provide you in my website. You will be able to do it. Thank you for watching. These are this kind of banners are very
must when you are making the website development part. Thank you for watching