How to Make Complete Responsive Website Using Bootstrap/HTML/CSS

you hello everyone welcome back to daily Lucien in this tutorial we are creating this complete bootstrap responsive website step by step in this website we are using bootstrap we are using bootstrap to glorify the website and make it responsive we will also add some custom style to it to make it more attractive so before you take this tutorial you need to have a basic understanding of HTML and CSS before you moving on so what we are building in this tutorial in this tutorial we gonna create this beautiful navigation menu this website title and this different sections where we have this feature section the pricing section team member sections and so on we are using photos on website to use free icons and used images from pixel comm so basically we are doing many things in only a single video so first we will create this website for desktop and then make it responsive for mobile version you can see this website is completely responsive for mobile and tablet as well I hope you excited like me to build this website so before we getting late let's get started now to pull this complete website I'm using vs code editor you are free to choose your favorite editor if you did not using this editor then this is the best time to install it to install this code editor open the browser and type code which you studio.com and press enter from this website you can download vs code editor just download this application as per your system where's code is most used and favorite editor it has a syntax highlighting and autocomplete with intelligence which provide a smart completion based on the variable types function definitions and imported modules using wheels code editor you can even install extensions to add new languages themes debuggers and connect additional services this editor is very fast and lightweight extension running separate process ensuring the upon to slow down your application you can also change your theme whatever you want so basically this is amazing editor so far once you install this editor open it you can see the workspace of video story code editor just click on this icon to install the extension and search for life server so in this search box I will say live server now you just need to install this live server extension this extension launched a development server with the live reload feature for static and dynamic pages once you install this extension whenever you make any changes to the file and save it live server quickly update your HTML file in the browser so you don't need to manually update the browser when you make any changes in the file then just after that search for beautify then install this beautiful extension to format your code when you save a file this will save you a lot of time and maintain your code readability once you install this extension click on this manage icon and go to settings and in this search box type format and just click on this formatting option now here you can find this option format on save just click on this format on save checkbox to format the file when you save it once you done that just close these settings and back to Explorer tab to create a project will create an empty folder and open it in this Explorer tab so we going to create an empty folder on desktop you are free to choose your own location so I will right click here and say new folder and name this folder books and now I want to open this folder in via score editor so I will open the waves code editor and click on this open folder you can also open this folder by clicking on this file menu and select this open folder right but I will choose this option and say open folder and select my book folder and say select folder so now you can see the empty book folder is open in this explore tab I will close this welcome window now just follow along with me to create this complete website so I will create here a new folder and name this folder source and in this folder are going to have index dot HTML file so to create this file just click on this icon new file name your file index dot HTML now just talk to that I will create another folder here so I will just click on this icon and create a new folder and name it CSS and in this folder I will add a style sheet for this website so I'm gonna click on this new file icon and create style dot CSS file throughout this website you're gonna see the high quality images so we need to import that images in this application so we'll create another folder here and name this folder asset and just after that I want to import that images in this folder so I will copy these images you can download these images from pixel calm or prom and flash calm I had downloaded these images from pixel calm so I will just copied these images and paste it in the books asset folder right here right now you can see when you expand this folder we have few images right now I will first complete the HTML file and then move on to style dot CSS file so it will help us to understand what we are doing right so I will just back to index dot HTML file and here to create a simple html5 boilerplate I will use exclamation mark here and press tab so the image of vyas code editor gives us a simple html5 snippet with a doctype HTML the HTML tag the heading section and the meta section where we have the character set utf-8 and the view code is equal to the width of your device now I'm going to rename this title and say here books before we get started I will open the finished website in the browser and now in the body here I will create three section the first section is going to be header now in this section I will add this navigation menu with navigation items and this title with the button and this image just after this header I am going to have here a main section and in this main section I will add these few sections right and just after that I'm gonna add here just after this main section I will add here footer in the photo section I will add this footer right now let's start with the header but before we get started we need to link the bootstrap CSS file to this HTML so just open the browser and in the address bar just type bootstrap and from this gate bootstrap website I will link this bootstrap framework to my application so I will click on this get started button and use this CDN to use poster classes you can download the bootstrap framework and link bootstrap dot CSS file to your application but I will choose the simple way so I will use this CDN so I will copy the CDN and paste this in the head section of my application so in the Hale section right here paste this link now just out that I want to link this style dot CSS file as well so I will create here a link tag and in the H rape attribute I will say double dot and the forward slash so this expression refers to the root path right so I will select here CSS folder and link my style dot CSS file save the document and now just after that here just before this closing body section I want to link bootstrap Jake wave files to perform events so I'm going to copy these three links and paste it before this closing body tag right here now just after that I wanted to change this jQuery slim file because I'm using animation in this website I want to link the complete jQuery library so I'm going to open the browser and search here jQuery CDN and from any of these website you can copy this alien so I will just click on this website and from here I want to find jQuery dot indoor J's file this one just click on this icon and say copy script tag and then just replace this script with this script tag right we need to replace this jQuery because we are using animate function in the sling file of jQuery we can't use the animate function so to use the animate function we replace this clean file to this jQuery main dot J's right save the changes and just after that back to your header section right here now let's get started and create a menu for this website now let's create a simple division tag here to create a simple division tag you don't to add a bracket and specify a deal and close it instead just say div and press tab so the image will gives you an opening and the closing division tag right now to specify a class to this division tag just type dot and specify class name so I will say element here and press tab so this will create a div chin tag with the class name element right now just talk to that if you want to create an ID then you just need type opening hash and specify an ID so I will say my ID and press tab right so this will create a division tag with the ID my ID right now if you want to create a different HTML tag with the class then you need to specify that tag name before the class name like this let's say if I want to create h1 heading tag then I will say here h1 and to specify a class I will say here a dot and then specify my class name so I will say element here and press down so this will create h1 heading tag with the class name element right and if you want to create an ID just get it off this dot and just specify here opening hash and specify your ID so I will say my ID right you can see me doing this throughout this website now let's create a simple division tag so I will just specify a dot here and specify class name container fluid right now this poster applause will specify 100% width for this division tag right I also want to remove padding from this division time so I will say here p5 from zero so this will remove padding from this division time right now in this division tag I will create this navigation menu right so I will open the bootstrap website and here in this component section you can find the nav bar right here just click on it and from here you can choose your own navigation menu right here you can find different type of navigation menus so just choose your own navigation menu so I'm gonna choose here this navigation menu right so I'm going to copy this code so I will click on this copy button and paste this code here in this division tag right save the changes and if you open this file in the live server so I will just right click here and say open with live server then you can see here we have a navigation menu with home features pricing and disabled navigation item right now I want to customize this a navigation menu so I'm going to just remove this class now bar light and beach light class and just talked that I want to change these navbar brand tags to books right and then I want to change this navigation item so my first navigation item is whole second is course third is price fourth is pages which has a nested navigation links then we have a fact and the About section so we're gonna replace these features with course this pricing become price and then I want to replace this disable button with the unable cutter so I'm going to get rid of this disable button and just copy this and paste it here and then I will say here pages and just after that and just name this navigation item fact and the last is going to be about save the changes now when you open this file in the browser you can see here you have your website logo and this is your navigation items now I want to align these navigation items on the right side like this right and also I want to specify this nested navigation items or to these pages so I will open the HTML file and right here just after this deal and just before this urine tag I will put a division tag and create a class and name it margin-right:auto and leave this division tag as it is save the document and if you open this file you can see your navigation menu is aligned to the right side now I want to add some nested navigation items to these pages so I will just created off this pages section I'm going to add a custom CSS class so I'm going to say here drop-down right which will create in the style dot CSS file right now in this Li tag I'm going to create a div and specify drop down class and in this division tag I'm going to create anchor tag with the class now link and for the href attribute I will I will specify a hash here right and in the text I will say pages just after that now just after that I want to specify nested navigation items so I'm going to create here a deed and specify a class drop down content right and in this division tag I'm going to create two nested items you can create multiple navigation items but I'm just creating only two so I will add an anchor tag here and and specify text generate and create another nested items so I will add anchor tag here and just specify text element right save the changes and you can see here you have a nested nav items when we specify style to this HTML this will look like this right so when you hover on these pages you can see your nested navigation items now that is all for this navigation menu now let's create this author this exciting adventure text and the paragraph with this button and along with that I'm gonna add here a PNG image so I'm going to open the HTML file and right after this division die here just before this header I will add here or division tag with the class container right so what is this with the class container now the containers are the most basic layout element in the bootstrap I'm using this container because I want to create a great system the container class is a fixed width container meaning its max width changes at each break point and this container has width 100% white all the time right now here I will add another booster class which is text center so this class will Center all the text now in this deal I'm gonna create a row so I'm gonna add just here row this class will simple create a row now here I'm going to add a bootstrap grid system so bootstrap has a 12 column grid system and each column has equal width so here I will create a div with the class call MD 7 so this class will not create 7 columns on the HTML page instead this class will utilize the space of seven columns and create a single column with the space of seven columns right so this class will take the seven column space for this division done now here you can see we specify MD here so for the medium size of devices I want 7 column space for this division type and for the small size of devices so I will say here call SM 12 for the small size of devices I will specify 12 column width for this division tag right just talk that I'm going to create another division tag and specify class call MD 5 so you can see here we have a 7 and the 5 here now let me explain why we choose 7 and 5 column to this day as I said earlier bootstrap has 12 column grade system so we specify 7 column space to this day and 5 column space to this depth so if you calculate if you add 7 & 5 then the equal of these two numbers is 12 in this row we have 12 column grid system so you can see these two division tag in the single row if you specify it here instead of 7 then this division tag will fall down to the next line I don't want it to fall down this division tag on the next line so I'm going to just specify 7 here so the width of these two division tag is equal to 12 columns right you can specify any with a 2-year deal between 1 to 12 column now just talk to that here I'm gonna create call SM 12 now I want to specify the column space to this division tag on small type of devices right so I specify here call SM 12 and in this division tag I'm gonna create h6 heading tag and specify a text so I'm going to specify a text in capital letters so I'm going to on the caps lock and say here author and just specify a daily tisha name right and just start the HUD here I'm going to create h1 heading tag and here I will say exciting adventure right now just talk to that I will create a paragraph and add some demo text so I will say Lauren 20 so this will bring up 20 demodex word here save the document if you open this HTML file you can see here we have this author the title and the paragraph now I want to create a button here so I'm going to just create just after this paragraph I'm gonna create here a button and I want to specify a class so I will specify class I will add a bootstrap class BTN and I will specify a light color to this brilliance I will say BTN light and just specify text by now for dollar 5.99 write save the changes and if you open here you can see you have a button here now I want to add some padding to this button so I will add here padding X so this will add left and right padding so I will add padding X 5 and padding Y so the padding Y will add top and bottom padding so I will say padding Y 2 so the changes and you can see we have a button here now I want to add image in this division time right so I will expand this deal and right here I'm going to add an image and here I will specify double dot and the forward slash so this field refers to the root directory and then I will select my asset folder and then select my PNG image and for the alt attribute I will say box save the changes and you can see here you have a book here right now I will add some height to this image so I will say H 25 so this will add 25% height to this deal right now let's move on to the next section where we add this beautiful image and this panel with the heading and the paragraph right so I will create here in the main section in the main tag I'm going to create I'm going to create a section tag and just specify a class so I will say section 1 in the first section right here I will create a division tag and specify container clause along with that I want to Center all the text so I will say text center now in this tube I will add a row to create a great column right just talk to that I want to create here two columns the first column will take six column width and the second will take six column width so I will say here call md6 and I will do the same here and say call md6 so here we have two columns with the space of six columns now just after that in this column I'm going to create here a division tag with the class and in this David I will add an image so I will add an image tag here and in the source attribute I will say double dot /i said and then I will select my image here so I will select this immature right and just out that for the old attribute I will say break you are free to leave this attribute as it is but I will say here play and just talk to that in the second column right here I'm gonna add a division tag and just specify a class panel so this is a custom class and along with that I will say text left using this class I will align all the text to the left side right now in this division time I will add h1 heading tag and say here mr. David Smith right you can specify your own name as well but I will just take here a dinging I'll just talk to that I will create a paragraph and specify padding top for all right and in this paragraph I'm gonna add a text so I will just copy this text and paste it in this paragraph and just talked to that I will create another paragraph right here just after this paragraph and in this paragraph I will copy and paste this tag all right save the changes and if you open this file if you open this HTML file in the browser you can see here this is very horrible without a CSS isn't it will studies when we complete the HTML file right now the first section is completed just after this first section I'm going to create here my second section so I will just name this section section and specify a class so I will say section 2 now I just want to specify here container fluid class so I will say container fluid and I want to remove padding so I will say a padding:0 now in this section I will create a Duchin tag with the class cover now this division tag represent this background section right an industry I'm going to add this h1 heading tag and the paragraph I will put this in the division - so I'm going to add here a division tag and specify class content along with that I will say text Center now in this step i will add h1 heading tag and say some features that made us unique right and here I will add a paragraph and in this paragraph I will add some demo text so I will say Laura M tan so this will give us a 10 demo words right so the changes and just after that just after this cover div right here I'm gonna add a container fluid class and along with that I will say text center now in this container fluid class I want to create these for dibs so I want to create here four rectangles so I will create a flex box to create these four rectangles in the single row one so I'm going to create here a division time I will first specify a custom class here so I will say numbers now just talk of that I will define this to you as a flex container so I'm going to add here D flex I want all these rectangles in the single wall so I'm gonna say flex m-d-r-o right now I will add another class which is flakes wrap and and just after that I will say flex wrap so I want to wrap these items soldier space over here a fix box and just after that I want to Center all the content so I will say here just define content Center and in this to you I'm gonna create four rectangles so I'm going to create here a deal with rectangle class so this is a custom class so we'll style this later I will copy this deal paste it here paste it here and paste it here one more time because I want four rectangles in the fourth rectangle right here I will add a number so I'm gonna add here h1 heading back and specify a number I will say 2 3 4 5 and just talked to that I will add a paragraph and say here happy client save the changes and you can see here we have here 2 3 5 and the happy client text then I will just specify here in the second rectangle I will create h1 heading tag and specify some demo number so I'm going to say here 6 7 8 4 and in the paragraph I'm going to add here cups copy and in the third rectangle I will say h1 heading tag and space file number 1 0 5 6 and the paragraph text is going to be tickets submitted all right and at the last in the fourth rectangle I will say h1 heading tag and specifying number so the number is going to be 9 1 5 2 you're free to specify your own number then we're going to add a paragraph here and specify text Toto projects save the changes and you can see here we have four rectangles in a row right we will stop this later in the style board CSS file all right now let's move on to the next section where we are the purchase heading with the paragraph and three cards right so I'm going to create here just after this closing deal right here so I'm not going to create a new section for that so I will create here a deep and specify a custom class so I will say purchase and also add text center class to center all the text all right now in this deal I'm going to add here h1 heading tag and specify text I will say purchase whatever you want alright and just off that I'm going to add a paragraph and add some demo text so I'm going to open this and copy this text and paste it here now just talk to that I'm going to create here a division tag and specify class cards if you open the bootstrap website and click on this card then you can see here you have different type of cards here now I want to use this card here right so just use this code I'm not going to copy this code I will write it manually and specify these classes so I will just create a card here and just after that I'm going to add here a division tag with the flexbox so I will say deep legs and just say Flex row and in this tip I'm gonna add this card right this card class so I will say here D god so don't confuse with this card and these cops so this car is a custom class and this is a booster class now for this to you I want to align all these cards Center so I will say here justify content center and along with that I want to wrap this car so I will say Flex wrap now in this class I will create a division tag and specify a class called body and in the body of this class I will create a title deal and in this deal I'm gonna add H five heading tag with the class God title alright and just specify here PDF text and just offer this deal here I will add a paragraph and I want to specify class to this paragraph so I will say card text now just after that I will add some demo text here so I will copy these tags from this website so I will copy this text and paste it here and now just off with its paragraph I'm going to create this by Injection so I will add here a division tag and specify a class rising and just here I have you an h1 heading tag and specify my price so I will just add it all the sign and say seventy seven point ninety nine and just after that here I'm gonna add this button so here you can see a button this is not actually a button this is an anchor tag just look like a button so I will and here an anchor tag and specify here a text so I will say for chase now now I want to specify bootstrap classes to this anchor tag so it looks like a button so I would say class and say here BTN BTN dark save the changes and if you open this file you can see you have here a button right I want to add some padding to this button so I'm going to add here padding X 5 so this will add left and right padding and I will say padding fine this will add the vertical padding and I will say here - now I also want to specify magic bottom to this button so I will say magic bottom five right save the changes and you can see here this button right now I want to add two more cards in the bow so just copy this card so I will just click on this deal and you can see here the closing deal so I will copy this card and paste it just after this closing game and I will do the same for the third card also so I will paste this again save the changes and right here you can see we have three cards now I want to change this text and this price right so I'm gonna change this text so I will say here a book and the price is going to be 99.99 and for the third card right here I'm gonna add print copy text and I will specify a price 58 point 99 dollar save the changes and you can see here we have three cars Y now if you look at this code this might be confusing for you for that reason I will add some comment here to understand this code clearly so I'm going to add here a comment and specify here first God why then copy this command paste it here and just say second car and then just put this comment here and say third car alright now I want to create the next section this one where we have the heading the paragraph and two panels so let's create this section so just talk this section the second section I will add a third section here so I'm gonna say here section and I've want to create a class I will say section 3 and for this section I will specify container fluid class with padding:0 and I want to send her all the text so I will say text center now in this section I will create a row so I will save over here now in this row I want to specify fill column width for this heading tag and this paragraph so I'm gonna add here in this deal I would say deve and create a column call MD drill along with that I will say call SM 12 I will add 12 column space for small size of devices right and in this Steve I'm gonna add h1 heading die and say download our app for all platforms and just after that I'm going to add a paragraph here and copy and paste some text so copy this text and paste it here and now I want to create here a div with the class platform so I will say platform and along with that I will add a booster class row right just after that here in this deal now in this row I'm going to add two columns so I'm going to add a div here with the class call md6 all right I will create another column and just after that for the first column I will say call SM 12 and I want to align this text to the right side so I will say right and for the second column right here I will say call SM 12 and specify text to the left side right now in the first column right here able to create a division time and specify a class which is a custom class so I will say they stop and along with that I want to specify some shadow to this day so I will say shadow LJ so this is a bootstrap class to specify shadow to the HTML element right now this will add some shadow and to this first element right now to create this type of design I will use flexbox so I will add here D flex and along with that I will say flex row and I was justify all the content Center now here in this flex box I want to add this icon so to add this icon I'm using font awesome website so I will just open a new tab and search for font awesome and from this font awesome dot-com website and from this website you can find different type of icons I'm going to just click on the start using free so I'm going to just copy the CDN I'm just paste it in this hair type right just before this a CSS style so I will paste this link here save the changes and now you can use any free icon from this website so I will click on these icons and search for desktop so here you can see the icon desktop I will just click on it and now here you can download this icon or just use this code so I will just grab this code so I will click on it and just paste this code right here in this first column save the changes and if you open the website you can see you have this icon here but the size of this icon is too small so I want to increase the size of this icon so we have a class called a a 3x so this class will increase the size of the icon so you can see here right and along with that I want to add some padding to this icon so I will say padding y2 and padding right 3 right just after die I will create here a division tag and specify text class and I want to align all the text left so I will say text left here and just after that I will add h3 heading tag and I want to specify a class to this h3 heading tag so I will say class padding top one and I want to add margin 0 and here in this h3 heading tag I will say dig stock and just after that I will add a paragraph and specify a class padding:0 and I want to add margin 0 oops 0 and I want to specify text here so I will say on website save the changes right so you can see this layout here just talked that I want to add the second this column where we have the icon of mobile and on mobile text so I will select this deal by clicking on this deal you can find the closing deal right just copy it and paste it in the second column right here and here I want to change this icon so I'm going to change this icon class so I will say here mobile and just off that I will change this text to on mobile and this is going to be on Play Store save the changes and you can see here you have this on mobile text with this icon so you can see here we have this mobile icon but I want to change this icon I think I specify the different icon here I want to change that so I will say here mobile out so here you can see the mobile icon and the text now this section is completed let's move to the next section where we create this team member section and the carousel I will first close this unwanted - now the next section comes in where we add this heading and the paragraph and you can see here we have three cards but actually we have four cards here we use two cards inside this carousel so we gonna learn how to create this team member section with this carousel so let's see how to do that so to create a team member I'm gonna create a new section here so I will just say here section and specify class section for in this section I'm going to first create a container so I will say container and along with that I will say text center to center all the text then just op that I will add the h1 heading tag and I'm going to add text dark class right so this will change the color of the text and here I want to specify a text so I will say what our readers says about us right and just talked to that I'm gonna add a simple paragraph with the text so I'm going to say here Laura M 5 and I also want you to specify class here so I'm gonna say class text secondary right so this will change the text color of this paragraph save the changes and if you open this you can see here you have this title and this paragraph right now just after that just after this D I'm gonna create here another day so I will specify a custom class here so I will say team and along with that I will specify a row here right and in this row I want to add three columns right so I will say here call MD for all right and I will copy this deal and just paste it here and paste it here so this class will specify 4 column space to this div to this deal and to this day right and just after that I want to specify column drill for extra small devices and just start that in this deal I'm going to post a center all the text so I was a text center and then in this day I'm going to create a card right so to create a card I will call the car class and just after that in this card I'm gonna create another day with God I am G top right and in this card image top class I'm gonna add an image so I will add here image track and in the source attribute I will just place it by my asset folder and here I will select my first member face right so I will select this one and here in the alt attribute I will just say remember all right and I also want to specify a class here to this image so I'm gonna say Here I am G fluid right just after this card image top D right here I'm going to create here a division tag and specify class card body and in the body of this car I'm going to add h3 heading tag and specify a class card title and then I will add the first name so I will say here you are free to specify any name here just after this h3 heading tag I'm going to create a paragraph with the with the class called text right you can see here I'm just following the structure of the bootstrap car right and in this paragraph I want to add some demo text so I will force back to my website and just copy this text I'm using the same text for all these cars you are free to specify different text right then here I'm gonna paste this text save the changes and write and at the last just after this paragraph I will add an anchor tag and here I'm going to specify a text here so I will say go somewhere right I'm also wanted to specify a class here so I will say class so I will say text secondary and along with that I will say text-decoration:none so this class will remove the different default border from this anchor tag right save the changes if you open this file you can see here you have a card right when we add still says this card look like this right now I want to add here one more text so I'm going to add just out of this anchor tag I'm gonna add a paragraph and in this paragraph I will specify a position of the member in the company so I'm going to say here CEO at Google all right and I will say here class I want to specify light gray color to this text so I will say text black 50 so this will boost applause to specify light gray color to this text save the changes and here you can see we have this text here right now just after that I want to specify margin to this car so I'm going to add here margin so I will say margin right - I want to specify inline block property of CSS to this car so I'm gonna say here D inline block right and then I want to add shadow so I will say shadow LG right save the changes and you can see you have this car with shadow in the second column right here I want to add a carousel to add a carousel I will back to bootstrap website and here you can find the carousel right here just starter this card just click on it and you can find here a different kind of carousels so I'm going to just use this simple slide only carols all right so I'm going to just copy this text and use it in this second column right here but before I paste it I want to speech over here a command and in this command I will say Carol zero start it alright and now I will paste it here now in this carousel you can see we have three items I want only tools so I will remove this carousel item right now in the first carousel item I want to display my card right so I will get rid of this image and clear the comment here and just to here card to right so I'm gonna just copy this car from here so just copy this car from this car class right from here to this closing game copy this and paste it here in the first carousel item right now you just need to change this image and the text right so I'm going to just change this image to this and then I'm gonna change this text so I'm going to specify here and then alright and just after that save the changes and here you can see you have a carousel right here now I want to add one more carousel item here but before I specify any carousel item I need to specify these text to the center of this car so I'm going to add here text center class save the changes and you can see here we have a sent a text right now just off of that for the second keiretsu item I will say text center and get rid of this image and I will copy this card right here and paste it here in the second carousel item but before I paste it I will specify a comment here and say God 3 paste it here and just change this image and I'm going to say here and I will select this u FS 2 image here and the text is going to be this right save the changes and you can see here we have a sliding carousel right I just talked of that in the third column I will fall specify called fail class to this column I also wanted to space over this class to this second column also so I will say here called 12 right now in the third column right here I'm gonna copy and paste the car again so I'm going to paste the car again so I will create a comment here and say God for and paste the card here so I will copy the first car right from here and just paste it in the third column right here and just talk to that just change this image some bonus piece right here UI phase 4 you have phase 4 and this state is something like this only we are Luis right Save Changes and you can see you have your third card right now I want to Center this text so I'm going to specify here text center States will Center this text right now the team member section is completed when we style this section this section look like this right now just after that the last section we wanted to create is a footer section in this footer we're gonna add this About section where we have this paragraph then we have this newsletter section this big box and this follows section so let's get started and create this beautiful footer now to create this beautiful footer I will just create here a container fluid class and along with that I will say padding:0 just after that oops I wonder specified zero here and in this tape I'm gonna add a row so I will say here row and I want to specify all the text to the left side so I'm gonna say text left alright and in this tape I will create three columns so I'm gonna say call md5 so I will specify five column space for this day then I will create the same deal here so I'm gonna copy and paste this live here and just talk that I will create a column MD - alright so you can see here we have two division tag with five column space and one key which intact has two column space so you can see here we are following the structure of booster because if you calculate and add these columns you can see you have twelve column space right and here I'm going to say call MD fine for a small size of devices and also just after that I will first create this about section and this paragraph alright so just create this about section to create this about section just create here H old heading tag and I'm going to specify here a class and just say here text right right and just see here I'm bound asked now just talk to that I will create a paragraph and specify a text color so I will say text muted so this will add light grey color to this paragraph and here I'm going to add some text so to specify text I will just copy this text and paste it in this paragraph right here just stop that I'm going to create another paragraph and I will specify class panning top four and just offer that specify text muted alright and in this paragraph I will use this text right so I will copy this text and paste it here now I want to change the color of this daily division name so I'm gonna wrap this dilution name in this contact so I'm going to create here spawn time and run this name in this spawn time so I'm going to say here daily tuition alright save the changes and when you create a style sheet I will specify this color to this day the fusion text alright now just out that in the second column right here I'm going to create here this section where we have this newsletter this paragraph text and this beautiful text box with this gradient button so I'm going to just add h4 heading tag and specified class text light and just to hear news later and just after that I will add a paragraph and specify text muted class and I will say here stay updated what laughs I will just add this text box so I will say here form I will get rid of this action attribute and just be super class so I'm gonna say here form in line and in this form I will add a division tag with the class call and padding left zero and just talk to that in this division time I will create here a Duchin tag and specify a class input group and just piece by padding right fine now in this Dave in this input group I will add text box and an icon so I'm gonna say here put type text and then specify a class which is form control along with that I will specify a background color to this class so I will say be too dark this will help black background color to this xbox and then I will specify a white text color to this input text box I will say text white now just after that I will specify a placeholder here and then specify here a placeholder me email now in this tape I'm gonna create here another division tire and specify class input group prepend right so this division tag is for this pattern all right now let's create this button so I'm going to add here another div with the class input group text and in this class I'm going to simple adhere this icon right to add this icon I will use I tag and I will switch back class so I will say fast if they add oh right Save Changes and you can see here if you open this file you can see we have this arrow here in the standard CSS file will specify gradient color to this button right now I'm just down to that in this last column right here to this column D - in this column I will add this follows text this simple paragraph and these icons so I'm going to just add here the toe reading tag and specify text light class and say here follow us just stop at that add a paragraph and specify text muted class and just to here let us be socio you can specify any text if you want right here I'm going to create here a division tag with the column class and just talked to that I'm going to add text light class and in this to you I'm going to add these icons so I'm gonna first add I tag and specify class fam if a Facebook all right so this will add a Facebook icon if you open this file you can see we have here Facebook icon Oh series my Facebook icon just get rid of this text light class because we will specify color for these icons when we create a style sheet right so I will just get rid of this class so I'm just get rid of this class and save the changes and here you can see you have this Facebook icon now just add a few more icons here so just copy this tag paste it here and just and here I warned instagrams I will say Instagram and just talk to that here I want Twitter so say we take here the last I want by YouTube icon so I will say YouTube here see you to changes and you can see here you have your Facebook Instagram Twitter and YouTube icon right when we specify style to this icon these icons look like this at the last I will switch over here to this column I will say call SM 12 right save the changes and you can see here the HTML file is completed if you look at this HTML file then it's horrible right because we didn't specify any stylesheet to this HTML document we specify stylesheet to glorify this HTML file so let's get started and create a stylesheet code for this HTML file so now the time is to style this HTML file using style dot CSS file right so I'm gonna open my style dot CSS file which is in my CSS folder which we had already created and link to the HTML file already right so I will open this file so the first thing we will do is I will just add some font family from the Google font which we are using in this website so I'm going to add your comment and say Google font open the new tab and search here Google font right here just click on to the Google font website and just select your favorite fonts so I'm going to just quickly select my favorite fonts once you done that just open your phone which you have selected and just click on this import and just copy this import statement and paste it in the style dot CSS file there is another way to import this phone family in your website using this standard way just copy this link and paste it in the style dot CSS file in the head section both are equal right so I will open my style or CSS file and here I have my font families which we are using in this website just talk to that I will just toggle this window right here right so now I just open your website and start with the global selector so I'm gonna first see like all the HTML tags and specify box-sizing border box right so the border box property allows you to include padding and border in an elements total width and height in an elements total width and height right just after that I'm gonna select header and section and just specify overflow X property he done so this property will hide all the left and right extra space from these header and the section right just onto that here I will just say root and in this road I'm going to create a few variables in this variable will specify font family and the color so to simply create a variable I want to specify double dash and specify my very appalling right and just peace of I value to this variable so whenever you want to access this value you just need to call this variable name right so I'm going to just specify here my font family so I'm going to just space if I hear my font name and the fallback value right now I will just quickly create here a few variables so here you can see we just created few variables in this variable we just specify the phone family and in this variables we just specified a color which we are using throughout this website so you can see me to use this variable in this file so to use this variable just specify your class or whatever you want so I'm going to just say here let's say I will just select here hitter and I want to specify here a lobster font family to this variable then I will just see her font family and to specify phone family I'm not going to specify a default family name instead I will just I will just call this variable so I'm going to just specify here double dash and specify my variable name right this font family is applied to this property right you can see me doing this throughout this course don't start with that I will just save the changes and now I will just select the header and the anchor tag and I want to specify pawn family to all the anchor tags so I would say font family and I want to specify foreign family South specified this one family to this anchor tag and select my phone family right and just after that I will specify a font size zero point 9 p.m. right and then I will specify a color white smoke just after that now I want to specify this the background gradient color to this header background so I'm going to just say here header and just specify background so I will first specify default back value for the old browser so I'm going to just specify here a color and then I will specify background and just call the gradient color we already created a variable here you can see we will just call this variable to specify a gradient background color here I will just called dash dash BG gradient right when we say this you can see this gradient color here now just after that I'm going to just select the drop-down content this one so I will just say here drop down content and I want to specify here display:none and I will say position:absolute background color and here I'm going to specify a color so I will say a white color here hi and then I will specify the minimum bit so I will say mean width and here I will say 160 pixel then I will specify box shadow and a box shadow property so I'm going to just specify values to pixel 15 pixel and 0 pixel and then specify RGB color so the first value is going to be 0 second 0 third 0 and the Alpha is going to be 0.2 right and then the Z index is going to be 1 now you can see there is no nested item here right now when we hold on these pages I want to display these nested items so to do that I will first select the drop-down content and select the anchor tag and I'm going to specify here color black then padding is going to be 12 pixel and 16 pixel and the text decoration is going to be none and the display is go when we hover on these pages and want to display nested items us so I'm going to be just here drop down content and select the anchor tag and when we hold on it I'm going to just specify a background color so we'll just say background and just specify hex value here and then I want to change this display property to block when we hover on these pages so you can see these nested items when we hover on these pages so we'll just say here drop-down however and select the drop-down content and when we hold on the pages I want to display these nested items so I will say display block here save the changes and here you can see when we hold on these pages you can see your nested items alright just talk to that I'm going to select the header and select the now item class and I won't select the last child of this now item class I will say last child and I want to add padding right 10.5 a.m. I'm using relative unit here which is a.m. you can see me using relative unit throughout this website just like e/m REM and women these are the relative unit in CSS you just are to that I'm going to select the header again and select the now item class and I want to specify padding 0.9 am two days now items right so we just added padding to this now items right now just out of that I'm going to select this now warp and so we'll just select the header first and then say now bar bad and I want to specify padding left eight brain right so here you can see we just specified a vein unit just talk to that I will just say here hitter now link and I want to specify a Howard effect so I will just say here hover and I will just change the color to black when we hover on these links right just after that I will select this title so I'm going to just a here header row until I call md5 and say here padding 4.2 women so you can see we specify beautiful mean you need for this padding right I used to specify different unit for different properties because I think your website will be more responsive but when you specify different unit for different properties that's my opinion the start of that here I will just select the header select it all and select call md7 this title section right and just peace of our cutting 22 women and 1 women and just after that I will add padding bottom which is 35 women all right say you two changes just after that I will select the header date oh and call md5 and select this image right this image and I will specify width to this match 90 percent save the changes just after that to start with this image no just after that I want to change this phone family so I'm going to select this call md7 and here I will say phone family and just call these variable right and right here I will select the header select the container class and then so I call em d7 h6 heading tag and I want to specify here padding women and later spacing for pizza when I save it you can see this type of result right right just after that I will just select the header the container and then call them d7 I just select this h1 heading back so I will say here h1 and specify font size 8.5 we have good mean and then here I will say font weight is going to be bold and then the last property is going to be padding which is zero point 1 a.m. and 0 M right save the changes and you can see this type of result I want to decrease the size of this pond so I would say 8 here right now just after that here I will select the paragraph this one so I will select post the header then the container and then they call em determine class and then select the paragraph just off that I will specify padding one female and five women right save the changes now I will just add this button so I'm going to just select the header the container and the call mv7 class and just select this button so I will say here button right and then specify border radius 20 pixel and font weight is going to be bold right so your button look like this now I want to change this text color so I'm going to just select this column md7 class this one and specify color white right so this will change this color right so this looks pretty much good oops I think I forgot to specify here an icon this one so I will just specify this icon in HTML file so I will open my HTML file here just here in the nav our brand right here just before these books I'm going to add an icon so I will add here I tag and specify a class fast if a book reader and then I will increase the size of this icon using FP and I will add margin Thanks three right save the changes and here you can see you have this icon here right just back to style or CSS file and so now you can see your header section is completed in this section we will style this image and this panel so so I'm gonna create here a comment and just specify here section one now in the fourth section right here I'm gonna post select this section one class and specify padding and species Y padding for top and bottom so I'm gonna say here 20 women and say here zero Save Changes now just after that I'm gonna select section one row and the call md6 class and I want to select this break class and this image right this image so I'm going to specify here opacity for this image so I'm going to say opacity is 0.8 and weight is going to be 80% and I also want to specify border radius to this image so I will say about a radius zero point 2 p.m. save the changes and you can see this image here right now let's tile this panel I'm gonna say here section 1 select it all and II call md6 class and now I want to select the last child of this class so I'm gonna say here last child alright and in this class I will say position:relative because I want to float this panel so I'm gonna say position:relative for this class and then I'm gonna select section one row and select this call MD sixth class and select this panel so here we specified position relative to the parent of this panel and then I'm going to specify here position:absolute then I'm gonna say doc 7v mean and left is minus 18 women right just talk to that I'm going to specify background white border radius I'm gonna say 3 pixel and text line I want to align all the text to the left side so I will say left and then I will specify some padding so I will say padding here and then I was faced by top padding 13 we mean the died padding is going to be 5 you mean the bottom padding is 20 women and the left padding is 10 women right then I'm going to specify box shadow property specify shadow so I'm gonna say 0 pixel 25 pixel 42 pixel and then I will specify RGB a color right so I'm gonna say here 0 0 0 and here for the Alpha I will say 0.2 right save the changes and you can see the style is applied to this panel now I want to split to a font family so we'll save font family and just call Rubick variable here right then I will say it's a index what save the changes and you can see this type of result just after that I'm gonna specify some style to this text so I'm going to first select this section 1 then Widow and II call md6 class then I will select the panel and the h1 heading time right this one and for this heading tag I will say font-weight:bold padding:0 point 4 a.m. and 0 here then I'm gonna say font size 2 p.m. right save the changes just after that I'm going to select this paragraph so I'm going to first say section 1 row call MV 6 class then select the panel and then select the paragraph and in this photograph I'm going to first specify point size zero point nine a.m. and the color and here I will specify RGB color so I will say rgba 0 0 0 and here I'm gonna say 0.5 save the changes so this color will specify light gray color to this paragraph now just after that so now the section 1 is completed now you can see it looks better than the previous one now let's move on to the next section so I'm going to style this section so I will open this up and just create a comment and say here section 2 now in this section I'm gonna first select the color class so I'm gonna say cover and just be survived with 100% then I will say height 55 women save the changes so this will add height and width for this cover class and then I'm gonna say background URL so I'm gonna say a background URL and here I want to specify an image so I'm going to just specify a path for my image alright that's it then I will select my image here so I'm gonna select this image right now I want to specify position for this image so I'm going to say here background position and say here - 25 REM and - 90 M right then I will say background size 150 percent and just after that I want to specify position relative to this cover I'm gonna say position relative right save the changes now just after that I want to specify here overlay color for this image so I'm gonna say here I will select this content class so I will say first here cover and select this content class and then I will say background and I want to specify here RGB a color so I'm going to say RGB a color right and here I'm going to specify values C zero zero and 0.7 save the changes and then I want to specify height and weight for this content so I'm gonna say height 100% and pick 100% right just after that I'm going to specify padding top for this text so I'm gonna say here 19 beam in so this will add padding talk to these tacks now just after that I'm gonna select this heading so I'm gonna say cover content and then select this h1 heading tag this one and specify font family but you are then the font size is going to be six women I want to make this phone responsive that is why we specify women here just after that I'm gonna say here color white smoke save the changes and then I'm gonna select this paragraph so I'm gonna say here cover dot content and then I want to select this descendant paragraph so I will say P here and I will say font family and I will specify here Rubick then I will specify the font size to women and the last specify a color so I'm gonna specify here hex values so I will say e5e5e5 and then I want to create these rectangles this rectangles so I'm gonna create here I'm gonna post select this number and just select this red class and in this class I will specify position:relative then I will say that index 1 and then I want to specify background so I will say background white with 17 gram and height is going to be 12 Ram I will specify here padding top three point five women and margin is going to be one red just talk that I would specify border radius point 5:00 p.m. and box-shadow is something like this 50 pixel and zero pixel I want to specify color here so I will say RGB a and here I will say two five five zero zero and zero point three four nine save the changes and you can see this type of result here alright now just stop that I want to specify these rectangles here so what I'm going to do is I will select these numbers specify margin top property - 15 V me so this will bring these rectangles here right and now just after that I will select these headings so I will select these numbers this correct class and h1 hitting tab and specify font of size 5 Ram and color is going to be tomato and then I'm gonna select this paragraph so I'm gonna select numbers then direct class and the paragraph and for this paragraph I will say font family and just specify this font family here alright right so these rectangles look like this now let's style this section so I'm gonna first select this h1 heading time so I'm going to open this standard CSS file so here I'm going to first select this purchase class then select this h1 heading tag and now I want to specify here padding top 15 women so this will add padding here and then I will specify here panning bottom 0.1 am and then specify font family and I will specify a lobster here so this will look like this alright our style is paragraph I'm gonna just select this paragraph so I will say purchase select this paragraph and I want to specify style and then I will specify color and I want to specify variable here so I will say light black and then specify font size 3v me and the last I will say padding-bottom 10 women right now let's tie these cards so I'm going to just style this car so I will open this up so to select this card I'm gonna first select this purchase class and then I will select the pattern game so I will say cards and select this card so I'm going to say card here right and first I will say here with 22 when and margin and will specify three women just talk to that and just talk to that I'm going to select the cards and select all the days so I will say dibs here and I will remove all the padding and margin all right and then I'm gonna say cards and unselect the title all right this one and for this title I'm going to first base by background so I will say background here and call the IG be a color here and here I will specify different values so I will say two zero eight two four one two four one and I want to specify alpha value 0.199 alright so this will specify this background color to this title all right I will say padding 1.4 Ram and 2.5 m so you can see this light blue color here now just talk to that I'm going to switch to a font size which is two women and just after that I will select this card and I want to select this paragraph so I will say card text and I will specify padding to this text so I will say 2.5 m and 3 them and just talk to that I will specify color to it so I will say light black color to it I will say like back just after that I'm going to just select this pryzen section right here this one and just select this card body and select this pricing section right and I will specify background our GPA color and I will specify here this this background color right so I'm going to copy this and paste it here and I also want to specify here the powder top right areas 170 pixel and then I would say border top left radius is going to be 170 pixel so this will create a circle here so you're gonna see here a circle right now just off that I will select this price so I will select this card body and then the pricing and then select this h1 heading back for this h1 heading tag I will post Pittsburg font size 10 women and padding is something 1 a.m. and 0.5 BM so you can see the card is ready now let's more and create this download our app for all platforms section so now that's time this third section so I'm going to open this title CSS file and create here a comment and say section 3 all right so to style this third section I'm going to first select this class so we'll say section 3 and I want to specify height to it so I will say height 70 women and just after that I will specify margin top I'm going to say here 15 women and now I want to specify background gradient to this section so I'm going to say here background now I will specify a variable which has a gradient color so I'm gonna say BG gradient right so this will add gradient color here now just after that I will select this h1 heading tag so I'm going to post select section 3 then I will select the call and d12 class and I want to select this heading tag so I will say h1 here right right and then I would say padding here I want to specify padding to the top so I will say 2 e m and for the right side I will say 0 for the bottom I'm going to specify 0.5 en and for the left I will say it 0 here right then I will say color here and specify a white smoke color to this heading with font size 6 women save the changes and then I'm going to select this paragraph so I'm going to select the section 3 column the twill cloth and the descendent paragraph and for this paragraph I will first specify padding 0 and 4 p.m. all right and the planning bottom is something different so I'm gonna say padding-bottom 2 a.m. right just talk to that I will say here color and I want to call a variable here so I will say light grey so I will call this variable right light gray variable and font size and font size is going to be three women so this paragraph look like this just after that I'm gonna select text off so I will say section 3 and select this dekstop class and specify post background and I want white background color to it so I will say white and then I want to specify an inline block here and then I want to specify display property inline block so I would say inline block here then the border radius is 3 a.m. and just after that I want to specify pairing so I will say padding to be mean and 4.5 women and the last I will say margin 1 p.m. so this panel look like this right just after that I'm going to select this section 3 then the desktop and I'm going to select this heading tag so I will say h3 heading tag here and I vote to specify font size to it so I will say font size for women along with that I want to change the font size of this paragraph so I'm going to say here section 3 they stop P right to select the paragraph font size is going to be two women so you can see the third section is completed now let's move into the next section in the fourth section we will start these cards so I'm going to just create here a comment and say section 4 alright so to style this section I'm going to first select in this section 4 so I'm going to say here section 4 class and I want to select the container first so I'm going to say continue and I want to select this h1 heading tag this one right so I will say here h1 and here I was post-pc 5 font size 6 women and padding top 14 women just talk to that I will select section for the team class and for this class I will add padding 10 women and for women so this property will add some padding to the top and the bottom right then I'm gonna just select these cards so so I'm going to select these cars and style it so I will just specify here section 4 and to select this card we have car class and I want to specify first year with so I will say with 22 gram and March in top is going to be 10 remain all right right here I'm gonna select this car text so I'm gonna say section 4 card and select this card text and I want to specify padding to it so I would say padding 0.5 p.m. all right just talk to that I'm gonna select this tank attack so I will say here section four card and then I'm gonna select the pattern class so I will say car body and then I will select this anchor tag all right I want to specify font size to it so I will say font size 1 point 5 p.m. so I will say 1 point 5 BM and save this so this will increase the size of this anchor at just after that I'm going to select this car item so I will say section 4 carousel item and I want to specify here padding left 3 gram we specify this property to Center this carousel right now I want to specify border radius to this image and to this image for that I'm going to create a class here a new class so we'll say border radius and I won't specify border radius 340 pixel and with 60% now I want to apply this class to these images right this and for this image so I'm going to open HTML file and in this file I will search for these images so here you can see these images now I want to specify this class to it right so I'm gonna add this class here save the changes and you can see this class is applied to this image now I want to add some padding to this image so I'm going to say here padding fork so I will do the same for this image as well so I'm going to open this up copy these classes and use this for this image as well save the changes and you can see these classes is applied to this image as well right now here I want to create a circle image so I'm going to add a booster plus here so I will say rounded circle and I will specify a bit 50% and along with that I will add padding for save the changes and you can see oops I think I was specified wrong spell here save the changes and you can see this circle image here right I will do the same for the second carousel item as well so I will just specify all these classes to this image as well so I'm gonna copy these classes and specify these classes to this image right now just stop that back to start our CSS file that's it now you can see the card section is ready and now the last section we want to do style is the footer this section now let's tell this footer so I'm going to open the style or CSS file and I'm going to create here a command and specify footer comment here so I'm gonna first like this footer tag so I will say here footer and I want to specify a background color to it so I'm gonna say background and I will specify RGB a color and say here zero zero zero and zero point eight one five now I want to remove this horizontal scroll bar so to remove that I'm gonna say here overflow X he done right so this will remove this horizontal scroll bar right then I'm gonna add here padding and I want to add here putting women and 18 women padding just after that I will select the footer dick paragraph I want to select this dilatation name so I had specify this name in the span tag so I will say here spawn alright and specify a hex color here so I'm going to specify here this color just after that I will select the footer again and select this input box and I want to specify here border border none' and save it now you can see the border is not removed add to overwrite the default I'm going to use important key word here right so this will remove the border from this input tag just off that I'm going to say pooter and I want to style the placeholder of these input tags I'm going to say input and sewing the placeholder so I will say a placeholder here and I want to change a color for this placeholder so I'm gonna say color white and specify important key word here now just after that I will select this deal so I'm gonna select here footer input group and select this input group text right and I will specify background here and I want to specify a gradient color to this button so I'm going to say here BG gradient right so this will add this gradient color here and I will just remove this border so I'm gonna say here border none' alright now let's time this follow section I'm gonna just move this window here and now and here I will first select the footer' then the column and I will select the I tab right and I want to specify color for this icon so I'm gonna say here color I'm gonna specify hex color here so I'm gonna select this hex color for these icons right now just top that I will say footer select the column class and I will add a CSS Adsense sibling selector so I will say here I and specify plus sign and select the I again so this CSS selector will select this second third and fourth icon right and leave the first one so I'm gonna say here batting 0 and 0.5 BM right and you can see your website is ready alright now I want to add some alright so now I want to add some sticky now the time is to add right so your website is ready now now let's see this website is responsive or not so I'm going to right click here and say inspect and select this mobile icon and select this tablet view right now let's see this website is completely responsive or not then you can see this website is not actually completely responsive for a tablet device so we need to make this website responsive for our tablet devices for that I'm going to create a new style sheet and change some style so I'm going to open my editor and from here I'm going to create a new file here in this CSS folder I will create a new file and name this file mobile style dot CSS and I want to link this file to HTML file so I'm going to just open my HTML and in the head section right here just after the style dot CSS I will link this file so I'm going to say here CSS and I will link this mobile standard CSS file right now just open this file now in this file I'm gonna add a media query so I'm gonna specify a style for a specific viewport I'm gonna first add a media query so I will say add media I want to only select the screen so I will say screen and I will specify here max width 768 pixel so I'm gonna first select the header and select the Navarone class and I want to specify padding left to it so I will say padding left one wrap so I want to align this navbar and write this one save the changes now you can see this number brand is aligned now just off that I want to select this panel this one so I'm gonna just say here section one row and select call md6 class I want to select the panel and here I will specify a pose for this panel which is initio right and the width is going to be initial and high it is also initial so here we just specified default position default width and default height right just after that I'm gonna select the section to select the cover and I want to just specify here background position and change the position of this image so I'm gonna say here - 25 women and minus 10v min - 10 women right and then I want to resize these rectangles so I'm gonna say numbers then I will select the rect class and here I'm gonna say width 10 Ram and hide a trend right just talk to that I will change this point so I'm gonna say numbers right and I will select the h1 heading tag and say here font size to ram right now just after that I will select this section 3 and here in this section this one and just specify height and hit it then I will specify padding to it I was a padding then be mean and specify important keyword right just after that I'm gonna select this section 3 again I want to select a row and the h1 hitting dad right this one I want to specify padding to it so I will say padding 6 women and for women all right so this will add some padding to this heading then I will just select this section 3 again select the row and select this column d6 class so I'm going to say here call em d6 and just specify text-align:center and to over at the booster property I will say here important right so this will Center these two panels right just after that I'm gonna just select the section 3 again see like the next stop I want to select this icon so I will say I here and just specify font size a to be mean just after that just select this section for now just after that I want to style this card so I'm going to just say here I'm gonna select first section 4 then I will select team class and I want to specify here display property flex and the flex direction is going to be column all right and just after that I want to Center this column so I will say a line content center right and just after that I want to add some width to this inner carousel so I'm going to say here section 4 and say here carousel in are all right and I want to add a bit 24 wrap all right now let's check this website for medium size of devices so I'm going to click on this medium size of mobile device so you can see here this website is actually it sponsor for the mobile version as well alright I want to add some padding here so I'm going to just create here a new query so I will say here media only screen and I'm gonna say here and and now I want to select this fit so I'm going to say here max width 425 pixel and right here I will like this class so I'm going to say here footer select it all and select call MD to class and here I will add some margin so I will say margin top a to be me so this will add some margin here now just up that I want to change this website for the medium size of devices so I will click on this 375 pixel viewport so you can see this website is responsive for this viewport as well right and if you click on this mobile device then you can see this website is responsive for mobile device as well but now I want to add some bit for this car for this car and and also I want to add a toggle button here for that I'm going to open the style sheet and just stop that here I will say media only and I will say 3 and Max with 320 so I will select this width 320 pixel and here I want to specify with for these cars right so I'm going to select this card so I will say section for God and I want to specify with to it 80 Ram all right so this card look like this and now I want to Center this carousel so I'm going to say here section 4 and select the Kuroshio inner class and I'm going to say here margin left - 14 women right so this will Center this carousel so now you can see this website is completely responsive for mobile device as well right now I want to just add this toggle button so I'm going to back to index dot HTML five right here and from here I want to change this toggle button this one right so I'm going to get rid of this bootstrap toggle button and here I want to space for my own taco button so I'm gonna add AI tag and specify class and just here fast FA align right and just specify text color so I'm going to say text light Save Changes right so now you can see this toggle button here so when you click on it you can see your navigation list so now you can see this website is completed so now we just need to add two more things in this website so I'm going to add this sticky navigation menu and this counter animation Y so now once your website is ready I'm going to create a sticky navigation menu so when you scroll down and reach to a certain position right here you can see the sticky navigation menu and when you scroll up this navigation menu is automatically disappeared so I want to create this navigation menu for my website so I will back to my main dot J's file and here I will post create a command and in this command I will say sticking navigation right and now let's create a variable so I will say left nav bar and I want to store nav give here so I'm gonna call the jQuery object so I will say here a dollar and in the parentheses of this object I will call a class so I'm gonna space by double quote and say dot now bar alright so this will store the nav our deal in this nav our variable let's stop that here I will create an event on window so I'm going to call the jQuery object and in the parentheses of this object I will say window and I want to create a scroll event on this window so I'm going to say dot here and say scroll right and just specify parentheses now in this parentheses I will specify hand our function to hand this event so I'm gonna say here I'm sure parent this is and just start the function using curly braces all right in this function I'm going to first get the complete height of window and just get this certain position like this so when you reach to the certain position right here I want to display this navigation menu so I'm going to just get that so you'll get the window height Falls so I will say console dot log and I will first print window dot inner height right so when you save it and go to inspect on the console you can see you have your inner height of your window right so this is your inner height just talk that I want to get this certain position so when Rich here so when we reach to section two right here I want to get the position of this scroll bar I want to get this position so I'm going to say here control.com and here I will call jQuery object and I want to say here section two dot on set and get the top position right save the changes and when you open your console so when you scroll down you can see you have this position right right here so when you reach here upon this position so you have this position here so I'm going to use this position so I'm going to get rid of the statement and just say here left over so I'm going to store this value in this variable and just to here section two dot offset so the offset method allows us to retract the current position of an element relating to the document so when you have the relative position I'm gonna get the property of offset which is top right and I will - window dot inner all right so when you've done that I will just print this on the console and show you the value so we just here top right and here you can see you have this position so just talk to that when you have this position then I'm going to say a window dot scroll top he is greater than Oh top so I'm going to call the variable here then I will say now bar dot add class I'm going to add a class to the nav bar so I'm going to specify a class name so I will say here sticky right and just start that in the ill statement I'm going to remove this class I'm going to say now bar remove class all right and to remove this class I will say here sticky right if the scroll talk is greater than Oh cough then I'm going to add this sticky navigation class or I will just remove it I need to create this class so I'm going to open the style dot CSS file and right here I'm going to create a comment and say here sticky class and to create a class I will say dot sticky and specify some properties and in this class I'm going to say position I will specify position fix then I will say top property 0 specify bit width is going to be 100% and background color I will specify RGB color so I'm gonna say RGB a and specify a background color here and just stop that I'm going to specify z-index nine nine nine nine transition all one point five second is alright save the changes and now when you open your website you can see your sticky navigation menu right here all right so it's working fine now you know that how to create this taking navigation menu now let's jump on to the next section where we create this counter animation like this let's see how to create this counter animation using javascript to create this animation I will just open main dot J's file and right here I'm going to create a command and just say counter animation all right to create this counter animation I'm going to first create here a function and specify a parameter so I'm going to say here selector and I want to store this function in the variable so I'm going to say read and count right just after that in this function I will call jQuery object so I'm going to call this dollars involved and in the parentheses I will say selector all right I will specify this parameter and now I will call each method of jQuery so I'm going to call here H and the parentheses of each method I will say function and the body of this function I will call jQuery object and just say here this so this giver is refers to the current object and now I will call animate method here so I'm going to call here dot animate all right and the parentheses of this method right here I'm going to call an object and create a property so I will say counter and to specify a value I will say dollar this and I want to store the text of the current object so I'm going to say this dot text so this will store the current object text in this property just talk to that here I will specify comma and specify second argument and in this argument I'm going to specify first a deviation so I'm going to say duration 4,000 so here we specify a number determining how long the animation will run so this 4,000 refers to for second right just pace of a comma here and specify the next argument so I'm going to say here easing swing this string in the getting which easing function to use for the transaction so I'm going to using here string easing function alright just after that specify calm here and clear the step function so I'm gonna say here step and specify a function here and for this function I'm going to specify parameters I will say value and the body of this function so what is this step function so this function to be called for each animated property of each animated element this function provide an opportunity to modify the object to change the value of property before it set so in this function what we are doing before we specify any value to this property I'm going to change this value here and count from zero to this text so here I will call the jQuery object and call this not text so I'm going to call math object here math dot seal so the math dot SIL method returns the smallest integer greater than or equal to a given number so I'm going to just specify here value I'm going to just specify this parameter in this method alright save the changes and just talk to bad I will create a scroll event so I'm going to just call the jQuery object and say window here and for this window I will say scroll and specify event handler here and I will say function and in this function I'm going to first get the position of an element so when you scroll down and reach to this position I want to get this position so I'm going to just copy this statement right from here and use it here in this scores event right and just change this section and I'm going to specify here numbers and just talk to that I will say here if a is equal to zero and window dot scroll top is greater than or equal to or greater than or equal to this variable then I'm going to increase the value of a and it is count this function all right so I'm gonna say here and count and in the parentheses of this function I will specify an argument all right and here I'm gonna say doc correct and just select h1 heading tag here so here we just select add this adding time all right now don't forget to create this a variable so I'm gonna say here let a is equal to zero all right save the changes and now we just go down oops something is going wrong so I'm going to open the console the error is and catch type error which is animate function I think I misspelled the animate here animate all right I used to do this type of mistake so you can see your counter animation is completed all right so you can see your site is complete you have your navigation menu your title this is your home page image the full section this sticking application menu this control animation despise injection and you have your team members your carousel and this footer all right so I think I have covered everything in this tutorial so that's it if you have any question you can ask me anytime if you find anything useful in this tutorial then don't forget to like this video and share it subscribe for more latest programming videos that is all for now I will see you in the next tutorial [Music] [Music]

Channel: Daily Tuition

Views: 595,164

Keywords: How to Make Complete Website Using Bootstrap/HTML/CSS Step by Step, complete website design with bootstrap, complete website design project, complete website using bootstrap 4, website design tutorial for beginners, website kaise banaye, how to create responsive website using bootstrap, how to create responsive website using html5 css3 and bootstrap, responsive web design bootstrap 4, #bootstrap, #html, #css, daily tuition

Id: zhllkjYYUVE

Length: 121min 0sec (7260 seconds)

Published: Wed Apr 10 2019