Complete Portfolio Website with Bootstrap - HTML/CSS

hey everyone and welcome back to delegation in this tutorial we're gonna learn how to make this beautiful portfolio website using bootstrap in this video we're gonna learn how to make this portfolio really from the beginning you're going to learn lot more things in this tutorial so stay with me we will start with the amazing responsive navigation menu once we complete this navigation menu we'll create this banner area in this banner area you can see we have a title and on the right side we have an image you're also going to see we have two buttons here the primary and the secondary button and when you hover on it which is specify different effect to this primary and the Secretary button just out that we have about section here in this section we have an image here on the left side and on the right side we have a description and the title then we are going to create a brand section in this section when you hover on the brand you're going to get a very beautiful effect on the right side I'm going to have experience detail and a contact detail and just out of that when you scroll down you can see we have a beautiful services section here we're going to provide for services for the user when the user hover on the services they will get this beautiful effect just our that when you scroll down you can see we have these recently done project and in this section you're going to learn many many things you understand how to create this beautiful gallery using bootstrap and how to make this responsive not only that you're going to see how to filter all these images so when you click on these buttons this will filter these images like this and not only that I'm going to show you how can create this beautiful image gallery to navigate to your different images and so this is the best part of this website now just art that I'm gonna scroll down and as you can see here we have here a client section and in this section we have ol carousel now in this section you'll learn how to create this ol carousel and add clients just out there when you scroll down you can see we have this subscribe section and the footer section right now this is not the end of this tutorial because let me show you this website is responsive or not now if I open this website for mobile or tablet device you can see this website is completely responsive for mobile and a tablet device as well you can see this website is responsive for mobile and this tablet so let's see how to make this complete website step by step and learn a lot more things so let's get started and see how to build it so before taking your too much time let's get started so let's get started and first create a beautiful portfolio website using a just CSS and HTML so as you can see here I have Divi is called editor open and inside this Way's core editor I'm gonna have an empty folder portfolio you can name this folder anything but I'm just gonna animate portfolio because this is a kind of portfolio website so in this folder I'm gonna first create index dot HTML file so I'm gonna create that file in the root directory so I'm gonna just click on this new file icon and just create a file named index dot HTML now as you can see here this file is in the root directory right now just our two that I'm gonna create here a new folder so I'm gonna click on this new folder icon and create a new folder CSS and inside this folder I'm gonna have different CSS files I'm going to separate all the CSS files and put that inside these CSS folder I'm gonna create J's folder inside these two directory so as you know to create a new directory just click on this new folder and just specify a name to your folder so I'm going to specify here Jas so as the name implies inside this J's folder I'm gonna put different JavaScript files just after that in the CSS folder right here I'm gonna create my stylesheet so I'm gonna create a new file and just specify a name to my stylesheet standard CSS simple now in the index dot HTML file I'm gonna link the style dot CSS but before I link it I need to first create and snippet of HTML to simply create a snippet just call exclamation mark and press Enter so this will create a simple html5 snippet in the HTML file just out of that I'm gonna change this title and specify here daily tuition I'm not gonna do anything in the body right now I'm going to just link style dot CSS right here so I'm going to first create here a command multi-line command and inside this command I'm gonna say custom CSS file right and just start that right here I'm going to just create a link tap the link in the standard CSS file and just call dot forward slash so this will repose to the root directory then I'm gonna specify CSS folder and the standard CSS file so we know that we have the standard CSS inside the CSS folder so I'm going to specify this path to the href attribute now as you notice it's just a custom tiling but we're also going to use a pretty fun styling for this website for that I'm going to use bootstrap I'm going to just open a browser and search for get bootstrap calm so I'm going to search it so as you can see here I have this bootstrap website from this website I'm going to download this bootstrap framework and use it in my website bootstrap makes your website responsive and it's also going to used to make mobile first project so we're going to use this bootstrap framework to make this website responsive so I'm going to just click on this download button to download this bootstrap framework so I just need to click on this download button to download the compiled CSS and JavaScript file from can just click on this file now once it down with the bull strap you're gonna have this post draft zip file so now we just need to extract this file so I'm gonna extract it here I will just open this bootstrap folder and in this folder I am going to have two folders here someone is just open CSS and in this folder just into crap this bootstrap dot mean dot CSS file this one right you just need to copy it and paste it inside the CSS folder in the project so I'm going to just copy this file and I'm gonna paste at the bootstrap file inside this CSS folder right here right now just out of that I'm going to open the bootstrap J's folder this one and from this folder using to copy this bootstrap dot mean Lord J's file so I'm going to copy and paste it inside my project directory in the J's folder and so in my project directory I'm gonna paste that bootstrap dot mean dot J's file inside this J's folder right here now just after that we just need to link both these files so I'm gonna open my approach a and inside this project you can see you have your bootstrap dot mean dot users file and inside the J's folder you're gonna have this bootstrap dot mean dot J's file so before with this custom CSS file right here create here a command and just specify here bootstrap CSS file I just out of that I'm going to link this bootstrap using link tag and just bit by the CSS folder and inside this folder I'm going to have post wrap mean dot CSS file right now just out that before this closing body type right here create multiline command and you say here boostrap JS file and I'm going to just link this JS file right here so to link JavaScript file we can use script tag in the source attribute I'm gonna specify J's folder and then select booster plot mean dot J's file right so now I can use different booster classes in this website now make sure you link this poster file before this custom CSS file because using this custom CSS file we're gonna overwrite the default property of bootstrap so keep in mind you link this boostrap before your custom file now once you link your bootstrap you need to link jQuery to work boostrap properly you just need to link jQuery file as well before this bootstrap file right here so i'm gonna create here a command jquery.js file to work bootstrap properly you need to link jQuery file as well because in this file we're gonna have different jQuery functions so to work these functions properly we need to link jQuery file so what I'm going to do is I'm gonna open a browser and just open a new tab and just get the jQuery files I'm going to just open the jquery.com website and from this website I want to download this jQuery so I'm going to click on this button download jQuery and I will just download this jQuery in my project so I'm gonna just choose this compressed version so I'm going to click on it and just copy this code so just select it and just press ctrl-a so this will copy the complete code and just press ctrl C to copy it and inside your project and the J's folder right here I'm gonna create a new file jQuery dot three point four point one dog cheers I'm gonna put all this code inside this jQuery file so I'm gonna paste that here now once I paste it just save the changes and just close this file because you don't need to worry about anything what we have inside this file now we just need to link this file before this bootstrap so I'm gonna link this file right here so I'm going to say here script so in the source attribute I'm going to specify J's folder and select jQuery file right and now you successfully linked jQuery and bootstrap to your project now once you set up the bootstrap and jQuery we're also going to use Google Fault in this website so we can use different forms in this website whatever you like so using Google phone you can download your favorite phone and use that phone in the project so I'm gonna just open a browser just close this tab because this is not needed now and just open a new tab and just search for Google Fonts from the phone store google.com just choose your favorite phone so I'm gonna use only this font Roboto so I'm going to select it so as you can see here I have this phone family selected to boot Oh instead of using T CDN I'm going to download this one and link to my style or chases so I'm gonna just download it from this download button right from here now once you download this it'll put a file you can have this simple zip file here you just say to extract this file so I'm going to say here extract files and I'm going to extract this reporter file and make a folder of robo-dog so as you can see I have this different phones and these Roberto folder so I'm gonna just copy this folder and in the project directory right here I'm gonna create a new folder and name that folder fonts and inside this fonts folder I'm gonna paste this Roboto font so you can use this one in this website now when you open your editor you can see you have this phone's folder here and inside this folder you can have a simple Roboto font I'm using global - phone for this website if you want you can choose anything else and now just out of that we need to link this font to my style sheet so I'm gonna create a new file here inside these CSS folder a name that file phones dot CSS inside this file I'm going to first create a phone face room so I'm gonna create here a command and just say font face and inside this file I'm gonna have my font face so I'm gonna add add red font face own face and insert this won't face I'm gonna have two properties which is required to create a font face so I'm going to first specify the font family so this is the required property - this bound phase rule and right here I'm gonna specify in the double quote Roboto so this is the name of my bond if you want you can change this name as well right just after that you need to specify the source property of this one so I'm going to specify here source and the source is going to be in the single code select the phone's folder selected Obata folder and then select your font so I'm gonna select regular phone this one now just save the changes now you can use this robot upon using this robot or font-family once you save it you need to link this file to the index dot HTML but instead of linking this file in the index dot HTML I'm gonna include this file in the standard CSS so I'm going to simply create here a command I'm going to create here a command in bold fonts from horns Lord CSS file and right here I am going to import phones file so I'm gonna call here import and in the URL I'm gonna specify phone start CSS right so now I can use this phone in this style sheet now just onto that wants to link this font or CSS file I to include images inside this project so insert this root directory in the portfolio right here I'm gonna create a new folder and name that folder IMG and inside this mg I'm gonna have my different images which we are going to use throughout this tutorial so I'm going to just copy these images and inside the project they stayed in the IMG folder right here now in this project we are going to use all these images just art that once we have all these images inside this IMG folder let's include the phone dozen we tried to include icons in this project so I'm going to open a browser and in the browser I'm going to just close these tabs and just search for font or some dot now visit this website you can use more than 7000 icons so to get access to this icon you just need to first download these icons and use it in your website so I'm going click on the start so once you click on the start just scroll down and just click on this download and now from here is using to download this font or some package in your local system I already have this package in my local system simply just open it and as you can see here I have this zip file here of the font of some website so I'm going to just extract it so I'm going to extract this file right here so as you can see I have a folder here just open it and in the CSS I just need to copy it is called out mean file and just link this file in the header section of the website so what I'm going to do is I'm going to just copy this file and paste that file inside the CSS folder in my project right here so I'm going to paste that file right here now once you link this all dot CSS file to your project you need to open the font or some package again and then just copy the waveform folder so just open the waveform folder and just copy all these files some will just copy all these files and in my project and inside this project in the root directory I'm going to create a new folder and name that folder icons and inside this folder and paste all these files so I'm going to paste these files here so I can include any font from the font of zombicide now inside this project you can see we have these icons folded here right now what we need we need to just link this all dot mean dot CSS file to the index dot HTML so I'm gonna just open index dot HTML file and right here before this custom since this file right here I'm going to just create a command and just base if I found awesome icons and right here I'm gonna link say sits folder all dot mean dot CSS file and now you also need to edit this file because font awesome don't know where you have all these icons we just created a custom folder icons and put all these icons inside these icons folders so we need to inform font isang to use this icons folder something just open all that mean dot CSS file and inside this file you just need to search for web fonts somewhere just press ctrl F so this will give me a simple box here so it just need to find a word wave and what you need to do is you just need to replace this wave phones folder to your custom directory name so I'm going to just replace this wave fonts folder two icons so I'm please just click on this icon to replace this wave fonts folder do icons so I'm going to just click on these the place up so when I click on this replace all this will replace all these waypoints folder two icons just close it and save the changes once you save it just close this file and now you can use any icon in this project as simple as that now if you don't want to edit anything and use your predefined a wave font folder you just need to put that Waypoint folder inside the root directory of your project it then you don't need to edit this all that mean dot CSS file now as you can see the project structure is now ready now let's move and create navigation menu of this website some we'll just open our finished website first in the browser so as you can see here I just opened the finish up setting the buzzer and the first thing we are going to create this navigation menu so let's move on and see how to create this beautiful navigation menu Rhambo just open my V is called editor and right here in the body section I'm going to create a division tab so to create a division tag you just need to simply press T and press tab so this will create a simple division tag for you you don't need to put here a bracket then specify a deal and then specify the closing date instead you just need to type here D and press down so this will create a simple division tag for you now let's say you wanted to create a division tag with a class 1 then you can see here deal dodd class 1 and when you press there you can have a division tag with a class 1 there is one more way to simplify this work so if i just place if i here dot plus one and press that i'm gonna have a division tag with the class one now just after that now what do you might want to specify an ID to this Dave so I'm going to call here hash and specify my ID when I press tab I'm gonna have a division tag with the ID my ID just out of that now what if I want to create h1 heading tag with the class name so I'm going to type here h1 and specify my class name so I'm going to specify here a class 1 and when I press tab I'm gonna have h1 heading tag with a class class 1 in the same way I can create ID as well let's say I want to create h1 heading tag with the IDE my ID then I'm gonna say h4 flash my ID when I press that I'm gonna have h4 heading tag with the ID my ID now let's say I want to add two classes to the paragraph then I'm gonna say here paragraph so I'm gonna say P dot plus 1 and I also want to add one more class to this paragraph so I'm going to press dot again and say class 2 when I press tab I'm gonna have a paragraph with a class 1 and class 2 right so you're not limited to specify only one or two classes you can add multiple classes to the same element at the same time right as simple as that now you can see me doing this throughout this tutorial now let me first create a simple navigation menu to this website so let's get started and first create a navigation menu so I am going to post and here multi-line comment and just specify here star header area now it's also the best practice to add comments while you creating a code so I'm going to just create here a multi-line command and just here start header area just duplicate this line so I'm gonna press alt shift down key and duplicate this line and just say here and header area right here inside this command I'm going to create my header so I'm gonna post adhere header and specify a class to it Hado area now you're not limited to use only these classes you can specify your own class here as well right here inside this header I'm gonna create a div tag with the class main menu so I'll just put dot here and say main menu and when I press tab I'm gonna have a division tag now inside this div I'm gonna have my beautiful navigation menu now I'm not gonna create this navigation menu instead I'm gonna use the predefined bootstrap navigation menu and just edit that so I'm going to just open the bootstrap website and from here I'm going to click on this component and just select this navbar and right from here I can select my own navigation menu so I'm gonna just choose this a simple navigation menu so I'm going to just copy this code and paste it inside this division tag right here write as simple as that now this is my simple navigation menu so when I save the changes and open this file in the live server I'm gonna have a simple navigation menu so I just need to open this file in the live server so I'm gonna right click here and say open with live server if you don't have this option just install live server extension in the via school editor then you can see this option here just open the extension tab right from here just click on this extension there and just search for live server and what you need to do is we just need to install this live server extension in the views code editor and then you will have this option when you right click on the index dot HTML file so I'm going to just close it and open Explorer I'm gonna right click here and say with live server now on the localhost double five double zero you're going to get your index dot HTML file now let me just explain what is the benefit of using live server so let's see if I just change this pricing to about others and save the changes and whenever I save the changes you're going to get the live result in the browser so you're going to get here about us so that is the benefit of using live server you're good to get live result in the browser so you don't need every go to the browser manually now once I have this bootstrap navigation menu I want to customize this navigation menu so I'm gonna just get rid of this now bar and just specify an image here so I'm gonna call image tag here and just specify an image so I'm gonna select my IMG folder and I'm gonna select this logo dot PNG file and in the alt attribute I'm going to say logo save the changes and when I save the changes you can see I have this daily icon here now just out that I will leave this home as it is so I'm gonna just change these features to about then I'm gonna change this about us to services I'm gonna cut it off this disabled link so I'm gonna just get it out this right Hank and just duplicate this in Iraq so I'm gonna select it and press alt shift down when I press all ship down I'm gonna have duplicated a letter now I'm gonna change these services to portfolio I'm gonna duplicate this air attack so I'm gonna select it press all ship down key and duplicate disk at attack and just out that I'm going to change this portfolio to pages this became block I'm gonna duplicate it one last time and this became contact us so I'm going to just here contact save the changes and when I save it you can see I have these section here now just sort of that what I want I want to align these navigation link on the right side of the screen right here so I'm just create here gives in tag inside this tier inside this collapse right here I'm gonna create here a division 'te and I want to specify a class here margin-right:auto now once you create this tuition tag and save the changes you have your navigation link on the right side like this just our two that I'm going to deal with this BG light class so I'm going to just remove these visual ID class from this navbar and make it transparent like this now as you can see the basic navigation menu is ready so let's move on and make this navigation more attractive so I'm going to just open the start or CSS file and inside this file open style this navigation menu so I'm going to just create here a multi-line command and just say here start navigation and just close this command down here and say and navigation now inside this command I'm gonna fall select the header so I'm gonna select here header area then select the main menu so I'm gonna say here main media just start with that I'm gonna select it now bar and then select now power brand I'm gonna select here now Bar brand let me just spread this window so you can understand everything clearly so if I just played this window and I just selected this header and then selected this main menu this one and then selected the nav bar and then selected nav bar Fran and what I want I want to specify some padding to this number brand so I'm gonna speech for some padding to it so I'm gonna say here padding and I want to specify 0 to the top to ramp to the left 0 to the bottom and fire ramp to the left side save the changes and now you can see if you open the website I have some padding to this nav our brand just after that I'm going to select the now bar so I'm gonna select header again so I'm going to select header area then select the main menu and then select now bar and I want to add some padding to it somebody's here padding 1 Ram to the top and bottom and 20 Ram to the left and right save the changes when I save the changes you can see I have some padding to the left and right side of this now part just out of that I'm gonna just select here now links this class and spit over some style to it so I'm going to oscillate the header area then select the main menu then select the now item class and then select now link now what I want do this now link I'm going to specify font family so I'm going to specify font family and I'm gonna specify a robot to font here so I'm gonna say here Roberto and also specify fallback value so I'm gonna say here cursive just out of that I'm gonna specified takes transfer property the text transform property is going to be uppercase so I just wanted to specify all the letters with the uppercase some could specify takes transform uppercase then specify the font with it's going to be 500 and then specify padding is going to be 1 point 7 gram this will specify top left bottom and right padding the star that I want to specify color to it somewhere specify color and I want to specify a light black color to this now links someone else is here blank and save the changes and just out of that when you open your website you can see you have your own family and font size to these now links and we have black color to this text now what I want I want to simplify all these properties and I'm not going to use these hard-coded values because every time I want to specify font family I need to specify these hard-coded values so instead of using these hard-coded values to this color as M to these font family I'm going to create a variable and use that variable whenever I specify font family and color so for that I'm going to create a new file so I'm going to just open my project and in the CSS folder I'm going to create a new folder and name that folder partials and inside this folder I'm going to create a file call variables dot CSS now just out that inside these variables files I'm going to create my CSS variables so I'm going to simply post create HTML embody some kind of for stay here HTML and select the body and forced specify margin:0 and then specify box sizing is going to be border box so this property will allows us to include the padding and border in an elements total width and height so that if I use box-sizing border cops just start with that I'm going to specify width which is going to be 100% and I'm also going to add height to it 100% just start a guide right here I'm gonna create CSS variable so I'm gonna add a comment here and say CSS variables so the variables in CSS should be declared within the CSS selector that defines its global scope for example the CSIs variable could be define in the dude or 'the body selector the root selector matches the document root element so I'm not gonna select body here instead I'm going to use root C vector so I'm going to say here root and insert this root selector I'm going to create CSS variables the CSS variable must begin with two dashes so to clear diseases variable you need to put two dashes here and then specified name of your variable and the name of the variable is case sensetive just create a variable here and I'm gonna name that variable primary color so I'm going to name it primary color let's specify my hex value here so I'm going to specify a color here 40 4 5 8 DC so now whenever I want to specify color to the element I can use this variable name instead of using this hard-coded value this is a very simple way to specify this color to your any element now what I'm gonna do is I'm gonna create quickly a few variables here now as you can see here I have few variables inside this loop selector as you can see I have this primary color this primary color too then we have you border colors and the title colors then we have here a gradient color and then we have your box shadow and shadow color just our two that I'm also going to use Roboto font in the variable so to specify this font I can use this variable now to save the changes and let me show you how you can use this variable and specify these values to the property so I'm going to just open this salad CSS file and inside this file instead of using this hard-coded value I'm gonna get rid of this value and call very function so using this function you can access variable values so just call the very function I just called variable name so I'm going to call here Roboto so I'm gonna specified Double Dash is here and say Roboto so now we don't need to specify the Roboto hard-coded value here instead I'm going to use this Roberto variable to stop that I'm not gonna use this black color instead I'm gonna call a wear function here and inside this wearer I'm gonna call title color and now once you specify these variables to these properties don't forget to link these variables files to these style rod CSS you need to import this file in the style dot CSS to use this variables because we separated this variable files that is what we need to import this file right here so I'm going to create a multi-line comment here and say CSS variables I'm gonna call here import URL and inside it and I'll specify partials variable dot CSS save the changes and just open a website and now you can see I have this mount family and color to my nav links now I just thought that I just want to specify the gradient color to the active nav leg so I'm gonna open the style or CSS and inside this style dot CSS file right here I'm gonna first select the header area then select the main menu and then I'm going to select now bar now and I'm gonna select the active class and then select the anchor da and to the Sanka dad I'm going to specify background it's going to be the gradient color so I'm not going to call here gradient hard-coded value instead call a variable here in the vert function I'm gonna call gradient color now as you can see in the variables I have this gradient color variable right and I have this value to this gradient color variable I'm going to specify this gradient to the text so we need to add a few more properties here because it's not easy to specify hidden color to the text so to specify created color to the text you need to first call a WebKit background clip property and the table is going to be text then you just need to call WebKit text field color and this is going to be the transferrin and the last property is going to be background clip and this is going to be text say H dis and when you save it you can see you have your gradient color to the text just out that when I hover on these now links I found to specify these gradient color to these knobblies when I hover on it so I'm going to just copy this lines and paste it down here and just specify however here so I'm gonna say here however and specify here however and just get it off this active glass say you the sketches and just outside when I hover on this links you can see we have this gradient color to this now links now the last thing I want to simplify this font family so instead of using this font family they spawned with I'm going to use font property let me show you how if I just you see here font and just paste my values here so the false value is going to be font style so I'm going to specify here normal then specify phone faith so as you know we specify here font faith 500 so I can specify that here five hundred then the next property is going to be font size so I'm going to specify font size so I'm going to specify 15 pixel on size to these now links and then I can specify line height so I can space of a line height with this font property so just place five forward slash here and then specify two pixel line height along with that I can specify phone family where function here and then specify Roboto now to save the changes now you can remove this font family they spawned width and just save the changes and now you're going to get the same result here and now you can see your navigation menu is ready alright now let's moon and see how to create this beautiful banner area where we have these beautiful headings then we have this primary and the secondary button and we have this image on the right side so let's see how to create this beautiful pattern area some cano put the index dot HTML file and right here in the index dot HTML the start of the header area I'm gonna create here a command multi-line comment and just say start main area and I'm going to duplicate this line and just change this code to end and inside this main area I'm gonna create a main tag and specify a class side me and inside this main tag I'm gonna have different sections so I'm gonna post create here a multi-line comment and just call here start banner area and just close these comments I'm going to placate it and banner area just talked to that inside this multi-line comment I'm gonna create a section so I'm going to call here section tag and specified class side banner and inside the side manner I'm gonna create a container so I'm going to call the bootstrap container class so this continent class will specify 80% with to this division tag and make it responsive just out of that inside this container I'm gonna have a row so this will create a single flow and inside this row I'm gonna have two columns so bootstrap has twelve column clear system so inside this row I'm going to create two column of call ng6 so I'm going say here call lg6 and I'm going to duplicate this division tag so I'm going to press alt shift down to duplicate this division line now what we're going to do is we're going to use bootstrap great system so this row class will create a new row and inside this row I'm gonna have two columns this column has six column width so bootstrap has twelve column width and we don't specify six column width to this first division tag and six column width to the second division gap if we calculate this Dave it's equal to twelve column width if you wanted to understand how bootstrap gives system work I have dedicated video for that you can check that out from the top right corner of the screen but just for now just keep in mind we are going to create two columns with six column space for the large device we're gonna specify six column space to this division tag and six column space to this division down now what if we have medium device in that case we need to add one row class here which is called MD 12 so for the medium device I want to specify 12 column width to this division tab and I'm going to do the same for this division tag as well so I'm going to say here call MD 12 so now let me explain what we have here so for the last device I'm going to specify six column space to the division tax and for the medium device I'm going to specify twelve column space to this division tag so it's basic four different paths to different devices so it makes this division tag responsive in the first column right here I'm going to create these titles and these buttons but before we move on I won't specify a custom class here I'm going to switch over here site tag off and inside this Dave I'm gonna create h3 heading tag and just pitch point class to it I just know to speech read class title text this is the custom class actually which we are going to create after few minutes but just for now just place it by a cloud stereo text and just specify here hey say addition Jess and now if you open your web side you can see you have your hate right and it just started right here just drop this h3 heading time I'm gonna create h1 heading tag and I want to specify class to it title text now actually this is a custom class which we are going to specify after a few minutes but just for now just based if I title takes class here and then specify text uppercase class both these classes are custom classes now in the h1 heading tag I'm going to say I am Akshay if you want you can specify your own name as well you're not limit you to space by only mining just out of that I'm going to create h4 heading tag here and I want to specify class to this edge or hint egg as well and I'm going to specify here title text and takes the uppercase class right here I'm gonna say senior WordPress developer now just out of that I'm gonna create two buttons here so when I save the changes you can see we have here text I am Akshay and the senior WordPress developer right here I'm gonna create a button so to create a button I'm going to create a division tag with the class side buttons now just out of this Dave I'm gonna have a division tag with the class D flanks flanks row along with that able to specify the Flex Wow now this is actually a boost applause so the deflates class will specify display flex property to this Dave then I'm going to space about display direction to this division tag using these place row and then I'm going to specify flexwrap so when the width of this device is less than the content the Flex wrap will move the content to the next line now in this flex I'm gonna create a button I'm gonna say here but um and the type of this button is button then I want to specify takes to this button will hire me and I'm gonna specify here class and the class is going to be a bit him which is bootstrap class then specifying button which is custom class then create a primary and then specify primary button class now this both class is our custom classes just after that I'm gonna specify margin right for so this field space if I margin right to this button so this is a boost up class then I'm gonna specify the text perky's to start with that I'm gonna create another button and the type of this button is going to be button and the class I want to specify to this button is be DN button secondary button and I want to specify here text uppercase class and the text is going to be cat see when I save the changes you can see I have these two buttons here now to start that I'm gonna just move to the next column right here and in the next column I'm gonna create IMG with the class img' fluid so we're gonna make this image responsive using this IMG fluid class now inside the source attribute I'm going to specify image folder and then specify the parent folder and then select this banner image the alt attribute is going to be banner IMG save the changes and just talked to dad you can see you have your image here and just talked to that I'm going to speed it with some custom class to this division tag and I'm gonna say here banner IMG image say the change is if you open the website you can see you have your banner area now let's move on and style the section so I'm gonna open the standard CSS file let me just call this window on the right side like this I'm gonna close this index dot HTML close this phone start CSS and just open the star dot CSS here and right here I'm gonna style this banner area so I'm gonna create here a comment and specify here multi-line comment and just specify banner area and I'm going to close this command so I'm gonna create a multi-line comment here as well and just say an banner area in the banner area what I'm gonna do is I'm gonna force it aside main class and inside the site main I'm going to select site banner and then select site title and to this side banner I want to specify background image so I'm gonna say like background class and in the URL I'm going to space in my background image so I have the image in my image folder so I'm gonna select image folder then select banner folder and then select the home banner dot PNG file and along with that I'm gonna specify no-repeat and I want to specify background position as well so I'm gonna say here a background position so now I'm gonna split where the first value is 0% the first value is the horizontal position and the second value is the vertical position so for the horizontal position I'm gonna say 0% and for the vertical I'm gonna specify 50% save the changes now you can see we have this background image here now you can simplify this work as well you can remove this property and specify these two values right here as well so if I just specify here 0% and 50% then this property does the same job now just stop that I'm gonna select site main again and then select banner class so I'm gonna copy it paste it down here I'm gonna select site title and select h3 tile and to this h3 for this one I'm gonna specify padding da is going to be 35 % then I'm going to specify phone faith 500 and now just out of that I'm gonna select h3 heading tag so I'm gonna copy this selector fix it down here and now I want to select h3 heading tag so I'm gonna select h3 and I want to create after pseudo selector for this h3 heading guy so I'm gonna just create here after and I'm gonna say content empty string then specify height is going to be 2 pixel and I want to specify braid which is 18 we'll put a bit and background is going to be black so I'm gonna say here black along with that I'm gonna say display inline-block and margin left is going to be 5% when I save the changes you can see we have this line here they start that I'm going to specify to transform translate y is going to be minus 10 pixel right and just down to that down here I'm gonna select h1 heading tag so I'm going to just copy the selector place it down here I'm just changed is 3 - h1 and I want to specify phone signs it's going to be 5 Ram save the changes and just after that I'm gonna select export heading tag so I'm gonna paste the selector I can then select H or heading tag and I'm gonna space oversize to this senior WordPress developer to this H bold heading tag and I'm gonna say here for science it's going to be 1.5 wrap this will add font size to this text and then I'm gonna select this image so I'm gonna paste the selector again select the inside banner and we have this image inside the banner image class so I'm going to say here banner image and I'm gonna select that image so I'm gonna say here IMG and to this image I'm going to specify padding which is going to be 70 Ram this will our top and bottom padding to this image and I'm going to specify 0 padding to the left and right then specify with it is going to be 90 Ram when I say the changes this will add some width and padding to the CV now just out that if you open the index dot HTML file you can see we have some classes to this banner area the title takes class the text uppercase class then we have your button and the primary button and you also going to see we have a secondary button class now we're gonna create these classes someone open the style dot CSS and right here I'm gonna create I'm gonna create this title text class so I'm gonna create here title text and to this title text I'm going to specify font and I want to specify style normal then specify found with which is going to be bold then I want to specify font size which is 50 pixel and the line height is going to be 72 pixel along with that I'm going to specify porn family and I'm gonna say here we're function and to this bar I would call Roboto variable say addition yes when you serve it you can see we have this font family to this text now as you can see we can use this class anywhere in the program like this if I special this class to this H for hitting tag I'm gonna have that font style to the text instead of creating this class in this style dot CSS I can create that class in the global file we can take this class as a global styling so I'm gonna just move this class in the global dot CSS file so I'm gonna cut it from here and in the partial file I'm gonna create underscore global dot CSS and in this file I'm gonna paste that title dot txt file and we'll just include this global dot CSS file to the standard CSS so up here I'm gonna add multi-line command and just say global oops I think I misspelled a spelling here it's global now I'm gonna just include this global file so I'm going to see your global styling I'm gonna say here import global styling and using the import statement in the URL I can import this file so see like the partials folder and then select global dot CSS save the changes I can create global files inside this global dot CSS file let me just create a few local classes inside this global dot CSS file which we can use throughout this tutorial so it's easy to specify this class to any element and we can change it later also because we know that where we have these global files so that is where we separated this global classes and make a file COBOL dot CSS and we put all the global classes inside this file now inside a global file we also gonna have this takes uppercase class so I'm gonna just create here first a command to indicate this is a global classes so I'm gonna say here global classes I'm gonna create here a class text uppercase and I'm going to specify takes transform uppercase this will capitalize all these texts and just out of that I'm going to style these buttons so as you know we specify here button and this secondary button and we have this button and primary button class to this button so I'm going to style using these classes so I'm gonna open the global style and right here I'm going to say but tons and right here I'm gonna style this button so I'm gonna first create a button class and to this button so I'm going to first specify padding so the planning is going to be point a trim to the top and bottom and then specify to point to ram to the left hand right just start with that I'm going to specify font and font is going to be specify the normal for the phone style then specify want width is going to be 500 then specify 16 pixel font size and the line height is going to be 20 pixel and then specify the font family so I'm going to call a variable Roboto just after that I'm going to space if a position to it because I am using after pseudo selector so I'm going to specify position relative and then specify border the border is going to be taping so solid transparent because I'm using creatine border to this button that is why I use transparent color to this button just out of that I'm going to specify border radius and the border radius is going to be 4 pixel but when I create after to do content I'm gonna have this beautiful creating border to this button so let me show you how we can do that so what I'm gonna do is I'm gonna first select the primary button so I'm going to force a lately pattern you can select primary but so as you know I have this class to my first button right here button primary button I'm going to select that and just out of that I'm going to specify background and I want to specify here a gradient color so I'm gonna say here clear the end color someone call a variable gradient color just after that I'm gonna create background clip property is going to be padding box then specify color and the color property is going to be white smoke so these three property will specify background color to this box just after that I'm going to specify transition I'm gonna specify transition to the background property so I'm gonna say here a background 0.6 second is and the last I'm going to specify box shadow and I'm gonna specify a variable here box shadow right save the changes now you can see we have we have shadow to this primary button and then just start that I wanted to create our effect to this button so I'm gonna select button and the primary button class and when I hover on it I'm going to change the background so I'm gonna say here background white smoke and I want to specify a background clip property again I'm going to say a background clip is going to be padding box and the color is going to be white oops it's going to be black save the changes and when you home run it you can see we have this white background color to this primary button and we just change the color of this text now just talked to that what I want when I hover on this button I want to specify creating border to this button like this in the finished website when I hover on this button you can see we have this gradient border here so to create this beautiful gradient border to this button I'm going to just create here I'm going to first select the button and the primary pattern and then select after pseudo selector and to this after pseudo selector I'm gonna for specify position which is absolute and then specify top property is going to be minus two pixel and I'm going to specify left mine stupid so bottom is going to be minus stupid cell and right is going to be minus two pixel just out of that I'm going to specify background and the background is going to be the gradient color so I'm going to say here where and call the gradient color right now you're not going to say anything but when I specify content property content it's going to be blank string say the changes and you can see we have this border here now where is your text corn to solve this problem we need to specify z-index property to this after pseudo selector so I'm going to specify Z index is going to be minus one so when I save the changes you have your gradient border just after that I'm going to just specify powder radius it's going to pay for pixel now as you can see the primary button is now ready now let's see how to create this second secondary button so I'm going to just open the global dot CSS file and inside this file I'm going to first select the button then select secondary button class we already specified the secondary button class to the second button right here right you start with that I'm going to specify to this button I'm going to say background and I want white background to this button so I'm gonna say white then I'm gonna specify background clip property is going to be pairing box and then I'm gonna say transition transition is going to be on the background property so I'm gonna say here background 0.6 second is right Save Changes and I'm gonna have background color to this button and just on that I'm going to just create how it effect to this button so I'm gonna pause like the button then select the secondary button and I'm going to create over effect to this button and how I don't need I want to change the background color and I want to specify gradient - this button I'm gonna call the bear function then call it Acadian color just after that I want a specific color which is white smoke and box shadow is going to be a variable which is box shadow Save Changes now when I hover on it you can see I have this background radiant color but now what I want I want to create outer pseudo selector to this secondary button so instead of creating all these properties again I'm going to specify comma here and then select button secondary to this button I'm gonna fade after pseudo selector save the changes and now you can see I have this border here when I don't need you can see we have the kadian color now you can see my secondary button is now ready now you can notice the banner area is now completed now let's move to the next section and in this section I'm going to create about us area in this area of the left side we can have this beautiful image and on the right side we have title paragraph and a button so let's see how to create it so I'm gonna open the index dot HTML file and inside this file I'm going to create about us area right here just out of these banner area and I'm gonna create a multi-line comment here and just specify here about area and just out of that I'm going to just duplicate this comment and just change this about area to and about area now just out of that inside this about earlier I'm going to create a section tag with the class about area and inside this about it here I'm gonna have a container fluid class so I'm going to say here container to it this class will specify 100% width to the division tag and make it responsive now inside this div I'm gonna have a simple row and inside this row I'm gonna have column I'm gonna have two column here so I'm going to say call ge6 and i also want to add a one more class here which is call m.d. well I'm going speech by six column space to the large device and twelve column space to the medium device I'm gonna copy this division tank so I'm gonna play all shaped down K to duplicate this line and in the first column right here I'm gonna create a division tag with the class about image and inside this about image I'm gonna have an image and I want to specify source attribute plate which is I'm gonna specify here I am G folder then select about Spain G file so I'm gonna select this file how about a spin G and I'm gonna say here alt attribute about us along with that I'm gonna specify class I am G fluid save the changes and as you can see here I have this beautiful image here on the left side in the second column right here I'm gonna fall specify custom class so I'm gonna say here about title and in this day I'm gonna create h2 heading tag I want to specify class to it which is text uppercase this is a global class which we created in the global dot CSS file right here and inside these h2 heading tag I'm gonna have a sponte I want to specify let me text I'm gonna create a span tag again down here and just say here introduce and create the spawn tag again and say myself along with that - this is - meaning tag I want to specify some padding top so instead specify any custom padding to it I'm gonna call padding top bootstrap class so I'm going to separate off five so this will create this text here and now just out of that just out of this h2 heading tag I'm going to create a division tag here with the class paragraph and along with that I want to specify top and bottom padding to this paragraph so I'm going to call a boost up class pending by 4 so this with add top and bottom padding to this paragraph then I want to add 75 percent bit so I'm gonna call boost up class w 75 right so this class was busy for 75 percent weight to this day just after that I'm gonna create a paragraph and I also want to create a class here banner now this is a lower class which we're going to create in the global dot CSS file but just for now I'm going to just piss over some text here circle and say here varam 20 when you say here lorem 20 and press tab this will add twenty ten words inside this paragraph if you want you can add more than that as well so I found only 20 volts so I'm gonna put bottom 20 here this stuff and then I'm going to create a paragraph again with the class banner and inside this paragraph I also want to add a demo text but at this time let me show you how we can get the demo text from Laura website so I'm gonna just open a browser and just say here Lauren and from the first website right from here you can get your demo text right so I'm gonna just copy this demo text from here so I'll just copy this text and paste it inside this paragraph like this you can see you have this text here and we'll just close this tab and I'm gonna add a button here just out of this division time right here I'm going to add a button and the button is type of button and I want to add a class which is VD n which is booster Plus then I'm gonna add my global classes which is BTN then I'm glad primary but at class and then I'm gonna say text upper case and to the button I'm going to specify text download CV save the changes Hanna can see you have your predefined button here we just pasted by the primary style to this button as simple as that now just off with that let me just style this section so I'm gonna open the style of CSS file and inside this file I'm gonna style this section so let me just toggle this window on the right side now let me just add styling to this About section so what I'm going to do is I'm gonna open the starters aces and inside is Tyler chases down here I'm gonna create a command multi-line comment and just say start about area and down here I'm going to create command and just say and about area now inside this command I'm gonna pull select about area so I'm gonna select the site main then select about area and I want to add a padding to it so I'm gonna add padding a trim the top and bottom and 5mm to the left and right when I save the changes oops I think I misspelled here area and I save that yes you can see I have some padding to the top and bottom and have some padding to the left and right now just out of that I'm going to select site mean then select about area and then select about title I'm gonna select h2 winning tag and select all the spawn tack so I'm gonna select all these spandex and just out of that I want to specify display block property to this contact so I'm gonna say a display block when I save it you can see I have some display block to this sponte and I want to specify font and the font is going to be normal or the font style then I'm going to specify bold to the font weight and specify font size is going to be 49 pixel and line height is going to be 60 pixel and the font family I'm going to specify a nice Roboto when I say the changes you can see I have this pond right here and just out of that I'm going to specify a little spacing and it's going to be 21 Pizza say addition yes so this will add some space between these ladies and just start that I'm gonna select the paragraph so I'm gonna select this class is so I'm going to select the site main about area and this about title I just talked to that I'm gonna select paragraph and select the descendant paragraph I want to specify padding to it so I'm gonna say padding 0.4 for the top and bottom and for the left and right I'm gonna specify 0 say it's changes this will add some padding to this paragraph now if you open the index dot HTML file you can see we have this power global class to this paragraph so I'm gonna just create this global class in the cloven dot CSS file and down here I'm gonna create this global class so I'm gonna create here para and I want to speak about this power class only for the background so I'm going to select a P here and then specify dot para so to this paragraph I'm going to specify color and the color is going to be a variable so I'm going to call a variable here which is text color save the changes I'm going to specify haunt normal then specify found with 560 pixel or the font size I'm gonna specify 25 pixel line height and I'm going to specify one family is going to be Roberto Save Changes now as you can see your about us in here is now ready as simple as that you have your image title description and the button so just start this about this area I'm going to just move on and just create this brand area so let me show you how you can create this brand area so let me just open my website down here I'm gonna create this brand area so I'm gonna just open my index dot HTML inside this file I'm gonna create this ban area down here I'm gonna post the multi-line comment here and just specify here brand area and just talk to that I'm going to just duplicate it so I'm gonna press alt shift down key to duplicate this line and just specify here and brand area now insert this brand area I'm gonna force create a section so I'm gonna say here section brand area and inside this brand area I'm gonna force create container fluid class inside this container fluid I'm gonna create a row and inside this row I'm gonna have two columns so I'm gonna create call exhale sixth class I want to specify six call of space to the extra-large device and just start that I want to specify call Angie twelve if I were to specify 12 column width to the large device and I want to specify column D twelve because I want to specify twelve columns width to the medium device so when I press tab I'm gonna have three classes here so the first class will specify six column space to the large device so I'm going to duplicate this division tag down here and in the fourth Dave I'm gonna create a nested grade columns so I'm gonna create here again a row and inside of this row we can have four column space division tag so I'm gonna create here call LG for class along with that I'm gonna say call m.d. six and call sm6 class I'm going to create a nested grade layout here so I'm going to first create a row and inside this row I'm going to have two columns and inside the first column I'm gonna have again a new row with three columns so I'm gonna specify four column space to the first column then just duplicate it and duplicate it again we have three columns here in this row so I'm going to specify six column space to the medium device and six column space to the small device now to start with that in the first division tag right here I'm gonna create a single brand so I'm gonna create here a DVD tag with the class single brand now inside this brand I'm gonna have an image so I'm going to call an image here and it's so sad rebuild I'm gonna specify image folder and then specify the brand folder and select logo one dot PNG file and I'm gonna call here band one save the changes when I save it you can see I have this brand here at the bottom now I'm not gonna type it again instead I'm going to just get about this division time and I'm gonna just duplicate this division tag this one right now I'm going to select it and press alt shift down I'm gonna duplicate it two times so I'm gonna duplicate it and just start that just change this image the logo to this became prime - and I'm going to change this brand to brand 3 and this image became logo trick when I save the changes I'm gonna have here three images now this start that what if i duplicate this line again if i duplicate it again I'm gonna have my fourth brand down here now if you calculate the width of these days it equals to 12 column so that is by the next tape will display in the next line number which is duplicate this division tank so I'm gonna just press all shaved down key and duplicate this division time and I want to change this image I'm gonna say here local for this became brand for I'm gonna change this brand to brand five and they speak a logo fine this image became local 6 and this brand became brand 6 I just on that I'm gonna change this brand to brand 7 this became logos Simeon and I'm gonna duplicate it again so when I select it press hold shift down duplicate it two times so this image became logo eight this became brand eight and last I'm gonna specify here local nine and this became brand nine and I say the changes you can see I have here nine brands I'll just start that let's move and create the second column inside the second column we have this beautiful ten years experience then we have this beautiful call now icon here so to create the second column and we just open index dot HTML and in the second column right here inside it I'm going to first create a kitchen tag with the class experience area and inside this experience area I'm gonna create key flags and create flex row class so I'm gonna specify display flex property to this division tag along with that I will say flex direction row to start of that I'm going to call years area and inside this theme I'm gonna have h2 heading time and I want to add a class to it which is padding three so this is booster plans those PC of my pairing tree to the top left right part of corner just out of that I'm going to call a custom class years and just say here damn if we want to change the specs as well then create h2 heading tag again and in the span tag appliquéd years again create a sponte and then say experience I just talk that we respond I can save working save the change a scientist started that you can see you have your ten experience here just start with that just start with this division time right here I'm gonna create deflect class again so I'm gonna say d-plex likes flow along with that I'm gonna call Blake's wrap class and call a custom class call area just top of that inside this deal I'm gonna have now just talk to that inside this team I'm gonna create his contact and it's at spawn I'm gonna have an icon in now we haven't included any icon from the font or some website but now the time is to include it so I'm going to open a website and right here you can see we have this fount of some website and we'll just include Khan icon inside my project so I'm going to open the icons from the menu and from the search box you can search for your favorite icons so I'm gonna select the phone icon so I'm gonna say here phone in the search box and and I'm gonna select this icon so I'm going to click on it and to include this icon you just introduce these classes so use them to include this class to use this icon so instead of using this class assemblages copy this hi tank so I'm free just click on it I just pasted inside these spawn tag like this save the changes and I save it you can see in the website we have here an icon I want to increase the size of this icon so I'm going to just specify a class here if a 3x so this will increase this font size three times now just after that I'm going to just create here just start to the spawn tag down here I'm going to create for division tag with the class call now inside this call now I'm gonna have an anchor tag side this anchor I'm going to say come now along with that I want to specify class to it so I'm going to specify class and in the class I'm gonna say takes uppercase then specify all heading down so I'm going to specify H for bootstrap class to this anchor tag and then I'm going to specify a global flowers formed a robot oh right just started that I'm going to create a span tag and inside this pond tag I'm going to specify a number so I'm going to call in the bracket I'm going to say a nine one plus nine one and then I'm gonna specify my number here so I'm gonna say add that we'll see how so I'm gonna just put a demo number and just sort of that do they spawn tank I'm gonna specify class which is found for photo and heading by 2 and this will have top and bottom padding to this spandy save the changes now you can see we have this canal section here let's move on and style this beautiful section so I'm gonna just open the style or CSS file and just toggle this window on the right side like this and to start the section I'm going to create here multi-line comment and just say start band area and just close this comment down here as well and Brad idea now inside this command I put the first select site main class so I'm going to say here site me then select Brian area class and then specify padding to it so I'm gonna say here padding which is going to be one frame to the top and bottom and 20 right to the left and right just out of that I also want to add margin bottom to it so I'm going to say margin bottom and it's going to be program save the changes so this will have some padding and bottom march into this area just drop that I'm going to say like call LG whole class so to select this area up in the first select side main then select brand area and then I'm going to select row and then select call LG for class now if you open the index dot HTML file you can see I have here two rows so I'm gonna just create a custom class which is first row and save the changes and I'm going to use this class to select this call in g4 so I'm gonna say here get rid of this door and just say here first row and this call ng full class I'm gonna specify display it's going to be blanks and I want to Center all these brats so I'm going to say here justify content center so this will Center all these parents to start that I'm gonna select I'm going to select this single parent class so I'm gonna first select these side main brand area and this first row class and inside this first row I'm gonna have call a LG for class and inside this college for I'm gonna have single brand class along with that and to this single brand I want to specify so I'm gonna follow specifying border one pixel solid and I want to specify color to it so I'm gonna call a variable border color so as you can see here we have a border to this brand icons just out of that so I'm gonna say here text-align:center then specify padding to it so I'm going to say here padding is going to be one point a tram to the top and bottom and 0 for the left and right so stuff that I also want to add march into it which is 0.9 trium to the top and bottom and 0 for the left and right say the changes and you can see here we have this type of result just out of that I'm gonna specify some width so I'm going to say here width is going to be 180 pixel and I want to add a height to it the height is going to be 100 pixel along with that I'm going to change the cursor pointer and I want to add transition transform point force again it's so easy to use and when you save it you can see we have this type of visit here just out of that just I'm going to select this single band again so I'm going to copy it copy this selector list it down here and now select this image so I'm going to select IMG class to select these images and to this image I'm going to specify width which is going to be 50% like this and just out of that I'm going to select the single band again so I'm going to copy it paste it down here and I'm gonna create how it effect on it so I'm gonna say Homer and what I want I want to specify box-shadow to this single brand flux so I'm gonna say box shadow copy live and function and just call a variable box shadow you start with that I would specify transform and specify scale 1.5 save the changes and when you hold on it you can see you have this type of result and now I want to specify filter property to this image so I'm going to select the selector puts it down here and when I hover on the single brand I want to select the image tag specify filter brightness save the changes when you hold on it you can see I'm going to change the brightness of this image all right as simple as that let me just move this window on the right side so let's start the second column so I'm gonna post select this experience area this one so to select this area I'm gonna say site main then select brand area and then select experience area and I want to specify padding-left to it so I'm gonna say padding-left it's going to be one gram and down here I'm gonna base that selector again so to select the experience area and then I'm going to select sponsor and to this contact I'm going to specify display law when I save the changes you can see I just pasted if I display block to this contact just stop that I'm going to select this experience area again so I'm gonna paste it down here and select here's area so I'm gonna select this year's area this one under this use area could specify background I want to specify background to it I want to specify an image here and I'm going to specify image so like the IMG tag and then specify client info BG right and just art that I'm gonna say here no-repeat and I want to specific vertical position which is 45 pixel and 20 pixel to the left and right so there it is you can see if we have this image here just out of that I'm gonna specify padding to it and padding is going to be to the top and bottom and zero for the left and white temple specify with 40 time and height is going to be 18 we're just out of that I want to add some padding left to this es8 here so I'm going to say here padding left it's going to be at rep and the last property is going to be the position I'm gonna specify position:relative say the changes and you can see we have this type of this earth here so I just added a padding left to this area I just increase the unsuspicious of a width and height to it now I just on that I just want to create a background panel to this area like this too this background panel I'm gonna just open the index dot HTML file and inside this final I'm going to just create here just talk to this division tag right here I'm gonna create a div with the class BG panel and just start of that I'm gonna open the style of CSS and I'm gonna select this BG panel so I'm gonna fall select this experience area so I'm going to copy it paste it down here and then select BG panel and to this BG panel I'm gonna fall specify position and this is going to be an absolute position then I'm gonna split left property and the left property is going to be minus 190 pixel top is going to be zero so I'm grass a Dom 0% just out of that I want a specific background color I will not specify here hex value so I'm going specify hex value here and just save the changes now let me just open my website and right here I'm gonna post pitch by width when I specify weight to it you're going to get this area you can see this area when I specify width and height to it so it is going to be 400 pixel and height is going to be 400 pixel when I say you did changes you can see I had this area here now I just thought that I want to add margin left to it so I'm gonna say margin left margin that is going to be 340 pixel and I save the changes you can see I have some margin to this area right now just art that I want to specify it said index to this property the sale in its property space for the stack order of neelam and an element with the greatest recorder is always in the front of element with the lowest recorder so if they said index property is minus 1 then this panel is behind the +1 said index value right so I'm going to specify minus 1 to this PG panel and save the changes right so we have here a panel image just after that I'm gonna select the yours area this one so I'm gonna copy it instead of typing it again they stay down here and you select yours and to these ears I'm gonna post PC but font and font is going to be forced I'm going to specify font-style:normal 10 space if I found faith bold and the width is going to be 84 pixel and line height is going to be 40 pixel just after that I'm gonna call font family to a photo save the changes and I'm gonna add this one to these here is experience tanks and just started that I'm gonna specify color to it and the color is going to be a primary color so I'm gonna call a variable primary color to say this this was favorite color to these tanks just out of that that index is going to be 2 right say it reaches just start with that I'm gonna just select its Eddie again I'm going to just select this here's Eddie again so I'm gonna copy it puts it down here and just select h2 heading tag and select all the spawn tax so I'm gonna select this area de-spawn tax and I want to specify pawn to it the font is going to be normal then specify 600 point with then specify 22 pixel font size and 30 pixel line height and one family is going to be Roberto say it is let's see we have this phone to this contacts you stop that just select the call area so I'm going to force select this experience area and I'm gonna select call area and this call area I'm close piece over some parent left so I'm gonna here padding-left is going to be been rep save the judges and as you can see here I have padding left to this call area now I will add some padding to this icon so I'm going to open the index.html file and right here I'm gonna add padding X it's going to be three when I save the changes this will add a left hand by padding to this icon right just out of that as you can notice here I have here on Roboto do these numbers now let me just create this class somebody just copy this class and create this class in scientic level classes so I'm gonna open the global dot CSS file and down here I'm gonna create that class and specify found family and the font family is going to be Roboto so I'm going to call here where rocoto Save Changes this will add to Votto phone family to this number as simple as that now as you can notice here the brand area is now completed and it's look beautiful now let's move and create the next section and edit section it's very easy section here in this section we're gonna create a services offers so in this section we have here a title paragraph and we have cars here right so let me show you how you can create this beautiful section so I can open my website and just open the index dot HTML file and inside it down here I'm going to create this Services section I'm going to create a multi-line comment and just piece over here start the services area and just close this command I'm going to just duplicate this and services area just start with that right here I'm gonna create a new section and specify class to it which is services area and inside this section I'm going to create a container and we have here inside this container I have a row here and I'm gonna create here a column so I'm gonna create a call LG well so I'm going to specify 12 column space to this division tag then I'm going to create a chi one heading tag with the text services offers along with that I want to add a classes to this h1 heading tags some kind of sake class text uppercase then I will specify title is going to be text so this is the global class which are going to create after a few minutes but just for now just pitch by this class and just save the genius when you say that you use you can see you have here services of a section right now just started I just start this h1 heading down down here I'm gonna create paragraph with the para class we already have this para class in the global section so we don't need to create that again and inside this paragraph I'm gonna have a simple text so I'm gonna put some demo text from Lauren right here Save Changes and just out of that when I open my website you can see we have this type of result but now what I want I want to send it this text to send to this text I'm gonna specify to this column I'm gonna say take center bootstrap class along with that I'm going to specify one custom class services title you can see now we have the text at the center of this document now I just want that let me just create this beautiful 4 cups to create these cards I'm going to just open my index dot HTML file and inside this file just after this row right here just start with this room I'm gonna create a container again and to this container I'm going to specify a custom class services list and inside this services list I'm gonna have my different cards so I'm going to first create a row here and inside this row I'm going to have 4 columns so I'm gonna create here a deal with the class called 83 and along with that I'm going to call call md6 class and I'm going to call call s/m 12 class now let me explain these classes I'm going to specify three call up space when I have large device I'm going to specify six column space to this division tag when I have medium device and when I have small device I want to specify welcome space to this division tag now in the first column right here I'm gonna force create services class and inside these services I'm gonna have services image so I'm gonna create a division tag with services image and along with that I'm going to add text center class of bootstrap and I what we are padding top and bottom for to this division tag just our that inside this day I'm gonna have an image and I want to specify an image here so I'm going to select my image folder then select the surfaces folder and select my services image here and in the alt attribute you can specify anything here so I'm gonna say services one now just heart of that just out of this DVD TAC I'm going to create card body this is a booster plus so I'm gonna say here card body I'm gonna call this bootstrap car body class along with that I'm gonna say text center and inside to Steve I'm gonna have H five heading that and I'm gonna specify text to it which is WP developer to this H prime heading tag I'm going to specify class car title which is a bootstrap class then specify my global class takes uppercase and then specify font Roboto the global class just out of that I'm going to add a paragraph here with the class car text along with that I'm gonna say text secondary and just specify some text inside this paragraph so I'm going to copy some text and paste it inside this paragraph save the changes and when I open my website you can see I have my first card here right now let me just create three more cards so what I'm going to do is I'm going to just copy this first card this one and paste it down here I'm going to do the same until the same so I'm going to create three more cars so we have four cards here just out of that I just want to specify some style to it and just change these images and the text so I'm gonna post open this second so I'm gonna just change this text to the second gone so I'm gonna say here UX UI design then this services image became s2 and I'm going to change this to God and this became five design and image is going to be a three services became h3 opportunities alt attribute to services for and this became is for I also want to change this text so I'm going to change it to SEO optimized say the changes now you can see we have this type of result here and the last thing we need to add some style to it so to add a style and just open the style or CSS and I'm going to total this window on the right side like this now in the standard CSS file I'm gonna first create a multi-line comment here and just say here services area I just close this command so I'm gonna say here and services and inside the services area I'm gonna first select service area section so colorful select site main class then select services area section and I'm forward to specify some padding to it some glass a padding seven Ram to the top and bottom and to damn for the left and right so this will add 7/10 to the top and bottom I'm gonna select the service area again so I'm gonna copy it paste it down here and I want to select service title so I'm gonna say service title so I'm going to specify here a padding it's going to be 0 and 14 Ram save the changes this will change the padding of the service area and just out of that I'm gonna select the h1 heading tag somewhere I select service title area so I'm going to copy it paste it down here and I want to select h1 heading tag and specify font size to it so I'm gonna save font size is going to be 35 pixel when I save the changes you can see I have 35 pixel font size to this h1 heading tag just started that I'm going to select this services area so I'm gonna first select site main then I'm gonna select services area and then select services right in this area this one and once I selected I'm going to just specify background color to it and I'm going to specify back down and I've got to add RGB a color to it so I'm going to say RGB a and I'm gonna specify values here 248 then specify 252 and then 253 and the Alpha value is going to be zero point nine seventy thing Save Changes this will add a background color to this area right like this and just out of that I'm going to specify padding to it and the padding is going to be to ramp to the top and bottom and zero for the left and right then it is going to be 16 where and Marcin is going to be Vibram to the top and bottom and point five ram to the left and right along with that I'm going to specify transition on box-shadow and I want to say point seven minutes again is and I say other changes you can see I have this type of result here I just added a margin padding and have a background color to these cops right here I'm gonna select these services again so I'm gonna copy it press it down here and create hover effect on these services so I'm gonna say hello and I'm going to specify box shadow to it I'm going to be to a variable value to this box shadow so I'm Chris a box shadow here say the JJ now when I hover on these cars you can see we have this beautiful box shadow right as simple as that now as you can see the services section is now ready in the next section we are going to learn how to create this recently done project section in this section will control the Sun how to create this title and filter all the images like this right in this section we'll understand how to create this title then I'm gonna have here different images we have this beautiful image gallery here and we can filter any image from this gallery let's say I want to filter popular images then I'm gonna just click on this popular right I'm gonna have my popular images if I want latest I'm gonna click on that if I want for living I'm gonna click on that and if I bought upcoming images I'm gonna click on that so I can get the filter images here and if I want to get all images I'm going to click on this all image so this will bring all images in front of you you're also going to see how to create this hour effect on these images and also you can understand when you click on this image how to create this beautiful carousel so Scarah devil used to navigate to the different images like this you can also close this navigation let's see how to create this beautiful section so lot more to learn in this section so let's get started and quickly create this beautiful section so let me first open the index dot HTML file and inside this file down here just out of this services area I'm gonna create multiline command and just specify here project area and just out of that I'm going to duplicate this line down here and just change this tool and project area and in this project area I'm going to create a new section and I'm going to name this section project area and inside this section I'm gonna have a container so I'm gonna create a container here and inside this container I'm gonna have a division tag with the class project title along with that I'm going to specify some bottom padding to these titles so I'm gonna add bootstrap class reading bottom fine just out of that inside this project title I'm going to create h1 heading tag with the class text uppercase along with that I'm also going to have title h1 class we are going to create this class in the global dot CSS file but just for now just specify this class and in the h1 tag I'm going to say it is simply and then project and just out of that create h1 tag again and specify text quality work along with that don't forget to add a class to it so I'm going to add a class text uppercase and call title h1 plus alright save the changes and when you save it you can see in your website you have your title just start with that just start of this division tag down here I'm going to create another day with a class button group now inside this button group I'm gonna have different buttons so inside this button group I'm gonna have these buttons the all popular later is following an upcoming button if you want you can replace these buttons with the anchor tag as well but I'm going to use here butter so in the next artists new file I'm going to simply create a button and this is the type of button so I'm going to say type button and this button I'm going to specify all text along with that I'm going to specify class to it Act II and just out of that I'm going to just create one more button here so I'm gonna create button it is a type of button and I want to specify here popular I'm going to just duplicate this button and change its text to latest and this became following just out of that duplicate it again and just change it to upcoming and when you save it but you have your different buttons right at the bottom now once we have these buttons let's move on and create these beautiful images so to create this beautiful images section I'm gonna first just off this division tag down here I'm going to create a row and specify a custom class grid inside this grade or you can say inside this row I'm going to create four column space division tag so I'm going to create here call a g4 along with that I'm gonna call call md6 and call SM twelve so we know that why we used these classes and along with that I'm going to just specify element item class which is a custom class to identify this type of image we're going to use inside this Dave I'm gonna create a class here latest so inside this div I'm gonna include latest type of image so when we filled out this image I'm going to initialize this is my latest image I'm going to just create here to which in tag and just say our project and inside this our project I'm going to create IMG class and inside this IMG I'm gonna have IMG tag and to this IMG tag I'm going to specify I'm the folder then specify the portfolio folder and then specify the portfolio image and I'm going to say here portfolio one and save the changes and I save it you can see I have this image here to start of that just stopped at this deal to start this IMG Dave I'm gonna create here title division tag along with that I'm gonna add padding why for this will add top and bottom padding to this division there and inside this Dave I'm gonna have pitch all hitting guy with the class text uppercase and inside this edge for hitting that I'm going to specify a text so I'm going to specify minimal design I'm gonna just create here a span tag and to this Montague I'm gonna specify class text secondary and I'm going to finish by here lettest the type of post and just say here a fort folio say this it is and when I surveyed you can see you have here a title and the type of post just out of that I'm going to just duplicate this post so I'm gonna just copy it right from here so I'm gonna copy it press it down here and just want to change this type and this type of popular post so I'm gonna say here popular and also to change these letters to popular and I'm gonna change these tags and what don't forget to change this image as well so I'm gonna say here p2 and this became portfolio to save the changes and when you open it you can see you have your second image here just order that to create a third image just copy this column like this and paste it down here and just change this image so I'm going to change to P 3 P 3 and this became portfolio 3 and along with that I don't want to change this category of this post so I'm going to leave it as it is and just change this text and this became female light and when I save it I'm gonna have my third image right as simple as that now before we move on I want to specify some style to it and then create that let's talk these images so let me first open the style add CSS to style this section so I'm going to just open the style or CSS file and just toggle this window on the right side like this and to start the section I'm gonna force create here I'm going to add a multi-line command and just say project area I'm going to close this area so I'm gonna say and project area right now to start this section I'm gonna simply first select the side main class and then select project area and to this project area I'm going to specify padding and this bearing is going to be 4 m to the top and bottom and I'm going to specify 0 for the left and right save the changes and just out of that I'm going to just select I'm gonna select the buttons so I'm going to select this selector paste it down here and I want to select button group class so I'm gonna say here button crew and select my buttons if you want we can replace this button with the anchor tag as well just not that I want to specify background and the background is going to be transparent then I'm going to specify border I want to remove the border so I'm gonna say border none' font is going to be normal 516 pixel size of the font family and the font high it is going to be 130 pixel and I'm gonna specify the font family Roberto save the changes and it just started that this will add on height and font family to these buttons takes transform is going to be uppercase save the changes so this will capitalize this section right like this now just art that I won't speech my padding from the second button right from here to specify this type of padding I'm going to first select the selector and down here I'm gonna call plus operator and select the button again so what I want to do is I want to select this button from the second element so this will select this button from this popular text right and I want to specify padding left and it's going to be treating now just out of that what I want I'm going to speak to a foreign family today's text I'm gonna pull select project area so I'm going to copy it paste it down here I'm going to select grade class then select the our project area and then select the title area and then select H for heading tag and took this H for heading tag I'm gonna specify font and the font is going to be normal 700 then specify font size is going to be 25 pixel the line height is going to be 12 pixel and I'm gonna specify font family Roboto so this was busy with some point to this title right now let's move on and see how to filter these images so as you can see here I have the latest post then we have the popular post here so when I click on this popular I want to filter this popular post and when I click on this latest I want to get the latest post but for now I am going to remove this horrible outline and in the global section down here I'm going to remove this horrible outline so so in the global dot CSS file I'm gonna post select the button and I'm gonna select focus then select the button again and I'm gonna select active I'm gonna remove this outline from the focus button from the active button and when I hover on it I want to remove this outline when we hover on the button as well just start that so I'm gonna say BTN active we're also going to remove from the active class so I'm going to say PTM active and Jessa here outline zero pixel and to order the default property I'm gonna call important keyword just out of that box shadow is going to be none I just override the default property using imported keyboard solution yes and when you click on this button now you're not going to care this horrible outline here right like this now what i want when i click on this popular post I want to filter these two images and when I click on this latest I want to filter this image to create a filter and to filter these images I'm going to use isotope plugin so I'm going to just open a new tab right here I'm going to say I also talked rjs so I'm going to search for this plugin and just use it in this website so I'm going to just open these filter and short magically out so when you open this website you can see you can filter different sections right so the first thing so you need to download this library so to download it you just need to click on this download button so I'm going to click on this download mean to our J's file so when you click on it you can download this package so just copy all this coal from here just copy it and just open your project and inside your project I'm going to create another directory right down here and in the truth directory I'm going to create a new folder and say vendor and inside this vendor folder I'm going to create another folder and name it I also top and inside this us at off I'm gonna create a new file call I also top dot mean dot J's and inside it I'm gonna paste this code save the changes and just close this file now what do you need you need to first link this file to your index dot HTML so just open the index dot HTML file and down here just start this boost up library I'm gonna create here a command I'm going to add here a command and just say I as a top J's library and just out of this command but I create a script I with a source attribute and I want to specify this vendor is a top JS file and now just out of that I'm gonna filter all these images to filter these images you just need to add data attribute to your buttons let's say if you wanted to filter this popular images to filter it just select your button popular button right from here and an attribute data filter and to this data filter you need to specify a class I want to filter all the images which has popular class so as you know we specify here a popular class to this image and to this image so using this class I'm going to filter my images so as you know we have this popular class to these images so I'm going to copy it and inside this filter I'm gonna specify that with the door prefix now just save the changes and I also want to filter the latest image so I'm going to copy this latest class and as you know we have the button here latest and using the theta attribute data filter attribute I can filter the latest image so I'm gonna use latest class here so now when you click on this lettuce button this will filter the latest image and when you click on this popular pattern this will filter popular images now once we've done that you need to involve this library that when you click on this popular button you want wilter all the popular images and when you click on this lettuce button you want to filter all the latest images to do that I'm going to create a new file in the directory I'm gonna create a new file which is main file so I'm going to create here main dot J's file which is a custom JavaScript files I'm gonna link this file in the index dot HTML I'm gonna link this file down here I'm going to create a multi-line comment here and just say custom Jarius choir and right here I'm gonna say a script source attribute I'm going to specify J's folder and select main dot J's file now once a link this file just open it and just call document dot ready function so I'm gonna call a jQuery document dot ready function so when you're rock a minute is completely ready I'm going to execute this function now inside this function I'm gonna first select all my buttons to select a button in jQuery I'm gonna create a jQuery variable BTN and to select buttons I'm going to use CSS selector so using jQuery it's very easy to select any tag so I'm gonna for select project area then select button group and then select my buttons this will return all the buttons inside this variable I want to create click event on all my buttons so I'm gonna select all my buttons using PD ins and call click event and inside this parameter I'm going to call a function and handler function with event parameter the first thing we need we need to remove the active class from the button so as you know we already have this active class to this button to the first button right but when I click on the second button I want to add acting class to the current button and remove active class from all the taste of the buttons so I'm going to just do that using the main door J's file so down here I'm going to first select this selector select my all buttons so I'm going to copy it paste it down here and remove class so I'm gonna say here remove class and I wanted to move active class so but I see here active so I'm gonna table active class from the all buttons I'm gonna select event parameter and call the target property so using this property if you are going to get thicker and click button and to this button I want to add a class so I'm gonna say here class list and I want to add active class so I'm gonna see here active now just out of that I want to get data filter value from these buttons this value now to get this value I'm cooking it here a variable led selector is equal to and in the jQuery selected I'm gonna call a dot target I want to get the data filtered attribute someone call attribute method and just say data filter so once I have this data filter value in the selector I can filter all this data so you just need to call jQuery object then select the project area and then select grid and to this grade you need to call library I use the top and in the parentheses you need to filter I want the filter selectors right that's it and just return false save the changes when I click on this popular post I'm going to filter my popular images so when I click on this popular post oops something is going wrong yeah I don't want to select buttons here instead I want to say like only button right like this save the changes when I click on this popular post I'm going to filter its popular post and when I click on this latest I'm going to have my latest post right like this and when I click on this call I'm good to have my all images as simple as that now just out of that we know that how to filter all these images so let's clear the rest of the images and we'll just open my index dot HTML file and inside it I'm going to create my rest of the images so I'm going to copy this division tag paste it down here and I'm going to change this image to before this portfolio became portfolio 4 and I'm going to change this text as well so for a change it to 4th here and you sort that and for to change the category and I want this image in the upcoming post so I'm going to see here upcoming I'm gonna change this class as well so I'm gonna say here upcoming just after that I'm gonna copy this deer boost it down here and just out of that I'm going to just change this image to be five this became portfolio five I'm gonna change this text and this became multiple form and I'm going to leave this category as it is just copy this Dave paste it down here and just change this category now and this became following and I'm gonna change this image as well I'm gonna change it to p6 this became portfolio six and the text is going to be together sign I'm gonna change this category text as well following say the changes and just out of that minimize it just copy it again paste it down here and I'm gonna change this image to p7 just became portfolio seven and I'm gonna leave this category as it is and just change this text to clean heaven just copy this leave again paste it down here and I'm gonna leave this category as this change this image to p8 the portfolio became eight and I'm gonna change this text and I'm gonna say here fly me just out of that let me add the last category I'm gonna copy it paste it down here and this is going to be the upcoming category so I'm gonna call here upcoming and change this image as well like this and don't forget to change this text to camera lens the category is the type of upcoming save the changes and now don't forget the specific filter attribute to these patterns so I'm gonna call here data filter and I'm gonna say here follow for the upcoming I'm gonna add data attribute data filter dot upcoming I just thought that for this button I'm gonna say data filter and call here Astrid now you can see you have your different images here I want to filter it so when I click on this popular I'm good to have my popular image when I want latest I'm gonna have latest following coming and my all images right simple as that how to filter all this images using ISO top plug-in now just out of that I wanted to just change this J out now this looks designed but I want to change it and make it more attractive if I open my finish website I'm gonna have this type of layout to this image gallery but what I want I want to change this loud and remove these extra spaces so when I click on this all button you can see I have this beautiful layout here I want to change this finish layout do this right so I just want to trigger click event on this all button and then I'm gonna get this type of layout to my images so I'm gonna just open my index dot HTML file and it is file I'm gonna first specify an ID to my all button to access it in the jQuery so I'm going to specify here an ID so I'm gonna say here ID BTN one all right I'm gonna save the changes and open the main door J's file and down here just doctor this is a top plug-in just start to this click here and I'm gonna create here I'm gonna I'm gonna call the selector and I'm gonna force select the project area along with that I'm gonna select button group and then select a first button so I'm gonna see Lake button using an ID so I'm gonna say BTN one just out of that I just wanted to call a Treasury man of jQuery so I'm gonna call trigger and in the parenthesis I'm all to call in event so I want to call click event on this button so I'm going to say here click save the changes and when I save it so I have this type of layout here that's great the last thing I just want to go an and how are effect and when I click on this image I wanted to create a beautiful carousel so to do that I'm gonna open the starter CSS file and inside it I'm gonna create an effect on these images but before we create any whole effect on these images I wanted to create this carousel to these images so we can navigate to the different images and then I'm gonna create this how effect I'm going to just add a new library in this website to create this beautiful carousel so I'm going to open a new tab and search here magnifico pop-up we just need to open this Magnifico pup plug-in and you can see here we have this magnifique pop-up responsive jquery plugin so i'm going to just open it and you can see here we have some simple demos here of these images you can check that out right I'm gonna just use this simple type box gallery I'm gonna just download this Magnifico pop-up so what can go do is I'm gonna just download it using the github so I'm going to click on this github and download this Magnifico pup plugin so I just need to click on this clone and download and download the zip file I already have this file so I'm gonna open it now what's it download this package and you come to get the zip file of magnify pop-up master file so just need to extract it someone extract it here you just did copy this folder so I'm gonna just rename it and I'm gonna just remove this master right like this then I'm gonna copy this folder and and inside my project directory in the vendor folder I'm gonna paste that folder down here right now I have this plugin so what I want I want to link it to my website so I'm gonna open my project and open index dot HTML file and in the head section right here before the styling right here I'm going to just create a multi-line command just call here magnifico Papa CSS file I'm gonna just link it using the link tag and in the link tag I wanted to link dependent folder the magnacube Papa folder that I'm gonna select the dips folder and then select this CSS file this magnific pop-up large CSS right and before the closing body tag down here before your custom javascript file uncle just link magnifique pop-up right here so I'm going to create a command I'm going to create a multi-line comment here and just say magnifique mop-up script file just after that I'm gonna call here a script tag and using a source attribute I'm gonna link that vendor magnifique pop-up J's file so I'm going to link this jQuery magnifique pop-up mean dot J's file save the changes and now we can use this magnifico plug-in in your website so to use this plug-in I just need to back to your design right here and what you need to do this I just want to first open the magnetic pop-up website from this website you just need to open the documentation and from here you just need to false link both these files this is his file and J's file we all return that we don't need to do that again I just need to create an anchor tag with this class test pop-up link and specify an image path in the HT of attribute and in the open pop up you need to specify your image and to start that in the JavaScript file we just need to create and select the image link and call the Magnifico pup method right let me show you how we can do that so I'm going to just open my website and just open my post project area section gallery so this is my first portfolio image right so I'm gonna just grab this image and create an anchor tag and to this anchor there I'm gonna post specify a class so I'm gonna specify a class here and just need to specify this class name to this at Kodak you can specify your own class name also but for the reference I'm going to choose this class name so I'm going to copy it and paste it in the class like this and you start that in the H wave attribute you need to specify your image so I'm going to specify an image here but I choose the portfolio and then select my image you start that in this anchor tag I'm gonna add my image tag like this so I'm gonna copy this image time pasted inside this anchor tag and just change this portfolio to photograph one and this became image one save the changes and just start that open your main tour J's file and down here you need to force create in this type of JavaScript code so you just need to force like your image then just call magnific pop-up method and then specify the type of image so I'm going to just do that in the main dot J's file so in the main dot J's file I'm gonna copy this code and paste it inside my main dot J's file in the main dot J's file down here I'm gonna paste that code right and we know that where we have this paste dot pop-up that link so if you open the index dot HTML file you can see we have this taste door pop-up dot link class to this anchor tag I just want to add here before this test I'm gonna say project area and then say button groups now just out of that once I select this taste pop-up link so I just want to initialize this is a gallery so you can see here if I specify this property to this magnetic pop-up method I'm gonna have different result but just for now I'm gonna save it now if we click on this image you're going to get your image you are not going to get a carousel here the reason behind this I just misspell something in the main dot J's file if if I open the main door Jace you don't see here I don't have this class inside this button group if you notice in this file we have this button group here and we have this class the great class I just need to remove this button group and just say here Greek right save the changes and now when I open this website and click on this image right so I have here a close button so just note that what I want I want to open this image is like a carousel like this right so we can navigate to the different images using this button using this next and this previous button so to do that you need to first and this property this gallery unable property so I'm going to open the main door J as well down here I'm gonna paste that property right save the changes if we click on your image you're going to get this type of the zone so you need to first create few more images so I'm gonna just get it off this second image or I can copy this anchor tag paste it down here and just change this image to p2 and this became portfolio to say if it's just I'm gonna save the changes and open my website and when I click on this image right so you can navigate now to the different images you can't navigate to the next because we need to change this href attribute as well I'm going to change it to p2 and now you can navigate your next image when you click on the next time previous button right like this just out of that I'm gonna do the same for all my limit items so I'm gonna just copy this anchor tag and just paste it replacing this image the third image right so I'm going to replace these two p3 portfolio alt attribute became portfolio 3 and this image became p3 then I'm going to do the same for this fourth image as well someone get rid of this image and copy and paste the anchor tag here change this history of attribute to before this became portfolio for and this became p for to start that company sank a time just after this column i'm gonna paste this anchor tag down here and change this image to be five though that became put 45 and this became b5 just are tied I'm gonna just do the same for this image as well for this 6-2 image I'm gonna say here p6 this became four blue six and this became p6 just after that I'm gonna do the same for these three columns as well I'm gonna place the panic attack again change this image to seven this became seven this also became seven I'm gonna do the same to the second last image as well I'm gonna paste this anchor tag change this image to p8 this became portfolio eight and this became p8 and the last I'm gonna replace this image with the anchor back and change this image to p9 this became portfolio alt nine then this became p9 and the other changes I can navigate to my different images so when I click on this image I can have an image here and when I click on this next button I'm gonna have my images here right so you can navigate to your different images using this beautiful plug-in as simple as that now you know that how to create this beautiful image gallery but now I want to create an whole effect on this image so I'm gonna open my style or CSS and inside it I'm gonna select this image to select this image I'm going to first like this area and this our project section so I'm gonna just copy it paste it down here and I want to select the image so I'm gonna pose like I am and then select anchor tag and to this anchor tag I'm gonna create our effect and inside this I'm gonna have an image so I'm going to select that image and to this image I will specify a property filter and call a brightness value and to this brightness function and put a specified one point one brightness and we're also going to call drop shadow function to drop a shadow and specify some values I'm gonna specify some values to drop some shadow to these images when I hover on it so I'm going to specify few values here and specify hex color save the changes and just out that when you hover on the images you're going to get this type of reverb right now as you can see the recently done project is ready but if you notice in the finish website we have different title here so we miss something here so if you notice in the index dot HTML file we have this global class this one title h1 to these h1 heading tags so we didn't create this so to create this class I'm going to just open the global dot CSS file and inside it I'm going to create this class so I'm going to just create here title h1 and to this class I'm gonna specify font and font is going to be normal bold font fit is going to be bold then specify font size 39 pixel and the line height is going to be 40 pixel just stop that call a power function and call Roboto variable say the changes and once I save it you can see I have this beautiful title here right now that's a the recent return project is ready we learn lots of things in this section right we learn how to create this title how to filter all these images using this beautiful plugin and also learn how to create this hover effect and when we click on this image how to create this beautiful next and previous image gallery right so we learn a lot of things intersections so in the next section we are going to understand how to create this client section in this section we're gonna create this title this paragraph you can have this beautiful carousel so we can see how to create this in the next section so let's see how to create it so I'm going to open my project and open the index.html file so I'm going to minimize this project area and just start to this area down here I'm going to feed this about client section so in this section I'm gonna show you how you can create this beautiful carousel with this title this paragraph and I'm gonna show you how you can create this card with the image title and the paragraph so I'm going to show you how you can create this beautiful autoplay carousel using oval care of 0 so let's see how to do that so I'm going to open my website and just start this project area down here so I'm going to create here a multi-line comment and just specify about me area and I'm going to duplicate this line like this and just change here and just say and about me area right now inside this about area I'm going to first create a section so I'm gonna say here section and create about area and inside this section I'm gonna first create a container and in the container right here I'm going to create a single row so I'm gonna create here a row and specify a bootstrap class text Center to Center all the text and now inside this row I'm going to create call 12 class so this class will specify 12 column space to this division tag and inside this I'm gonna have about title class and inside this about title I'm gonna have h1 heading tag and I'm going to specify here client say about me and I'm going to specify class to it to this h1 heading that I'm gonna specify here class takes uppercase and specify a global class which is title h1 just star to that I'm gonna create here a paragraph with the class para we already created this para class in the global section and just pitch by here a text so I'm gonna use in lorem text here so I'm gonna put 20 words so I'm going to say lorem 20 and when I press that I'm gonna have 20 words of Laurium text and once I have these 20 votes I'm gonna save the changes and when I open it you can see I have this beautiful section here now just note that I'm going to create this beautiful oval carousel to create that I need to first include all carousel in this website so I'm gonna open a new tab I'm going to close this tab first and then cleared here oval carousel just search for it and just start that here you can see we have the homepage of oval carousel just open it and inside it you can download this whole carousel this is absolutely an amazing responsive carousel where you can use anywhere in your website it's absolutely free so it's just new to download it just click on this download to download this old carousel I already have this whole carousel so I'm not gonna download it again so I'm gonna just open the documentation of this old carousel and as you can see here we just need to include the pin file and this oval key result our CSS file along with that we also need to include this old carousel mean dot J's file once we link all these files humko just get started and create my own carousel so you just need to create a division tag and inside it you have oval items right you need to specify this class oval carousel to initialize this is oval container and inside it you have all items right and just out of that you need to initialize it using this whole carousel method right as in for us that so let me show you how can create this beautiful carousel so let me first include this oval carousel to this website and then we'll move on and create this beautiful design once you download the old carousel it looks something like this if you have zip file unity first extracted so I'm going to first extract this file right here and once I extracted I'm going to just copy two files so I'm going to just copy this CSS file so I'm gonna first copy these ole Cairo so dot mean dot CSS file along with that I'm gonna copy over theme dot a default dot mean file so I'm gonna press ctrl and select both this file and copy it just copy it now inside this project directory inside this vendor folder I'm going to create a new directory and just to here oval carousel and inside it I'm gonna create a CSS folder and inside this folder I'm gonna paste both these files just out of that I'm gonna open the old carousel file and once I open it you can see we have this old carousel not mean door J's file you need to copy this file as well so you just need to copy this file and paste it inside your project directory so just paste it inside your project directory in the vendor folder in the old carousel I'm gonna create J's folder and paste it right here we need to link this file to the index dot HTML so I'm going to open my project and in the header section up here I'm gonna link this beautiful carousel so I'm going to create here a multi-line command and just say oval carousel CSS file and just start with that right here I'm gonna just a link and I wanted to link the vendor folder the OL carousel CSS file and I'm gonna force link this whole carousel mean dot CSS file and just start with that I'm gonna link the vendor folder all carousel CSS file and then link this oval theme dot default mean dot CSS file so I'm gonna link this file here just out of that before the closing body tag down here before your custom JavaScript file right here I'm gonna just link all carousel JavaScript files so I'm gonna say oval carousel J's file and down here I'm gonna create a script tag and the source attribute I'm gonna fall select the vendor then select the wall Carol to select the J's folder and select this old carousel mean door JS file right so now you can use this oil carousel in your website so let me show you how can create this beautiful oil carousel in this website so just back to your about area section and just out of this container right here I'm gonna create one more container so I'm gonna say here container and to this container I also want to specify one more class which is Cairo so now this is a custom class to access this division time just out of that I want to specify tockman bottom padding to this division tag only if we have large device so we have a booster plus padding y LG v so we have this padding only if I have large billboard device now inside this div I'm gonna create old carousel so I'm gonna create here a to gene tag with the class or will carousel the start of that you also need to specify oval theme to use the default theme of all carousel so I'm going to use both these classes and inside this class I'm gonna just create all items so you don't need to specify all item class to it instead you just need to create your own division tag and I'm going to specify the class client and I want to specify a row class also client and role now just start that once you have the single row I'm going to create here two columns so the first column space I'm going to specify ease call LG 4 so I'm gonna specify 4 column space for the last device and then I'm gonna specify one more class which is called MD dwell so I wanted to specify 12 column space for the medium device just out of that I'm gonna specify a custom class also which is client IMG because we have image inside this division tag so I'm going to specify client IMG class to just start that I'm going to create here an image and the source attribute I'm gonna specify image folder then specify an image here so I'm going to select my first image and the alt attribute is going to be IMG one and I also want to specify a class to make this image response here I'm going to specify IMG fluid so this is a booster plans to make this image respond see just after this division tag I'm gonna create my second column which is called lg8 for the last device I'm going to specify eight column space to this deal along with that I'm going to specify call em d12 class for the medium size or device I want to specify twelve column space to this division time and I also want to specify a custom class to it so I'm gonna specify about client and insert this T I'm gonna have H for heading time and I'm gonna specify class to it somewhere specified class is going to be text uppercase and to the heading I'm gonna specify a name of my client so I'm gonna say John Martin you can specify any name here that's on you just out of that I'm gonna specify a paragraph here and it's my class para and inside this paragraph I'm gonna have a demo text so I'm gonna say Gloria 15 when I press tab I'm gonna have 15 demo what's just after that I'm gonna say attention Jase now when I open my website you can see where is my content gone because we specify all carousel we need to first initialize it then you will see your content here so I'm gonna first initialize this ol carousel in the main door JS file then you will see your content here so let me first open the main door J's file and inside this file I'm gonna force initialize all carousel now to initialize this old carousel I'm gonna open the main door J's file I'm gonna create here a single line comment and just say oval carousel and down here I'm gonna first select jQuery object and I'm gonna select site main then I'm going to select about area and then select my oval carousel and I'm gonna call a method of old carousel which is oval carousel now keep in mind the world is case-sensitive you need to specify capital C here whenever you call this old carousel just out that in this ol carousel just pass an object and just specify a different parameter to it so I'm going to specify here loop true and so I just want to loop this carousel autumn ethically so I'm gonna specify loop true then I want to autoplay this carousel so I'm gonna say autoplay true and just start with that I'm gonna specify dots because I want to add a dots here just start with this carousel this one so to add this dot you need to specify a property dots true and then I want to make this carousel responsive I'm gonna make this carousel response him after a few minutes but just for now just specify doors true and just save the changes you have your carousel here now what I want I bought to make this carousel responsive so I'm gonna just basically R a property call responsive and to this property I'm gonna specify an object in this object unity specify a viewport for the 0 pix have you polled I'm gonna specify only one item so I'm going to say here items 1 5 44 pixel of viewport I wound two items some courtesy here items to now from 0 to 5 44 pixel I want only one item in this carousel and just are two that I've owned two items and as you can see you have two items here because the viewport is greater than 544 pixel as simple as that now what I'm gonna do is I'm gonna create a second client so I'm going to open my index dot HTML file and just copy this client row so I'm going to copy this division tag paste it down here like this change this image to tea to alt attribute is going to be oMG - and I'm gonna change this text as well and I'm gonna change it to Mac here say that you just when you save it you can see you have two clients here right I'm going to just copy these two clients like this and paste it down here right so it'll chase and now you have four clients and you can see you have here a dots just art that I've order to increase these dots so I'm gonna just a few more clients so I'm gonna copy and paste this client again down here like this save the changes and now you can see you have three dots here right I just want to specify styling to this section so I'm gonna open the style or CSS and style this beautiful section so I'm gonna open my project and open this download CSS and just toggle this window on the right side and I just want to style this beautiful section so down here I'm going to create a command and style this section so what I'm going to do is I'm gonna for speed here a command multi-line comment and just specify here about me and I just start that ample just close this command so I'm gonna say and about me and inside this about Me section I'm gonna fall select the side main class so I'm gonna force a side main then I'm gonna select about area and just talked to that I'm going to select about title and then select a paragraph and I want to specify padding to this paragraph so I'm going to say padding 1 Ram its top and bottom and 7 Ram to the left and right Save Changes so I have some padding to this paragraph you just talked that down here I'm going to select client area this one so I'm going to first select this side main and out area and select client area so I'm gonna say here client and to the client I want to specify a background and I want to specify a light background so I'm going to specify here a hex value like this and box shadow is going to be a variable so I'm going to call here box shadow variable and I also want to add a much into it so I'm gonna say marching and margin is going to be trading to the top and bottom and zero for the left and right say which is so this will add margin no just talk to that I'm gonna select decline oMG so I'm going to copy this about area completely paste it down here select the client and then select client IMG and I want to add a padding to it so I'm gonna specify padding and panic is going to be to Ram so when i'm specify padding to it you can see I have some padding to this image right now just after that I'm gonna select this about area so I'm going to first select this client so I'm going to copy it paste it down here and I'm gonna select about client and I will not specify padding top to it somewhere space for planning Tom it's going to be to them right when I save the changes you can see I have some padding to this text just after that I'm gonna select the about client section again so I'm gonna copy it paste it down here and just select this H for heading dying so I'm going to select H for heading tag and specify form to it and the point is going to be normal 500 width the font size is going to be 21 pixel the line height is 20 bit cell and I'm going to specify font family Roberto and you have this font here just start with that I'm gonna paste the selector again and select the paragraph and I'm going to change font size so I'm going to say on size it's going to be 14 pixel save the changes when I save it you can see I have 14 pixel font size to this paragraph just start of that I wanted to add some padding between these two items so I'm gonna simply select side main class then select about area and then select oval carousel and then inside it I'm gonna have all item and to this whole item I'm going to post specify display flags because I found to Center it is both clients and space by justify contain center the stuff that I want to add some padding to it so I'm gonna add padding it's going to be zero for the top and bottom and 1.5 Ram to the left and right when I say the jinja's this will add some padding bit between these clients right just start with that now the last thing I want to change this color of these dots so I'm gonna first select this whole karo zero so I'm going to copy this selector paste it down here and then I'm gonna select all thoughts then select oval dot and then select the active class and inside this old dot I'm going to have a spawned app and to de-spawn tag I'm going to specify background color so I want to specify here primary color so I'm gonna choose primary color and I want to specify with and the weight is going to be 12 pixel when I save the changes you can see I have this color to this button but because I specified weight to it I also want to add few more properties here height and height is going to be well pixel so when I save the changes you can see I have this dot here now as you can see your about Me section is now ready you can navigate your different clients by tracking this client section and you can use this dot as well right now the About section is now completed now let's move on to the next section and in this section I'm going to create this beautiful subscribe section this is going to be the second last section of this website so I'm going to just create the SUBSCRIBE sections so I'm gonna open my website and the index dot HTML file uncle just create this subscribe section down here so to create this section number the first grade here a multi-line comment and just specify here subscribe me idea I just are to that I'm going to duplicate this line by pressing all shoot-down and just basic by here and subscribe me edia now inside the section I'm gonna create a section there and specify class subscribe us area and inside decision I'm gonna create a container I'm going to specify a class subscribe so using this class I can access this division tag and just are two that I want to create here a row and inside this row I'm gonna have twelve column division time so I'm going to create here call LG fill class and along with that I also want to add here text Center to Center all the text and specify a custom class subscribe title and inside this deal I'm gonna have H for heading tag with the class text uppercase and inside this H whole hidden tank I'm gonna say get update from anywhere now just out of that I'm going to create here paragraph with the class para specify a lot of next year so I'm gonna add here is lime ten say did you just if you open your website you can see you have this section here because we specify text Center we're gonna get this text at the center and just start that you starter this division that to start to this row down here I'm gonna create a duplex class so I'm gonna create here a division tag and specify d sm flex so I'm going to specify this class only if we have a small device they start that I'm going to specify justify content Center to Center this content and inside the Steve I'm gonna have a palm tag and for this form I have 50% weight so I'm gonna call a bootstrap plus W 50 I'm not going to specify any action to it so I'm going to get rid of this action and inside this form I'm gonna have a row and to this row I'm going to specify display flex property remember to use the flex class or boostrap then I'm going to specify flex row to specify likes direction row and then I'm gonna specify flex braaap and inside this deal I'm gonna have a single column to create a simple column I'm going to all call plots so this will create a simple column inside this row and to this call class and we'll specified custom class encode types box and inside this T I'm gonna have input text box so I'm going to create here input type text and I'm going to specify an ID to it txt email the class is going to be form control form control is a bootstrap class to specify default styling to this input text box and then I will specify placeholder email now just out this table tag I'm gonna create another column so I'm going to just call call class or bootstrap and create a division tag and I want to specify a class to it BTN submit and inside the submit class I'm going to have a button so I'm gonna say button and this is going to type off submit button from the wall here submit I'm not to specify class to it I'm going to specify close BTN this is a boost up class BTN and I'm going to specify PDM success bootstrap class so this will specify default styling to this button and just out of that I am going to specify float:right so this was please if I float right to this button and then I'm going to specify here subscribe save the changes now I'm going to make this section like this so I'm gonna add stars you to this section and make it like this so let's moon I hope of the style or CSS file just toggle this window on the right side like this so I'm gonna just great here of multi-line command I'm just pasted over here subscribe me and just not of that I'm going to close this command if I'm gonna stay here and subscribe me and inside this command I'm gonna first select the site main class then I'm gonna select subscribe us area and then and then I'm gonna select subscribe and to this subscribe area I'm going to specify background and in the background I'm gonna specify an image so I'll select this image I'm gonna force in 8 the IMG folder and then select subscribe BG dot PNG file and just specify no-repeat to start there and I Save Changes you can see I have this image here I just wanted to add some padding to it so I'm going to simply add padding and the panning is going to be 10 frame to the top and bottom and I'm going to specify zero for the left and right then I'm going to add margin and the margin is going to be three damn to the top and bottom and auto for the left and right when I say it which it is you can see I have this type of result here just start that I'm going to select subscribe title this heading so to select the setting I'm gonna forced select this selector so I'm going to copy it paste it down here and select subscribe right off and inside this title I'm gonna have h4 heading tag and I want to specify pawn to it so I'm gonna specific font and the font is going to be normal then I'm going to specify point with 700 then specify font size 30 pixel and that's basic fine line height is going to be 30 pixel and the font family is going to be Roboto just start that I'm gonna a specific color to it and the color is going to be white small I'm going to specify white smoke here when I say a few changes this will specify font and color to the for hitting down just out of that I'm gonna select this paragraph so I'm gonna select the selector copy it paste it down here and select a paragraph and I'm going to specify a color to it so I'm going to specify color white smoke and padding Fanning is going to be one ramp to the top and bottom and program to the left and right Save Changes and you can see I just specify color to this padding and specify some padding just out of that I'm gonna select subscriber so I'm going to copy this subscriber selector and paste it down here and now I wanted to select the form somewhere select form and inside this form I'm gonna have input X box and I want to select input element and to the cinnamon I'm gonna first specify width and the way this is going to be 400 pixel then I want to specify padding and the padding is going to be one point five RAM to the top and bottom and one ram to the left and right when I save the changes you can see I have four hundred with this input text box and have some batting list out of that I'm gonna spritz my powder is going to be one pixel solid white small and damn I'm going to specify background the background is going to be transparent the star that I'm going to specify color to it I'm going to space back color blank form is going to be normal 517 pixel font size 20 pixel line height and specify over to formed say it to digest you can see I have this type of result here but I just never change this color to white smoke I'm gonna change it to white so you can see I have white color to this text box now I want to change the color of this email placeholder so I'm going to select first this input text box paste it down here and call placeholder I will select this placeholder and - this placeholder I want to specify color and I'm gonna specify color to it white smoke when I save the changes you can see I have white smoke color to this place order like this just out of that I'm going to select this button I'm going to just copy this form selector paste it down here and select BTN submit and just select a button and I want to specify a background color to it I'm gonna specify background I'm going to specify white smoke color then I'm gonna specify color it's going to be black color so I'm gonna specify hex value here and I'm going to specify padding to it so the pairing is going to be 0.72 the top and bottom to Ram to the left and right when I save changes you can see I think something is going wrong here yeah I'm forward to specify dot here save the changes and now you can see I have this style to this bottom as you can see the beautiful subcribe section is now ready in the next lecture we'll understand how to create this footer of a simple footer for your website so let's see how to create it so I'm gonna first open my website I just note that I'm going to just open my index dot HTML file just down to that down here just after this mean tag down here I'm going to create a footer so I'm gonna say played this photo tag from the main time create a footer here so I'm gonna specify a footer tag and specific class after area and inside this footer area I'm gonna have my footer so inside is photo section open force create a container and inside this container I'm gonna have bikes classes from click create a division time with the class D flex that I'm gonna add flex row and then I'm going to add justify content so the center of the text just out of that I'm gonna specify flex right class and inside this day I'm gonna have a division tie with the class site logo and along with that I want to Center it all the text so I'm gonna say takes to the center and I'm gonna spit over some padding so I'm gonna say padding why so I specify top and bottom padding for and inside this Steve I'm gonna have anchor tag to redirect the user to the homepage and inside it I'm going to specify IMG and I'm gonna specify my image logo here so I'm gonna select my IMG folder and then select my website block on this one and just say here logo now just out of this tee I'm going to just create a social class someone I see here social and I want to Center all this text so I'm gonna say it takes center and inside this division tag inside this division tag I'm going to create H five heading tag and I want to specify class to it and say takes the uppercase and in this H five heading tag I'm going to say follow me and just out of that I'm going to add here few social icons we know that how to add social icons using font awesome so I'm going to first add here a Kotak and it set its anchor tag I'm going to have an eye tag with the social icons so I'm gonna first add Facebook icon so I'm going to say here Facebook so this will create a tag with a class fab FK Facebook so when I save the changes and open the website you can see I have your daily and you can see I have here a simple icon but now what I want I want to remove this like su class because you can see here I have everything in the same row so I just want to remove this flex row when I say this news you can see I'm going to get the same result here if I remove this d-plex that machine what happen if I remove this deflects yeah I want to get these results so I just remove these flex classes like this and just say a pidgin juice just our two that what I want I'm gonna just duplicate this anchor text so no press hold shift down to duplicate this anchor tag and just out that I'm going to change these icons so I'm gonna first specify here Instagram then change this Facebook icon to YouTube this Facebook like form became Twitter see if it changes and you can see I have four icons here and just out of this deep and right here I'm going to create copyright section so I'm gonna say here copyrights and along with that and what a specified class takes the center and inside it I'm gonna have a paragraph with the class para and inside this paragraph I'm gonna have a simple copyright text somebody just copied text and paste it inside this paragraph like this and I'm gonna just busy for my website name here in the anchor tag in the href attribute for now I'm going to specify hash here if you want it was busy for the home part of your website as well and inside this angered I can specify its Ponte and to this farm I'm gonna specify inline style so I'm gonna call style attribute and to the style I'm gonna call color and just call a fare function and just call a color primary color and inside this bound I'm gonna specify my daily tuition name now when I save the changes I have here daily tuition name and the corporate section let's move on and style this section so I'm gonna open the style dot CSS file and style this beautiful footer so I'm gonna just open the style dot CSS but all this window on the right side and right here I'm going to create a multi-line comment and just say footer area and just close this area so I'm gonna say here and hooter now inside this folder I'm gonna first see like footer footer area and to this footer area I'm going to specify padding and the pairing is going to be 5 Ram to the top and bottom and I want 0 to the left and right just out of that I want to specify background image to this footer so I'm going to have background image for the footer as well so I'm going to specify background and I'm going to specify URL and inside this you are River I'm gonna have image for my footer so in the image I'm gonna have put ur dot B G dot PNG file I'm going to select that and say no repeat when I say it's changes you can see I have this beautiful background image to this footer just start with that I'm going to select social graph so I'm gonna first select this footer so copy and paste that here and just select social and select five heading tag and in this H five heading tag I'm gonna split you reformed and the font is going to be normal and specify upon faith 500 then specific font size 23 pixel and the line height is going to be 30 pixel and the last I'm gonna specify one family and the pawn family is going to be Robo to just start of that I'm going to specify some style to these icons so I'm gonna select this icon so I'm gonna fold select this social class and just our two that I'm gonna select anchor tag and inside it I'm gonna have this either so I'm gonna first increase the size of this icon someone say pawn size is going to be 22 pixels then I'm gonna specify padding and padding is going to be 2 Ram then I'm gonna specify color the color is going to be border feather so I'm gonna specify border color to it to these icons when I save the changes you can see I have this border color to these icons so now when I hover on it I want to change the color of these icons so I'm going to just create how effect on the side so I'm going to select this selector fixed it down here I'm gonna create an hour effect on the anchor tag so I'm gonna create here however and when I hover on it I want to change a color so I'm gonna say here color call the fire function and just say primary color say obscene jizz now when you hover on this icon you can see this type of result right now now as you can see the website is now absolutely completed if you check your website it's now absolutely completed it looks absolutely amazing now the only last thing we need to create is to create this beautiful sticky navigation menu to create this sticky navigation menu we need main dot J's file sample just open mind our J's file and inside it I'm gonna create this beautiful sticky navigation right here I'm going to create a command and just say sticky navigation menu now to create this beautiful sticky navigation menu I have a simple technique so when I scroll down and when I complete the header area I'm gonna have this navigation menu so we need to first get the height of the header area and then I'm going to specify position fix to this navigation menu and then you can see your navigation menu at the top of your website and when you scroll up I want to remove that position from this navigation menu so I'm gonna open the window J's file and right here I'm going to first get the height of the header area so I'm gonna call here a left and a call here now offset and I just wanted to get the top height of the header area so I'm going to say here I'm gonna select the jQuery object and inside it I will just call header area and I want to get the height of this header area so using height matter you can get the header area we'll add 50 more in this I'd like this when we have this height of my header area I'm going to just create here a function and I'm going to name that function now bar fix and inside this function I'm going to say if then include select edit area so I'm gonna call jQuery object and just select the header area and I want to get the length of this header area so I'm going to call length and just onto that and in the if statement I'm gonna post select the window object so I'm gonna select window and just call a scroll event and just specify an handler function like this so when we scroll using a mouse we are going to execute this scroll event and inside this whole event I'm gonna call a variable let scroll is equal to select the window again and I want to call scroll top method so this is going to return a number to this scroll variable so when I have the scroll top number I'm going to just check if I'm gonna just check here if scroll is greater than or equal to then now offset Dom then I'm going to execute this if block or I'm gonna execute this else block so I'm going to check if this scroll top variable is greater than this name off the top then I want to add position fits to the number or I want to remove the fixed position from the now bar I'm gonna force select here now button so I'm going to call jQuery object and in the single code I'm gonna force select header area then I'm gonna select main menu and this main menu I'm going to add a class called nav our fix so if the school is greater than or equal to this now object or I'm going to add this neighbor fixed class to this navigation menu or I order to remove this class I'm going to copy the statement paste it down here and just change this method to remove class right like this now say it is news and this will not do anything right now because you don't have this navbar fixed class so we need to create it I'm going to just copy this class I am created in day in the global door stasis file right here I'm gonna just create this class here so to this class I'm for a specific position which is as I said earlier I'm going to specify position fixed to it then specify with when it's going to be hundred percent let's specify Tom property and the top is going to be minus one pixel then the left is going to be zero the right is going to be zero just out of that I want to specify a background color to it so I'm going to specify background and spits by white color just out that I'm gonna specify box shadow and cone variable box shadow and put a specified set index property so I'm gonna specify set index it's going to be 999 because I wanted to bring this navigation at the top order so I'm gonna say here nine nine nine and I want to add a transition on the background so I'm gonna say transition background and I'm going to say once again is say it's a jest I just need to call this function now power fix and just call the parent theses save the changes now you're going to get your retail right like this so when you scroll down you're going to get your navigation menu and when it's cold up this will automatically hide and you will get your primary navigation menu like this so you know that how to create this beautiful website using just a bootstrap right now you know that we have been working on this website since a while now and we know that we put in lots of effort to build the whole website but what if I say it this website it's still useless if it is not responsive so keep in mind every website you build using HTML and CSS you need to make that website responsive for mobile and any device so let me go check this website is responsive for mobile or not so if I just open my inspect to so I'm gonna press if I just press control shift I I can see this website is responsive or not so I will just click on this mobile icon and as you can see here this is my viewport and for my viewport this website is responsive but what if I change this viewport and I'm going to change this viewport and just change it you can see here as it's open the mobile view board and on the mobile view port this website is not responsive so we need to make this website responsive for mobile tablet and other devices as well I'm going to show you how you can make this website responsive for mobile and tablet devices so let's get started and understand how to make this website responsive so I'm going to open my project an open index dot HTML file and inside this file I'm going to create a new file in the CSS folder right here I'm going to create a new file and name that file a responsive dot CSS I'm going to link this file to index dot HTML just after this custom style sheet make sure you link this small pseudo CSS just start with this custom styling so I don't need to specify important keyword to any styling so we're gonna overwrite the default styling using these responsive lured CSS file so I'm gonna link that just out of this Tyler traces so I'm going to false create here a multi-line comment and just here the responsive CSS file and inside this file I'm gonna call a link tag and link this file - this HTML so much simply specify CSS folder and responsive not CSS save the changes and to open the responsive dot CSS file and I'm gonna travel this window on the right side like this just not do that I'm gonna get started and make this website responsive for mobile tablet and take stock so I'm gonna create here a media query to make this website responsive so I'm gonna first create here a command and in this command I'm gonna say if the viewport is is equal to 340 pixel or less than that I'm going to create here a media query so I'm gonna add here and media only screen I'm gonna just say here max width and specify 340 pixels it means if the viewport is less than or equal to 340 pixel I'm going to apply these classes to these HTML elements right so I'm going to just select few elements from this HTML someone for simply selecting now bar right because you're not going to get this number here so I'm gonna select the now bar so I'm going to select it so I'm going to select the header area then select main menu then I'm gonna select navbar right I just thought of that I want to remove padding and margin from this nav are so I'm gonna see like padding and I'm going space by 4% padding to the snapper and margin is going to be 0 save the changes I'm gonna save changes you can see we have this navbar here now I just have to change this padding to padding to right save the changes and now you can see we have these never here now what I want I'm going to move padding and margin from these elements as well so I'm gonna select these elements one by one and remove margin and padding so instead of selecting all these sections one by one and specifying these properties I'm gonna select that right here as well so if I just specify here comma and then select navbar brand area and to select in our brand I'm going to select header then select main menu now bar and then select navbar brand class and I just want to specify padding to and padding:0 to this section so I just specify that right here just out of that I'm going to be back here comma and select my next section so I'm gonna select subscribe title section so right here you can see I just selected side main class then select subscribers aadya then select subscribe and then select a subscribe title and just on that I also want to select subscribe paragraph and subscribe heading tag and then select a paragraph and H for heading tag now just out of that I'm gonna select subscribe area so I'm going to select it and paste it here and then I'm going to select this subscribe and I'll put a div or padding prom to subscribe as well so I'm gonna paste it down here now just under that I want to change this font size of these h1 heading tag so I'm gonna first select these h1 heading tag so I'm going to just open the project and down here I'm gonna pull select the h1 heading tag this one and I want to specify font size to it so I'm going to specify font size 41 pic so when I save the changes you can see I just specify font size to this h1 heading tag just start with that I want to specify weight to this input text box this one right so I'm gonna just select this input text box so once I select this tick box I'm going to just specify with and the video is going to be 15 Ram save the changes I just changed the width of this text box I'm going to select this services area and specify some different width so I'm gonna just select these services area this one and change the width of this area from before select the main tag then select services area and then select services I'm gonna spacebarb it to it and the width is going to be 13 wrap and just out of that I'm going to select the media query just copied press it down here and right now I'm going to select a media query for 792 pixel so if the viewport is 792 pixel or less than that I'm going to apply these classes to my HTML limits so I'm going to full select this contact so I'm gonna first change this title so I'm gonna first select this Ponte so I'm going to first select cite main class then select about area then select about title select the h1 and then select the spawn tag and I want to specify font size to it and the font size it's going to be thirty one pixel then I'm gonna specify later spacing and the letter spacing is going to be ten picks up when I save the changes you can see I just have different font size to this area now just out of that I'm going to select the yours area right here I'm going to select this area and just change padding left property so I'm gonna fall selected right here I'm going to select the ears area and just saw that I'm going to specify padding left and the padding left is going to be 1% and width is going to be 49% and just onto that I want to change to margin left and weight of these BG area right so I'm gonna first select the BG panel select the BG panel like this so I'm going to pull select the site main then brand area and then select this BG panel and I want to specify margin left property to it and it's going to be 30% harmful specify a bit it is going to be 80% when I say that it is I'm gonna have this type of result here and just out that I'm gonna select this call area and change the padding layer property of this area so I'm gonna force selected and space by pairing left 3% save the changes you can see we have this call area here now just out of that I'm gonna just fall select buttons this ones all these buttons and just change font family of these buttons so I'm going to select all these buttons in this media query like this and specify found the form is going to be normal with it's going to be 500 then specific font size 18 pixel and then specify 40 pixel line height and the font family Roboto and just sort that once I have these buttons I'm going to select the paragraph in the About section and specify zero padding to it I'm going to just select this paragraph so I'm going to first select the site main class then about area and then select about title and select the paragraph and specific padding to it I think is going to be 0% save the changes just start that I'm going to select the input tag this one and I will change width of this input tag so I'm gonna force select this input tag and I want to change the width of this input tag and I will change 20 RAM and the margin it's going to be 5% now just out of that I'm going to copy this mini a query place it down here and I want to change this media to 1 9 1 0 right I'm gonna select 19 10 pixel viewport and specify different property to this area so we just first select here now bar header this one and I'm going to specify padding to it so I'm gonna just supposed to like the now bar and specially my padding the padding is going to be 1 Ram just after that I'm gonna say like all the containers inside my website so I'm gonna select it using a container class and I want to change a max width property of this continue and make them 90 percent just out that I'm gonna select brand area dance electric services title and then select about area and to this areas I want to change pairing so I'm going to say here padding three percent to the top and bottom and four percent to the left and right Save Changes and just start that I'm going to select the background image now just after that I'm going to add some padding that's it once you done that just save all the changes and just open this website on your desktop view board so if I just open this website on one nine to zero viewport this website is absolutely ready for the desktop right and if I change the viewport and open the tablet viewport if I click on this tablet viewport you can see this website is responsive right this website is responsive for tablet now just check this website is responsive for mobile or not if I just click on these 320 pixel viewport and now if you check this website for the mobile device you can find this website is responsive for mobile as well right it's not completely responsive but we make this website responsive for mobile as well right oops I need to add important keyword to these input text box so I'm going to change it right here some could specify here important keyboard save the changes now you can see right now as you can see here this website is responsive for mobile as well so you can use this website for mobile tablet and extra so if we open this website for tablet you can use it here as well and even use it for the desktop version as well right now that's it if you have any patient you can ask me anytime in the comment section if you find anything useful don't forget to press the like button share this video with your friends subscribe for more latest videos and don't forget to download the source file from the description that is all for now I will see you in the next tutorial [Music] [Music] [Music]

Channel: Daily Tuition

Views: 1,322,805

Rating: 4.9366746 out of 5

Keywords: Complete Portfolio Website with Bootstrap, complete bootstrap website, porfolio website using bootstrap, how to create portfolio website using bootstrap, bootstrap websites, daily tuition, complete website with twitter bootstrap, complete website with bootstrap html and css, build a complete website with bootstrap from scratch, bootstrap website from scratch, bootstrap, website, twitter bootstrap website, portfolio website

Id: dgKSqz3it50

Length: 198min 49sec (11929 seconds)

Published: Mon Nov 04 2019