Hi guys, welcome back to my new video and today in this video we will learn how to make
a website header using HTML and CSS. On this website design, you can see a video in the background
In the center, you can see one text, one search box and some featured category icons below
the search box. We will learn to make this website design step by step using HTML and CSS
So let's start this video. Here I have this folder and in this folder I have one index.html file, one style.css
file and one folder with some images and one video and this folder name is media
Now I will open these files with the text editor. So let me open my text editor here
So this is the HTML file I have added basic HTML structure and this one is the CSS file
where I have added margin tagging, font tagging and box tagging. In the HTML file, I have added this link tag to connect HTML and CSS files
Next we will add the code in the body tag. So here we will create one div and let's add the class name header
Now we will add the CSS properties for this header. So write this class name here in the CSS file and for this one we will set the height and width
After that I will add padding 0 and 8x10. Then let's add the background and this is the background color and position it will
be related. After that I will open the HTML file with web browser
So now you can see the dark color on the complete web page
Let's come back and in the HTML file, in this bit we will add one map and in this map
tag we will add one image. It will be for the logo you can see
In this folder we have this logo.png. So I will write the folder name media slash logo.png
Let's add one class name for this image. So the class name I am adding logo
After that we will add real and li and enter tag. Here we will add the navigation link
So the link text is home. Let me duplicate it and I will change the link name
So the name is courses. The next one is reviews and let's write the last one contact
After adding this I will refresh the website and you can see the logo and these names on
the web page. Let's come back and we will copy this tag map write it here in this CSS file
For this one we will set display flex and align items it will be center
And justify content space between. So that we will get the logo in the left side and navigation link on the right side
You can see link in the right side. Let's come back and copy this class name logo write it here
For this logo we will set the width. It will be 140 pixels
Let's come back and in this url we will add one class name
So I am adding the class name map links. Now just copy this class name
For this one we will add the CSS. So in this one we will add the padding of 28 pixels and 0
Let's add this class name again then write align. For this width we will add display inline block and margin 0 and 15 pixels
Again copy this and write a. For this anchor type we will add text decoration none and color it will be white
Then let's add some padding. It will be 5 pixels and 0
After that you can see these menu in the horizontal style. Now we will add the whole text on this menu
So just come back and copy this one. Then write anchor. Here we will add content it will be empty
Then write background. I will add this color code. Then we will add the width
It will be 100% and let's add the height 2 pixels. After that I will add the position absolute
It will be at the bottom 0 and left side it will be 0
And in this a tag we will add the position relative. After applying this again refresh the website and you can see one underline below this links
First we have to hide this underline and it will be visible when we will take cursor
So just come back and copy this one and here we will add hover then write after
Here let's add the width 100% and come back to the after there
Here we will add this 0 and let's add the transition width 0.5 seconds
After applying this again refresh the website and you can see this line whenever we will
take cursor over any menu link. So this hover set is working fine
Next we will add one button at the end of this link
So let's come back to the HTML file and here we will add one more li and let's add the
text camera and again add the class name btn. Now we will add the css for this btn
Before that you can see it is over here it is in black color that's why it is not visible
So let's come back to the css file. Add this class name btn and for this one we will add the css property like background
After that we will add the color and it will be white color
Then let's add some padding. I will add 10px and 30px and border radius it will be 3px
Let's add cursor pointer. After that again refresh the website and you can see this button looks good
After completing the navigation part we will add some content in the center of this website
So just come back and after this nav tag here we will add some space and I will add one
bit with the class name content. Here let's add one title in h1 type
So the title I am adding learn anything online. After that I will create one form with the font type and in this form we will add one
input box. Type will be text and let's add the play folder
Enter keyword. After this input box we will add one submit button
So this is the button type with the type submit and the button text is find course
After that refresh the website you can see this text and this input field and search button
Let's come back and copy this plot name write it here and for this one we will add the position
absolute then let's add the left 50% and top 50%. Then we will add the width it will be 90% and maximum width it will be 900px
Then let's add the transform translate minus 50% and minus 50% so that this content bit
will be in the center. Next we will add the text align center and color it will be white
After adding this you can see everything in the center. Next we will add the CSS properties for this title which is in the h1 type
So write this class name and write h1. For this title let's add the font size I will add 65px and I will add the font width 600
and let's add some margin from the bottom 40px. Now you can see the increased font size for this title
Next we will add the CSS properties for this form. So come back and here we will add the class name content then next font type and here
let's add the background it will be white and I will add some padding 10px and border radius
It will be 8px then write the place text. Let's copy it again then write input for this input field we will add flex 1 so it will
use the entire available space then write border none and outline none
Next we will add padding 0 and 20px then font size it will be 18px
After that in the search tab type you can see the increased length for the search box
Now we will add CSS for this button. So copy this again then write button
For this button I will add the background this color code and let's add the color which
will be white color and then write some padding I will add 15px and 40px
Next add border none and border radius it will be 6px. Cursor pointer then refresh the website you can see this button looks good
Now we will move this text little down so let's come back and in this content we will
add some padding from the top. So I will add padding top 50px now it is fine
Let's come back and in this place folder I will add one icon so here I will add one
icon code here you can search hex code HTML on Google and you will get different icon code
After writing this you can see one pencil icon in this input box before this text enter
keyword and now after this search box we will add some icons and text in different columns
so after this form we will add one div and let's add the class name I will add the class
name category list and I will add another div in this div so the class name I am adding
category let me duplicate it because I will add 5 small boxes
Now just copy the class name category list and for this one we will add this place text
then let's add align item center and justify content will be center then we will add margin
from the top 40px now copy this class name category for the small boxes for this one
we will add width and height it will be same which is 80px so it will be a square box then
we will add background here we will add RGBA and this color code the opacity is 0.5 and
this opacity is 0.15 then let's add margin 0 and 10px 10px from rectangle so you can
see these boxes below the search box next we will add icons in this box and I will also
add some text so let's come to HTML file and here we will add one image it is the image
file path media slash coding dot png and after that we will add some text in p tag
so this is the text for this category div div copy this one and add it in the other
category box also write the different title and add different image similarly we will
add different image and different text in all the small category div in this one we
will add this console dot png filename and text is gendered then the last one is language
dot png and the text is language now in this css file write this category again then write
img for this image we will set the width so let's set 25px which will be very small now
you can see these icons and text next we have to reduce the size of this text so come back
and in this category let's add the font size here I will add the font size 12px after
that I will add some spheres below this image so I am adding margin bottom 5px it is good
next we have to align it vertically center for that in this category we will add display
text and align item center then again justify content center and select direction it will
be column that's it now you can see these text and icons are vertically center so after
adding all the content on this website we will remove this background color so just
come back and here in this header we have this background so let me remove this and
now you can see the white background on this website next we will add one video in the
background of this website for that let's come back to the html file and here in this
header we have to add the background video so in this header let's add some space and
here we will add one tag which is video tag and with this video tag we will add auto play
then write loop and let me add one class name also in this video tag so the class name I
am adding back video after that I will add mutate and select place inline now within
this video tag we will add source just copy and write the video file path so the video
is in this folder media then slash video file name which is video.mp4 then we will add type
video.mp4 that's it after adding this again refresh the website and you can see this video
in the background but the alignment is not good so for that use this class name and come to the
CSS file I will write it here and for this class name we will add some CSS properties like position
absolute then write 0 and bottom it will be 0 and min width it will be 100% and min height also
100% then we will add width auto and height auto and z-index let's set minus 100 after that if I
refresh the site you can see this background video position is perfect but we will add some
other CSS also that will make this video responsive for small screen also so come back and here we
will add media min aspect ratio it will be 16 flat 9 and here add this class name back video
and for this one let's add width it will be 100% and height auto let's copy this one write it here
and here we will change it to max aspect ratio and width will be auto height 100% that's it
refresh the website and you can see this website looks very good with the background video and
all the contents on this website is looking perfect if you like this video please share
this video with your friends and help me to get the 100k views on this video within one month then
I will make a second part also and I hope this video will be helpful for you if you have any
question you can ask me in the comment section and please like and share this video thank you so much
for watching this video