One Page Full Website Project For Practice | HTML & CSS Responsive Website | Web Cifar 2021

[Music] [Applause] [Music] hello guys welcome to this video so as you can see that in this project what we will do is we will make this website it's a one-page website and it's a full project as you can see that that's especially for HTML and CSS so that we can practice our HTML and CSS so as you can see that it's looking amazing and you can see we have these some sections and also as you can see that our menu have fully functional and if you notice that in the menu when I'm in the top there is no background that's a transparent background and hyannis calling there is a solid background so and as you can see that this site is fully responsive whenever you are in the mobile link it should be like that so we will see how we can make responsiveness for mobile and also for the tablet as you can see that that's our tablet view so it will be like that in the tablet so no matter which device are you on this site will be perfect for you so I will show you how you can make this all and also there is interesting thing as you can see that that's the hamburger when you come to the tablet or mobile this hamburger will appear but when you are in the desktop view something like that as you can see that our menu is changed but whenever I'm in the tablet or mobile as you can see that this hamburger will appear and if I click that we have our menu and there is interesting thing as you can see that when I am hover to our menu there is a background which is dynamically changed by our hover so when I am hovering projects the background is changed now it is in project as you can see that so we will show how we can make all these things in this video and we will practice our HTML and CSS through this project and if you need to my channel please do subscribe for more video like this one and no more talk let's start this video [Music] so first of all what we need to do is we need to install our code editor so for the code editor what we will use these we will use Visual Studio code which is a free code editor from Microsoft so it's one of the best code editor so what you can do is you can come in this URL which is quote dot Visual Studio com I will also put this link in the description you can come this page and download the code editor so it's also available for the Mac Windows and Linux and other platforms you can download this and install this code editor so once you have Visual Studio code on your machine what you need to do is let's create a folder for our projects so let's say that one page project or something like that so in this project let's have our file which is first one will be the next or HTML and second one will be style dot CSS and let's also create a folder which will be our images so it will be IMG folder in this folder we will have some image so let's paste the images so I will also put all the folder and all the file so you can practice with that so you don't need to worry about the images or all the files you will find it in the description so once you have ready all the files what you can do is you can open your visual studio code so here it is so we opened our visual studio code and let's what we need to do is I need to drag and drop this folder which I created a little moment ago so if I drag and drop it so that's it we have set up all the things so now we are in our bezel studio code and here as you can see that all of our images here and also our fell so also let's create a extension which we will use so let's come here in this tab which is extensions and such for live server so this is the extension which we will use so if you are not installed it yet so you can install it from here so install live server so once you are installed these slides server we are ready to go so let's open our index dot HTML and style of CSS so in the index dot HTML file so first of all let's create a boilerplate so in Visual Studio code what we have is we have M each installed which is a nice thin so now what we can do is we can use some short card to make our HTML writing process very fast so like what I can do is I can make exclamation sign and heat enter which will create this little HTML boilerplate as you can see so it's easy to create what you need to do is you need to make exclamation sign and after that heat tap so it will create this one so let's start with this so in the title let's give it a title of my website and after that let's also link our stand sheet so after that in the body let's create our first section which will be our hero section so before starting the code let's also come here and say daddy it will be h1 of hello world and if I save and now hotter we can do is we can right-click and open it with our life server which will open this HTML file which alike server as you can see that that's our life server if you notice the URL that's local URL as you can see so let's make it a little bit of adjustment so as you can see that all the adjustment is now ready to go so that's the life server so with this left server what we can have is we will have a live reload so whenever I will make change in our HTML file or our work file and save we do not need to come here and refresh it will make automatically refresh and as you can see that our file is updated so that's fine so let's also open our and file our end project as you can see that this will be our end product or project so let's open it beside our working project so that we can have direction which we need to do and what we need to change so that's our end file so let's come to our website and start coding so here let's remove the HTML of h1 so if I come here in my and file so first of all what we will create is we will create those section first one is our hero section and second is service and third one is project and about me and that's what we are going to do we will create the section first and in the end we will create this number so we will create this neighbor and the end of the video and first of all let's create these hero section so for the here section first of all let's create a comment so that we can find it easily in letter so let's say that hero section and here each will be our end of 0 section so between these comments we will have our code for our hero section so for the hero section let's create a section of ID with a hero so here what we will have is we will have a deal with a class of hero also and also we will have a container so as you can see that I'm using M it because it's nice to use and it will help you to create HTML faster so as you can see that what I wrote here a layer as you can see I wrote Eve with the hero dot container so if you created Eve with a class of hero and container so that's easy if I hit enter as you can see that that's create a div with a class of hero and container so that's what you can write so it will help you to write your HTML code a little bit of faster so it's nice to use so in this deep what we'll have is we'll have another div and here what we will have so in this deep what we will have the h1 of hello sorry for that hello my name is Irfan and if I save let's come to our website and there's our app so as you can see that that's our heading and as you can see in the end project we have this nice button so let's also create this button so here we'll have this h RS and say that it will be type button and class of CTA call to action so in this button what will happy we will have portfolio so portfolio and as you can see that that's our button so let's come to our standard CSS and what we need to do is first of all let's remove all the unexpected gap so let's say that padding will be zero and margin will be zero and box-sizing will be bora box and as you can see that we are removed all the unexpected gap so after that let's come to the HTML and give it some Estelle's say that font size will be about 10 pixel and form family so we will use Montserrat's so let's grab the monster from the google fonts come here in the google search for fonts dot google.com so if you come in font store google.com here you will find some google fonts which you can use so let's use monserrate so this is monserrate and if I select and let's come and customize it so let's say I use light regular and bold so once you select it or customized you can import it from here so let's import copy this import line and what we can do is we can paste it in the top of our style dot CSS now we can use Montserrat so let's come here and font family let's use this Montserrat and also you use a fallback font family which will be sensitive so as you can see that my font is changed so that's for our HTML so as you can see that if I make it a little bit or bigger so as you can see that in this anchor tag we have something underlined and going on so let's also keep some style for our anchor tag so in the air let's say that text-decoration will be none so it will remove this underline so that's it for our anchor tag so let's come here in the container so let's say that mean height will be 100 V H and it will be about 100% and display will be flags and aligned items will be Center and justify content will be Center so if I save now as you can see that our content is now in center so that's fine so let's remove the zom-- as you can see that it's in the center so if you notice that in my HTML in the DV we have these two section first one is the hero and second one is the container this class which is container we will use this class in many section or multiple section so that's why what we did is we did this container style in the comment section so let's come here and make our style for our hero section so let's make a hero section to us so comment actually so end of fear section so between these comments we will have our style for hero section so in the hero let's come here and say that what we need is so first of all let's grab the ID which is hero ID and what we need is we need to give it a background image so it will be something you are oh so hero background as you can see that I already have this image and as he considered that's our image in the background so after that let's also say that background size will be background size will be cover and also say that background position will be top center and position of this class will be relative so if I save as you can see that that's in place perfectly so as you can see that we have a position of relative because we will have a overlay of this section so let's create this overlay it will be an after Solomon's and say that position will be absolute and if I give it left am sorry love zero and top zero and also say that height will be 100% and background not background width will be 100% say bye save and what I need to do is I need to give it a background color of black so so we forget to give it a content because we need it so as you can see that that's our overlay as you can see we can't see our hero section because it's covering the hero section so what we can do is we can make opacity of let's say that 0.7 so it will create this effect which is kind of over length so which will help us to create more contrast but as you can see now we have this overlay but as you can see that we can't click our button because it's under this overlay so what we can do is we can come here and say that that index of minus 1 and in the hero section that index of 1 so as you can see that now we can click it and our text is now okay so that's fine so also we have overlay nice overlay of black so let's come here in the hero section and in the h1 let's say that this player will be block and with will fit content and font size of for RAM and position will be relative caller will be let's say that white so if I save as you can see that there's our text which is looking sign so let's come here and Estelle our button so let's come here in the hero dot CTM so let's say that display will be in line block and let's give it a padding of something like 10 pixel and 30 pixel and let's give it a color of crimson and let's also give it a background color of transparent and border to pixel solid crimson so if I save now as you can see that that's our button so let's also make some style for the font size will be 2 R M so 2 m and after that text transform text transform will be uppercase and letter spacing will be 0.1 rim and margin top let's give it some margin top of 30 big cell not 20 in it will be 30 and here what we need is transition because we will have a hover effect not transform transition will be 0.3 second is all not all it will be only for beckon color and if I save now as you can see that we have this button which is here so that's fine and so let's also make a hopper for this CTN so let's come here in a hero let's say that dot city yeah if I hover what we will change is we will change the color which will be white and also bank on color of crimson now if I come here and hover as you can see that so that's something beachy here which is as you can see that the transition is for only background color but we need that transition for also the color so let's remove this from here and instead of that let's say that transition property will be background color background color and also for the color background so it will be nice as you can see so also if you want we can use white color which will look good I think yeah that's looking fine so that's okay for our button so if I come to the website Hinda as you can see that in the website we have this nice transition of these heading as you can see that if i refresh so let's make this one so if you wanna know more about this effect I already have a separate video on it so I will link it in the description you can check it how we can make these text rebill effect so let's make it for our website so for that what we need is we need to make this break so what we need is we need to make h1 for each line so for the hello we need separate h1 for the my name is we need separate h1 for the name we also need separate a one so let's make it so let's remove this h1 and say that we will have its h1 which will be only for hello and let's make two more and for the second one we will have my name is and for the last one feel free to use your name so at one that's my name so if I come here as you can see that and that's perfectly looking fine and what I need is now I need to make some adjustments in the h1 so as you can see that the wrapped box as you can see which is animating that's an S Pen so we need to create some s-pen or we need to create some soda elements so let's make some span here you can create soda laments instead of the span if you want so let's create a span so if I have spent in the end of the h1 what we can have now ease so what we need to do is now in this hero h1 let's come here let's grab that span so we will have this span and what we need is we need to say that position will be absolute and as you can see that we used absolute here so we need to make sure that the h1 position is relative so that's fine so also say that top will be zero and left will be zero and height will be 100% and it will be 100% and also say that background color of this span will be crimson and that's it if I save as you can see that that's our box which we need to animate so let's make the animation so in the end of our code let's make a comment so that will be end of EP frames so in these comments we will have our keyframes so let's make fast keyframes which will be our tax rebel box so let's make state texts reveal box so this red box so what I need to do is so in 50% let's say that it will be 100% and left will be 0 and in 100% which will be 0 and left will be 100% so that will create the animation so let's apply it in our pen so let us say that animation will be the name was text rebel box and let's say that it will be once again and he is if I save as you can see we are having this so let's also make some delay so let's say that animation delay animation delay will be 1 second so as you can see we have an animation delay so for the initial speed we need our S Pen to with 0 so if I came here so as you can see that it's looking perfectly fine so the box is working fine so what we need is now we need to make sure that we have a nice transition or nice effect in our text so for the text let's create another keyframes so in here let's get another one keyframes text rebel and let's say that for the text what I need is I need to 100% and if I come hundred percent the color will be let's say that white so and in the initial stage the color will be transparent instead of white so if I give it transparent we can't see it but once we have this animation which is text ribbon and let's give it a one second is and if I save now as you can see that and also say that four words so that we will have this white color in forward so as you can see that we also have this text animation which is fine so what we need to do is we need to make functional our timing function so as you can see that our text box is one second so what we need is we need to make our animation for our text which will be point five and let's say that animation delay will be which will be 1 point 5 second so once again if you want to know more about this you can watch the full video on this topic so as you can see that now our animation is looking good so the last thing what we need is we need to make it sequence ly first one we will have this hello second we will have this thirdly we will have animate our name so how we can make this animation sequence Lee so for that we need to select our h1 separately for three times so here first of all and let's come here in the h1 and select separately so hero h1 let's say that aunt child so that's the first one which is our hell so let's say that animation delay will be 1 second or 1.5 second and for the second one so let me make it two more times so that's for the second and that's for the third one for the second one let's say that we need to increase it one more time and it debts will be three so that's fine first one second one and third one so let's also select these spend three more times so for that what I can do is I can say is for the end child of each one for the first one we will select this as men and let's say that animation delay will be one second and let's duplicate it two more time and let's say that that's for the two and that's for the third one and that's increase once again so this will be three second so if I save now as you can see that we have this nice sequence animation so but I think one second delay is too much so if I make it three second sorry 0.3 second so we need to change our animation delay from here also so let's say that one second and here it will be one second and let's make it two and here let's make it three second also 0.35 actually in North stream one point five and two point five so I think that's looking perfect so we have a mistake we need to give it a second so as you can see that we have these sequence animation going on so for the last thing what we need to do for this section is we need to align this in the left so for the alignment what we need to do is we need to make some style in our hero class so let's come here say that in the hero ID we have also a passive hero and here what I need is I need to say that max-width off to a left-handed pixel and two margin will be zero Auto and padding will be let's say that 0 and 50 pixel so we will have a padding and also say that justify content which will be flags start so if I come here yeah but okay that's not PC that's into pixel so as you can see that it's now in left aligned also we have this 50 pixel padding as you can see and if you notice we have max width of 1200 which will make sure that when we will have a bigger screen as you can see that our content will remain in 1200 pixel so it's not coming here so because we are remaining mixed with of 1200 pixel so which is looking perfectly fine so our first section is looking fine so so that's looking fine so as you can see that in the next version of the our website we have smaller font we need to increase our font size for our desktop for our tablet so we will do it in the latter of this video so for now what we will do we will create the website for our mobile first design so after that we will make it responsive with media query so you don't need to worry about it so one more thing as you can see that we have a different color of our name which is our form so if you want to have this in this color change what we can do is we can come here in the keyframes as you can see that that's the white color which is controlling this color so we can duplicate it make a new one and name it for the name so that the name will be texts reveal name and for this one I will have a color of cream them and also say that font white will be 500 pixel or 500 so if I apply this one in our third one so if I come here ladies so that's our third one so let's come here and say that animation will be we change the animation name so which is texts reveal name and it will be same one type ii is and forwards so let's see so as you can see that it's looking much better as you can see that in the screen so perfectly fine and let's go to our next section so for the next section we have the service section as you can see that so let's make the service section so let's come here so let's come to the HTML hand and first of all let's create the comment so service section and also duplicate and let's name it end of service section and between these comments we will have a code for our service section so first in section we will have a section with the ID of services services and in that we will have a deep with a class of services and as you know container because we will use this container over and over in every section so that's why as you can see we have this container and we stand it in the common so as you can see that in the service section we can separate this service section by 2 deep as you can see that in the top we have this heading and in the bottom we have these services who as you can see that for now we used demoscene so as you can see that we have this for service section so we can say power this full section with the two deep first one will be the header and second one will be our services cards so let's come here and say that deeth will be or what I can do is I can say that top or sub stop and also let's say that sub is bottom so that we can easily understand it and in the service top we will have this heading so in the service top let's have a h1 so which will have a class of section title and also as you can see that that's the section or that's the style for our all section title so that's the same style as you can see that here and there so that's why we are using this class so that we can apply same style in every heading so we don't need to a style each when everyone we will Estelle one only and apply this estelle with this class to other so here let's say that our service our services so as you can see that in the end result we have this I with a color of crimson so if you want this effect so what you need to do is you need to make or wrap it with a spam so if I make a span and in this expand I will have this I so also make sure that you remove the space so that's fine now so let's also have some bread crop here so in the program let's copy this one and if I remove it so if I save it as you can see if I come here in our website so that's our service title and that's our program so also make the cards here as you can see that we have these four cards and so let's make it so in the service bottom let's have a deep the class of service item so that's the item so for each item what we have is we have a icon we have a text of heading or title or we have some Pegram so three thing as you can see that for each card so first of all let's deal with this icon so for the icon let's first of all grab this icon so higher I can grab this icon or I can find the second so for this I can heart we need to do is we need to go to a website which is icon 8 so that's the website so if I come here I will link it in the description so you will find this link which is icons a.com and here you will find all the icon and there are so many icon and so many creative icon actually which you can use in your project so if I search for home so as you can see that there are so many home icon which you can use so for the use what you can do is you can click the icon and also you can color each if you want let's say that I want this color you can color the icon and once you are done what you need to do is you need to download it and as you can see that they have SBG they have PDF so anything you want so you need to download it and also they have a option for embed HTML so for the embed what you can do is you can come here and you can embed this SVG or if you want to download the PNG so you can embed it so for now what we will do is we will embed it so as you can see that for them that what I need to do is I need to come here and the embed HTML so I need to grab this image or if I copy so you can see that copied and if I come here and if I paste it here so as you can see that that's our embed code actually that's an image so if I save in my website we have this icon so that's how we can add these icons in our website also you can download it and add it manually if you want so for now let's come here so that's where we can find our icon but I already find or I already selected icon so I will use it directly so I'll not come here and each time when I need icon because I already selected all my icon with this image so for you what you need to do is you need to come here and select your icon and embed HTML or you need to download it so for this icon what we need is so for the first one we will have a deve first of all so that we can wrap it with a class of icon so in this deep we will have our embed image so let's copy the image because I already selected and copied it so as you can see that that's the embed image so as you can see that that's the image which is I got from the ikanaide website so the process I showed you need to follow or you can use the image as you can see that so once if you here and if I save as you can see that I have this icon here so that's fine so after this icon what we will have as you can see that we have this title so let's come here so after these icon let's have a h2 of web design so for now we are using some demo so as you can see that for the fourth service we are using same title which is web design so you can change it so that's not a big deal so here let us come here and say some text let me copy the program and paste it here so that's our first card as you can see that here that's our icon that's our data that's our program so once we have finished our card so let me duplicate this service item because we will need to create more service so as you can see that that's our service item so if i duplicate it two more time or one more time so we will have these four as you can see that four service section so that's for our HTML so let's come to the style of CSS so index tile first of all let's create our you know what I need to create first of all let's create the comment service section and also end of service section and between this command we will have a style of our service section so let's say that service and in the service cells we will have a class of service and here let's say that Flex reaction so by default as you can see that that's have a style already because we have a container which is used here as you can see that in the services we use this container class and in the earlier we used this container and made some stale so that's why this style is applying these section so what do I need to do is I need to make sure that in this container we have these Flex reaction as you can see that by default it's row what I need to do is I need to make it flex Direction column so what I can do is I need to come here in the services Flex reaction will be column or as you can see that that will be services not service so as you can see that now it's working fine so our title is now in the top and our cuts is now in the bottom so as you can see that's the services which we are operating these container style as you can see so that's why we used two classes in this deep so so that we can overwrite this container style if you want in the service section so that's the idea so once we are happy now what I can do is I need to say that text-align will be Center so as you can see that we have this aligned Center and also come here and say that max weight of about 1500 pixel and margin:0 auto so and also say that padding will be about 100 pixel for the top and bottom and they all so that we can have some space in the top and bottom so that's looking fine so after that lets style our section heading which is services so let us come here and say that services we have a ID so we have a class for this so which is section H oh and if I come here and say that font size of for RAM and font which will be a light weight which is 300 and color will be white and margin bottom will be let's say that something about 10 pixel and also text transform will be upper case upper case and letter spacing will be point to him so we will have a letter spacing also text-align:center so as you can see that our heading which is now white so wide so we need to make it black so that's our section heading which is looking fine so if you notice in our end result so we have this eye which is color crimson so for that what we did is earlier we wrap it with Aspen so now we can style Aspen so what I can say is I can say these services and dot section dot touch ow and if I have any spam in this title what I need to do is I need to make that color trim some so as you can see that I have this a span only in this section data so this will make this color which is crimson so that's looking fine so after that let's do some style for our backdrop so for the prep as you can see that we have this Estelle so let's come here and the program so we need to make a proper selection so services and here we have so in the services and let us say that we will have a column let me make sure what is it sub stop okay so our bees top and in the sub stop we will have this program so let's come here and say that in this paragraph font size will be 1 point 4 m and margin top and margin top will be 4 pixel and wine height of point 2 point 5 gram actually we will have to pin Phi prime of line height font weight will be 300 ping Jung and letter spacing will be point 0 5 m now as you can see that that's our program but if you notice we have pixels so we don't need a pixel in the font weight so as you can see that that's working perfectly fine now so that's okay for our surveys heading which is our title and this program so now let's style our cards first of all come here and say that in the services we have a class of d4 to us that we have this service bottom so service bottom and here let's make some style so let's say that so now as you can see that that's fine so in the bottom what I need to do is I need to say that display will be flats and Ilana items will be Center and justify content will be centered so that's what we need ease and also make sure that flag strap will be wrap so that's fine so as you can see that there there is not much change happened so let's come here and select individual service item so let's come here in the services let's say that service item and what I need to do is I need to say that Flex basis which will make a width of every item so let's say that tax basis will be 80 percent so as you can see that we have 80 percent of wit only and also come here and say that our display will be flags and aligned items will be Flex a start so a line items will be flags start and justify content will be Center and flex diction which will be column and also make some padding so that we have some room so 30 pixel will be good and border radius of 10 pixel also make a background image we have a background image so URL so if I come here and say that in the URL image which will be image one and also image side so background size will be cover and also margin so make sure that we have some margin of something like 10 pixel are five big zone 5% for the left and right so if I save as you can see that that's our section card as you can see that each card have a background color so not bragging color that's a background image which I give here and we have these border radius which is 10 pixel we have margin about 30 pixel we have these margin so not margin that's appearing in the as you can see that we have 30 pixel padding and we have margin here as you can see also the content in this card is now in Flex as you can see that so what I need to do is I need to make an overlay of each and abba card so that we can have much contrast so to make the overlay what I need to do is I need to say that services and in the service item I will make after soul elements so make sure that content is nothing and let's say that position will be absolute and also say that left will be 0 and top will be 0 high to 100% and to wit will be hundred percent and if I give it so let's make it a background color so that we can see let's say that not white that will be black so it's not working because we need to give our item position of relativity so as you can see that it's working perfectly fine so let's also decrease the opacity so let's say that opacity will be point four or buoyant eight so that's fine so also you can see that we can't see our text so let's make sure that our text is visible so for that is that index minus one in the after and set index one in the item so it should make sure that our text is now visible if I give it a color of white and as you can see that if you notice the icon which is now fixed and it is visible so that's fine as you can see that so make sure that I have a background color nice background color so let me copy the background so instead of white so instead of this black background color or what I will have I will have a nice gradient so if I save as you can see that we have the nice gradient so that's fine so also let's come here in the service so in the column right we have this icon so let's say that height will be about at a pixel and - it will be at a big table border areas will be 50-person we do not need it so after that lets say that margin bottom will be 20 week zero so we'll have some space as you can see that so if you notice we can't see any change in the I can because what we need to do is I need to say that so it that will be abar i D of service services call right I have the icon in this icon I have image so if I say that height will be 100% and wit will be 100% now as you can see that is changed and also say that object feet will be covered now if I change the size each will change it so if I give it 50% or fifth week cell now as you can see okay it's not working because we have a call right it's not call right it will be serviced bottom sorry that's my fault always bottom so as you can see that that's our small icon so if I give it a debug so it will be perfect so what I need to do is so let's say that the image as well which we will need for each and every image so for that what I can do is I can make it in the common so let's make it in the common because I need this style in each and every image so for that what I can say that for the every image no matter how hard it is for the every image I need to have height hundred percent with hundred percent and object feed cover so it should make sure every image have a nice size of its parent so that's fine so also let's come here and grab this h2so4 the h2 let's come here and say that services and service item service item and in the service item what we will have is we will have these h2 and let's say that font size of about 2m and also make sure that we have a color of white so that we can see it properly so margin will be about so let's say that margin bottom only so we have some space with the preg drop so text transform will be uppercase so now as you can see that that's our title and also we have these ten pings and margin bottom so let's also grab the red graph and here what I need to do is I need to say that color will be white because we also need to speed up a crop and also say that text align will be left and also make sure that font size will be 1 point for M and line height of about 1.9 so which is looking fine as you can see that so as you can see our try graph which we are using so many times so let's also say that we need to make the style for our pair up in the common so that we will have automatically this is tell for every time which when we will create program so for the program that's also make a common style so here let's paste it so if any where we have a program we will apply this style automatically so we don't need to come and every time when we have a program because in each program we will have basically same as tell so as you can see that there's an issue because that's an white backdrop if I give the same color packed up in the heading we it will be not able to see so let's change it so we can overwrite it here so as you can see that's our sabe stop back rub we don't need anything here or we need to say that color will be black so as you can see that we are able to see and also make sure that let me copy so let's say that this will be our common hostel for the program instead of in the previous one so if I come here and remove this and paste it so that's fine as you can see that so black is fine so whenever we need we can change it to the white so if I come here and service program we can make it white if we want so services so let's say that services dot service bottom or service item we have a backrub and if I need peace I need to make the color of this paragraph which will be white so as you can see that if you want so it's not working why it's not working so service item services so as you can see that I made mistake so as you can see that it's working also say that extra line will be left so it's now in left so it's working perfectly fine so if you notice now we don't have our Potter radius though if you notice that in the service atom we have a modern radius of 10 pixel so it's not working because we need to make sure that we will have a power flow hidden here so that's we'll make sure that everything will be fine as you can see that now we have back this border radius so as you can see that the card is looking much better now and make sure that we have a nice gap so let's come here in the service bottom and let's give it a margin top of 50 pixels so that we have some gap here so as you can see that it's looking perfect we don't need this so it's looking perfect we perfectly finished our second section which is services so let's go to the third section which is recent projects so for the third section let's come to the HTML and first of all you know how to do we need to make a comment which will say projects section and of subsection and between this comment we will have code for our service so not service that's our project actually so first of all let's have a section with the ID of about projects so let's give it ID of projects projects if I can a spell and in here as you know we have a deal with a class of projects also and also we will have a class which is container which will make sure that it will have a hundred percent of height and it will give some initial style so in this container what we will have is we will have to section or two deep first day is only for this heading and second deep we will have our service as you can see that not service I am still talking service that's its products so for the first leap we will have this heading and for the second deep we will have all our projects so let's create 2d which will be project headers project projects header and we will have also second name which will be projects so let's say that all projects will be here so all products so for the project's header we will have h1 which we will have a section title class because if you remember we make this section title class in our service to so that we will have similar kind of style by automatically so let's come here and say that service north service why I am saying service again in again the sent projects projects so if you notice as you can see that the projects which is cream some color so if you want this what you need to do is you need to make sure that the projects is wrapped with s-pen so let's make a span and wrap our projects so it will make sure that it will have this color so that's fine so after that let's make our cards for our projects one on project 5 we will have how many project we will have five projects I think yeah so let's make five cards so in all projects what I need to do is I need to make sure that we will have a div with a class of project item so project item so each item so each item we will have a title will have a subtitle we have program and we have an image so there are so many thing going on so in the each item we will divide this thing in two parts in the first part we have info and second part we have image so for the first part let's make a deal with off so come here and let's make it deal with a class of project info project info and in the project info we will have our h1 and our subheading and our title and also let's make sure that we will have another class which will have ease project image so make sure we have to give in each project item so in the project info let's create a h1 which will have projects project number one not top so also let's make h2 which will say coding is love coding love coding yourself and also make sure that we have some program and in the image what I need is I need to put an image so in the image source what I will have I'll have image 1 so that's an demo image so for the alternative ooh you have IMG so that's fine for one card so as you can see that we have five projects so let's copy these project item so as you can see that's our project at M so let's copy this whole deve for more time so we have 1 2 3 4 5 so now we have 5 card as you can see so let's say that in the last one into 5 this one will be 4 and this one will be 3y 3 and Dola this one will be second one so if I save and if I come here as we can see that we have these five projects going on here and we have these our projects title so if I come here in our style if you remember that I made a style already for our section title if I come here which is if I here in the section title as you can see that I made this so what I need to do is I need to make it come on so that whenever I use the class section title it will apply the styler for it so what I need to do is I need to remove that this service we don't want this specifically for the service I won this anytime when I call this so we don't need this section of ID anymore so if I now save so as you can see that now it is in common so if it is in common we will have this style in our also products as you can see that so that's looking fine so let's start styling for our projects so after end of service section so let's start our project section so projects section and the projects so end of projects so between them let's style so first of all projects and we have a class of projects also and here what I need to do is I need to make sure that the Flex direction is column now as you can see that the fraction is column and how are what is it and our title is in top so perfect so also make sure that max width will be to other 100 itself and also make sure that it's in that middle so margin:0 auto and also make sure that we have a padding of about 100 pixels from the top and bottom so as you can see that that's working perfectly fine so let's come here in the heading so projects and we have a project header what is it project header or body Oxana project said are okay projects hand on and in here we have h1 and let's say that margin bottom of let's make it 50 pixel so as you can see that we have 50 pixel gap and how to come here to all projects so projects all projects and here what I need to do is I need to say that display will be flex and align items so as you can see the display will be flex and Allan atoms will be Center and justify content will be also Center and flex traction which will be column so that's looking fun as you can see that it's also in column so after that let's come here in the projects item so projects and projects item so for the each item what I need to say that I need to display it flex and I need to say that so I need to make sure that align items is Center and justify content is Center and flex diction is column yeah and also make sure that we have a width of 80% and also make sure margin we have margin of 20 big jump and auto so that we have gaps and overflow will be hidden and make sure that we have a butter radius so that it looks smoked so board earliest and pixel will be good so we can see it anything because it's not projects at em it's project item yeah project item so it's looking perfect as you can see that the weight is 80% we have 20 pounds 20 pixel bottom here bottom margin and we have water areas as you can see that here in the bottom and in the top if I give you the background if you can see so I will give it a background don't worry so it's looking perfect so what I need to do is now let's come here in the program so first of all we need to make sure about this h1 so come here in the projects projects and project info can go not in beliefs will be info so make sure that we have a padding of 30 pixel here in the content and also let's say that flex basis will be 50% and background color will be white and let's come here and say that height will be about 100% and this plan will be flex a line items will be Center not Center make sure that left aligned so that flex start so justify content will be center and flex direction will be column and back in color let's give it a background color of not white I don't need back in color of white make sure that I have a background color of something good-looking somebody color of this one so in that some hexapod so as you can see we have this color it's not looking good I think we should use this color okay I have the gradient color okay demo copy and make sure that instead of background I will use a background image because the gradient so let me paste the gradient here also make sure that our projects color is white so as you can see that the color is white and the background is our gradient color which I give here and as you can see that our prayer up having a estelle but it's black as you know that we made a common style in the top which is color black we can override it we can make it white so after that what I need to do is let's come to these h1 so for that what I need to do is I need to come to the projects and in the projects in the project info in this h1 what I will need is I will need to say font family will be Montserrat we no need to do it I need to say that font size on the 4 M naught to M and formed weight will be about 500 which will be regular so as we can see that that summer project so that's fine so after that let's go to the h2 which is coding as love so projects and project info and we have this h2 so let's come here then say that font size will be about 1.8 ryeom not Ram so font which would be 500 as awara title so if I conduct and also make sure that I have a space in talk so much in top will be 10 pixel so as you can see that I have little bit more I think it will be 300 goat what you say sorry as you can see that will be font weight so that's looking fine I think instead of five hundred or five hundred is good yeah good so after that let's also say that our color for the program will be white not black so instead of P let's select drag drop and here let's say that color will be white and it's looking good so let's also make research of this deep which is our image so come here in the projects and we have a deep with a project image and here what I need to do is I need to say that flex basis will be 50% and height will be about 300 pixel and make it a overflow:hidden so as you can see that we have researched our div so after that if you notice that we feel hover we have a nice transition of this image and also if you notice we have a black overlay in this image so let's make those things so for the overlay as you know what I need to do I need to make a soda after so make sure that content is nothing and position is absolute left is zero and top is zero and height will be 100% and wit will be 100% allowed the background color of for now let's say that black will change it and if I give the position of our imagery let if it will work so as you can see that it's now 100% black so I don't need 100% black I need to say that the opacity will be about 0.7 so as you can see but we don't need black color so instead of black color I will use the same gradient which we used here so let me test it here that's the same so as you can see that it's looking much better so also what I can do is I can make this transition of this image when I hover over it so we can do it easily so what I need to do is I need to say if I select project so if I hover project I need to grab the image so in the project image so project image I have this image and I need to say that the transform it will be translate scale so a scale will be one point one so if I save it not that this one so it's not working okay as you can see that I have a mistake it will be products so not projects what I'm doing so under the projects we have each item so which is projects item so if I hover any item it will do the hover effect so if I save now as you can see that we have this hover effect for every projects but it's doing so fast we need to make it slowly or looking much smoothness so for that what I need to do is I need to come here and in the projects in the projects if I can spell project image I need to select the image and say that transition will be 0.3 second ease and only form transform now it will have a smooth transition as you can see that it's looking fine so that's for our projects it's looking fine so we finished our project cells we can see that it's looking perfect so now let's make our about Me section so let's come to the HTML and here let's make first of all let's make some comments about section detective about section and here first of all others have a section with an ID of about okay in this about I will have a deal with a class of about so about and also have a container class so in this deal let's have another deal as we can see that you know and those out there are two parts so the first part which is this one which is the heading and text so this will be our left and this image which will right side so we will name this deep which is first one we will limit column left and also we will have another one which will be our column right so in the left what I need is I need a deep so if I make it bigger as you can see that so as you can see in the left we have this image and in the right we have about me info which is heading about me and some other things so these two parts as you can see in the left we have image so let's make it in the left we will have our image so in here let's have another beef which will be out I am G so about image so here I will have our image which is about image and here I'll have this IMG alternative and in the right side so in the column right what I need is I need as h1 which will have plus also so as you know the class is section title and also let's have an about here and also as you can see that if I come here where it is the me which is red color or crimson color as you can see so for that what I need is we need to span and wrap it with a span so I have I make it like that you should be perfect so in the h2 what I need is I need to say that front-end development fountain development or developer ok and we will need a program so let me copy the program here and that's the program what we need so after that we need this button which is an encode egg so if I come here and encode tag and here what I need to say is download as you mean so download as you mean so that's fine and that's our end of our About section so that's what we need so if I see now and come not that if I save now and come to our website make a refresh so as you can see that that's our about Me section where everything is kind of missing out so let's make it a nice tile eat perfectly so in this tile here after end of project so let's have a comment for our About section and also make end of about section and here first of all let's grab the about class so about so here let's say that Flags direction will be about column so as you can see that noticed our image which is now in left side but as you know we are designing the mobile design first but in the mobile the image in the bottom so for that what we need is we need to make it column reversed so that it reverse the economy so column reverse column reverse and if I make it so as you can see that the image is bottom and the heading and other thing is in the top so which is perfectly fine and also say there text align which will be Center and also max to it of about 1200 pixel and margin:0 auto also make a padding some about 100 pixel and 20 pixel so if I save it should be fine as you can see that we have some padding in the top and also left right so after that let's grab our column left which is actually the image section so width will be about let's say that to 150 pixel so height will be about 360 pixel and if I say whether you consider that's resized our image so also let's come here in the about and let's grab our column right so column right all right which will be actually width of 100% and also let's come here in the above let's grab the column right and grab the h2 which is actually this one front end development so make it some style so here what I need is I need to say that font size of about 2.5 bream let's test it out so that's too much weak 1/5 just so much 1.5 action so 1.5 is good not bad also say that font weight of 500 and also make some increase man sound so make some increase here so it will look good I think and also say that letter spacing will be 1.2 m upon 2m actually so the spine and also make some margin bottom so margin bottom which will be about 10 pixel so that's fine as you can see that everything is going well so also as you can see that that's our but we have not a space between preg gap and this button so let's first of all make some space here so if I copy that and instead of h2 let's select our program and say that margin bottom will be about 20 pixel and that's fine as you can see that we have now much better view so also style that so as you can see that that's our button but if you remember we already have a styled a button in our CTA here in the hero section we can apply the same style so for that what I need to do is I need to come to the hero and if you remember it is the CTA which is giving the style of this button so if I drop that here or cut it from there and here let's say that instead of grabbing it from the hero I will grab it from anywhere so whenever I will have a CTA class it will give this style so make sure that your button which is the above me have also across so the Cross will be CDF so if I come to my About section as you can see that that's our button but if you notice that the button text is now white so we can see it so for that what we need is we need to make it crimson so we can do it easily so and they are about all right odd City yeah yeah we can grab it directly or what I can do is I can say the color of this city here will be black now as you can see that it's looking fine also let's make some margin bottom margin bottom will be about 30 pixel or what use them 50 pixel let's make some more yeah 50 pixel is good it's looking fine as you can see that there's our button for resuming or you can make changes let's say that I need the padding will be about 10 pixel and 20 pixel and also make sure that I have a smaller font size of 20 pixel or tour em so it's looking much better I think so now let's come to this section which is our image so first of all I'm here in the about on left and about what I am G so that's the about IMG what is the wrapper of our image so here what I need to do is so if I come here as you can see that I have a border but a kind of thing so what I need to do is I need to make each with our sword elements of this image so let's create a solder elements so after they come here lot of town actually I am G image after okay so if I come here and let's say that the content will be nothing and position will be absolute and also left will be a vote let's say that - 33 pixel and top will be 1 9 pixel and high tool way let's say that 98% and wit will be 98% also and let's give it a border so border will be 7 pixel solid and cream some so if I save if I come to my site we can see it because I need to make that image position:relative so okay okay I don't neat so there is a mistake I don't need to make it for the image I need to make the image wrapper so as you can see that our sword elements is now on this wrapper so what I need to do is I need to say that that index of -1 so that it will be under this image as you can see but so if you notice that we have a little gap here going so how we can make this gap so it's very easy so for that what I need to do is I need to come to the image and let's say that border will be 10 pixel college and white if I give you the white border and if I come here as you can see that we also have this but if you not easy as you can see that we have something issue here so for that what I need to do is I need to say that height will be 100% and wit will be hundred percent so as you can see that it's removed the gap the if some of the issue so that's fine looking good so the about Me section is kind of done as you can see that so after this one as you can see it's looking similar we have this or we can make the I think our h2 is looking better yeah that's looking matter so after that what we have we have this contact info section where we have this three section which have a nice hopper effect so let's make salt so as you can see that we have this icon which we can grab from the icon eight.com so I'll put the link in the description you can go to the website and grab your own icon so that's fine so let's come to the HTML grab our code for the contact section so let's make the contact section contract section and here what I need is end of contacts section and here let us say that first of all make a section with an ID of contact and also in this ID what I need is I need D with a class of contact and also a class of container so and here what I need is I need Eve and also in this deal I have h1 as you can see that in this contact section we can divide it with two deep first one is die heading and second one is the all three cards so we will have these two deep as you can see that first one will be our h1 and for the second one we will have these cards so for the first one we will have this h1 and here we will have also class which is section cut out so that we don't need to stylish it's already styled in section class and here what I will say I will say that contact info contact info and if you notice that our info is colored by crimson so what I can do I can wrap it with the s-pen so it will make the effect now if I save and come here as you can see that it's looking perfect contact info so in this deep where our card will be so what I need is I need to make a class in Steve the class will be contact items contact items and here we will have our every item so for the first one so that we have so for the first one we will have contact item so you need to be careful it's contact items and each one will be contact item so you need to be careful about it the clasp and here what we have for the each contact item we have a icon we have a heading and info so that's it so for the each contact item what I have I have a deal with a class of icon so here what we will have I will have my icon which you will find from the icon 8 so I just paste it here but also what I need I need to make em the div which we will have the class of contact info Conduct informants in this heading and this information together we are giving it a div we have contact info so for the each item so higher I will have this h1 which will have for the first one we will have phone and let's make some phone number so let me copy this and let me copy this whole item of deep so as you can see that that's our contact at M so as you can see we have Qi contact item so I need to copy it to more time so for the second one what I need to do I need to change the name which will be email and also let's change the image of icon so as you can see that that's our image for the second one and also what I need is I need to change the number into the mail and also what I need to do is I need to make the third one address and also let us say the I wanna change the image also because it's the icon the second okay so for the icon let's change the image so once again which you will find it from the icon eight calm so I will put the link in the description don't worry so also let's give it the address instead of the phone number because it will not make any sense so as you can see that our information is in perfect place but we need to make it style a little bit more so the end of our HTML is here and let's come to the style dot CSS and here let's create our comment for the contact section and also let's say that it will be end of Conduct section so first of all what I need is conduct and conduct let's make the Flex reaction of column so as you can see that now everything is in column and after that lets say that max width will be 1200 itself and also margin:0 auto so that's fine so after that let's come to the items contact items we have all the our item in this deep which is contact items okay so let's come here and let's say that contact and contact items and what a need is which will be 80% and also say that padding will be 20 big job not a tea person let's say that we'll have hundred percent that's fine so let's say that come here each item so in the each item what I need is I need to make sure that it will be eighty percent for the mobile of course so padding will be twenty big job and text-align will be Center and border-radius will be about ten pick them and also let's have some padding of thirty big salt and margin of also thirty pixel and justify content will be Center also let's give the display flags first of all and align items Center center and box shadow let's give it a box shadow of zero pixel there a pixel and at integral zero and let me copy the color which is a blackish color with a little bit of opacity not much of a city here so as you can see that we have some opacity of shadow so that's looking fine so also if you notice that we have a 30 pigs out of padding and thirty pixel of margin as you can see that and also we have this box shadow and if you notice that our content is now in flux reaction so also if you can see that everything is perfectly fine but what I need is I need to make sure that it should be like that so it's non law so it's not looking good for now so to make it like that what I need to do is I need to make sure that our DV is in flex direction column so if I say that flex direction will be column so that's kind of looking good as you can see that so after that let's come to the icon so contact and icon here let's say that wit will be about 70 pizza and margin margin:0 auto and margin bottom I need something about let's say 10 pigs up so as we consider that's much smaller and we have the 70 pixel margin bottom and shawl so let's stare our h1 so for the contact info we have this h1 it is info our contact info it is contact info contact uniform so the swine as you can see in the h1 what I need is font size of about 2.5 graham and also what I need is font to H of about 500 and margin bottom about fat pigs L so that's what I need for the h1 so it's looking fine so let's grab the h2 so4 the h2 let's say that font size will be about 1.3 ram and line height of about 2 ram and font weight of 500 so if I save now as you can see that it's looking fine the font so as you can see that it's looking fine so here if I need to make it a smaller like this one so we need to make a width of these items so for the items let's say that instead of 100% I'll have it about would let's make it 300 pixel so as you can see that we have 300 pixel or something 400 pixel would we look good I think yeah it's looking good 400 pixel yeah so also let's make the hover of X which is as you can see that here so it's an hover effect with our box shadow so here what I need to do is as you can see that in the each item we have this box shadow so I will make a hover effect of each item so if I make a hover effect and higher I will say that box shadow will mean 0 pixel 0 pixel and also for pick them let's in decrease the spread and also make sure that the color is the same so as you can see that our hopper effect is working but it's kind of quickly it's not smooth so for that what I need to do is I need to make a transition of 0.3 second please and for the Box shadow and now if you can see that we have these nice going on effect so it's looking perfectly fine as you can see that if you want you can make the change of this number so after that what I need to do is I need to make what I need I need to make our this little footer which you can see that in the bottom so let's make this footer the last section so let's come to the HTML and let's make this footer so after end of contact let's make the footer and the footer and here let's have a section with an ID of water and also have a deal with the class of Qatar and also I have a container and here what I need is I will have a div with a class of brand and as you can see that in the brand I will have my name so that's as you can see that in the name and the first letter which is pin some color so for that what I need to do is I need to wrap this character or letter only with Aspen so for the h1 so in the h1 I will have my name and specifically what I need is I need to make sure that I wrap span the first letter also let's remove this gap so also here let's web the spam with this yeah so fine so as you can see that that's my name and I just wrapped this first letter with the span so after that what we have is we have these so these subheadings so that's my h2 and that's is the text and after that we have social icons so let's have a div with a class of social so shall I come and in this deep I'll have another deep of social item and in each item we will have a icon so here let's say that we will have a anchor tag because I want these to be clickable so I will have this info tag heuer I will put my link so for now let's use demo hash and here what I need is I need to put my icon so once again you can find this icon from the icons eight.com if you come this website and search for your icon and if you found this your icon what you can do is you can click this so make it bigger and embed HTML you can find these in IMG tag as you can see that or you can download it and add it in your website so I just do it previously so I do not need to come and go here so that's fine for the first one as you can see that so let's copy this item and make it two more time three time I think how much we have we have four yeah so for the second one which is our Instagram so let me copy the image for this one so that's the image and replace it for the third one so it's looking perfectly fine as you can see that so after that what I need is we need a copyright text as you can see that so what I will do I will come here so after this social I can leave I will have my back wrap which will say copyright so let me copy this text from here paste it here so that's my copy at text so if I may come to my side as you can see that that's all our content so let's style this so let's come to the Estelle dot CSS and make our style for the footer so here so footer and also end of footer and here what I need is in the footer ID I will have a background color so let me copy the gradient color which I already used in the many section so if I save as you can see that that's the gradient color so which we are using here so as you can see that that's 100 VH we need to decrease the size of height as you can see that that's too much so let's come to the footer and footer Plus which is controlling this height so let's say that mean height will be 200 pigs are only so as you can see that that's 200 pixel mean height so also let's say that flex direction will be column and padding top will be 50 pixels and padding bottom will be 10 pigs alone so if you look good as you can see that so after that lets come to the h2 which is this one so before that as you consider we have this h1 which is our brand and if you notice that our brand and our heading brand is same style so if you can see that this one and this one styled pretty much same so what I can do is I can Estelle this one in the common so that I can place the Estelle also here so let's come to the common before this heading I need to come here and say that brand so high never I'll have this brand I'll have this style so front size about let's say that phone size of two um and also text transform will be uppercase and also say that color will be white so if you now see that that's our white and also make sure that the S Pen is colored crimson now as you can see that we have the first letter is nice-looking so that's fine as you can see that here and there so after that what I need I need to come back my photon and here what I need to do is I need to grab my h2 so let's grab the photon h2 and make some style let's say that color will be white and also font white will be 500 and font size will be about 1.8 ram and also letter spacing about when one ram and margin-top will be 10 pizza and margin-bottom about 10 pixel that's fine as you can see that that's our subheading Neo complete web solution and now let's come to the icon and make them flex so all let's come here and say that in the footer social icon make sure that display flex and make some margin bottom 30 pigs oh and if you save as you can see that they are now in a row so as you can see the icon is too much big what I need to do is I need to research that I can so for that what I need to do is I need to come to the footer and so shall I come so shall item this time and here let's say that height will be 50 pixel and wit will be also 50 pixel and also say that margin-bottom only 5 pixel for the left necklace arm so as you can see that we have margin for the left and right only 5 pixel and we have our I can with resized by 50 pixel so if you notice that our icon is kind of black and white and when I hover it's having the color back so let's make this hover effect so for that what I need to do is I need to come to the footer and social items and here let's grab the image and say that in grayscale so on grayscale it will be filter CSS filter so if you come here in filter let's say that grass come if I give it grayscale one and save as you can see that now our color is gone it's only black and white and if I make it 0 our color will be back so for now let's make it one and horn I will hover the item it will come back the color ha and if I come and here let's say that filter and rascal will be zero and if you notice that it's working perfectly but we need the smoothness so for this smoothness what I need to do I need to make some transition fine 3 second is and for the filter if I save as you can see that we have transition and everything is looking perfect so for the last thing what I need to do is I need to make sure about our footer which is looking good but what we need is we need to make sure that it is white so that we can see so footer we have a program which is actually our copyright so color white and also makes some smaller font size 120 M so as you can see that it is looking perfect or some awesome so our website is kind of done for the mobile we need to make sure about the responsiveness so first of all if I make it bigger as you can see that that text which is not looking good we need to make it bigger sized the service item is not looking good we need to make it in a row instead of column so also as you can see that our projects is not looking good at all so let's make responsiveness so first of all let us come to the tablet size and if I come here and let's say that let's make a comment media query for tablet so if I come here and the main duplicate it so this one kills before ant and here let's create our media query media only screen and mean height not height mean with mean width of about 768 pixel so that's for our mobile so not movin that's for our tablet so for the tablet what I need to do is as you can see first of all let's grab the CTA which is the button we need to increase the size of this button so for that what I need to do I need to come here and dot CTA and let's say that font size about will be 2.5 Prem and also padding will be 20 pixel and 60 pixel so if I come here and save it now as you can see that it's our in tablet and the button is kind of bigger as you can see that if I come to the mobile size as you can see that it's a smaller and once I am in the tablet it's looking better so also make sure that our service which is that this text let's increase this one for the tablet let's say that font size will be 7 Ram yeah so okay we need to make sure that it's have a section title so as you can see that that's our service which is looking much better now we have this bigger let's make it six instead of seven it will look good so fine as you can see so after that let's increase these h1 for our tablet so let's come here and also make sure we have a hero and end of hero because we want our stand here so in the hero I will have a h1 which font size will be seven run and as you can see that our h1 is now bigger 7 them as you can see it's looking much better I think so if I come to the mobile it is smaller and if I come to the tablet it's now bigger so that's fine so after that let's come to the service here what I need to do is I need to make sure that everything is in column not not Konami everything will go to the row so for that what I need is I need to come to the heel section not here oh sorry service section so this section and make sure that end of zombie section here and here are what I need is I need to make sure services dot what was the class for the service if I come here sub is bottom so service bottom dot service and let's say that flex basis will be about forty five pixel so for that percent so like lessees will be forty five percent so what I am doing is I am making this flex basis forty five percent so in each row I will have to service so and if I save it it's not working why it's not working services bottom I think service water more services bottom service bottom okay I think we need to select it it down now it's not working so we need to make sure that it's in the right class I think not service its service item as you can see that in the service bottom I have this service item so it will work now as you can see that our wit is now forty five percent and also make sure that we will have the perfect margin so let's say that margin will be about 2.5 percent so if I give it perfect margin it will be as you can see that in the each row we have now two service so as you can see that if I give it my Flex basis of 45 percent and margin 2.5 percent is now perfectly aligned hand as you can see that in each row I have only two service as you can see that so that's looking perfectly fine so after that let's come to our projects so after that has come to the projects here and let's say that project and of project and here what I need is so I need to make sure that it will look like this one as you can see that so to make it look like that what I need to do I need to come to the projects and projects in the project I will have a height of about 400 pixel and margin of 0 I'll have no margin left and right it will be 100% border radius will be 0 if I save as you can see that we don't have border radius and also what I need to do is I need to come to the projects and our project if I am let me check that was what was it okay in the projects I'll have these other two domes okay I will have project item actually instead of projects here I'll have the item so now as you can see that it's 100% wheat and there is no border areas and the margin is zero so how all thing is perfectly fine and also what I need to ease I need to come here in the info projects all projects and project info I need to make sure that height it 100% and also for the image it will be the same so for the info for the image and also make sure that it's now in column what I need to do is I need to make sure that it's in a row the Flex direction so come here in the products and project flex direction will be column and if I keep it column sorry if I give it row this is not working why it is not working okay we need to make sure it is project is not project so now as you can see that it's working but it's kind of coming here as you can see all I got each what I need to do is I need to go make sure that I need to give the Flex traction in the project item not projects so project item I give here so as you can see that it's working perfectly fine now our project item is looking better and if you notice that the eben number which is the 2 and the 4 in the 2 and the 4 which is the even number item the project 2 and project for having the image in the left side so for that what I need to do is I need to grab it with the hands child so am child if it is even I need to say that flex direction will be low reverse so as you can see that if I come here in my web set now as you can see it's now row reversed it's looking perfect so if I come here so as you can see for the mobile it will be like that for the mobile the cards will be here for the mobile and for the applet it will be like this one which is looking good for me so let's also come here in the about if I come here in my end project as you can see that it's now in a row as you can see so we need to change it now it's in column so forth up so let's create a comment for our about and here let's say that what I need is in the above flex direction will be row so if I make it row as you can see that it's now row but the picture is kind of showing we are thin as you can see so we need to fix all the things also we need to make the alignment so for that what I need to do I need to first of all let's come to the about column left so column left and here let us say that week will be 600 pixel and height will be 400 pigs out and padding left will be 60 pixel and if I save now you can see that that's much better-looking picture so also what I need to do is I need to make sure about this border so about dot about all left and about image we have this after and here what I need is I need to do a left will be minus 45 percent not person until the victim top will be 24 pixel and height will be I'd say that 98 percent we need to make sure about top okay so a height should be 95 98 sorry which will be 98 percent and border we need to increase the bottle size which will be 10 pixels solid crimson and that index minus 1 we do not need to change it because it is already minus 1 so as you can see that our border is now having a new width and something new position so also make sure about the right content which is now in aligned in the center we need to make sure that about it is a line in the left so to make it what I need to do I need to come to the about and call the right and text-align will be left and also make sure that padding is 30 pixel so as we can see that our align is the left so but we need to make sure about this h1 so for the h1 we need to don't grab it and need to say that text line will be left and if I save as you can see that now it is in C so as you can see that it is in left so it's looking better so if I come to the mobile it should be like that if I come to that like to be like that perfect so it's almost identical as you can see that so after that lets come to the contact so let's make the contact little bit more awesome so after about let's come here contact and here in the contact what I need is fine to come here contact make sure that flex reaction is column so and you make sure about so so let's make some padding of 100 Pizza zero so that we will have some space in the top and bottom also a line item Center and justify content Center and also let's say that mean height will be 20 V H so that's fine here I need to make sure about the width will be about 100% display flex and flex direction will be raw now as you can see that it is raw but if I come to the oven it will be like that come to the tablet each other like that so let's also make sure that we don't have any margin so margin zero and also you will have some padding of about 20 pixel so that's looking fine as you can see that so you can see that we have so much gap here so let's come here and say that I don't want the margin so in the item let's say that margin will be about 20 exactly so it's looking fine if I give it 20 weeks earlier ten weeks early is good so if you come here as you can see that our card is kind of small but this one is bigger because as you can see that our Flex reaction is now in column in this deep we need to make it row so in the item what I need to do I need to say that flexi action will be row so as you can see that it's now in row and looking much better and also let's make sure that the icon the icon is about height and width of 100 bucks over so if I make it with 100 pixel and what I need to do 100 Shelley atavism let's make it 80 so it's looking fine and also what I need to do is I need to come to the image as you can see that there is some cutoff here so I need to make sure that the image is object fit none so if I come to the icon and the image and make sure that object feet is none sorry none and if you can see that sorry not none contained so instead of none we can use contain so it will contain that as you can see that the image is perfectly in place now you can also make sure that it is 100 pixel so it will look much better I think as you can see that so also let us make some adjustment in the info contact info and make sure that width is 100% and text-align:left and padding-left will be about individual so it's 20 pixel left as you can see that also we are having now much better view so it's looking perfect as you can see so in the bigger size like desktop it will be perfect and in the small sites like develop each other like that and the mobile it like that so it's fully responsive as you can see that so we don't need to worry about the footer as you can see that the footer is good so now let's make the responsiveness for our text of view so for the next view as you can see that is looking fine that hero section but the service section is not looking good so let's make some change here sorry so media query for desktop and that's the end of media query and here what I need is I need to make sure that service services actually call right not collide it is service bottom I think sub is bottom and service item what I need to do I need to make sure that Flex basis is 22% and margin is 1.5% if I save now as you can see that that's all in a row of sorry my bad my bad and it makes sure about I need to make the media query first of all so media only screen and min whit off about 1200 pixel here what I need is in the about so let me paste it here so as you can see that it's only for tower desktop so if I come to the mobile so it should be like that in the sorry tablet it should be like that in the mobile it will be like this one so it's fully responsive as you can see that so if I come here in my actual website now as you can see that but if you can see that in the program in the service which is not looking our like so let's also make sure about this so if I come to the service it is the service the heading in the sub stop so let's come here and they say that service in service chop what I need is I need to make sure about the width width of be about let's say that 500 pixel and margin:0 auto so each will be perfect as you can see that so no matter where I go it's in perfect taste so let's say that max weight so as we considered so also let's make some change here so in the overlay let's make it point nine naturally yeah point nine is looking better this overlay so everything is going well and we made the website fully responsive as you can see that so it's showing like that like that this one okay so everything is now done one more thing to go which is our header so last thing so let's make our header which is this one that's an interesting fact going on here as you can see that when I scroll we have this solid color but when I am in the top we don't have any color for the background so that's looking so much interesting as you can see so now come here and let's make the header so first of all let's make our header for the mobile so if I come to the index in the top here before our hero section we will make our header so let's make a comment header and this would be end of header and here let's make our code so in the section I'll have the ID of header sorry and also let's make a deal with a class of header and offer container and here in the deep I will have another deep which will be our logo sorry in this deep we will have our nap bar so let's have a class with an AB bar and here I will have our div of logo which is the brand I already established before so in this band I will have a anchor tag where I will have hero and we also have a h1 so in here I will have a a span with this ass and my name and also have this span with air and also my name not double F so that's fine as you can see that that's our name if you can see that so after this one what I need is I need our nab list so after this trip brand I'll have a under deal with our nab least class so higher I will have another div with the class of hamburger and so basically that will be our hamburger and here I will have another deal with a class of bar so that's for our hamburger so after this deep we will have our ul higher will be our list and each list will have an anchor tag so that we can click and this will be our menu so for the first one let's say that home second one will be the services third one will be the products and this one will be about and this one will be the contact so as you can see that that's our little menu here so that's the code for our heading so let's style this heading so if I come to the standard CSS so let's come here in the top we will have our style Soler's from here and before this heading so before this hero we will have our header CSS so had our section also that will be end of our header section so in this header section that's create the estelle so first of all let's say that our header will be the fixed so let's say that in this player will be fixed sorry not display so in the header let's say that the position will be fixed because our header will be sticky header which will be sticky in that top so it will be sticky in the top as you can see that we can't see it because we need to make a set index of about 1000 or something like that so as you can see that we can see our header which is as you can see that here so also what I need to do is I need to make sure that it is in the lab 0 in the top 0 and also it have a width of 100% and not hundred-percent it's a width of VW 100 VW okay top zero ok so that's fine and high top auto so that's fine as you can see that in the middle we have our list for the header so let's come to the header and so let's give it a mean height of about 8 vh or 10 V it's something like that as you can see that it's now in the top so EDH is good our background color let's make it a background color let me copy the color it's an RGBA kala so as you can see that we have this nice transparent color if you can notice in the top so also what I need is let's come to the navbar actually so head are numbered we have to display flags so aligned atoms after display flex align items will be Center and justified content will be spaced between so as you can see that now here is our brand and here is our menu so also make sure that width is 100 percent height is about 100 percent and Max you width will be 1,300 pixel and also make sure that they have a padding of 0 and 10 from the left and right and that's it they save now as you can see that that's a space between and that's our had our width of 100% so everything is going perfectly so after that what I need is I need to make sure about the UL so for the UL I need to make it something like that okay so let's come here and in the header so need to make sure so let's be consistent here so header and here NAB list I will have our UL so make sure that list style is none and also position it absolute and background color will be let's make a background color this one and also with off hundred via width and height of hundred / Heights viewport height and left of 100% so if I remove it for now I will show you why I am removing it so also say that top will be zero son let me instead of hundred percent let me give it zero so that I can see so as you can see that that's how are you will down full of our screen so also make sure that display is flags so that we can make our content in the center so let's say justified content centre line items center and set index of about 1 and overflow X is hidden if I save as you can see that our now our content is Center but we need to make sure that our flags Direction is column so I give it column as you can see that that's our menu here so let's make our menu a little bit of more awesome so let's get the anchor tag here if I come here and grab the anchor tag and say that font size of about 2.5 pixel knots at Lisa R M 2.5 m okay so font white will be hundred not hundred 500 letter spacing will be point two R M and X decoration will be none and also make it a color of white and texts trust from uppercase and padding of 20 pixel and display:block now our menu is looking much better so as you can see that that's kind of this one but we need to make sure about the hamburger we will come it so we will come to it a bit better so after that make sure we have these effect as you can see that when I hover one item or one menu in the background we have a nice animation going on here so let's make it so for that what I need to do is I need to make a sword elements of our anchor tag so after and here let's say that content will be nothing for now and position will be absolute and also let's say that and also to make it Center what I need Luiz I need to make sure that it is top 50% and left 50% and transform will be translate - 50 % and - 50 % which will make it Center so I can say it because we don't have any color so make sure that we have a color of the main copy this color that's RGB color and also what I need to do is I need to make it a front size of about 15 gram so we have this big text here so letter-spacing will be 50 big hunk or 50 I like that and that's fine as you can see so also make sure that that index I will be minus one so we can see it so if I come here in the content and keep it something like say that text and save so now we should see it so if I come to my site as you can see that we can see it so that's our text as you can see so but we do not need the text in the initial step so let me remove it so how we can remove it we can make sure so we can make a SQL of 0 which will remove it so let's say that whenever I will hover the anchor tag I will see it so if I come here in the end code tag so in the knotting and code tag let's say that in the Li if I hover I'll go to the anchor tag and after I will transform let me copy that zone and make it 1 and if you are now can see that that's our text whenever I hover but I don't want to show the text I want to show if I hover the home I want to show the home in the background I if I how about the service I want to show the service in the background so to make it dynamic what I need to do is I need to come to the HTML and in this anchor tag I need to make a data attribute say that data dot after will be home so I need to make sure it for everyone so let's give it for the service it will be the service so for the projects it will be the projects so for the about it will be about and also for the content sorry contact so that's fine and how we can use it what I need to do is I need to make sure about here in the content I need to use attribute and here I will use data after now if i refresh so as you can see that if I hover in the background I have our home service projects about contact but as you can see that the letter spacing is so much beak so in the hopper let's also make the letter spacing about initial so as you can see that it's working let's also make a transition here so that we will have a smooth feelings so 0.3 Pizza so fun 3 second ease and it will be only for letter spacing if I save now as you can see that we have having this if you want you can't say that tan Ram font size which is looking good koala 13 yeah I think 13 is better okay so that's fine the effect is working fine so after that let's make our hamburger menu so how we can make the hamburger if you want to know more about this topic the hamburger I have a full video on it you can watch it I will link it in the description how we can make responsive mean you and hamburger menu like that so if you want you can check it out so let's make the hamburger menu so for that what I need to do so as you can see that in the HTML I have a deep already for the hamburger which have also another deep but so I will use those to make the hamburger so here what I need is in the hamburger here just make the hamburger hamburger okay so a hamburger so first of all make sure about the z-index of 100 so that we can see it otherwise we can't see that because now we have these UL which is absolute position so we can see it so let's make sure that we have a set index of 100 so after that let's make about height will be let's say that 60 big 70 and also wit will be 60 pixel and display will be inline-block and also let's make a border let's say that border will be three pigs of solid white color so border idea could be a few towards done and if I save not fifty-five original fifty percent so if I save as you can see that we can't see it so we can't see it so also let us say that position will be I mean yeah till achieve so as you can see that we can see it so after that let us come here and say that this player will be blacks and align items Center and justified content will be Center and that's fine if I save and let's make the bars so so let's make the bar and here what I need to so all so let's give me the pointer value in the hamburger so car sir will be a pointer so that we can click it so in the bar what I need is let's say that site will be 2 pixel and whit will be 30 Bingham and also position and background color will be white and let's make some that index of -1 so as you can see that that's our menu hamburger so let's also make 2 more so those will be our the sword elements of our buck so I had a hamburger bar so first round with after and second one will be the before and here what I need to do is I need to make sure that content is nothing and position is absolute and also height of 100% and we top hundred percent and left of left what will be left to the zero and pecan color will be white and transition 0.3 second is and translation property will be top and bottom so that's for our transition so also make sure about the position so for the first one let's say that top will be it exam save as you can see that that's our first one and let's also make the second one sorry indeed will be before and make sure that it is in the bottom now as you can see that that's our hamburger menu perfectly in paste so whenever I will click this menu I need to have a transition something like that as you can see that there's three when I click it will become one and when I also click it will come back in this steel bar so for that let's create a Java Script so it's a simple JavaScript actually so let's make a new file of AB dot J's so to create a file what you can do is you can hover this as you considered create new file so click that and name it AB dot J's or anything as you want and in the HTML let's add this so in here let's say that a script source which will be after jeaious and if i say in the ham dogger as what i need to do is first of all i need to grab the hamburger menu so let's do the Dom selection so constant hamburger is equals to document dot queryselector and here let us say that header let me do it like this one so header and number and nab list and our hamburger hamburger so drop that that's also I have let me close this so after that let's also have the MOU more than a new which is actually our this UL okay so how we can select this so in the nab least we have this ul so that will select our mobile menu which is this ul so after that let's also grab our header we will need it in the future I will show you why so query selector and if I come here and say that how we can select this the selector is work like CSS selector and you can see that so that's we our header so after Dom selection what I need to do is I need to come to the hamburger and add even listener and here let's say that a higher bar I will click party to do is each will make a function or it will run a function so in this function what I will do is in the hamburger which is our hamburger in the class list i will toggle a trust so i will revolve this active class now if i save and and if I open my chrome dev tool as you can see that here so in the hamburger just come here so that means Oh Mitch a little bit more so in the hamburger just notice the timber girl when I click there is active class as you can see that when I again click it's gone so as you can see that properly so that's the class which we will work on it so let's come here in the hamburger so what I need to do is so let's say that Hina bar in the header I will have this hamburger active so high number in this hamburger there will be active plus I will do my change which will do these three line and turn each into a one line so how we can do hot I can say is in the bar the before and also the after table zero and also bottom zero if I save now as you can see that and when I click is now in position on about and again I click but as you can see that if you notice if I click here there is a glitch actually reach not late actually we need to fix it that is a bug so what I need to do is instead of doing this in one line or one style I need to do it in separately so let's say that this one will be for the before so as you can see that in the before we did it a tech eight pixel in the bottom so whenever it will be active it will be zero so let's do it for the after and after so as you can see that in the after I will make the eight pixel in the top so we need to make it zero pixel in the top so now if I give it now as you can see that we have this smooth effect going on here so that's looking good so also let's make our hamburger menu this menu functional so when I click it will come and Hana bar I also click it will be gone so how we can do that we can do it easily so if I come back to the yes what I need to do is I need to same thing what I did in the hamburger so if i duplicate and instead of hamburger what I usually do is I'll say that mobile menu so it will talk about this active class now in the mobile menu also so if I save and come here and inspect now if you see that in the UL that's our mobile menu whenever I will pick this now in the mobile menu I also have a active class so again as you can see that so that's fine so after that so first of all what I need to do is if I come to the UL where is the UM so here let's make it hundred percent the left if I make it hundred percent that will remove the menu from the screen so what I need is I what I need to do is whenever I will click this menu I can I want to make it 100% so I want to make it zero so that I can see it so once again so how we can do it we can do it by active class which I showed you a moment before so what I can do is I can say that in the UL if there is any active class the Left will be zero now as you can see it's looking perfectly functional when I click now it's like that whenever I also click it will be like that so it's fully functional as you can see that but we need a smooth transition so for the transition come here in the UL say that transition will be 0.3 second is and for only left ok so now it will be perfect as you can see that instead of three let's make it a bigger number fine I think fob is good as you can see that so if you want you can make it 80% so let's say that for 80% I need to make the left 20% so as you can see that now it's coming on 80% so for that you need to also make sure about the menu and stir it as you want so for now I stand it so that I can have 0 so it will look like better so as you can see that it's working fine so if I come to my website so it's if I come to my end project as you can see that the menu is kind of a small so to do that what I need to do is in the hamburger let's make a terms from transform a skel let's say that point eight now as you can see that our menu is smaller so which is looking nice also let's have some gap here so in here let's have some margin of 20 pixel so as you can see that or I need to make a specific margin right 20 pixel as you can see that we have 10 weeks little gap in the racks so in the right so that's looking perfect so also let's make these paths effect as you can see that around this hamburger menu so how we can make this pulse so it's very simple we need to make a sword elements of these hamburger so let's make it and position:absolute content nothing and height 100% and with 100% border areas 50% so that's fine so what I need to do is I need to make sure about the border so let us have a 3 pixel solid and white so if I give it so not 30 bit though it should be only 3 pixel so we have this clipping that we can see because it is in the hamburger so what I need to do is I need to make a keyframes so all that's come to the keyframe section and it is yeah here it is so in the keyframes let's make a keyframes for our hamburger so let's name it hamburger balls and here what I need is I need to say that in the zero-percent the opacity will be one and also transform scale will be one and also in hundred percent what I need is I need two opposite e will be zero and Trust from ask L will be 1.3 let's say something like that and if I come here in my hamburger so it's in the header in the hamburger here so let's apply it in the after so let's say that animation hamburger hamburger pulse and let's say that three second is and for not forward infinite so as you can see that it's three second that's why it's taking too much time so once again so as you can see that we have these once again animation here going on if you want it to go more like this one what you can do you can change the SQL so instead of one country let's say that it will go to one point seven so it's going to much one point five yeah one point five is going best or one point four as you can see that it's looking fine this pulse so that's it I think that's what we need and last thing what I need we need to make sure about the menu in that desktop I don't need it in the rec stop I need in the desktop the menu will be like this one and also I think I forgot one thing I need to make a hover effect in this icon not icon in this you so if I come here in the UL hurry it is so in the UL lie yeah whenever I will ha ba da UL so let me copy this part and whenever I hover I want to change the color of our and kortek to crimson color crimson not this one so as you can see that it's working fine so also make sure that about our Dexter Bo so see so first of all in the desktop let's remove our hamburger so in the header we have this hamburger let's remove it so let's say that this player will be none so each one dream of this hamburger from me and as you can see that also let's change our ul so header in the netlist the UL which will be the position initial and display will be block and height will be Auto and also say that feed content so whit will be feed content and if I save as you can see that that's our menu as you can see here also if you notice that our after which is going on here so also let's remove this and kortek after this player will be none so far as you can see that we can't see it anymore so what I need to do is I need to remove this background color as you can see so to remove this background color what I can do is I can come to the UL and say that background color will be transparent each will remove this color and make it transparent as you can see so one more last thing to do which is we need to make it in a line so in a line so what I need to do is I need to make sure in the ally so in the header Nablus ul Li and what I need to do I need to say that this player will be in line block so which will make sure that our menu is now in inline-block as you can see that perfect so also let's decrease the size of the anchor tag so in here let me copy this one and in anchor tag let's say that font size of about 2 M or 1 point 5 gram or 1.8 Ram perfect one point hm so it's looking good as you can see that now our menu is looking like that and whenever I will go to the tablet it will be like that with full functional of menu and in the mobile agent also note as you can see that so that's fine so one more last thing to do as you can see that in our website whenever I hover so if I make it the Heine bar I will scroll down so if you notice for now as you can see that we don't have any color in the background of our header as you can see that but whenever I will scroll down there is a background color as you can see that so that's what we will do now so if I once again if I go to the top that is no background color once again I last call there is a background color so that's what we will do now so for that we need to go to the JavaScript once again and here we need to write a little bit of code so document dot addeventlistener so here if I a scroll in our window I will run this function so in this function let's create a variable which will say a scroll position and we can get that score position by saying that window dot a scroll why this one is called Maya so it will get the a score position in this variable so if I say that the escort position is bigger than 250 means if I score position is bigger than this what I am doing I am doing that had a dot style dot background not that style dot background color Bagon color will be let me put the number two nine three two three I think this one so also if it is in the top what I need to do I need to make sure that the background is transparent so now if I come here as you can see that now our background is transparent but whenever I am coming here as you can see that we have this color but if you notice that it's coming so much first we don't have a smooth feelings for that so how we can make it with a transition so for that what I can do I can come to the header and here as you can see that our background color what I need is I need to make a transition of 0.3 second is for the background color and if I save now let's test it so I know but I scroll and now as you can see that we have these smoke feelings of transition as you can see that so that's it so last thing so let's activate this menu so now as you can see that whenever I click it's not doing anything so let's do it something so here as you can see that in every section what I did is I have this ID which is footer and for the contact I have a contact ID and for the pose for the projects I have a project study as you can see that and each and every second I have this ID so through this idea what I will do is I will link the menu so for the home let's say that I will link it with the header as you can see that I have a header ID here so that's linking header and for the services I have to link each service section so let's link it with the service section for the products let's link it will the project action and for the about let's link it will divert section and contact that sleep k2 in the contact section and if I save now it will work perfectly so if it is our now as you can see that if i refresh if i click to the service cassabi says okay we have a spelling as you can see that projects is to working fine about he is working fine contact is working fine home it's not working okay we need to make services like that and here as you can see instead of header let's use hero okay and if you notice that so whenever i am clicking it's doing too much first we don't have feelings about smoothness here as you can see that is doing so much fast so let's come here in the standard CSS and make it smooth scroll so what i can do in the HTML let's say that a scroll behavior will be smooth so whenever I will click now the links it will smoothly scroll up and down as you can see that so that's it as you can see everything is working fine awesome Oh some awesome awesome stuff so that's it as you can see that our website is fully functional everything is looking much better as you can see that so let's also link this button with our portfolio so here in the hero section we have this button so portfolio which means our projects for save now if I click now it's perfect so one more thing as you can see that we have this scroll process and going on here that's the issue the last thing whatever you are facing so in the contact what I can do is instead of using something like that so let's remove this padding you do not need any padding here and here as you can see that it's gone but it's not fixed yet so let's come here in the item let's give it a width of 30% and also let's remove the margin from here so as you can see that that stream of the all that other things and what I need to do is here let's say that justify content will be spaced around or spaced evenly so as you can see that is it is a spacing evenly and in here what we can do we can make a padding of about 30 Pizza so as you can see that we have thought a big cell or 50 pixel but it is a spacing evenly as you can see so it will look better whenever I will go to the any of the device so also come here and say that margin 0 so that it remove all the margin from the and also lets back in 30 bits or 20 Big John what is zero you don't need any penny so as you can see that it's evenly giving a space around this so whenever I am having with so that's fine as you can see that it's looking perfect this conduction phone so all the thing is going perfectly well as you can see that now we are in them while we are in every so as you can see we can what we can do we can do one more thing whenever I click I don't need to close it automatically whenever I click it will close automatically so for that what I can do I can say that in the JavaScript let's come here and also grab the anchor tag so you ll I and let's say that menu item and here when last thing what I can do that's the bonus point actually so menu item dot for each so instead of query selector we use quad selector all because there is one there is more item than one as you can see that we have this five menu going on here so for each so I know that item and here let's say that I am NOT even listener and whenever I'll click it I will do the same thing which I did with the hamburger so if I come here and paste and save it so as you can see that when I will take it it will close automatically so let's go to the projects so as you can see that we do not need to close it it will close automatically so that's fine that's what you can do so that's up to you what you can do the limit is there is no limit actually okay there is no limit you can do anything so for this video that's it as you can see that we have this fully responsive menu and we have these fully responsive section going on here and all the other thing is perfect and here as you can see that we have the fessing little problem here in this list kolba so it is actually my fault sorry for that so as you can see that we are stuck here we did something mystic so it should be margin so that's fine and here it will be about max width of 500 pixel so maximum 500 books will be the width of this so that will fix the issue so that's not a big deal but you need to know about it so that's fine so well congratulation to you you successfully completed this project and if you make something similar like that with this project please let us know we have a Facebook group that you can join and share your project with us I will be happy to see that what you made and if you are new to my channel please do subscribe for more video like this one and my name is orphan and I will see you in the next video or in the next project till then bye bye good hafez [Music] [Music]

Channel: WEB CIFAR

Views: 784,276

Keywords: how to make a website using html and css, how to make responsive website in html and css, how to build a website, website design, how to create a website using html, html website design tutorial, html css project, project for practice, responsive website, responsive website tutorial, responsive website html css, build website, build website from scratch, website tutorial, how to create a website, responsive web design, javascript scroll animation, responsive navigation bar

Id: ZFQkb26UD1Y

Length: 201min 43sec (12103 seconds)

Published: Wed Mar 25 2020