hi guys welcome back to another video of greatest tack today in this video we are going to create one awesome web page header section using HTML and CSS as you can see on my computer screen on this web page we have this navigation bar with this logo some menu links and one button and in the background you can see this gradient color that makes this website more attractive here you can see we have the text which is animated this animated text looks very beautiful then we have some buttons and text and we have one feature image this navigation bar is scky it means when you will add more sections on the web page and scroll the web page then the navigation bar will be fixed at the top of your browser this web design is completely responsive let me open this web page in smaller screen so you can see how it looks in mobile devices so here we have this logo and this menu icon when I click on this menu icon it will display the menu links with a smooth animation when I click again it will hide the menu links we have created this toggle menu using very simple JavaScript and this text is animated so we will create this awesome web design a step by step using HTML CSS and very simple JavaScript so let's let's start this tutorial here we have this folder and in this folder I have created one index.html file style. CSS file and one folder with some images and icons that I will be using on this web page you can find all these images download link in the video description now let's open these files with code editor which is Visual Studio code this is the index.html file where I have added the basic HTML structure we have the meta tag then title and Link tag that will connect the HTML file with the style. CSS file so this is the style. CSS file where I have added the global selector and added margin padding box sizing and font family now in this HTML file let's create some HTML tags so first we will create the navigation bar so here I will use the nav tag in this nav we will add one image that will be for logo so let's add the file path images SL logo.png this file is available in our images folder and here let's add a class name Logo after this logo we will add some menu links so we will add ul and Li so first menu link text will be home now just duplicate it and we will change the name after adding the menu list we will add one button so here I'm adding the button and the button text will be get started and in this button we will add a class name nav BTN so after adding this let's open our HTML file so come back to the folder and open this HTML file with any br so you can see this web page now we can open this web page with the live server here we will select open with live server so it will refresh the web page automatically whenever we will add any changes in the code file you can see again we have the same web page but the URL has been updated now let's come back and we will add one icon in this button so here we will add one IMG tag and write the file path images SL this will be Arrow white.png after adding this let's add the CSS so here we will copy this nav and come to the CSS file for this nav we will add the CSS properties so for this navigation bar I have added position fixed top zero left zero so it will be fixed at the top whenever you will scroll the web page we have added the width 100% display Flex align item Center and justify content space between so it will align the contents side by side and there will be equal space between the logo menu links and button then we have added the padding and Border bottom so there will be one line at the bottom of the navigation bar and J index so whenever you will scroll the web page this menu will be always visible after adding these CSS properties let's come back to the web page and see the changes here you can see we have the logo in the left side and button in the right side and we have equal space here now we have to align these list horizontally and we will add some space also so let's come back here we will add nav ul and Li so for this list let's add the CSS properties here we have added list style display margin font weight and cursor pointer so you can see now it is aligned horizontally next we have to change the font for that let's come to Google and search for popins font open this Google font website from here you can select this 200 300 400 500 600 and in the right side you will get these links so just copy these links and come back to the HTML file and place it here before this closing header tag just place all these links and now let's come back to the Google font website and here we have the CSS properties just copy this one and come back to the CSS file here we will place it at this line font family popins and sensitive after adding this you can see the font has been updated here after that we have to change the size of this logo so let me come back and here we will add the CSS so for this logo we will change the width after that you can see the size for this logo looks perfect next we will add the CSS for this button that is in the right side of the navigation bar so so let's come back to the HTML file and you can see we have the class name nav BTN so we will add the CSS for this class name for this button I have added the background then color this will be the font color then we have added the font size and added padding that will be a space inside the button then border zero outline zero then I have added the Border radius of 40 pixels so so that it will be down from the left and right side after adding this you can see the changes on the button now in this button we have this icon also that is inserted using the IMG tag so we will add the CSS for that image so here we will add IMG and for this one we have to add the space from the left side and we have to change the width after adding this you can see the size for this Aro icon looks perfect now we have designed this navigation bar next we have to create the other contents like text and images so let's come back to the HTML file and here after this closing nav tag we will create one div with the class name header so let's add the CSS for this header just copy this add it here now for this header we will add the CSS properties so for this header I have added the width and minimum height then I have added the linear gradient color in the background and padding that will be 10% from left and right side so after adding this you can see we have the gradient color on this complete web page now we will add the text and uh buttons so let's come back to the HTML file and within this header let's create one title in the hed1 tag so here we will add H1 and here we will add the text free and we will add the line break freelancer we have the line break here after adding this title we will add one div that will contain two buttons so we will add one div with the class name BTN container in this BN container we will add buttons so let's add the button tag and here we will add the text request call back and uh there will be one more button or you can say link it is no more and after that here we will add one text in P tag so this is the text after adding this let's come back to the web page again so you can see the title is behind this logo so we have to change the position and we have the buttons here and this text so let's add some CSS properties so let's come back to the CSS file file and in this header we will add display Flex justify content Center and we will add the flex Direction column so that all the text will be vertically centered so after adding this you can see these contents are vertically centered now we have to increase the font size of of this text and we will add the line height so let's come back and here we will add dot header H1 for this H1 we will add the margin from the top to add some space and font size will be 13 viewp put width then line height will be 11 viewport width after adding this you can see the font size and line height for this text is looking perfect next we will add the space above this button so here we have the class name let's copy this BTN container class name add it here here we will add the margin of 20 pixel from top and bottom left right zero now we have some space around this button next we have to design this button so here we will add do header and button for this button we will add border Z then outline zero display will be inline Flex align items Center font size will be 18 pixels and margin right 20 pixel so that we will get a space between both buttons and cursor pointer here we have added display inline Flex align item Center because in this button we will place the icons also so that the text and icons will be aligned horizontally here you can see we have only text so we will add the icons also now we need different background color in the first button and in the second button the background for the second button will be transparent so we will add the different class name so here we have two buttons right so in the first one let's add the class name BN dark and in the second one we will add the class name BTN light and here let's add the icons also so in the first one we will add the IMG tag and write the file path images SL phone.png and here in this second button after this text we will add the IMG tag write the file path images SL arol black.png so we have added two icons you can see we have these icons here now we will add the CSS properties for the dark button so let's copy this class name BTN dark place it here in this CSS file so for this button let's add the CSS properties in this button we have added the background and color then we have added the padding this is from top right bottom and left in the left side we have added 30 pixel then border radius of 40 pixel in this one we have the icon also so let's add the class name then IMG in this one let's add the width the background will be white for the icon border radius 50% so it will look like a circle then we will add the padding of 10 pixel and margin left 30 pixel after adding this you can see the first button looks good next we have to add the CSS for the second button which is BTN light so just copy this class name BTN light add it here and here we will add background transparent text decoration will be underline and in this one we have the icon so we will add the IMG tag and for this image the width will be 20 pixel and space from the left side so margin left 10 pixel so this no more link is looking good next we will add the CSS for this paragraph text so here let's add do header and P so for this P tag we will add the maximum width it will be 360 pixel and font weight will be 500 now this text looks good after adding this we will add one image on this web page to place the image let's come back to the HTML file and uh after this P here we have the P tag so here let's add IMG tag write the file path images SL user.png and in this one we will add the class name name user IMG so we have this user IMG class name after adding this you can see we have this image here at the bottom right now you can see when I scroll the web page this text goes behind the navigation bar and these logo and menu links are not clearly visible so we will change the color of the navigation bar when we will scroll the web page so let's fix this one first so in this HTML file just above this body tag we will add a script and here we will add the JavaScript so in this one let's add window dot on a scroll is equal to one function and here we have to change the color of the N Navar so first let's select the Navar here we will add let Navar is equal to document. query selector and in this one we will add nav tag so it will select the Navar using the nav tag and here we will check the condition we will add if and we will add window Dot scroll by if a scroll Y is greater than zero it means we have scrolled the web page then what will happen from this snap it will add style background and in this background let's add this color code and here we will add the else if the window do scroll all Y is not greater than zero then what will happen it will become transparent so again paste it and make it transparent that's it after adding this you can see if I scroll the web page these links are clearly visible and this logo is also visible and this navigation word is sticky at the top now we will add the CSS properties for this image so let's come back and here we have have added the user IMG class name let's add this class name here in the CSS file so for this user IMG we will add the width that will be 80% and we will add the maximum width so the maximum width will be 500 pixel then we will add the position absolute and write so it will be in the right side so it will be at 13% of space from the right side and this image will be at the bottom so we will add the bottom zero that's it after adding this you can see the perfect position for this image after adding all the content on this website header section we will add the animation on this text so we will add the animation in two part first it will animate the first line then it will animate the second line so let's come back to the HML file here we have this text in H1 which is freelancer so here let's add one span tag a span open and closing tag and place this free inside this span like this now after this break we will add again one a span tag and in this span open and closing tag we will add the second line of Tex text Lancer so we have this first span tag this second span tag now we will add the CSS properties so let's come back to the CSS file here let's add one comment so you can understand from here I'm writing the CSS for the animation here we will add do header H1 and span tag let's add the background and in the background we will add linear gradient and the same color code that is black after that we will add the background repeat no repeat then we will add web kit text fill color so it will be transparent after that we will add the web kit background clip it will be text and after applying this you can see there is no change here but if I apply background size 50% like this so you can see only half text is visible from first line and second line if I reduce let's say 25% you can see only 25% text are visible if I make it zero so the text is hidden so we will use this to animate this text so let's come back and here again copy this one paste it here and here we will add the CSS for the first span so we will add first child that will select the first span only so in this one we will add the animation let's add the name of the animation it will be text color 1 this will be for 2 seconds linear infinite and Alternate it means first it will display the text text then it will hide the text using this alternate now after adding this we will add the key frames for this so let's add the key frames for this text color one here let's add 0% and at the 0% this background size will be zero now duplicate it and here here we will add 40% and 100% so at 100% it will become 100% And at 40% 100% so what will happen initially the background size will be zero and after 40% time of this 2 second the background size will be 100% so you can see the animation in the first line right now we will animate the second line so here let's duplicate it and it will be last child here we have added first child this is last child and here we will add text color two and we will add the key frame for second one so let me duplicate it and here we will add text color two in this one the the size will be zero at 0% and here at 40% it will be zero and from 40 to 100% this size will increase from 0 to 100 like this so after adding this let's refresh the web page and now you can see both lines are animated first it will complete the first line then it start animation in the second line now we have created the animation also next we have to make this web page responsive for smaller screen so let me change the screen size so you can see how it looks in the smaller screen right now this logo is too big and here we have these links and button is not visible so we have to remove this button and instead of that we will add one menu icon and these menu list will be hidden it will be displayed when we will click on the menu icon so let's come back here in this CSS file here let's add the comment so here you will understand I'm adding the media ques for navigation V or navard so in this one let's add atate media only screen and Max width 600 So within this media quy we will add the CSS properties that will be applicable for the smaller screen whose width is less than 600 pixel so here we'll add the nav UL like this and we will change the CSS properties so in this UL we have added the position absolute withd 100% added the background and color left zero top 100% and textalign Center so you can see this menu links are displaying just below this white navigation bar after that we have to hide this button so let's come back and here we will add dot Navan display none then we have to change the size of the logo so we will add nav do logo so let's decrease the size width will be 150 pixel so here we have the logo only and these links now we have to decrease the space between these links so it will come in the single line so let's come back and here we have the CSS for navul so let's add the list also so nav UL Li so for these list We'll add the margin 10 pixel and we'll decrease the font size 14 pixel now it is coming in single line after that we have to add one menu icon using that icon we can display or hide the menu links so let's come back to the HTML file and here we have this button so after this button we will add one icon so here above this closing na tag we will add IMG tag write the file path images SL menu.png and we'll add the class name menu icon like this save this and come back to the CSS file Above This media query media quy is starting from here so here let's add menu icon display none so this menu icon will be hidden if I come back to the web page and open this in full screen you can see there is no menu icon if I remove it you can see this menu icon is visible on the desktop screen also that's why here I'm adding display none outside of the media qu so it will hide it from full screen let's open it in the small screen so in this smaller screen you can see still menu icon is hidden so we have to display it in the smaller screen so let me come back and here we'll add this menu icon in this media quy menu icon display will be block and width will be 30 pixel so you can see the size for this menu icon is perfect and it is visible on a smaller screen and when we open it in full screen the icon is hidden and it is visible in smaller screen next we have to add the click feature on this menu icon so that it will hide or display this menu links for that let's come back and and here you can see we have UL so in this one we will add the max height Max height zero and uh we'll add the Overflow hidden so the links will be hidden and here we'll add the transition also transition of Max height 0.5 seconds so when we will increase the max height the links will be visible again so after adding the max height zero you can see these links are hidden next we have to increase this Max height using JavaScript whenever we will click on the icon so let me come back to the HTML file so we have to increase this height of this UL so in this one let's add one ID We'll add the ID menu links like this and we have to add the click feature on this menu icon so on this menu icon We'll add on click and call one function let's say toggle menu here we are calling toggle menu function so let's define this toggle menu function so in this JavaScript here only we will add space and uh let's add function toggle menu like this and we have to select that UL so let's add let menu links is equal to document Dot get element by ID and place the ID that we have just inserted in the UL tag so we have selected the menu links now for this menu links we have to add a new class name or remove the class name so we will add menu links dot classlist dot toggle and here let's add a new class name that is so menu so what will happen whenever we will click on the menu icon it will execute this tole menu function and this toggle menu function will select this menu links that is a UL tag and in that one it will add this so menu class name and if it is already there it will remove that class name it means when you will click the first time it will add the class name when you will click again it will remove the class name so let's add the CSS properties for this new class name that is so menu so what will happen we have to increase the max height so just add so menu and uh here let's add Max height of 60 pixel that's it after adding this again come back to the web page and let's click on this menu icon so you can see it display the menu links with smooth animation let's click again it will hide the menu links so you can see this this toggle menu is working fine for this smaller screen next we have to add the CSS properties for the headed content which is the text and this image so let's come back to the CSS file and here let's add the comment again and here I'm adding media queries for header content you can add the media queries here only but I'm writing it separately so you can understand it clearly whenever you will open the code file so here again we'll add another media qu and here let's add do header and in this one we will add minan height Auto earlier we have added minan height 100 VH so we will set it Auto for small screen and we will remove the padding also the padding will be zero after removing the padding you you can see these text are coming from the left side right now we will add the CSS properties for this user image so here let's add do user image and width will become 100% then write Auto earlier we have added the right like 13% so we will set it zero or we can set auto and we'll add position relative after that we will add margin from top that will be 100 pixel so after adding this CSS for the user image you can see it is coming here right next we have these content here so we will insert all these text buttons and uh this paragraph text in one div so that we can set the position at the bottom so let's come back and here in this HTML file we have this H1 text then these buttons and this paragraph so we will insert all these things in a div so here let's add one div and uh let's say the class name is header content and here in this header content we have inserted this title this button and this paragraph text after adding this you can see there will be no changes here and there is no changes on full screen also but we can add the CSS using that new class name for all these text button and this paragraph So let's come back and copy this CL class name header content place it here in this media query and for this one we will add the CSS properties so after adding these CSS properties position absolute bottom padding Z index and padding bottom so you can see the position for this text and button is perfect next we have to add the CSS for this button so let's come back and we will decrease the space so here let's add that class name dot BTN container and in this one we will add the margin of 5 pixel 0 earlier it was 20 pixel L 0 after that for the individual buttons we will add the CSS so here we will add do header and button so for this button we'll add the font size that will be for both buttons and margin right 10 pixel so you can see the changes in the space and font size of the button after that we will add the CSS for the dark button so let's add dot BTN dark and uh here we'll add the padding we will decrease the padding and we'll add the margin bottom and in this dark button we have one icon also so let's add the IMG tag and we will decrease the width so after adding the CSS you can see size for this request call back button is perfect next we will add the CSS to decrease the size of this Arrow icon for the second button so for the second button the class name is BTN light and write the IMG here we will decrease the width and margin left so the size for this icon is also good next we have to increase the size for this font let's come back and here we'll add do header H1 so for this H1 we will add the font size of 70 pixel and line height of 60 pixel margin at the bottom so after adding this you can see the perfect size for this text freelancer now you can see this text is overlapping this image and the paragraph text is also overlapping this image so sometimes it is difficult to read this text clearly that's why we will add one colored layer so let's come back and here we have the header content so in this one we will add the background so we will add the background linear gradient and just add transparent from Top it will be transparent and at the bottom it will be white that's it after adding this again come back to the web page now you can see the bottom is white and you can see this paragraph text is clearly visible so finally we have made this web page responsive for a smaller screen and it is looking very nice and let me open this web page in full screen here also it is perfect so finally we have completed this responsive web page design using HTML CSS and very simple JavaScript I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel great stack to watch more videos like this one thank you so much for watching this video