0:00
Hey guys, welcome to my channel EZ tutorials and today in this video I will show you how
0:04
you can create a website using HTML and CSS. So here I am creating the header part of website
0:11
As you can see, here is a logo and menu with hover effect and welcome message and call
0:17
to action button and we have a blue transparent layer on this background image
0:25
Okay, so let's start creating this website. First of all, I will open a text editor
0:37
I will write basic HTML quotes here
0:51
I will give the title of this website, web page design in HTML and CSS
1:04
Now we'll save this file as index.html
1:15
Okay done. Now I will create header part here
1:31
In the header, I will create a navigation bar. I will write the class name navbar
1:40
And in this navigation bar, there will be a logo. For that, I will select a logo file I have here logo.png
1:50
So select your file name and give a class name logo
2:00
So after logo, we will have a menu in our navigation bar
2:06
So here I am creating a menu
2:30
This is the first menu and I will copy and paste it
2:37
Now I will rename this menu. I will write home services, portfolio, testimonial, carrier and contact
2:53
Okay, now save this page and let's check our web page. So here is the menu and here is a logo that you can't see because my logo is in white color
3:06
Okay, so when I will change the background image, you can see the logo
3:13
Okay, now open a new file and here I will create a CSS file
3:24
So I will save it as a style.css and I will write the code, CSS code here
3:33
So I will set margin and padding zero for complete website. Okay, now I will write code for header section
3:48
I will add a background image here. Here is a file name pic1.jpg
4:03
And I will set the background height, background size and position
4:18
Okay, now I will link this file, CSS file to the HTML file
4:43
Okay, done. Now refresh your website. As you can see, there is a background image, logo and menu
4:58
Now I will write a code for navigation bar. So I will write here background rgba and 0 0 0 0.5
5:19
And I will set the height 80 pixel. Okay, after that I will write code for logo
5:30
So I will set the margin and height of logo 60 pixel
5:41
See, now I will write CSS code for menu
5:56
Now I will set display, inline block and margin
6:21
Now refresh your webpage. Okay, now I have to change the color
6:34
I will write text decoration, none and color white. Now I will add a border of 1 pixel
7:00
Now refresh your website. See the border is there. Now I have to add a hover effect on this menu
7:18
So I will add a background color and transition and color
7:27
Now you can see a beautiful hover effect. Done. Now I will create a welcome message on this webpage
7:52
So I will create a div and I will write class name welcome
7:58
And there will be a message in H1 tag
8:08
So this is our welcome message. Are you new on my channel
8:11
As you can see, okay. And I will add to call to action button here
8:29
Like video. Subscribe
8:40
Okay, you can see two button text here. Now I will write CSS code for welcome
8:55
I will set the position and text align center. Font family and color
9:09
Now refresh your website. You can see message here
9:37
Now I will change the font size. Okay, now I am writing code for button
10:02
Okay, this code is for both the buttons
10:29
And I will add a border also. Done. Done. Okay, now I will write code for button one
10:41
I will write background color and text color. And this is code for button two. Okay
11:02
So now I have to add a hover effect on second button
11:23
Now you can see a hover effect on subscribe button. Okay. Now I have to add a transparent layer on this background image
11:38
For that I will go to this background image section and I will add this code
11:47
gradient rgba and this one
12:11
Okay done. Now refresh your web page. As you can see here is a beautiful transparent layer on the background image
12:32
In the next video I will show you how you can add a background video on this website
12:38
If you like this video, please click on like button and subscribe my channel
