Bootstrap 5 advanced Tutorial - SASS/CSS

hey everyone how you doing thanks for checking out this video my name is patrick from vexa code so in this video we're going to build a multi-purpose layout with bootstrap version 5 and sas and the first thing you're going to do is to learn how to set up the sas environment so that can be able to work with sas then you're going to start building the project for a company called patrick's so we're going to start with the navbar which is the topmost part of this layout and then you're going to create a second section called the intro section so here you're going to create a brief introduction about the company and then on the right you're going to create this pop-up so you have this animated play button and once you click then a video will pop up from youtube or any other source that you choose from they're going to create another section called services so we're going to showcase some of the services of a company is offering from there going to create another section called testimonials so we're going to showcase what our clients are saying about the company and then from there we're going to create another section called frequently asked questions so here we're going to use bootstrap component called accordion so once you click then the question collapses and reveals the answer from there we're going to create another section for latest work so here going to showcase some of the latest work of a company is has created and then we have this filtering buttons for filtering the categories for the portfolio from there we're going to create another section called get started so this one is similar to what you call call to action so we have this form and then finally we have the bottom part of the layout which is the footer then from there going to make sure that our layout is fully responsive across variety of screen devices so before we get started make sure you have some basic knowledge in html and css so stick around and let's get started welcome back in this video we are going to set up the sas environment and this is to make sure that we have the correct environment for working with sas so the first one is to install node.js it's an open source server environment node.js allows you to run javascript on the server and it's free and it runs on various platforms so if your machine is not yet installed with node.js you can head over to the official website which is nodejs.org so here on the homepage for those who are using windows we have a download recommended for most users and this one is more than enough for this project alternatively you can also download the current one which has the latest features for the platforms like linux and mac you can check on this link that says downloads so here you need to download the one compatible with your platform or operating system and then once you download then you can install it on your machine and once you install then you need to open your terminal and run node minus minus version and this command will enable you to confirm whether your machine is installed with node.js alternatively you can also use node minus v so you can see mine is installed with version 15.50 it can be different in your case but make sure you see results like this so if you don't see results then it means your your machine is not yet installed with node.js so once you do that then we are ready to move to the next step and that is to create a file called package.json so this is a file which is going to help us manage all the dependencies or the packages that we're going to use on the entire project so first we need to create a folder which is going to keep all our project files so on my desktop i'm going to create that folder so new folder and i'm going to call this folder bootstrap minus v5 for version 5 and then i'm going to open that folder and i'm going to open my terminal or terminal inside that project folder so right click open in terminal so i'm using git bash and here you can see now i'm inside my project folder and this is the path to that folder so here i'm going to run a command which is going to initialize the process of creating that file called package.json so that command is npm init for initialize so this one is a step-by-step process of creating that file so hit enter so here you'll see it says this utility will lock you through creating a package.json file it only covers the most common items and tries to guess sensible defaults so the first item here is the package name and you can see it has already assigned the name of that folder which is bootstrap minus v5 that is the name of the folder that you're going to keep all our projects so if you're not comfortable with that name then you can type that name for example let's say you want a name like my project then you can type it there and then hit enter so for me i'm comfortable with that name so that is the name of that package name and then you can also have the option to change the version so i'm comfortable with that description i'm going to write learning bootstrap version 5 with sas the next item entry point test command we're going to put it later git repository later keywords so here you can enter as many keywords as you want separating them with comma or space so i'm going to start with the first keyword which is boost drop space boot strap minus v5 space we have sas space lan bootstrap space and then learn sas so one word so i'm comfortable with those five keywords actually four five sorry and then i'm going to hit enter other that should probably be your name or your company name so i'm going to write my name enter a license and then here the items you need to double check so if you're comfortable then you can hit enter for ok so now we have completed that process and now if you check inside our project folder you'll see we have a file called package.json the next step that i'm going to do is to add or install the packages that you're going to use in our project so we're going to start with the first package which is that sas that's us is a pre-processor it's going to help us compile sas to css and then we're going to install bootstrap of course and then we have font awesome this one is going to help us with the icons and then we have the auto prefixer so the auto prefix is a plugin that saves you the monotony of adding prefixes to your css so let's start with that sas so you can go to this website which is npmjs.com and search for that package alternatively you can also go to github and search for that sas so here on the search bar i'm going to type that hyphen sas and by doing that you'll be able to see the results and we need the result that says appear javascript implementation of sas so i'm going to click on that and here you'll see the first thing is this package has been duplicated that means the package has been renamed to sas so earlier it was named as that sas but now it's been renamed to sas so if you scroll down here in the usage there are different ways of installing and using this package depending on your needs and your environment so you can see here you can install it globally using npm install minus jsus which will provide access to the sas executable you can also add it to your project by using npm install and because you're using npm then you're going to install it using this command so i'm going to copy that command and then copy and then on the terminal first i'm going to clear and then i'm going to paste enter so by doing that you'll be able to see a new folder on our project folder called node modules which is going to keep all the packages that you're going to install so now as you can see we have that folder and if you look on the terminal you can see it has added 16 packages so let's look again on the node modules that folder you'll see we have that is some folders you can see we have some folders the 16 of them so i'm going to open this project on my vs code and here you'll see we have a new dev dependency on the package.json file so this one is sas version 1.0.12 so that is the by the time i was doing this video it can be different by the time you're watching this video so the next package you're going to install so we have bootstrap so you can go to the official documentation which is getbootstrap.com so on the homepage here you'll see currently version 5 and then if you scroll down here you'll see the command that you're going to use to install bootstrap so down here we have the installation and here you can see we have that command npm install bootstrap so i'm going to copy that command and then on the terminal i'm going to paste and then i'm going to flag it with minus minus save so this one will save it as a dependency so it has added that package now if you look on the text editor you'll see we have a new dependency called bootstrap version 5. so the next package you're going to install is font awesome so you can go to the official website which is fontosam.com and then down here you need to click on start for free so i'm going to click that and then if you scroll down here you'll see we have npm so i'm going to click on npm and then you'll see version 5.153 so this is the version that we're going to use and then using this package we have different ways of using it and here we have the command for installing it so you can see we have npm installed minus minor save and then the name of that package which is font awesome free so i'm going to copy that command and then on my terminal first i'm going to clear and then i'm going to paste enter so you can see it has added that package now if you check on the text editor you can see we have a new dependency called font awesome version 5.153 the next package that i'm going to install is auto prefixer so you can go to npmjs.com and search for that package so on the search bar i'm going to type auto prefixer and i'm going to click on the first results that says pass css and add vendor prefixes to css rules using values from can i use website so i'm going to click on that and here you'll see we have this autoprefixer post css plugin to pass css and add vendor prefixes to css rules so if you scroll down you'll see we have the command for installing this package so i'm just going to to search for that so i'm going to type install so you can see we have that command so i'm going to copy and then on the terminal i'm going to paste then i'm going to flag it with minus minus save enter so it has added the packages 91 packages so we check from the text editor you see now we have two new dependencies we have the auto prefix version 10 0.25 and we have post eli post css cli version 8.31 so with that we can start working on our project and we are going to install other packages as the need arises then from there the next step is to create an npm script which is going to compile our sas to css so on the scripts you can see we have a predefined script so i'm going to remove it and then i'm going to write my own so the first option on the script is the name of that script so we have the double quotes and then the name of that script so i'm going to call it compile colon and then sas and here you have the option to give it any keyword or name that you want to use then from there we have the command again we have the double quotes and you're going to start with sas the name of that package that we installed called that sas and then space and then the source of your sas files so i'm going to create a folder called scss which is going to keep all the sas files and then you have the column and then the destination of where you want to keep your compile css so here i'm going to tell the script to create two folders the first one is the assets and then the second one is css so it's going to get my sas from the css folder and then it's going to compile and keep that compile css to this folder called css so from there i'm going to save and then i'm going to create this folder called scss so inside the project i'm going to create that folder which is scss so from there we're going to put our script to test so inside the css folder i'm going to create a new sas file and i'm going to call it style dot s css so on the terminal before we write any style i'm going to start that script so on the terminal i'm going to run npm run compile sas so remember the name of that script if you check again on the package.json file you can see we have that the name of that script which is compiled call on sas so that's the script that you need to run on your terminal that is npm run and then the name of that script which is compile sas it can be any name that you've given so from there i'm going to hit enter and by doing that you'll see it has compiled and then terminated the process and then if you check on the project you'll see we have a new folder called assets and say and then inside the asset we have another folder called css and you can see we have the two files we have style.css and then we have a source map and source maps are files that tell browsers or other tools that consume css how that css corresponds to the sas files from which it was generated so they make it possible to see and even edit your sas files in browsers so that means every sas file that we create inside the sss folder is going to generate a source map inside the folder where we keep all the compiled css so for testing purposes i'm going to write some styles on the sas file which is the style.css and then you're going to see how it's going to compile on the style.css so i'm going to open that file which is style.css to the side so that you can see in real time how it's going to compile so before i write any styles i'm going to run the script again and here you can see it has compiled and then it has terminated the process so we need to keep this script running every time that we do changes to the sas file or to that folder called scss so to make it work we're going to modify the script a bit so inside the package to json file we're going to modify the script again and then we're going to add the watch flag so that it can watch for the changes that you're going to do inside that file or inside that folder called scss so here on the script where we have the sas i'm going to create a space and then i'm going to add that flag which is minus minus watch so that flag is going to watch for the changes that you're going to do inside that folder or any for any file inside that folder called scss so i'm going to save and then i'm going to run the script again so now you can see the script has not terminated the process you can see sas is watching for changes you can press ctrl c to stop the script so you can see now it's watching for the changes that you're going to do inside that file so let's do some styles on that sas file and then you're going to see how it's going to compile in real time so here i'm going to create a variable called primary and then i'm going to assign the value or a hex value that is a red color so we have ff and the four zeros and then i'm going to assign it so we have a class called test1 i'm going to assign it a color and then i'm going to assign it that primary color so immediately i save you'll see it's going to compile or watch for the changes and then compile it to our style sheet so i'm going to save and as you can see it has compiled and assigned that color so if we check now on the terminal you'll see it has already compiled and it's still watching for the changes that you're going to do so let's change we let's change the color let's change to another color so i'm going to assign it a yellow color so we have ff0 and then i'm going to save and as you can see it has already compiled and that means it is watching for the changes that you're going to do inside that file so that means our script is working perfectly fine so and just like i said this one was just for testing purposes so i'm going to remove it and then i'm going to save again as you can see on the style nothing to compile the next step that i'm going to do is to customize bootstrap so here you're going to override some of the bootstrap defaults so that you can achieve the needs that you want on the project i'm going to create a custom source file which is going to keep all the variables that you're going to override in bootstrap and this is because it is not good practice to modify or edit the bootstrap files so inside the sss folder and this is the folder that we said you're going to keep all the sauce files i'm going to create that file so i'm going to create it as a passion that means it will have an underscore and the underscore lets us know that the file is only a partial and should not be generated into a style sheet so we have the underscore and then custom dot ss so inside this file you're going to do copy some of the variables that you're going to override including the bootstrap itself so before you do the overall you're going to import bootstrap and then you're going to see some of the changes that you're going to do inside this file called demingkit.html so this is the file that you're going to see the changes that you're going to override it are some of the bootstrap components like the navbar which are using some of the primary colors we have things like buttons which are using some of the primary and the secondary colors and then we have things like tables we have borders and then if you scroll down here you have a lats so some of these components are using the bootstrap variables that you're going to override so first let's import the bootstrap and then you're going to link this file with the style sheet so we have the comment which is import bootstrap 5 and then i'm going to import it using the import address so we have node modules and then you have bootstrap and then sss and then you have bootstrap.css so this is the mains file or the main booster file which has everything and then close it with a semicolon then from there we're going to import this custom source file to our main sas file which is the style dot ss so i'm going to open that file and then you're going to import it and use it as a module so here we have the use add rule and then custom and then i'm going to close that with a semicolon and then i'm going to save then i'm going to open this style.css to the side we're going to see how it's going to be compiled in real time as you can see it has already compiled and now this is our style sheet so we're going to link that style sheet to the gaming kit so i'm going to open that file and then on the head section i'm going to link that stylesheet so we have the assets css and then style.css so remember this file is available in the description if you want to follow along on this part so i'm going to save and then i'm going to go live and check on the browser how it looks like so this is our file the gamingkit.html you can see some of the defaults like the primary color is blue which is being used here on the navbar you can see the navbar is using that primary color as the blue and that is the defaults so we have things like buttons we have a lots we have table border we have both button borders so these are some of the things or some of the defaults that you're going to override using this file and you're going to see some of these changes in this file so remember here we're going to do the overheads for the primary color and replace the blue without primary colors which is purple and the pink color then from there going also to do the overhead for the accordion button you can see this button you need to replace that with our plus icon so if you scroll down here on the testimonials you can see now we're going to replace this button which is the defaults to the plus and the dash cycle so you can see the default on the bootstrap we have this chevron up and the chevron down so we're going to override some of those defaults and this file is going to help us see some of the changes that you're going to do so the next thing now you have to do is to copy some of the things that you want to override the colors remember here we have used the blue the blue is the default so we're going to copy them from the bootstrap variables file which can be found inside the node modules and then we have the bootstrap scss and then down here we have the variables file so i'm going to open that so here you can see the primary color is assigned to that blue color as the default so i'm going to start with the gray colors and the white color so i'm going to copy the entire gray white and black colors to my custom so first i'm going to write a comment white and gray colors so then again we need to remove the default flag once you copy you must remove the default flag so i'm going to select all of them and then save so let's copy also the primary so that we can assign it our dim colors the one we have used in our layout so before we copy the primer we need to copy also the purple and the pink colors and that one i'm going to copy them at the top of that file my theme colors paste and then let's copy also the primary and the secondary color so those are the two colors that we need others can remain as default so here we're going to sign i'll bring by color to that purple and then for a secondary color we're going to change that to the pink color so also this one we need to remove the defaults and then i'm going to save we're going to see the real changes so now as you can see our theme they make it has changed the colors so now from blue to purple and also a secondary color from gray 900 to the pink so but this is not the color that you have used in our layout so again if you check from our layouts so we have this purple and this pink and these are different hex values so i have them here on my notepad so we're going to assign them to our gray color and our pink color so let's start with the purple and this one i'm going to modify a bit i'm going to call it purple dark because i have two colors so i'm going to duplicate that and then change from dark to light so for the first color i have it here this is my theme color so i'm going to copy paste we have the second color copy paste and then the pink color copy paste and then here we need to assign that color which is purple duck and then i'm going to save let's see the overheads in our naming kit.html so you can see now how they make it has reflected the colors that we have changed so these are the colors that have used on our layouts so again if you check here from the layout we need to do another override and that is the accordion buttons for collapsing so you can see here the default is what we have here on the dimming kit we have this this chevron app and then the chevron done so we need to replace that with our custom buttons which is the plus and the dashed circle so just like we did with the colors i'm going to do the overrides for the accordion variable so let's copy that variable to our custom so inside the variables i'm going to search for that accordion variable so i'm going to write accordion and here you'll see we have a number of accordion variables so first i'm going to copy the variables responsible for the colors of the icons and here we have the accordion icon color and another one which is accordion icon active color so these are the two variables responsible for the icon colors so i'm going to copy the two and then inside my custom first i'm going to write a comment so we have the accordion overrides and then for the accordion icon column i'm going i'm going to assign it to our primary color so that is the primary variable and then for the active icon i'm going to assign it our secondary color so that is the secondary variable then we're going to copy another variable which is the variable for the icons so we have the two variables which is the accordion button icon which has this svg icon for the chevron app so if you look properly here you'll see we have the svg code for that chevron app and then for the active icon we have the chevron down so i'm going to copy the two variables and then you're going to replace the icons with the plus icon and the dash circle so inside the custom i'm going to replace and then remove the default flag and then you're going to replace this svg code with the plus icon code so the question is where are we going to get the svg code so there are so many sources that you can get the svg code but i highly recommend that you use the bootstrap icons so you can go to icons.getbootstrap.com so here you're going to search for the icons that you're going to replace with the default which is the chevron app and chevron down so here i'm going to start with the first icon for the chevron app and i'm going to replace that with the plus icon so i'm going to just type plus so here you'll see the different versions of the plus icon and we are only interested with the one with the circle and we have the plus circle so i'm going to click on that icon and here you'll see the different ways of using this icon and you're only interested with the svg code so i'm going to copy the html code for that icon and then i'm going to paste it on my notepad so here we're going to replace the dimension code so i'm going to copy for there you have you can see here we have the two path so i'm going to copy the path for the first dimension or the dimension for the first path and then i'm going to replace the chevron up so where we have the dimension only replace that i'm going to select it and then paste then i'm going to copy the second path the entire path and then again i'm going to paste it here and then you need to remove the double quotes and replace that with a single quote double quote replace that with a single quote i'm going to save that file and then i'm going to check from our dimming kit so here you can see it has already replaced or done the override for that icon you can see now we have the plus circle so let's go ahead and replace the second one which is the chevron down with the dash circle so again just like we did you're going back to the search and they are going to search for that circle or for that dash circle so here i'm going to type dash circle so we have the dash circle and here we have it so again you have different ways of using this icon we are only interested with html code for that svg so copy again on my notepad so just like we did i'm going to copy the dimension only for the first path and then again i'm going to replace for the second icon which is the chevron down paste and then they copy the second part the entire path and then again here paste remove the double quotes and replace that with a single quote single quote and then save so let's see the overage on our dimming kit and there you have it you can see it has replaced that now we have the dash circle for the active and the plus circle for the inactive icon so i think we're done with that part the only thing we can do is just add some we can increase the font size of the icon so again you're going to copy the variables or the variable for that icon so here on the variables file you can see we have that variable for that icon width so i'm going to copy the accordion icon width copy to a custom so i'm going to replace the default which is 1.255 ram with 1.875 ram save check on the browser and there you have it you can see now it has increased the wind of the icon and that is exactly what we have on our layout so i think we are done with that part welcome back in this video we are going to create the file structure for our project and this is to make sure that we have a code that is well organized and maintainable so i'm going to create all the sauce files for the sections and the components so on the css folder i'm going to create the two folders so the first folder i'm going to keep all the sauce files for the sections and the second folder i'm going to keep all the sauce files for the components links like buttons make sense and animations and so much more so let's start with the first folder which is the sections folder so inside the css folder we have the sections and another folder also inside the css folder and this one we're going to keep all the search files for the components so let's start by creating the sas files for the components and i am going to start with the first one which is the button so apache underscore buttons dot ss so we're going to keep all the code for the buttons on that file another file or another component file and this one we're going to keep all the animations so underscore animations dot scss another file or another component file and this one we're going to keep all the mixins so underscore make sense dot css also another source file or another component file and this one you're going to keep all the typography so underscore typography dot sss so i think we're done with the components let's create the sas files for the sections so the first section is the navbar again underscore navbar.css so that is our first section of the layout so let's see the second section which is the intro section so underscore intro section dot scss let's see the that one so the third one we have this section for the trusted by companies like so i'm going to call it companies so we have underscore companies dot scss so we have the fourth section which is the our services or the services section underscore services dot scss so another section which is the testimonials so underscore testimonials.css another section which is the frequently asked questions so again underscore faq dot scss another section which is the latest work i'm going to call it portfolio and that's called portfolio dot scss another section which is the cts section i'm going to call it get started so underscore get started dot scss and finally we have the last section which is the footer underscore footer.css so the next step now is to import these partials to our main sas file which is the style.css so here i'm going to start with the components and i'm going to write a comment first which is imports the components so we have the use at rule and then the components folder and then you're going to start with the animations and then close it and then i'm going to duplicate three times so we have the second component which is the buttons and then the that one which is the make sense and then we have the third one which is the typography so let's do the same for the sections comment first so import the sections so again they use our tool and then we have the sections folder so we're going to start with the number which is the first section of our layouts and then i'm going to close that and then duplicate eight times to total to nine so we have one two three four five six seven eight so the second section we're going to import the intro section we have the that section which is the company's the fourth one which is the services we have the fifth fifth section which is the testimonials then we have the next section which is so we have the frequently asked questions and then the next section which is the portfolio the next one is the get started and finally we have the last one which is the footer so i'm going to save that file so now this file is going to import all these passions with the code and we are done with that part welcome back in this video we're going to start creating our project and you're going to start with section 1 of all out which is the navbar so on the number we have a logo which is also known as the nav brand and then we have the menus and here we have a button with a phone number so let's get started and create something similar like what we have on the layout so inside the project i'm going to create a file called index.html and then i'm going to add html starter code using emets so you're going to do a few things on this file the first one is to make sure that you're using the correct viewports and then you're going to add the title and then link it with that style sheet and also add the javascript so let's start with the viewport and we're going to check it from the bootstrap documentation so here on the introduction we have something we call the starter template it says be sure to have your pages set up with the latest design and development standards that means using an html5 doctype and including a viewport meta tag for proper responsive behaviors put it all together and the pages should look like this so here we're going to copy the viewport meta tag and then replace with what we have here on the file so let's add the title and i'm going to write learning bootstrap version 5 with sas then we need also now to link the style sheet so you have the link and then assets folder css and then style.css then from there we're going to link the javascript and here from the documentation you have two options the first option is by using the bootstrap bundle which has the popper and the second option is by using them as separate files that is the pop-up and the bootstrap javascript so here again you have the option to either link them using the cdn or downloading the source files i've already downloaded the source files and i have them in my project so we have the assets and then we have this folder called js so i'm going to link that file using the bootstrap bundle dot js so below the end of the body i'm going to add the scripts so we have the source so we have the assets folder and then the js and then i'm going to link it with the bootstrap bundle.js so i'm going to save the file so the starter template is ready we can go ahead and create the navbar so i'm going to start with a comment so we have the start the navbar section so to save time i'm going to copy the code from the bootstrap documentation so here i'm going to go to components and then down here we have the navbar so here i'm going to scroll down till i find the version that i want so i'm going to copy the this code and then i'm going to paste so you can see now here we have a class called container fluid so in booster version 5 a container must be within the navbar and you have the option to either use the the container fluid class or the container class so i'm going to use the container class so i'm going to save that and then you're going to see this page on our browser so i'm going to go live and here we have the navbar so we need to change the color so i'm going to change from bg light to bg primary so there you have it so before we start the number we need to do a few things on it the first one is to add the logo and then push these menus to the right and then make sure that the menus reflect what we have here on the layout so here we are going to start by pushing the menus to the right and here i'm going to add a class called justify content end so i'm going to add that class where we have the collapse class so we have that glass and then you're going to add the logo on the nav brand so you're going to use an image and here i'm going to create a folder called images so you're going to keep that logo inside that folder so we have the images and then the name of that logo which is logo.png and then we have the alt which is the logo image so let's create that folder so inside the projects we have the images then inside my project folder i'm going to copy that logo to my projects or to that folder so i'm going to drag inside my project folder and then i'm going also to drag it to that folder so we can see the results so far on the browser and there you have it you can see the logo and then the menus have been pushed to the right so we need to make sure that they reflect what we have on the layout so we have the home services testimonials frequently asked question portfolio contact and then the button so we have the second menu which is the services we have the third one testimonials so i'm going to duplicate the third one three times so we have the frequently asked question we have portfolio and then we have contacts and then we have that button so i'm going to to remove this one the disabled link so here we before we do that we're going to add the button at the end so we have the button the type of the button is button and then we have the class for that button so for now we're going to use rounded peel to give it that rounded shape we're going to add our own class and then here going to add the telephone number so we have the plus one and then zero two eight three six five four one three save let's see the result so far so there you have it now we can start styling so here we're going to do the styling on the sas file for this section which is the navbar.css so i'm going to open that file and then here i'm going to create a new class which you're going to add to the navbar i'm going to call this class menu so on the main we're going to create a gradient background so if you check here from the layout you can see we have a gradient and these are two colors we have the primary on the left that is our primary color and then on the right we have that secondary color or the secondary variable so let's create that gradient so we have the background and then i'm going to use linear gradient so here we need to specify the direction of the color so going to say to write and then we're going to use rgba so we have our first color which is the primary with an opacity of 0.95 then we need the second color again rg ba which is our secondary color with an opacity of 0.95 i'm going to save the file make sure the script is running and then add this class to the navbar so i'm going to remove the bg primary and replace with that menu class so i'm going to save let's see the result on the browser so what you're getting is an error for undefined variable and that is because the sas cannot be able to get the modules with the variables so to use mixins or variables of these modules we have to call them using namespaces and by default the namespace is the file name without the extension so here on the navbar we need to call that module which is the custom.css file so this is the module which has all the variables mixins and the bootstrap so here we have the use at rule and then we need to go back to directories so we have the two dots and then we have the custom so here we need to use the namespace and you have two options you can either use it as custom or just plain c so we're going to use it as custom and then close that and then i'm going to save let's see from the browser so still you're getting an error so to fix that we need to remove the namespace so here we're not going to use it with the namespace so we're going to use it as a star so the star tells us to remove the namespaces so i'm going to save let's see and there you have it you can see now it is working so let's continue styling so we need to add the color and do some padding on the menu items or the nav items so here you're going to nest it so we have the li we're going to do some padding so for the top and bottom you're going to put 0 and then left and right 0.7 ram save let's see and there you have it you can see now we have some padding on the nav items so let's change the color to white so we have the links so we have the color so here we need to put white and then some text transform to capitalize and then some font to it you're going to have 600 so save let's see so you can see the menus are bold but the colors has not changed so here we're going to fix that with the important so we have the important on the color so i'm going to save and there you have it so let's create a mixing for this gradient because you're going to reuse it so many times so i'm going to open that component which is the mixing.css file so here going to copy this gradient so first let's create that mixing so we have the gradient mixing so that is a comment so we have the at mixing and the name of that mixing you're going to call it gradient so let's copy that background gradient so i'm going to cut actually cut and then here we're going to include it and then the name of that mixing is gradient so let's copy that gradient to the mixing so i'm going to save the two files so our gradient should remain intact or our number so here we're getting an error for undefined mixing so here on the mixing we need to include that module so just like we did with the number we need to include that module which is the custom.css file so it should be at the top so we're going to paste and then save let's see so still you're getting an error for undefined mixing this time so we need to also include that module on the navbar so the mixing components so again we have the use at rule and then we have sorry we have the components and then the mixins so again use it as star close save check on the browser and there you have it so without mixing now we can be able to use it everywhere we want to use that gradient so the next step now is to work on the button and we need to create something similar like what we have here on the layout so we're going to do that on the sas file for that component which is the buttons dot scss so here i'm going to create a new class which is going to style that button and i'm going to call it btn rounded so i'm going to start by setting the position to relative and then some padding for the top and bottom we're going to set that to 0.9 ram and then left and right 1.25 ram then some font weight i'm going to set that to 500 and then margin i'm going to set that to zero i'm going to save then add that class to the button so we have the rounded pill and then btn rounded so save let's see from the browser and there you have it so we need to remove this dark border and replace that with the white border and then add this rounded circle which has this icon so here we're going to put that icon inside a span so i'm going to create a span and then on the buttons we are going to nest it that we have done so we have the spawn inside the beaten rounded span so here i'm going to start by setting the position to absolute absolute and then background color of that rounded circle which is going to be primary then we need to set the width and the height of that rounded circle so we're going to use 2.5 ram we can change that if it's too large or too small and then also for the height 2.5 ram so then from there we're going to add the module they've done here on the navbar we need to include this module so i'm going to copy so remember here we have used this variable so we need to add it there and then save let's see from the browser so you can see now we have a span but we that is not the position that you want it we want it inside the button so let's first change the border and then give it that position so for the border we are going to set the border so win the 0.1 ram solid and then the color you're going to use rgba which you're going to set that to white with an opacity of 0.6 then we need to position this span so this one should be closed with a semicolon so for the top set that to 50 percent write 5px then we need to translate y that is transform translate y minus 50 percent so i'm going to save let's see so you can see now at least we have it on the position that you want but we need to make sure that it's rounded and then do some padding on the btn rounded so for the span you're going to set the border radius to 50 and then on the bottom so this one should be 2.5 frame so you're going to set the padding for individual side so for the top you're going to leave it that to 0.9375 and then left 4 points ram and then for the bottom 0.9375 ram the same with the top and then the other one you're going to leave it at 1.25 ram so i'm going to save let's see and there you have it that is our button so now from there we're going to add the phone icon and here we're going to use the font awesome icons so on html we're going to add that icon inside this pan so we have the icon and then the class font or some solid and then the name of that icon is phone alt so here you're going to compile the font or some sas file so that you can be able to link that style sheet on the head section so inside the sss folder i'm going to create that sas file so i'm going to call it font awesome dot scss so here you're going to import four files so we have the first one so we have the user tool and then the node modules font awesome and then ss so you're going to start with the brands that is the phontosum for the brands then close duplicates three times so the second one second one we're going to import the regular and then we have the third one which is the font awesome dot css and then finally we have the solid so i'm going to save and then here you can see it has already compiled our font awesome dot css so we need to link that style sheet to the head section so you have the link and then assets css and then fontosum.css so from there now we're going to copy the web fonts to our assets folder and the web fonts can be found inside the node modules so we're going to copy them from the font awesome folder so here we have that folder so i'm going to copy it to the assets folder so paste so now we'll be able to see our icon so i'm going to the browser and here you can see now we have that icon so the next step is to style that icon so inside the buttons we're going to nest it inside the span just like we have done on the html so we have the icon so the color should be white so we have the white variable and then also we need to position each or that's at the center so here you're going just to define or specify the font size or set the font size to one ram and then also the line height so you have the line height which you're going to set that 2.5 frame so let's see save and there you have it so you can see now it is at the center of that circle and that is the position that we want it so let's add the background color for this button to white so on the btn round we are going to add that background color so we have white save let's see and they have it so the next one is to make sure that we create the hoover effect as you can see here from the layout so once you hover you'll see that gradients so let's work on that so here on the btn round we are going to create that hoover so we have the hover so the background color so here we're going to call the to use the mixing so we have to include it so include gradients save let's see so we're getting an error for defined mixing so you need to include that module inside this file so just like we did with the navbar i'm going to copy that module copy paste and now you can see we have that hoover with that gradient so we need to change the color once you hover the button and also this rounded circle so on the hoover we need to set the color to white so we have color which is white so i'm going to save let's see from the browser so now you can see once you hover the button the color turns to white so now let's work on this circle so we need a dark circle once you hover there but the button so the span should be inside the hoover so we have the span then the background color so we're going to use rgba and they're going to use that color so we have the black with an opacity of 0.6 so i'm going to save let's see so if you hover now you can see our circuit turns to dark color and that is exactly what we need so if we check from the layout now you can see the only thing we need to do is bolden the text you can see ours is a bit light so we need to add to increase the font size the font weight so on the b10 round you need to increase the font weight to around 600 or let me have 700 save let's see and there you have it so i think we are done with our parts so the next step now is to make sure that our navbar is fully responsive across variety of screen devices and to do that i'm going to right click and inspect elements so this is how our navbar looks like on moto g4 and this is a device with a screen window of 360. so we click here on the navbar toggler you can be able to reveal the menu so first let's change the color of this navbertola to a light color so here we have the class which you're going to change from number light to number dark so save let's see and there you have it you can see now it just changed to that light color so something else is we can even hide the button on small devices and that is targeting devices with a screen width of 600 and below or 575 and below so to do that we can either write the media query on the button where we have that btn rounded so bootstrap has some of the mixing that you can use to create a media queries so here we can include that mixing at the top and only hide that button on small devices with a screen window of 600 and below so we have the include that mixing so the mixing is media breakpoint down if you're targeting small devices then you can write down if you're targeting large devices then you can say up so down and then the device we want to target is a small device so you need to use the initials which is sm and then here we need to write what you want to do so the properties we're going to set the display to learn so display none [Music] so i'm going to save let's say from the browser so now if you click on the navbar toggler you can't be able to see the button on small devices with a screen device or screen width of 600 and below so to confirm that we need to open our compile css that is the style.css i'm going to open to the side and see that media query so here i'm going to search for that class which is btn rounded so down here you can see that media query it has already compiled so media query marks win 575.98 px and you can see the display is set to none so you can see here any device with a max window 575 the display should be set to none so it will not be able to display that button so let me show you if you're targeting a large device so here we can change the media player breakpoint to media breakpoint up so save let's see the media query and here you can see the media query has changed to minimum width of 7 576. so if you check again from the browser now our button can be able to be seen on small devices but on large devices for example let's go to a large device like an ipad pro and you can see now we can't be able to see the button so it depends on what you want to target so again here we need to change that to down because you only want the button to be displayed on large devices only so here targeting a small device to display none so i think we are now our number is fully responsive and everything is working perfectly fine welcome back in this video we are going to create section 2 of our layout which is the intro section so here you're going to start by creating this intro heading and then on the right you're going to create this illustration and this animated button and also this wavy background so let's get started so on the html let's create that section so here i'm going to start with the comments which is start the intro section so here we have that section with an id of home and a class of intro section which will have a container and the row and i'm going to create the two columns so i'm going to group them we have call md6 and another one called intros so here i'm going to say times 2 to create the two columns so i'm going to hit tab to create them at once so here i'm going to start with the content for the first column and then you're going to style it later so from the left we have this display or heading and then we have description and then the button so for the heading you're going to use h1 with a class of display two display two is a bootstrap heading class and then you're going to start that heading so you're going to use the span with a class of display tool and then you're going to modify that with intro so let me copy the text for the heading or the display copy and then paste and then i'm going to duplicate and then change that modifier to description so let me copy the text paste so let's create the button so here i'm going to copy from the navbar copy paste and then change the content and the icon so the content is get in touch and then the name of that icon is arrow right so this is how our content looks like on the browser so we need to do some styling on that heading in the description so on the typography i'm going to open that sas file so here we're going to use the block element modifier to style the heading and the description so we have that class called the display tool and here we're going to set the margin bottom to one rem and then text transform i'm going to set that to capitalize then you're going to modify the intro so you have that symbol or the upper stand and then the two dash and then intro so we're going to set the display to inline block and then font weights i'm going to set that to 700. so let's do the same also for the description we have that and then the two dashes and then description so if you noticed here on the intro i didn't specify the font size so i wanted to use the display to font size that is available in the bootstrap so for the description we're going to set the font size to one ram so we have the font size one ram and then here i'm going to set also the display to block so i'm going to save and then we need also to include the modules so i'm going to copy them from the buttons so i'm going to copy the the first one paste and then save so if you check now from the browser this is how our content looks like so we need to style the intro section so inside the sas file for that section which is the intro section we're going to set the background so first we need to include the two modules so we have the custom module and the mixing so i'm going to copy the two and then paste so we have that class intro section so here we need that gradient so we're going to include that mixing so we have include the name of that mixing is gradients then we need to do some padding so i'm going to use the shorthand and then only specify the top padding which is 10 ram for the rest i'm going to set that to 0 0 0 and then also we need to set the width and the height so for the width hundred percent height also hundred percent so i want the content or the height to scale with the content so i'm going to save let's see from the browser and there you have it so we need to separate the number and the intersection so here we're going to put the shadow so we need some shadow on the navbar so on the html where we have the number i'm going to include that class or to add that class called shadow and another class called fixed stop save let's see so that is how it looks like now so we need to change the colors for the heading and the description so on the typography we are going to set the two colors so we have the color so we're going to use white save let's see so here we need to include or to add the margin top on the description so we have margin top so i'm going to set that to 1.2 ram so save let's see so instead of using these colors here so we're going to set them on the html so i'm going to remove and then set them on the html so here on the row i'm going to add a line item center and then also add that class text white and then i'm going to save let's see so it's still in so the next step now is to create the font style of this heading if you check from the layout you can see the phone style is a bit different so here we're going to use a font called poppins which you're going to get it from google fonts so you can go to fonts.google.com and here you're going to search for that font called puppets so i'm going to type poppins and there it is i'm going to click on that link so here you need to select the styles that you want to use and i'm not going to use the italics so i'm going to select and start with the first one which is the regular 400 so i'm going to select it so once you select them they'll be displayed on this viewer and then you need to select the second one which is the medium 500 i'm going to select that style we have semiball 600 select we have the bold 700 i'm going to select that style we have the extra bold 800 select and finally i'm going to select the black 900 so the next step now is to copy the code and paste it on the head section of all outs so i'm going to copy and then on the html where we have the head section so paste and then from there let's go back to the google fonts and then you need to copy the rules so i'm going to copy that rule css rules to specify formulas and then on the typography we're going to paste it where we want to use that font family so we are going to paste on the display tool and then on the intro and then i'm going to save the two files check on the browser and there you have it so let's increase the font size of the description and also set the text transform to none on the description so here we need to increase the font size to 1.5 and then set the text transform to none i'm going to save let's see and there you have it so for the text for the description we need to add a class for line height so here i'm going to add that class so we have lh base i'm going to use lhbs or lh large so let's see how the large looks like so i'm going to save check on the browser so line height lag is a bit large so let's use line height base so i'm going to save so i think line height base is a bit better so i think we are done with that part so the next step now is to create the second column from the layout here you can see we have this illustration and this animated play button and once you click the animated button a video will pop up from youtube or any other source that you choose so let's work on that so i will start by copying this illustration to my project and here i have that illustration it's a png so i'm going to copy to my project so inside the images folder i'm going to create another folder called at so this way i'm going to keep all the illustrations and then paste so you can also get this illustration on this website called manypixels.co forward slash gallery so here you can search for that illustration you can also filter by categories types and also change the color so first let's change the color so here i'm going to use our one of the variables color and i'm going to use the purple light so i'm going to copy the x value copy and then here we need to change that value paste so before you search first make sure that you change the color and then here we're going to search for that illustration and just type coding so if you type that you'll be able to see that illustration and there it is so i'm going to click it so that i can be able to download you can either download it as a svg or a png so either way we'll work so once you do that then we can create that column or that content so inside html so first you're going to start with the comment so we have this second column and i'm going to stay start the content for the video and then also for the first column start the content for the intro so here going to create a class called videobox which is going to keep all everything so we have videobox and then we have that image so we have the images folder and then adds then intro section illustration.png and then we have the video illustration so we need also to add that glass for responsive images so it's called image fluid so i'm going to save let's see from the browser and there you have it you can see now you have that illustration so let's push it to the right or to the end so here we're going to add a class called on the intros where you have that column you're going to add the text end class to push it to the end i'm going to save let's see and there you have it now you can see it's on the edge or the end so next let's add the play button so you're going to add the play button after the illustration and it will be inside the link so you have the link and then also inside the span so we have the icon and here we're going to use phonto some icons so we have the icon and then the class font or some solid and then the name of that icon is play circle so i'm going to save let's see from the browser so you can see this small icon here so we're going to style it so inside the intro section we're going to do the styling of that file and you're going to nest it the way we've done here on the html so we have the container for the content which is the intros and then we have the video box inside the intros we have the link inside the video box and then we have the span inside the link and the icon inside this pan so that's how you're going to do the nesting so on the intersection you're going to create that class so we have the intros as the container for the content and then we have the video box inside the intros and then we have the link inside the video box and then we have the span inside the link and then we have the icon inside the span so for the video box we are going to set the position to relative and then on the link you're going to set the position to absolute and then here we're going to set the font size on the icon and i'm going to use six ram you can change that later it's too small or too large and then the color i'm going to use the dark color but you're going to change it later so here we're going to use black so i'm going to save let's see there is also found the browser and there you have it you can see now we have that icon and that is not the position that you want to be so we need it at the center of the column or that the illustration so here we can use the bootstrap utilities for positioning that icon and in earlier version of bootstrap we only had a position static position relative position absolute position fixed position sticky in the new version now you can arrange your elements using these properties like the top for the vertical top position we have the stat for the horizontal left position in left to right we have the bottom for the vertical bottom position we have the end for the horizontal right position in left to right you can also use use these other values for the zero for zero edge position fifty for the fifty percentage position hundred four hundred percent edge position so you can see we have those properties here all the classes you can also center your elements using these new classes we have the translate middle and then you also have this applies to transformation translate x for the minus fifty percent and translate y for the minus 50 to the element which in combination with the edge positioning utilities allows you to absolute center and elements so you're going to be using some of these classes to position that icon but for now we need to write our own and here we're going to write it or create a mixing which are going to reuse this code so inside the makesense.css we're going to create that mixer so here is i'm going to start with the comment which is absolute center so we have the at mixing and i'm going to call it absolute center so here going to set the position to absolute and then top 50 50 percent left also 50 transform translate we have minus 50 percent and then minus 50 percent i'm going to save and then you're going to include this mixing on the link so i'm going to include that mixing absolute center so we have it here close and then i'm going to save so let's see from the browser and there you have it you can see now we have our icon at the center of that column so if you check from the layouts you can see now that is the position that our icon should be so let's change the color to reflect what we have on the layout so here we are going to use secondary save sorry we have the secondary save and there you have it you can see now we have that icon at the position that you want it so this mixing you can reuse it every time that you want to position something at the center that is position absolute so now let's use the bootstrap position utilities to position the icon so we're going to do it on the html so here on the link you're going to add the class and we're going to start with position absolute that is the class and then top 50. and then start 50. and then you need center to center the element or the icon and you're going to use translate middle so we have it here i'm going to save and then where we have that position absolute you're going to remove it or just comment it so i'm going to save so let's see from the browser and as you can see our icon is still intact at the position that it was previously so next up we are going to create the background wave so from the layout here you can see we have this background wave at the bottom of that section so you're going to do this from the help of this website called getwaves.io so here we're going to make sure that we generate something close or something similar like what we have here on the layouts so you can use these two buttons to change the direction of the wave we have the one facing at the top and the one facing at the bottom here you can change the color and here you can play around with this button to generate random waves till you find the one that you want to use so we're going to change the direction facing the app and then i'm going to do play around with this button till i find the one close or similar to the one you have used here on the layout so i'm going to use this one i'm going to click to get the code so copy svg code and then on the html at the bottom of that section i'm going to paste and then i'm going to change this color from blue to white so hex value for white is fff or 6f and then i'm going to save check on the browser [Music] and there you have it now we have that background wave so the next step now is to animate this icon from the layout you can see the play button is animated so let's work on that so on the intro section we're going to create a class called border animation so here you're going to set the position to obsolete obsolete and then you're going to set the width and the height and you're going to use the same size we used on the fonts on that icon sorry which is 6 ram so we have the width we have 6 ram same with height 6 ram then we need the border we're going to start with the width which i'm going to set to 0.55 frame solid color i'm going to use white so i'm going to save and then you're going to add this class to the html where we want that border to be so i'm going to create a span with a class of border animation class so i'm going to save let's see from the browser so you can see this border so let me change the color to be able to see it properly so i'm going to change from white to black save let's see so you can see this border so we need to change the color sorry we need to make it round so we need to change the border radius or set the border radius to 50 percent so we have border radius 50 save let's see and there you have it so the next thing now is to position it to where we have this icon because it must be in that position same position with the icon so that can be able to animate position that you're going to set the top position to zero and also the left position to zero so we have left zero so i'm going to save let's see from the browser and there you have it now it is at the position where we have that icon so next i'm going to create an animation which is going to animate that border so inside the animations.css we're going to create an animation called pulse so i'm going to start with a comment which is pulse border so here we have the keyframes and i'm going to call it pulse border so from zero percent we are going to scale it from one so we have transform and then scale it one scale it one and then two hundred percent we're going to scale it to 1.5 so we have scale 1.5 then you're going to add this animation to our animation border class so animation name we have that pulse border it's going to last for one second linear infinite so you have linear infinite so i'm going to save let's see from the browser so you can see now animation is already working so we're going to create two animations so here on the html we're going to duplicate and then here going to modify that animation so we have the first border minus minus border one so here you're going to set the two borders with a different animation delay so we have animation delay for the first border which is going to last for one second and then for the second border minus minus border two animation delay so we have this animation delay 1.2 seconds so even this one should be animation delay not animation animation delay so i'm going to save then on the html we need to nest it the way you have done so here we're going to add for the first one we have border animation minus minus border one so i'm going to copy that to the second border so this one should be border two so i'm going to save let's see from the browser so we can't be able to see the border so what you're going to do here on the animation you're going to set the opacity for the first from zero we're going to set the opacity to one and then on the hundred percent we're going to set opacity to zero so you have opacity one so i'm going to copy and then this one will be 0 200 so i'm going to save let's see so now you can see we have the two borders so we need to change the delay animation delay so here on the intro section we need to change from 1.2 to 1.5 and then also this one should last for 1.5 so i'm going to save let's see and there you have it you can see now the two borders so let's change the color to white on the border save let's see and now as you can see that is our animation so if you check from the layout you can see we have achieved the same results and i think we are done with that part so the next thing is to create the video pop-up you can see from the layout once you click this animated play button a video will pop up from youtube or any other source that you choose it can even be a self-hosted video so to create that you're going to use a free javascript lightbox called g lightbox from brt digital so you can go to github and search for this brt digital or just g lightbox alternatively you can also go to npmjs and search for that package called g lightbox so here you see it says deletebox is a pure javascript lightbox it can display images iframes inline content and videos with optional autoplay for youtube vimeo and even self hosted videos so you can see it has some good features it's fast and responsive that means it can work with any screen size we have the gallery support you can create multiple galleries we have video support for youtube vimeo and self-hosted videos with autoplay we have support for inline content iframe support keyboard navigation touch navigation zoomable images api that means you can control the light box with the provided methods and also it's dimmable that means you can create your skin or modify the animation with some minor css changes then on the usage we have different ways of using this lightbox you can install it using npm and you can also manually download the source files and then link the javascript in your html so i'm going to go with the second option that is to download the source files and then i'm going to link the javascript and the style sheet in my html i have downloaded the source files so i'm just going to copy the source files to my projects so here we have this folder called g lightbox master and this is the folder which has all the source files so inside that folder we have another folder called list and this is the folder which has the files that you're going to use so if you open that file you'll see we have the css folder which has the style sheet and we have the two versions and then also we have the js folder which has the javascript and again we have the two versions so i'm just going to copy the two folders to my project so copy and then inside my projects so i'm going to keep them inside the assets folder and then inside their search folder i'm going to create another folder and i'm going to call it vendors so here i'm going to keep all the source files for vendors so we have vendors then inside that folder i'm going to paste so then from there now we're going to link the two files to the on the html so let's start with the javascript and they're going to link link it at the bottom so here we have the scripts and then we have the source so we have the assets folder and then vendors and then js so you can use any of the two options i'm going to use the minified version and then we need also to link the style sheets on the head section so we have link and then we have the assets folder vendor and then css and again i'm going to use the minified version then from there we're going to set the lightbox options for the video you can see here we have the lightbox options and we have the options for the image and you can see the type is an image and then we have the options for the video and you can see the type is a video so here we have the link which is an option you need to set the link and then you have the type whether it's an image or video and then the source you need to specify the source either from youtube female or self-hosted video and then you have the wind you can also set the autoplay videos to true first you need to declare using the const keyword so i'm going to copy that declaration and then at the bottom we need to create another script immediately below the glitbox javascript so we have the script and the type is text javascript and then i'm going to paste so here you need to remove the touch navigation loop and the autoplay videos and then you're going to replace that with the options that we have for the video so i'm going to copy just to save time and then we need to replace the link for the video so here i'm going to copy from one of my videos i have on youtube so you have two options you can either copy the url of the video or just click on this link that says here then you can copy the link so i'm going to replace that and then paste and then from there we need to add the g lightbox class where we have that animated play button so we have g lightbox so you need to add that class and then i'm going to save so let's see from the browser so now if you click the animated play button you'll be able to see the popup from youtube so you can see now we have that pop-up from youtube so here remember you can also set the autoplay videos to true so we need to add that option so we have autoplay videos we have true and then i'm going to save let's see again so now if you click again you'll be able to see the auto play videos working and there you have it so in this video we're going to build a mod and the good thing about that light box you can see it's fully responsive and this one is a screen device with a screen window 316 you can see it's fully responsive so i'm going to switch to another device like a medium device and again you can see our our light box or the pop-up is fully responsive so with that we are so with that we are done with that part so the next thing is to make sure that our section is fully responsive across variety of screen devices and to do that i'm going to right click and inspect elements so before you write any media query or do anything we're going to see how our sections look like on various devices so this one is moto g4 it's a device with a screen window of 360. and the content is not bad so here we can decrease the font size a bit for the description so let's see from another device like pixel 2. here the content is not that bad what about iphone x not good ipad not good so what about surface duo not bad iphone 678 plus i think not bad but here we can decrease the font size of the description a bit so to make this work we are going to on the typography where we have the description we are going to decrease the font size for small devices that is any device with the screen window of 600 and below we're going to set the font size or decrease the font size so here we're going to focus first on mobile devices so we're going to set the font size to one ram and then here i'm going to write a media query which is going to target large devices so we have that mixing so include media breakpoint up so from large so we have to use those initials lg for large devices and then we are going to set the font size to 1.5 frame also we're going to set the display to inline block so here the display we're going to set that to inline block so i'm going to save and look at the content again so now you can see on this device which is an iphone 6 plus the description is a bit small and that is what i wanted so let's see from another device like moto g4 still the same so what about an ipad as you can see the section is good on that device so let's see from an ipad pro and there you can see now the font size of that description is a bit big so it can even decrease to 1.4 m so let me decrease to 1.4 save let's see yeah now you can see the content is not bad perfect so let me go back to moto g4 perfect pixel 2 perfect surface duo perfect iphone 5se i think we need to target i think it's all bad so with that i think our section is fully responsive and we can move on welcome back in this video we are going to create section 3 of our layout which is the companies so let's get started and create something similar like what we have here on the layout so on the html we're going to start that section so i'm going to start with a comment start the companies so here we have that section with a class with an idea of companies and a class of companies it will have a container and a row so here we're going to start with that heading we have trusted by companies like so i'm going to copy so here we have h4 with a class of font-weight bold and a class of lid and some margin so i'm going to use mp3 margin bottom 3 and then the text tab and there you have it so i'm going to save so let's see from the browser result so far so this is our text so we need it at the center so i'm going to add on the row text center class so we have the text center save let's see and there you have it you can see we have our text at the center next i'm going to add the heading line from the layout here you can see we have a line below the heading or the display and actually these are two lines so we have the first line which is content before and the second line which is content after so let's work on that so on typography i'm going to add that class first i'm going to start with a comment which is heading line the class i'm going to call it heading line so this one is for the first line so we have content before and then we have the contents and then i'm going to set the width for the first line to 10 ram and then the height i'm going to set that to 0.1 ram [Music] then i'm going to set the display to block then some background color i'm going to use primary and then i'm going to duplicate this class for the content after so duplicate and then here we need after so this one is for the second line or the line below the first line so i'm going to save and then you're going to add that class below the heading and then i'm going to save let's see from the browser so we have the lines let me add some margins so that you can be able to see it properly so we have margin bottom five save let's see so now you can see we have our first line so because they are having the same width so i'm going to change for the second which i'm going to set to to rem and then for the width height i'm going to set that to 0.2 save let's see now you can see we have the line the first one and the second one so here we need to set some margin so for the second line i'm going to set some padding at the top so we have padding top i'm going to use 0.5 ram and then i'm going to save let's see so now you can see we have the two lines the second one is a bit has a higher height than the first one so we need them at the center so here we're going to add so i'm going to select the two and then add the margin that is set the margin to zero out for horizontal centering and then i'm going to save let's see and there you have it now you can see we have our line at the center so for the second line i'm going to add some margin at the bottom margin bottom to one rem save let's see so and there you have it next i'm going to add the images or these logos to my project so we have the six logos so here i have a folder called companies you can see the logos are named company one all the way to company six so i'm going to copy the entire folder to my project so copy so i'm going to copy them inside the images folder so on the html you're going to create that content and i'm going to create another container so here we're going to start with the comment which is start the company's content so we have a container class which will have a row and then i'm going to create the six columns which will have the logos so here i'm going to group them so i'm going to use call md4 and then another class or another container for the logos i'm going to call it companies then i'm going to use block element modifier to style that logos so we have the companies and then underscore underscore logo box then we need the images so we have the image and then the source of the images we have the images folder and then the companies folder which have the logos so if you check here again from the folder you'll see the company logos are named company one all the way to company six and they are in png so here we have to write that company minus dollar sign to assign each value and then dot png then we need an alt which will be company dollar sign logo then we need the title so the title will be company again dollar sign logo then we need a class called image fluid for responsive images so we have image fluid so here i'm going to say time 6 to generate the six columns with the content at once hit tab and there you have it you can see now we have the six columns with the contents so let me arrange them properly here and then i'm going to save let's see from the browser so now we have our logos the next step now is to style them so inside the companies.css file that is the sas file for that section so i'm going to open that and you're going to start by styling this class called companies because this is the container for the content on that section so we have the class companies so here i'm going to start by setting the padding sorry not padding top but padding you're going to use the shorthand for the top zero and then zero and then for the bottom you're going to set that to five frame and then zero for the left and then here we have the companies sorry we have this class remember how we have nested them we have the companies and then underscore underscore logo box so that's how we're going to nest it so we have my underscore underscore logo box because the logo box is the parent container of all the logos that is the images you can see here we have the logo box and then the images so here going to set the width so we have we are going to use max width we're going to set that 200 percent then you're going to set the height so here i'm going to use ram you can change that then you're going to style the image so here again only to set the height so that it can scale to 3 ram so i'm going to set the height 200 percent so i'm going to save let's see from the browser and there you have it you can see now we have the images of scaled to the wind of the column and the height of that which is rhythm so let's continue styling here so here i'm going to add some margin at the bottom i'm going to use two ram and then we need some padding i'm going to use 0.5 ram and then we have text align center and then not forgetting me to set the position to relative i'm going to save let's see from the browser and there you have it now you can see they have scaled so we need to add some shadow on the columns you can see from the layout here we need some shadow so on the html i'm going to select all the classes the logo box and then i'm going to add the shadow small so we have that class shadow small so i'm going to save let's see and now as you can see we have the shadow so the next step is to make sure that our section is fully responsive across variety of screen devices so i'm going to right click and inspect elements so you can see this one is moto g4 a screen window of 360 and the logos are screen scaling and fitting nicely in one column so i'm going to check it from another device like an ipad and you can see these are an ipad a screen window of 768 and they're fitting nicely in three columns so i'm going to check it from another device larger than that so we have ipad pro and you can see also they are fitting nicely but here we have so much space that they can fit in one line so to fix that i'm going to add another column for target large devices so i'm going to select all the columns all the classes and then i'm going to add that class or that column that is called lg2 so i'm going to save save let's see so now they are fitting in one line so i'm going to change the screen width and there you can see again they are fitting in nicely in one line so i'm going to close the inspector and as you can see we have the logos fitting nicely in one line as we what we have here on the left so the next thing is to make sure that once you hover the logos they turn to grayscale so let's create that hover effect so on the companies where we have the image we have the hoover so we have the filter property and then grayscale so i'm going to set that to 120 save let's see so now if you try to hover the logos you see they're turning to grayscale so i think we're done with that part we can move on to the next step welcome back in this video we are going to create section 4 of the layout which is the services or our services so let's get started and make sure that we create something similar like what you have here on the layout so on the html i'm going to start that section first i'm going to start with a comment which is start section 4. the services so we have the section with an id of services and a class of our services we should have the container and a row so i'm going to hit tab so here going to start with that heading so we have the our services and then this heading line copy so this one is h1 with a class of display 3 and a class of font-weight bold i'm going to tab i'm going to save then we need that heading line so we have the class heading line and some margin at the bottom so mb5 so i'm going to save let's see so we have the heading so we need it at the center so here we're going to add the text center class so we have the text center i'm going to save let's see and there you have it so next we're going to create the font style of this heading so we're going to do the same way we did with display 2 on the introduction so we're going to add that font formally called poppins so on typography we're going to create that display 3 so first is a comment which is display three and then you have that class display three so here i'm going to copy the font family from display too so copy and then you're going to paste save let's see and there you have it you can see now the heading is using that font family called poppins next we are going to create the two columns which have the two description and the border at the center so let's work on that so here i'm going to create another container for that content so i'm going to start with a comment which is start the description content so you have a container class which will have a row and the row will have some padding at the top so i'm going to use padding top three sorry two and some padding at the bottom so we have padding bottom two and then some margin at the top five and then some margin at the bottom so m b three and then we need the two columns so i'm going to group them so i'm going to use call md6 and then i'm going to say times two to create the two at once hit tab so i'm going to start with the description for the first column so here we have a class called bg white and some padding so i'm going to use p3 tab and then h2 with a class of font to it bold and a class of text capitalize and a class of text center so i'm going to copy the text from the layouts copy paste then for the second column the description for the second column again we have bg white and a class of some padding so we're going to use b4 and then a class of text stats to align it at the at the left then you're going to create a paragraph with a class of one tweet lights and a class of text stats but you already have it on the bg head so i'm going to hit tab and then i'm going to copy that text from the layout paste i'm going to save let's see from the browser so there we have now our two description so the next thing now is to add this border at the center of the two columns so here i'm going to create a class called bolder right so in the first column i'm going to add that class which you're going to style it we have border right and then inside the typography we are going to style it let's start with the comment which is border right and then the class is border rights so we have that property budarite and i'm going to set the width to 0.1 ram solid and i'm going to use gray 300. and then here i'm going to set the height to 100 so we have the height 100 percent so i'm going to save let's see from the browser and there you have it you can see now we have that border at the center of the two description next i'm going to create the three content for the services so from the layout here we have marketing web development and cloud hosting so for each service we have an icon heading text button and then an illustration same way with the second and the third one so let's work on that so here i'm going to start another container for that content so first you're going to start with the comment which is start the content for the services so here you're going to generate the three sections at once using emmet so you can see here from the layout we have the two sections we have the first section which are the content and then on the right we have an illustration same way with the second and the dad so here we have a container and then we have a row so i'm going to group it the row will have two columns each so i'm going again to group them so we have for large devices we're going to use call lg6 and then for medium devices we're going to use call md6 and then for small devices we're going to use call small 12 and then for extra small you're going to use call extra small 12. and then we needed another container for the content so i'm going to call it services then we need margin at the top so i'm going to use margin top four then from there we need now the container for the content that is the text so we have i'm going to call it services here we're going to use block element modifier underscore underscore contents so for the columns i'm going to say times two so that we have two columns for each row and then you're going to create the three rows or the three sections so i'm going to say times three so that means for each row we'll have two columns each so i'm going to hit tab and then it's going to generate for us all the three sections so you can see now we have the first row having the two columns the second row having the two columns for web development and then the that row or the that section having the two columns for cloud hosting so i'm going to comment them so that you can know where they start so we have start the marketing content tab so we have the second one so start the web development content and then finally the that one which is start the cloud hosting content so i'm going to start with the content for marketing and we have that content on the first column so here i'm going to add the content and then i'm going to style it later so we have the icon and then the heading and then the text and then this button and then on the second column we have this illustration so let's work on that so here i'm going to create a class called icon which is going to style that icon and then you're going to add that icon so we have the font awesome solid class and then the name of that icon is paper plane tab then the second item is the heading so we have h3 with a class of display three so here i'm going to use block element modifier to style it so we have display three and and then minus minus title then i'm going to add some margin at the top so we have margin top one tab and then the heading is marketing that item is a text so we are going to have a paragraph with a class of line height large so here going to add some dummy text so we have lorem 28 then you we have the button so here you're going to copy the button from the intro section so i'm going to scroll up and then copy the button so we have and then here i'm going to change the text to learn more so i'm going to save let's see how it looks like on the browser so far so this is our content so here going to add the border primary to the button so i'm going to add that class so we have border primary save let's see and there you have it so now we can go ahead and copy this content to the rest of the two sections so i'm going to copy the icon the heading the paragraph and the button so for the second column which is web development we have that content on the second column so i'm going to paste it on the second column and then for cloud hosting we have that content on the first column paste then i'm going to change the heading to cloud hosting and then also change the icon so that icon is called cloud upload alt and then we have web development and also going to change the icon to code so i'm going to save so let's see from the browser and these are how our content looks like so we have marketing that is the content for marketing web development and cloud hosting next i'm going to add the illustrations and they already have them so i have a folder called services which has the three illustrations in png so i'm just going to copy the entire folder to my project so inside the services i'm going to paste so now we can go ahead now and add the illustrations so let's start with the marketing so for the first row we have the illustration on the second column so here we have an image with a class of image fluid and then we have an alt we have marketing illustration tab so we have the images folder which is the source and then the services and then service1.png that is for marketing so i'm just going to copy this to web development so we have the illustration on the first column paste and then you're going to change the value to service to and then change also the alt to web development i'll do the same to the third one which is cloud hosting so we have it on the second column paste change the value to service 3 and also the alt which is cloud hosting illustration so i'm going to save let's see from the browser and there you have it now we have the three illustrations so the next step now is to style the content and you're going to do that on the sas file for that section which is the services.css so here i'm going to start with the container for the content which is the services class and then we need to do some correction on the html so at the beginning of that section we created a class called our services so let's rename that to just services and then save so on this container we're going to set to start by setting the position to relative and then some padding i'm going to use the shorthand top and bottom you're going to use one ram and then for left and right zero and then you're going to nested the web done on the html so we have this class called services underscore underscore content and then we have the icon inside the content so that's how we're going to nest it so we have underscore underscore content inside the services so here again we're going to set the padding for the contents to one ram all sides then some margin at the top i'm going to use 1.5 ram and then we need to style the icon so we have that icon class inside the content so for the font size you're going to set that to 2.5 ram you can change that letter if it's too big or too small and then the color we have primary so i'm going to save and then we need to use the module at the top so we have the use at rule and then custom so use it as star save let's see from the browser result so far and there you have it so we have our icon with a font size of 5 2.5 next we're going to style the heading so if you check here from the layout you can see the heading is as if it says two colors so we have some purple at the left and then on the right we have this pinkish color so here we're going to use background clipping so on typography we are going to style it the way we have done the html again so you can see we have display three so we're going to modify that display three so if you check again from the html here just to show you where we have the heading we have display three class and then minus minus title so you're going to modify it that we have done there so we have minus minus title so here i'm going to start with the font size i'm going to set that to 1.8 ram then text transform we're going to set that to capitalize and then font to it i'm going to use 600 and then the font family so we're going to copy what we have here and then set the display to inline block so we have that background clip we're going to clip text so before we set the background clip we need to the background color so we have the background image we're going to use linear gradient because we need the two colors so the direction of the color is to right and then you have the first color primary second color secondary then we need to clip the text so here going to use a property called webkit text field color so we have webkit text field color and we're going to use transparent so i'm going to save let's see from the browser so here we need to set for the webkit background clip check on the browser and there you have it you can see now it has clipped that background color so here we need to set the display on the html to block so that they can be on separate lines so the html where we have the icon you're going to set the display to block so i'm going to select the three icon classes and then display block save let's see and there you have it so something else on the html we need to put to push the illustrations on the edge so we're going to select the second sorry the first one which is marketing so we have that illustration we're going to add that class called text end where we have the column so we have the text end to push it to the edge and then for the web development you're going to also to do the same on the illustration where we have that class sorry the column so we have the text stats and then also for the cloud hosting we have that illustration so we're going to set that to text end save let's see so now you can see the illustration have been pushed to the start and the end so something else is we need to do some correction on where we have the illustration so on the html let's start with the marketing so here we have that class called services underscore underscore content we need to change that to pick so that it represents the illustration so let's do the same also for the second that is web development we're going to replace that with services underscore underscopic for picture and also the that one which is the cloud hosting i'm going to change that to pick then on the sass file we need to nest it that way we have done so we have underscore underscore peak so here you're going to set the max wind to 100 and then for the content we need to change the margin top to five ram so i'm going to save let's say from the browser so that is how our content looks like much better now next you're going to make sure that our section is fully responsive so i'm going to right click and inspect elements so this is how the section look like on moto g4 that's our device with a screen window 360. so you can see we have so much or big spaces between the contents so for the first one which is the space between the heading and the first description and this has to do with margin so let's go to the html so where we have the heading line you're going to change the margin bottom from mb5 to mb 1 and then save let's see so you can see now the space has reduced a bit again also here we have the margin top where we have the first description let's change the margin top to zero save let's see so you can see now the space is much better the next one is the space between the second description and marketing so this is the content for the services so let's see from the html so again here you can see we have so many containers we have a container for the heading we have another container for the two description and another container for the services so let's remove the container where we have the description so so that they can share the container with the heading so let's remove this one and also this container so i'm going to save let's see so now the content is running nicely so the next one is the space between you can see here we have this space but still so here we're going to write a media breakpoint which is going to target large devices so on the sas file where you have the content we have margin top so here i'm going to write a media breakpoint which is going to target large devices so we have that mixing include media breakpoint up so that is from large devices large so here i'm going to copy the margin top so we're going to set that to 5 ram and then the default you're going to set that to zero so i'm going to save let's see so you can see that one has already fixed that the next one is to work on the icon and the heading again here you're going to write another media breakpoint where we have the icon and the font size on typography so i'm going to copy this media breakpoint and use it where we have the icon so here on large devices you're going to set that to 2.5 and then the default you're going to set that to 1.5 again on typography let's go to typography we have display three so let's copy that video breakpoint copy so here we're going to set the font size to 1.5 1.8 1.8 and then for other devices it's going to remain to 0 to 1 ram and then i'm going to save let's see now so you can see that has already fixed that you can see the the icon and the heading they are a bit small now on small devices so i'm going to change another device larger than that let's see from an ipad also you can see the font size of the heading and the icon are a bit small now so you can even reduce the font size of the text yeah let's do that so on the services inside the contents we have the paragraph that is the p font size so the default you're going to set that to 0.8 ram and then you're going to write another media breakpoint so here we are going to set that to one ram one ram that will target only the large devices so i'm going to save let's see so you can see now much much better i think we can increase the font size of the heading so let's set that to 1.1 or 1.2 save let's see so i think now everything is much better so let's change to another device ipad pro that's a large device so you can see the content is nicely fitting moto g4 again you can see the content is nicely fitting on that screen device so that means our section is fully fully responsive and you can move on to the next section welcome back in this video we're going to create section 5 of the layout which is the testimonials so here we're going to use bootstrap component called carousel so let's get started and create something similar like what you have on the layout so on the html we're going to start that section so first we're going to write a comment which is start start section 5 the testimonials so here we're going to start that section with an idea of testimonials and a class of testimonials so which will have a container and a row tab so here going to start with the heading so we have this heading and then this line and then the subheading so copy so this one is h3 with a class of display three actually h1 sorry with a class of display three and then with a class of one bold so we have the text tab then we have that line so we have h hr so we're going to style it so we have style width we're going to set that to 100px and then you have the heights repeat x so and then we have the class so this one should be we have the class mx auto for horizontal centering so i'm going to save so let's see our text so we have our text we need to align it at the center so on the row we are going to add the text center class save so now we have the text at the center i'm going also to add the subtitle so we have this subtitle below the heading that says what our clans are saying so we have a paragraph with a class of lid and some padding at the top so we're going to use padding top one and then we have that text what our clients are saying so i'm going to save let's see so now you have that text next i'm going to style this section so on the sass file for that section i'm going to open that file which is the testimonials.css so here i'm going to start by using the two modules so we have the use at rule and then we have custom use it as star so i'm also going to include or to use the mixing so we have the use and then components and then mixing dot css again use it as star so here we're going to add that class which is testimonials so i'm going to start by setting the position to relative then we have padding i'm going to set that to 0 and then we need that gradient color so we're going to include that mixing so we have the include the name of that mixing is gradient so i'm going to save let's see how the section look like so this is how the section looks like we need to change the color so on the html where we have the text i'm going to add text white on the row then i'm going to save let's see so much better now next i'm going to add the background wave on this section so from the layout you can see we have a wave at the top of that section and another wave at the bottom of that section that means we have two waves so we're going to generate that from gatewaves dot io and here we're going to make sure that we generate something close or something similar like what we have on the left so here you're going to start with the top wave so i'm going to change the direction of the wave and then i'm going to play around with this icon till i find the one close or similar to the one you're looking for so there it is i'm going to copy the code copy and then at the top of that section i'm going to paste then i'm going to change the hex value to white let's generate for the bottom section so here i'm going to change the direction and then i'm going to copy the code again and then at the bottom of that section paste then i'm going to change the again the x value to white so we have the three f's or six f's i'm going to save let's see and now as you can see that is our section with the two waves next i'm going to create the carousel so on the html i'm going to create another row for that content so i'm going to start with the comment start the carousel content so here i'm going to start a new row with a class of align item center so to save time i'm going to copy an example code from the bootstrap documentation so you can go to getbootstrap.com so this one is the bootstrap component so you can check on the components and then carousel so here i'm going to scroll down till i find the one that you're going to use so i'm going to copy the code for this one with captions so i'm going to copy this code and then i'm going to paste so next thing i'm going to do is just remove the the two carousel items and then be left with only one so i'm going to remove the second one and the third one and then i'm going also to remove the captions and also the indicators so i'm going also to remove the indicators also i'm going to remove the image and this class for color so caption so i'm going to remove also that one so now let's go ahead and add our own carousel content so if you check from the layout here we have this container with the white background and that is the container for the text the two icons for the quotes and the stars then we have this client picture and then the client name and the role so that's how we're going to nest it and here we're going to use the block element modifier to nest it that way so first i'm going to list them the three containers so we have testimonials underscore underscore card so this is the container which will have the text the stars and the two icons for the quotes then i'm going to comment them so that we know where they so we have testimonial card and then you're going to start again a comment we have the client picture so again we need a container for that which is testimonials underscore underscore picture and then we need the client's name enroll so again testimonials underscore underscore name so inside the card you're going to start with the text so we have a paragraph with a class of line height latch then we need that icon that is the left quote so we have the icon and then the font or some solid class and then the name of that icon is quote left then some dummy text so we have lorem 21 and then we need the right quote so i'm just going to copy the first one and then this one is right then we need the stars so we have a class called ratings so we have the icon and then the font or some solid class [Music] and then the name of that icon is star so here i'm going to duplicate four more times two three four five then i'm going to add the picture and first i'm going to copy the pictures to my project i already have them so here i have a folder called testimonials you can see we have client 1 to client 5 they are in jpeg so i'm going to copy the entire folder to my project so inside the images i'm going to paste so now we can add the pictures so here i have an image with a class of image fluid for responsive image and then alt so i'm going to write client minus dollar sign or sign each value picture and then hit tab so we have the source which is images and then testimonials we have client1.jpg so i'm going to save then we need to add the client name so here i'm going to use h3 so let's see from the layout so i'm going to start with cleveland so that is the first client just copy actually we need to make sure that the client name matches the name so client one is a mail so that one should not be that so i'm going to change the name so let me see again so we have the name so i'm going to copy that paste then the client roll so here i'm going to use the paragraph with a class of lead so what is the role see you in founder ceo and founder so actually this class should be font with light so i'm going to save we can see how it looks like on the browser so this is how the content looks like so we're going to style it so let's make sure that we add to the rest of the client items that is the testimonial or carousel item so here i'm going to comment we have carousel item one then i'm going to duplicate carousel letter one for the second client so duplicate for the second client and then i'm going to change the comment to carousel item two and then change the client name so we have client two and also the alt so you're going also to change the name so you can see from the layouts we have joy marette finance manager and then the role of that client is finance manager i'm going to duplicate carousel at m2 for the that gland so duplicate and then this one is carousel item three so we have client name three client for the alt and then for the name so i'm going to paste that name and then the role is global finance sorry global brand manager so i'm going to duplicate carousel item 3 for the fourth client duplicates and then this one is carousel atom 4 we have gland for alt gland four and then the name so best so that is c o c e o end founder so i'm going to save let's say so we have the corrosion items so the buttons can't work until we change the active class so the only corrosion item we need to be active is the first one so you can see here we have a crossover active so we need to change the rest so remove the active class for the second third and the fourth one so save so now if you click the controls you'll see they are working so the next step now is to style this section so on testimonials dot scss you're going to style it the way we have nested on the html so we're going to start with the first one which is the card so we have the underscore underscore card and then we have underscore underscore picture and then we have underscore underscore name so for the card we are going to set the background color to white so actually i'm going to use rgb so we have the white color with an opacity of 0.8 then we need some padding so i'm going to set the padding to 2 ram that is for the top and bottom and then 1.25 for the left and right then we need the border radius so i'm going to set that to 0.625 ram and then some height you're going to set that to auto so we need to align text at the center so we have text align center so i'm going to save let's see how it looks like so far so that's how it looked like that is the container for the text and the two coats and the stars also inside the card we're going to style the two icons for the quotes and the star ratings so here we have the icon and here i'm going to start with the font size of that icon so here i'm going to use 1.5 ram and then the color so i'm going to use rgba so we have primary with an opacity of 0.7 then we also need to style the star ratings or the rating stars so we have that class inside the card also and then the icon is inside the ratings so we have the icon and you're going to set the color and the font size so for the color going to copy what you've used here on the icons for the quotes and then set the font size you're going to use one ram so i'm going to save let's see from the browser so there you have it you can see now they have changed the color next let's style the picture and here on the picture i'm going to start by setting the wind and the height so you have wind i'm going to set that to 6 ram we can change that if it's too small or too large also the same with height 6 and then we need to set the position to absolute so i'm going to save let's see so now that is the size of the picture so we need to make it circle or rounded so on the html we're going to add that rounded circle class on the image or the picture so i'm going to select the four classes and then i'm going to add rounded circle i'm going to save let's see so now you can see our pictures are rounded the next thing now is to position these pictures at the center of this white container so back on the testimonials where we have that picture so here we're going to set left we're going to use 50 then we have transform translate we have minus 50 minus 50 and then i'm going to save let's see and as you can see that is the position that you want it so the next thing is to add the border the rounded border so here we have the image and then we have the border so wind i'm going to use 0.325 ram solid and then color we're going to use rgba we have primary with an opacity of 0.7 i'm going to save let's see and there you have it you can see now our picture has that border next you're going to style the name so we have the name here so i'm going to start with the padding top to give it some space so we have padding top i'm going to use 4m we need some margin at the bottom so we have margin bottom i'm going to use one ram we need to align text at the center so we have text align center then we need some font to it so here i'm going to use 500 and then the color of the text white so then you can see we're going to nest it they have down on the html so we have h3 so here we can just set the padding top to 0.8 ram so i'm going to save let's see and there you have it i think 4m is a bit it's too big so let me change that to three save so there is better so the next thing is to style the role so before we go to the role we need to add the text transform so we need to set that to capitalize and then we need now to style the role so we have a paragraph some padding at the bottom padding bottom you're going to set that to 2 ram then text transform you're going to set to capitalize so i'm going to save let's see and there you have it that is our role so the only thing i'm going to do is put some padding on the stars so on the html where we have the stars i'm going to select all the classes for ratings the four of them at once and then i'm going to add padding one save let's see so much better now next i'm going to customize the controls from the layout you can see we have the controls at the bottom so we're going to customize and replace the defaults which are on the sides you can see we have these two controls on the sides so let's work on that so at the bottom here you're going to remove the span for the two and then you're going to replace this class carousel control for the previous we're going to use the btn classes so here we have btn btn outline outline lights and then we need that icon that is the font also icon so we have the glass front or some solid and then the name of that icon is long arrow alt right so we have it here so this one is left and then i'm going to copy this class to the next button or to the next class paste and then you need to change that to write then i'm going to save let's see from the browser so now you can see we have the controls but we need them at the center so let's also work on that so here i'm going to put them inside a container called text center so i'm going to select all of them the two and then add text center class so we have text center and then paste them inside that container or that class and then i'm going to save let's see so now you can see we have the controls at the center and you can see once you click they are moving to the next client or carousel item so the next step now is to make sure that our section is fully responsive so i'm going to right click and inspect elements so first again to see how it looks like on various devices you can see this one is moto g4 again screen width 360. and you can see the content is fitting nicely on that screen device so let's see from another device like pixel 2 again you can see our content is fitting nicely let's see from an ipad again you can see the content is fitting nicely so even without writing the media breakpoints you can see our section is fully responsive so i'm going to look from another device like iphone 678 plus and as you can see our section is fully responsive so with that we can move on to the next section welcome back in this video we are going to create section 6 of the layout which is the frequently asked questions so we are going to use bootstrap component called accordion so once you click on the question then the accordion collapses and reveals the item so let's get started and create something similar like what we have here on the layout so on the html we are going to start that section first is a comment we have start section 6 the frequently asked questions so i'm going to start the section with an id of frequently asked questions faq and a class of faq we need a container and also arrow tab so here you're going to start with the heading and then the heading line and then the subheading so here we have h1 with a class of display three and a class of font-weight bold so we have faq and here we also need to add another class which is text capitalize or text uppercase you can see up we have that class text uppercase and also on the row we need to add the text center class after the heading we have that heading line so we have that class heading line and then the sub heading which is a paragraph with a class of lead so i'm going to copy and then paste and then i'm going to save let's see from the browser and there you have it you have it you can see now we have that heading next i'm going to add the accordion content so on the html i'm going to create a new row for that content so we have the comment which is accordion content so i'm going to start a new row and some margin at the top so i'm going to choose margin top 5 and then here you need to specify the column size that you want to use so that one will reflect on the size of the accordion that you're going to have so for now we can use call md 12. so that one will go full length so to save time i'm going to copy the example code from the bootstrap documentation so you can go to getbootstrap.com and then under the components you'll find accordion so here there are two examples that you can copy we have the first one and then we have the second one called the accordion flash so this one removes the default background color some borders and some rounded corners to render accordions edge to edge with their parent container so i'm going to copy the example for the first one so i'm going to copy the entire code and then paste and there you have it so here because we have four accordion items you can see from the layout you can see we have four so we need to duplicate one which is the dad so we have from here i'm going to duplicate for the fourth accordion item so once you duplicate you must change some things like the id attributes you can see here collapse 3 we need to change that to 4. also you need to change the area labeled by so we need to change that to 4. also this one is three is four then i'm going to save let's see from the browser and that is our content so once you click then the accordion collapses and reveals the item so we have according to accordion item two we have accordion item three and finally accordion item four so let's comment this accordion item so that you can know where they start let's start with the first one so we have accordion item one so i'm going to comment that accordion item one that is a comment so i'm going to copy that comment for the rest of the accordion items we have the second one we have the third one and finally we have the fourth so now we're ready to customize the accordion so here we're going to customize a few things if you check from the layout here we're going to add some space between the accordion items so that we can separate the accordion items and then you're going to add shadow and then you're going to add some padding between the questions and then also we need to change the question to reflect what we have here on the left so let's work on that so first i'm going to select all the accordion items so that we can add the two classes so we're going to add shadow and then you're going to separate or add some space between the accordion items by using margin bottom so we have margin bottom three so i'm going to save let's see and there you have it you can see now we have some space between the accordion items and then that shadow so the next one is to make sure that the questions reflect what we have here on the left so we have the first questions so i'm going to copy so i have changed the question i'm going to save let's say from the browser so now you can see the questions reflect what we have there on the layout so the next one is to add some padding between the questions so here we have accordion padding x and accordion padding y so to do that you're going to override some of the bootstrap defaults so you're going to go to the variables file which can be found inside the node modules and that is the bootstrap variables file and then bootstrap scss and then down here we have that file variables.css so here on the variables where we have the accordion we're going to copy the two variables that is according padding y and you can see the default is one ram and according paddingx and the default is 1.2 ram so i'm going to copy the two variables and then inside the custom so where we have the according overrides i'm going to add that variables and then i'm going to remove the two defaults or the default flag so here you're going to override according padding y to 1.5 and also according padding x we're going also to override that to 1.5 so both are going to use 1.5 ram so i'm going to save let's see and there you have it you can see now we have that padding and that is what we have here on the layout so you can see the space is the same next is to make sure that our section is fully responsive so i'm going to right click and inspect element so this is how the section look like on a screen window of 360. that's moto g4 and you can see the content is fitting nicely so i'm going to change to another screen device like ipad ipad again you can see our content is fitting nicely on that screen device so let's change to another one like iphone 6 7 8 plus again you can see our content is fitting nicely so even without creating or writing any media breakpoint our section is fully responsive so we can move on to the next section welcome back in this video we are going to create section 7 of the layout which is the portfolio so here going to showcase some of the latest projects that our fake company has created so here we have some buttons and then once you hover the project you'll see they reveal the project name and the category of that project so let's get started and create something similar like what you have here on the layout so on the html i'm going to start that section and i'm going to start with the comment as always so we have stat section 7 the portfolio so let's start that section with an idea of portfolio and a class of portfolio we need a container and a row tab so here going to start with the heading we have the latest work and then heading line and then subheading so we have h1 with a class of display three and a class of fontoit bold so latest work so here i'm going also to add another class which is text capitalize and then the heading line below the heading so we have heading line then the subheading we have the paragraph with the class of lead some dummy text so lorem 12 save let's see so we have our text now so let's put it on the center at the center so here on the row i'm going to add text center class save let's see so there you have it but now we need some space between the the previous section and the heading so on the row here i'm going to add some margin at the top so we have margin top five save let's see so now you can see we have some space between the previous section and that heading next i'm going to add the filter buttons so we have these buttons for filtering the categories so let's add the buttons so here i'm going to add another row for that content so we have filter buttons so another a neuro with a class of text center and then a column so we're going to use call md12 so here we have button with a class of btn and then btn outline primary and the type of the button is button so we have type which is button so so we have all and then i'm going to duplicate for the categories so the second category is websites the next one is design and then we have mockup so i'm going to save let's see from the browser and now you can see we have the buttons so what you're going to do is add some margin at the top so that you can have some space between the heading the subheading and the buttons so here we have the row we are going to add margin top three and then save let's see so i think we need to increase the margin so here i'm going to use margin top five and then margin bottom four and then some gutter so we're going to use gutter three and then save so now you can see we have some enough space next i'm going to add the content for the portfolio items from the layout here we have the nine columns which make up the nine portfolio items first i'm going to copy the portfolio images or the pictures to my project so here i have a folder called portfolio it has all the pictures for the portfolio they are named portfolio one all the way to portfolio nine and they are in jpeg so i'm going to copy the entire folder to my project so inside the images paste so now we have the pictures in our projects now we can go ahead and add the portfolio items or that content so here you're going to create a new row for that content so i'm going to start with the comments which is that the portfolio content or portfolio items so here i'm going to create a new row and here i'm going to use emit to help us generate the nine portfolio items at once so after draw we need the columns and here i'm going to group them and i'm going to create two breakpoints so for large devices i'm going to use call lg4 and then for medium devices i'm going to use call md6 then we need the container for all the portfolio items so i'm going to call it portfolio box and then we need shadow so i'm going to add that shadow class and then we need the picture or the image so here again i'm going to group the picture so we have the image and then the source of the images so we have a folder called images and then portfolio where we have the pictures so here we need the name of the files so we have portfolio minus dollar sign dot jpg so the dollar sign will assign each value so that we can have portfolio one to portfolio nine and they are in jpeg format then we need the alt so we have portfolio dollar sign image and then also we need the title so we have title so we have portfolio dollar sign picture then we need the class for responsive image so we're going to use image fluid that one is a bootstrap response a bootstrap class for responsive images so we have image fluid then from there we need the container for the caption so i'm going to call it portfolio info and then we need the caption so we're going to create another class so we have div and then caption then from there we need the the caption so we're going to use h4 so we have h4 and the text will be project name goes here and then dollar sign and also the category project you have the p and then the text will be category project so at the end here i'm going to say times nine and it's going to generate for us all the nine portfolio items with the content so here you can specify the number of columns or the portfolio items that you want it to generate so we have nine so i'm going to say times nine hit tab and here you can see now it has generated for us all the contents including the pictures and it has a send also the values so i'm going to save let's see from the browser and there you have it you can see now we have the nine portfolio items next i'm going to style the content and we have a sass file for that section which is portfolio dot ss so i'm going to open that file and here the first thing i'm going to do is to use the module so we have the use and then custom that is the first module you're going to use because of the variables so use it at the start and then also we're going to use the mixer so we have components and then mixing so again use it as a star and then close so here i'm going to start by styling the class called portfolio so this is the class we have on the section if we check from the html we have that class here on the section so here i'm going to set the padding and i'm going to set 4m for the top and bottom and then 0 for the left and right then you're going also to style the text on the buttons so we need to set the text transform to capitalize so we have the button so text transform capitalize i'm going to save let's see so now we have the text set to capitalize and you can see now they are capitalized so the next thing is to style the portfolio box and that one is a standalone container so we have portfolio box so here i'm going to start with the position i'm going to set that to relative then we're going to set the width 200 percent so the width is going to scale to the wind of the columns so remember here on the html we have the two columns we have call lg4 and column d6 so those are two different breakpoints and then also the height we are going to set that to 18.5 ram we can change that later to bigger too small so that means all our portfolio items will have an equal height so i'm going to save let's see from the browser so now you can see we have equal height on all portfolio items so the next thing is to style the images or the pictures to scale to the height of the portfolio box so here we're going to style it inside the portfolio box we have the image and here i'm going to set the width and the height to 100 100 and also height so the height of the image is going to scale to the height of the parent container which is the portfolio box and we have set that to 18.5 ram so we have 100 save let's see so now you can see the pictures are scaled to the height of the parent container so the next thing is to hide some of the caption you can see they are overflowing so here you're going to use a property called overflow and you're going to set that to hidden save let's see and there you have it you can see now they are hidden let's also add some margin at the bottom so that we can separate the portfolio items so here we're going to set the margin bottom to 1.2 ram save let's see and there you have it you can see now we have some margin at the bottom to separate the portfolio items next i'm going to style the captions and also add the border at the top so if you check here from the layout you can see we have a border at the top and the caption is only visible once you hover the portfolio item so let's work on that so here we're going again to nest it the way we have done on the html so we have the portfolio info inside the portfolio box so we have that class so this is the class or the container which has that background color so we have here going to set that background color so we have rgba so we have our primary with an opacity of 0.75 and then i'm going to set the width and the height 200 percent so we have width 100 percent and also height also here i'm going to set the position to absolute and then we have the caption inside the portfolio info so we have that class so here i'm going to set the text align to center so i'm going to save let's see so nothing to show so here we're going to set the top to zero so we need to set that top zero and then i'm going to save let's see so now you can see we have the caption and that's background so the next thing is to position the caption at the center of the portfolio item so on the caption you're going to include that mixer so we have include which is going to position it at the center and you have that mixing code absolute center i'm going to save let's see so now you can see we have the caption at the center so let's change the color so we have white close save let's see and there you have it so let's change or set detect text transform to uppercase so that we can make sure that the caption are in uppercase like what you have here on the left so let's set that so inside the caption we have that h4 so text transform we're going to set that to uppercase and then i'm going to save let's see and there you have it next we need to hide the captions and only make them visible once you hover the portfolio item so here we have the container for the caption which is portfolio info so here we need to set the opacity to 0 and also visibility to hidden so we have opacity 0 and then visibility i'm going to set that to hidden so i'm going to save let's see so now you can see the captions have been hidden so we need the caption to be visible once you hover the portfolio item so down here we are going to create that hover so we have the hoover effect and then you're going to call this class portfolio and then you're going to set the opacity to 1 and visibility to visible so opacity 1 and visibility visible i'm going to save let's see so now if you hover the portfolio time you can see the captions are visible the next thing is to add the border top at the top we need the board at the top like what we have here on the left so you can see we have that board at the top so let's also set that so we need it at the portfolio box so border top i'm going to use 0.5 frame for the width solid and then the color you're going to use purple light so we have that color on the custom source file purple light i'm going to save let's see so you can see now we have that border at the top so something else i'm going to do is to create a transition which you're going to apply on the hoover effect so you can see once you hover the portfolio item that hover is so dry so let's create a transition which you're going to apply so that you can have that smooth hoover effect on the portfolio items so here we're going to create a mixing which you're going to use where we need to use that transition so i'm going to open that mixing and then down here we're going to create that mixing so i'm going to start with a comment which is transition property so we have the mixing art mixing and the name of that mixing i'm going to call it transition property so we are going to use transition duration so we have that property and here i'm going to set to 1000 milliseconds another property you need is the transition property so we have transition property so i'm going to set to all and then i'm going to save then you're going to include this mixing where we have that hoover effect already other place that you want to use that transition so we have the portfolio and then here i'm going to include that mixing so we have include and then transition property so i'm going to save let's say from the browser so now you can see once i hover the portfolio item you can see we have that smooth hoover effect or that smooth transition so something else before we finish this part is to i'm going to set where we have the portfolio info so we have top zero and left zero so i'm going to set also that to zero and then where we have that caption the heading i'm going to set the display to block so i'm going to save so now if you hover the portfolio you can see we have that smooth over effect so before i finish up on the portfolio i'm going to do a few changes on the height of the images because you're going to have some issues on the height of the images on smaller devices so i'm going to right click and then i'm going to click on inspect elements so especially on medium devices you can see this one is a medium device and you can see the height is not scaling nicely so i'm going to rotate this width or the screen and here you'll see just like i said you're going to have some issues with the height of the images they're not scaling nicely on different devices so to make that work we're going to use maximum width on the height where we have the portfolio box so instead of the height we're going to set that using the max height so i'm going to set that max height which is going to scale to 18.5 ram and then on the image i'm going to remove the height so i'm going just to comment it and then i'm going to save let's see whether it will fix that so save let's see so now just like i said you can see now the images are scaling nicely that is the height of the images so we don't have issues now with the height of the images on medium devices so i'm going to close the inspector and then i'm going to resize the browser window so you can see now we don't have the issues with the height of the images they are scaling nicely so something else is we need to add where we have the image that is on hover we need to scale the images a bit so where we have that hoover pseudo class we're going to add we're going to scale the images so we have transform and then scale and then i'm going to scale that to 1.5 so i'm going to save let's see so close that before we do we save and then save so now if you hover the images you can see they are scaling a bit so i'm going to enlarge the browser window welcome back in this video we're going to create section 8 of the layout which is the get started also known as cta or call to action section so here you're going to start with the heading and then you're going to create the two equal columns with the left column having the cta info and then the right or the second column having the form so let's get started and create something similar like what we have on the left so on the html i'm going to start that section so i'm going to start with the comment as always we have start section 8 get started so we have that section with a with an id of contacts and a class of get started we need a container and arrow tab so here going to start with the heading so we have h1 with a class of display three and a class of onto it bold and a class of text capitalize so we have that text get started then on the row here we need to add the text center class so text center so after the heading we need the heading line so we have that class heading line and then the subheading so we have p with a class of line heights large and then some dummy text we have lorem 12 and then i'm going to save let's see from the browser so far so now we have that text next i'm going to style this section and here we're going to set some padding and some background color so you can see here from the layout we're going to use this a gray color so let's work on that so we have a file for that section which is get started dot so i'm going to open that file and here the first thing i'm going to do is to use the modules so we have the custom module and the mixing module so we have the use and then custom so again use it as star also we need the mixing so we have again use components mixing use as star so i'm going to style the class we have on the section which is the get started so we have this class so here i'm going to set some padding top and bottom i'm going to set that to 4m and then left and right 0. then the background color we're going to use one of the gray colors so here i'm going to use gray 200. then i'm going to save let's see from the browser so there you have it next i'm going to create the two columns from the left here we have the two columns we have the left column with this gradient background which will have the cta info and then we have the red column with this white background which will have the form so let's work on that so on the html i'm going to create a new row for that content first let's start with a comment which is start the cta info or the cta content so i'm going to start a new row which will have the two columns so we have a row with a class of text white and then we have the two columns so i'm going to group them i'm going to start with call 12 and another column which i'm going to use called lg6 then here at the end i'm going to say times two hit tab so on the first column we're going to have that gradient background and then on the second column we're going to have that white background so on the first column i'm going to add a class called gradient which you're going to create in a moment so gradient and then also shadow and some padding so i'm going to use p padding three and then on the second column we are going to have white background so we have bg white and then some shadow and also padding three then i'm going to create that gradient and we already have that mixing so i'm going to go to that file mixing.css so we're going to copy this gradient and then create it as a class so i'm going to copy and then on typography you're going to create it on that file so here we have our comment which is gradient bg and then we have that class gradient and then paste so i'm going to save let's see how it looks like on the browser so now you can see the two columns we have the left which has this gradient and then the right which has this white background next now we are going to add the content so inside the html on the first column we are going to create a class called cta info so this one will be the container for all the content that you're going to put on the first column so we have cta info and then we're going to set the width two hundred percent so we have w100 so here we're going to start with the content for left column so we have this hundred percent satisfaction guarantee so i'm going to copy that text and then i'm going to start h4 with a class of display four and a class of font-weight bold and then paste that text the next text you're going to add is the paragraph so we have this dummy text so we have paragraph with the class of line height latch and then some dummy text so we have lorem 21 and then after the paragraph we have this sub heading and then the list so here i'm going to have h3 with a class of display 3 and i'm going to modify that with brief so we're going to style it later and then the text and then from there we need the list so we have ul that is another list with a class of cta info underscore underscore list and then we have the list items so we have the li and then some dummy text lorem ipsum and then here i'm going to say times gray hit tab and now we have the text so i'm going to save let's see how it looks on the browser so now we have the content so here we need to make sure that they reflect what we have here on the layout so i'm going to copy the content so we have the first list item paste so i've copied all the text or the list items so i'm going to save and check on the browser so now we have that text the next tip the next step now is to style this content so on the sas file that is the get started.css we are going to create that container that is the cta info cta info so remember this is the container for all the content on the left column so we have that city info so here i'm going to set the padding to three ram all sides and then i'm also going to set the margin one ram top and bottom and then zero left and right from there going to style the list so we have underscore underscore list so here i'm going to start by setting the position to relative then i'm going to set the list style type to none and then display we're going to set that to block so i'm going to save let's say from the browser so that is how the content looks like now next i'm going to style the list items from the layout here you can see the listed timer using this check icon and here we're going to use the unicode for this check icon so on the sas file you're going to nest it the way you have done on the html so we have the list item inside the class list so we have the li and then content before because the check icon must come before the list items so here you're going to start with the font family and you're going to use the font awesome file free so we have the double quotes and then fonts awesome five free then the contents and just like i said you're going to get the unicode from font or some documentation so we have that cheat sheet that is the font or some cheat sheet so here you're going to search for that icon so i'm just going to type check and then it's going to list for us all the versions of the check icon and you can see here we have that icon and then the unicode so the unicode of that icon is f00c so i'm going to copy that then on the content we're going to add the double quotes and then the backslash and then the unicode like that then we need to set the font to it and here you must set any value from 600 and above so i'm going to use 600 then i'm going to save let's see from the browser how it looks like and there you have it now you can see we have the check icon on the list items the next step now is to add some padding and some space between the icon and the list items so here i'm going to set margin right so i'm going to use 0.5 ram and then also set the font size so i'm going to use 1.2 ram and then on the list that is the list class i'm going to set padding top i'm going to use 0.5 ram and then padding left i'm going to use zero point five also and then some margin at the bottom i'm going to use 0.7 ram so i'm going to save let's see and there you have it now you can see we have some enough space between the content next i'm going to add the content for the second column so from the layout here we have this heading that says start your project and then the form so let's work on that so here just like we did with the first column i'm going to create a container for that content so i'm going to call this container form and then we're going to set the width 200 percent so we have w100 and then some padding at the bottom so we have padding bottom two so we're going to start with that heading and here we are going to use the same heading that we used on the services so just to show you where we have that heading on the services you can see we have this heading with the background clip so these are two colors so we're going to use the same heading on that part so i'm going to have h4 with a class of display 3 and you're going to modify that with title and then some margin at the bottom so we have margin bottom five so we have that text which is start your project so i'm going to save let's see from the browser so now you can see we have that heading next let's start the form so before i add the form i must mention that in the new version that is booster version 5 they dropped the use of the form group class so here we're going to use one of the utility classes to wrap up our form or the input fields so we have the form and then the action we're going to have that for now and then we have the class row so we have so here we're going to use margin bottom three so you must have that class so mp3 and then the inputs this one is for the first name and we have the type of the input which is text [Music] and then we need the placeholder [Music] so the placeholder is first name and then you also need the id input first name and then we need the class form control so i'm going to hit tab so here i'm going to duplicate for the last name and then i'm going to change the placeholder to last name and also the inputs and then i'm going also to duplicate again for the email so this one the input type is an email placeholder email address so we have the id input email and then i'm going to duplicate for the message so the type is actually this is not an input it's a text area so i'm going to remove that and then add text area so the name message id message and then you're going to add the class so i'm going to copy this form control and then add it on the text area and here we just only need rows eight so i'm going to set from 10 to eight so i'm going to save let's see from the browser how it looks like so this is our form so we need to add some shadow and then make sure that our input feeder large like what we have here on the layout so i'm going to select the class for the four of them and then i'm going to add shadow and then we need also to add another class so i'm going to select and add form control large so this one is from control so i'm going to save let's see so now you can see our form so we need to add the placeholder where we have the message so i'm going to copy save let's see and there you have it the next one let's add the button text center so we have that class and then also going to set the display to grid so we have d grid and then some margin at the top so we have margin top one and then now we need that button so we have button and the type of the button is button and then the class we have btn btn primary and then rounded rounded pill and then we have padding top three and also padding top sorry padding bottom three so we have pb three so so that you can have some space between the content so i'm going to hit sub and then here we're going to add submit so let's see save and there you have it now you can see we have that button next you're going to add the you can see we have an icon so we're going to add that icon so that one should come after the text so we have the icon and then the class font or some solid and then the name of that icon is paper plane save let's say and there you have it next i'm going to style this content so on the get started so here i'm going to start with the comments so we have the form content so we have that class form and here i'm going to set the padding so we have i'm going to set padding to three ram so remember here on the cta info we set that to 3 ram also so i'm going to set that to 3 ram and then you're going to style the button so you have the button inside the form so here i'm going to set the border to none and then we have the color i'm going to use white and then we're going to style any link we're going to start with the color which i'm going to set that to white and then text decoration you're going to set that to none also and then text transform i'm going to set that to capitalize so i'm going to save let's see and there you have it you can see now we have our content next let's make sure that our form looks similar like what we have on the left and that is to have the first name and the last name in one row so here i'm going to create two equal columns which is going to split the two and also make our form fully responsive so let's work on that so remember here we have a class called row that means any column that you put inside the row will be displayed using flex so for the first name and the last name i'm going to select the two classes and then here i'm going to add a column which is going to split the two on large devices only and then on any other device then they're going to go to full width so i'm going to use call lg6 and then for the email address and the message i'm going to use call lg12 that means they'll go full wind regardless of the screen width so we have call lg12 save so let's see so here you can see already we have the first name and the last name being split into two and this one will only happen on large devices only so i'm going to right click and inspect elements so you can see this one is a device with a screen window of 360 and you can see already the first name and the last name are going full width so it's only on large devices where we're going to have the first name and the last name split into two so i'm going to change to another device and this one will be a medium device like an ipad and this is a screen window of 768 and you can see the input field are going full length we can even do the same way we have done on large devices where we have the first name and the last name split into two so here going to add a column which is going to create that media breakpoint for medium devices so here i'm going to add call md6 and then i'm going to save let's see and there you have it you can see now on medium devices we have two columns or two equal columns for the first name and the last name and they are in the same row so with that i think our form is fully responsive across variety of screen devices welcome back in this video we're going to create section 9 of the layout which is the footer and on the footer we have four parts of the footer we have the top footer which has the contact info we have the mobile email and the location and then we have the social media part and then we have the company info and then at the bottom we have the copyright information so let's get started and create something similar like what we have on the layouts so on the html i'm going to start that section and i'm going to start with a comment as always so we have start section 9 the footer so here i'm going to to start that section so we have footer with a class of footer and a container and then i'm going to hit tab and then you're going to style that class so i'm going to save and then on the sas file for that section which is the footer.css i'm going to open that file and then the first thing i'm going to do is to use the modules so we have the first one which is the custom so custom and then use it as star then we also have the mixing so we have the use components and then mixing use it as star so here i'm going to style the footer we have that class already and here i'm going to set paddingtop i'm going to set that to one ram then the background color so here we're going to create this color we don't have it on the custom source file so here i'm going to create a variable called footer specifically for that section so i'm going to save and then we need to create this variable on the custom sauce file so i'm going to open that file so this is a new color so i'm going to add it where we have the white and the gray colors let me just add on my theme colors so we have variable footer and then i'm going to assign it this color that is one f15 close and then i'm going to save let's see from the browser and there you have it at the bottom here you can see we have that color so we're going to start with the top footer which has this contact info we have the icon the phone the working hours and then we have the email icon the email and then we have the location and the icon so you're going to start with that footer so on the html i'm going to use emmett to generate the three sections at once so here i'm going to start a new row and then i'm going to add the columns so i'm going to group them and here i'm going to use columns that are going to create different breakpoints for medium devices i'm going to use call md4 for large devices i'm going to use call lg 4 and then we need the container for all that content so i'm going to call it contact box then we need some padding at the top so i'm going to add that class padding top one and then we need the container for the icon you can see here from the layout you have the icon the title and the subtitle same way with email and the location so here we're going to use block element modifier to nest it so again we have that class contact box and then underscore underscore icon so that one will be the container for the icon and then we need the container for the title and the subtitle so here i'm going to add a plus and then again contact box underscore underscore info so the info will have the title and the subtitle then i'm going to add the title so we have the link with the class of contact box underscore underscore info and then i'm going to modify that with title so we have minus minus title and then we have the text so i'm going to have title goes here so we're going to replace that with the actual content for that title and then we need the subheading so here we're going to use paragraph with the class of contact box and that's called underscore info minus minus subtitle so the text we're going to use subtitle goes here again you're going to replace that with the actual contents so here at the end i'm going to say times three and then it's going to generate for us or the three section or the three columns at once with the content so hit tab and now you can see we have the first container that is for the phone or the mobile number and then we have the second one for the email and then the third one for the location so i'm going to comment them so that we can know where they start so we have the first column so it's i'm going to say stats or just content for the phone or for the mobile number and then we have contact for email content for email and then you have the that one which is content for location so i'm going to save let's see how it looks like on the browser so that is our content looks like so far so we're going to style it you can see we have the title goes here for the first one the second one and the third one next i'm going to add the icons from the layout here you can see we have the phone icon for the phone content we have the mail icon for the email content and then we have the location icon for the location content and these are svg icons and i must mention that there are different sources that you can get these svg icons but if you want to use the same icons that i've used here then you need to go to tabularicons.com so you're going to start with the first icon which is the phone icon so i'm just going to type phone and by doing that you'll be able to see that icon and you can see it here the name of that icon is phone call so i'm going to click it to copy the svg code so click and you can see now it says copied and then on the first column where we have the container for the icon i'm going to paste that that code there so paste next we need the icon for the email so again you're going to type or search for that icon so i'm just going to type email and here you can see we have that icon you can see it here mail open that is the name of that icon so i'm going to click it to copy the code so again where we have the icon that is the content for email we have that container paste the next one is the location icon so i'm going to search for that so again on the table icons i'm going to search for location and by doing that you'll be able to see the icon and you can see it here the name of that icon is map2 that is map -2 copy and then on the icon container i'm going to paste so i'm going to save let's see from the browser how it looks like and there you have it you can see now we have the three icons so let's also replace the titles the subtitle with the actual content that we have on the left so let's start with the phone number so i'm going to copy so i'm going to and then we have the subtitle which is the working hours so let's do the same for the email and the location so copy so i've copied that let's also do the same for the location so i've replaced all the content so i'm going to save let's see and there you have it you can see we have the actual content so the next step nice to style the content so we already have a sass file for that section which is footer.sss so here you're going to style the contact box which is the container for that content so let's start with the comment which is style the contact box content so we have that class contact box so here i'm going to set the position to relative then you're going to style it the way we have nested on the html so from the html you can see we have this class which is contact box underscore underscore icon and then we have contact box underscore underscore info which has the title and the subtitle so that's how we're going to style it so let's start with the icon we have underscore underscore icon and then another one is info so you have underscore underscore info which are going to modify the title and the subtitle so for the title we're going to modify that so we have minus minus title and then also for the subtitle minus minus subtitle so here i'm going to start with the width and i'm going to set the width and the stroke that means on the html where we have the three icons we need to remove a few things and one of them is the wind and the height you can see it's already set to 44 and also remove the stroke and that is the color of that stroke so let's start with the wind and the height so i'm going to select and then target the three icons we have the second and then that one backspace and then also the stroke color so we have the stroke color so i'm going to remove it and then for the stroke wind we're going to set that to 1. so i'm going to remove the 5 and then save then we can go ahead and set the width of the icon so here i'm going to set the width so i'm going to use 4m and then the stroke i'm going to use primary so i'm going to save let's see from the browser and there you have it you can see now we have the three icons and the color of the icon has changed to purple so next let's style the title and the subtitle so for the info you're going to set the padding so i'm going to set the parting to 0.4 ram and then for the title let's start with the color that is white and then text decoration none and then for the subtitle let's set the color so we're going to use one of the gray colors you can see from the layouts we have this gray color so we're going to use one of the gray colors so here we have gray 300 so that is the color we're going to use and then we need also to set text decoration to none and also not forgetting the font size of the title and the subtitle so for the title we're going to set the font size to one ram or 1.4 and then font size for the subtitle we're going to set that to one ram so i'm going to save let's see so that is how the content looks like i think gray 300 is not the correct color so let's try gray 600 save let's see and there you have it so something else is we need to set the font weight of the title and the subtitle you can see they are a bit bold so i'm going to set here for the info so you have font to it i'm going to use 600 save let's see so much better now next i'm going to set the display for this content and this will create different breakpoints so that we can target different screen devices and this will also make our content fully responsive so on the html where we have the three columns i'm going to select the three and then here we're going to add the display utility classes which are going to create different breakpoints so for medium devices i'm going to set the display to block so we have d and then medium and then block for large devices we're going to set the display to flex so we have display large flex and then for small devices you're going to set the display to flex or any other device so you have display flex so i'm going to save let's see from the browser so you can see now the display has changed you can see now on large devices it is using the display flex so i'm going to right click so that we can check for other devices and inspect elements so you can see here this is this one is a medium device it's an ipad with a screen window of 768 you can see the display has set to block so you can see the icon is on top of the title and says the subtitle that means that display is working on that device so let's see from a small device so i'm going to switch device let's go for moto g4 so again here you can see the display is set to flex so i'm going to switch to another device another small device like galaxy s5 again you can see the display is set to flex so the only thing you're going to do here is to reduce the for the width of the icons on small devices and medium devices so here i'm going to add a media breakpoint which is going to target large devices only so on the footer where we have that icon i'm going to add the midi breakpoint so we have include media breakpoints up and here again to target from small device and then you're going to set the width to 4m so copy paste then on small device you're going to set that to 2 ram so i'm going to save let's see and now you can see the icons have reduced the size so the next thing is to also reduce the title and the subject on small devices so again here you're going to create create or include a midi breakpoint which is which is going to target large devices so i'm going to copy that media breakpoint and then add it where we have the title so here you're going to set the font size to 1.4 m and then one ram for small devices so this one will also apply to subtitles so i'm also going to copy where we have the subtitle so we need to include that media breakpoint and then where we have large devices are going to have one ram and then we are going to reduce the font size on small devices to weight 0.8 and then i'm going to save or 0.9 let's see and there you have it you can see now we have the title and the subtitle they're a bit small so let's switch to another device let's go for a medium device we have an ipad so again you can see the content is fully responsive let's go for a large device ipad pro again you can see the content is fully responsive so here i'm going to switch back to a small device and here the only thing i'm going to do is to make sure that the icon and the title are lining together so i'm going to add some padding where we have the icon so we have padding top so i'm going to set the padding top to 0.5 ram so save let's see and there you have it i think we need also to reduce the font size of the subtitle so i think 0.9 is a bit large so here i'm going to set to 0.8 and then save let's see so now i think everything is perfectly fine so on all devices our content now is fully responsive so we can move on to the next step next i'm going to create the content for the second part of the footer which is the social media so on the html i'm going to create a container for that content so here i'm going to start with the comment which is start the social media content so here i'm going to create a class called footer social media so you have footer dash social media so i'm going to use the two initials and then here going to style the background you can see here we have this light background so i'm going to add an inline style so we have style we have background color and then i'm going to use 21 21 21 so that is the hex value for that color then from there we need a container arrow and the two columns you can see here we have the two columns we have the first column with this content that says connect with us on social media and then we have another column for the social icons or for the social media icons so we have a container and a row and then i'm going to add some padding so we have padding y i'm going to set that to four and then text center so we need to add that class and then tab so here i'm going to create two unique columns which are going to create different breakpoints so from the left you can see we have the first column which has this text that says connect with us on social media and then we have the second column which has these social media icons so here for large devices i'm going to use call lg5 that is for the first column and then for medium devices i'm going to use call md6 and then some margin at the bottom so you need to add that class margin bottom 4 tab and then paste that text then for the second column on large devices i'm going to use call lg 7 so that they make it 12 so we have caller g7 and then call lg5 for the first column and for medium devices i'm going to use call md6 and then tab so here we're going to start with the facebook icon and then twitter github linkedin and then instagram so we're going to create them in that order so here we have the link and then the icon and then here we're going to use the font awesome brand class and then the name of that icon is facebook and then tab so i'm going to duplicate for the rest of the icons so for the second icon we have twitter that icon we have linkedin sorry we have github and then for the fourth one we have linkedin so we have linkedin and then the fifth one we have instagram so you have instagram and then i'm going to save let's see from the browser and there you have it you can see now we have that text oh sorry those icons but we don't see the text so here we need to add the class text white so here we have the row i'm going to add text white and then save let's see and there you have it so the next step now is to style that content so on the footer.css we're going to style that class so at the bottom here i'm going to start with a comment which is style the social media content and then we have that class footer social media so here i'm going to style the links which includes the social media icons so i'm going to set the color to white so we have white then we have the icon inside the link so i'm going to set the font size to one ram which is the default and then some margin at the left to separate the icons we have margin left i'm going to use one ram so i'm going to save let's say from the browser and there you have it so the next step now is to make sure that we create a media or include a media breakpoint which is going to target large devices that is the font size of the icon so first i'm going to open the inspector right click and then inspect element so that you can see how it looks like on other devices so inspect element so here i'm going to include that media breakpoint and i'm going to copy what we have here copy and then here for large devices we're going to use 1.7 or 1.6 and then i'm going to save so let's see from the browser so you can see now our content is fitting nicely on a small device screenwind 360. so i'm going to switch to another device like a medium device we have ipad again you can see our content is fitting nicely including the size of the fonts of the social media icons so something else is we need to fix that is the space between at the bottom where we have the social media content so i'm going to close the inspector so you can see here at the bottom we have so a big space so we need to fix that so in html where we have the first column we are going to add a class which is mb md0 so we have that class which is going to fix that so save let's see so now you can see we don't have that space so uh content is fully responsive and now we can move to the next part which is part so on the third part of the footer we have the four columns we have the first column with the company info and then we have the rest of the three with the links so let's work on that so in html i'm going to create a container for that content so we have a comment first which is that the content for company info that is for the company info so that is a comment so here i'm going to start that container which will have a row so we have the row with a class of text white and justify content center so we have that class so justify content center and then some margin at the top so here i'm going to use margin top 3 and then some padding at the bottom so we have padding bottom three and then tab so inside the row we need the four columns so we're going to start with the first one which is a bit large or a bit big than the rest of the three so that one you're going to to create it separately so we have so we're going to start with the call 12 and then for small devices we're going to use call small six for large devices you're going to use call lg 6 so you have six and then tab so inside the first column you're going to add the heading which is company name and then they info about that company and then this line so we have h5 with a class of text capitalized and a class of fun to it bold so we have company name then we need that line so that one is a hra hr with a class of bg white and a class of display inline block and then some margin at the bottom so we have margin bottom we're going to use four and then tab and then we need to style it so we have style so we have width i'm going to use 60px and then height so height i'm going to set that to 2px 2 pixels so i'm going to save let's see from the browser how it looks like and there you have it you can see now we have that text so let's also add the text so we have it below the hr so we have paragraph with a class of finite large and then some dummy text so i'm going to use lorem 17 and then save let's see and there you have it so now we have that text i'm going to add the three remaining columns so here i'm going to use call 12 and then for small devices i'm going to use call small six and then for large devices i'm going to use call large two that is called leg2 and then some margin at the bottom so we have mb4 so at the end here i'm going to say times three because we need three of them so hit tab so for the first column you're going to copy what we have here that is the heading the line the two so i'm going to paste for the three columns paste paste so for the second column we have heading as so let's see from the layout we have products useful links and then contacts so that is the order so we have the second heading so we have products and then useful links and then the third one which is contacts save let's see how it looks like and there you have it you can see now we have the three headings so the next one now is to add the list you can see we have the listing form of the the listing form of the links so let's add also those links so i'm going to start with the links for the products so we have another list with a class of list inline and then we need the list items so we have the li which will have a link inside and then some dummy text so i'm going to use lorem ipsum and then i'm going to hit tab so i'm going to duplicate for the three links so i'm going to duplicate three times so you have one two three so i'm going to save let's see from the browser how it looks like and there you have it you can see now we have the list or the links so let's also copy for the useful links and the contacts so i'm just going to copy the entire unknown at least to the rest of the columns so for the useful links paste and also for the contacts paste so for these full links you can see we have a different content from the layout here you can see the content is different so i'm going to copy this and then replace with what you have so copy and then i'm going to pause the video and then add them on to useful links so i've copied everything i'm going to save let's see from the browser and there you have it so the next step now is to style that content so here i'm going to start by styling the list items and i'm going to change the color to white and then remove the underline and also have some space or create some space between the list items so let's work on that so on the footer.css at the bottom here i'm going to start with the comment which is style the company info content so that is a comment and here i'm going to create a class which is going to style that list items so i'm going to call it company list so we have company list so i'm going to set the display to block so that is the first thing i'm going to do so you have block and then you're going to set the list style type to none so we have list type so i'm going to set that to none and also we need to set the position to relative then we need to style the list items so we have the ally inside the list style so i'm going to set the margin bottom so i'm going to use 0.5 ram and then text decoration i'm going to set to it to none to remove that underline and then we need also to style the links that are inside the list items so we have the color i'm going to change that to white or set it to white and then also text decoration we need to set that to none so the next thing now is to add this class to the list items that we have on the html so i'm going to select the ul class that is an ordered list for the three so you have the first one second one and the that one and then add that class company list and then i'm going to save let's see save and there you have it you can see now we have the list items so the next thing is to make sure that once you hover the list or the links they turn to our primary color so like what we have here on the layout so you can see from the left once you over the links return to that primary so on the list again we have the company list so we have the hoover and then i'm going to set the color to primary so we have primary and then i'm going to save let's see so now if you try to hover the links you'll see return to that primary so the next thing also is to add some space between the social media content and the company info so you can see we need some enough space or good space like what we have here in the layouts so here on the html i'm going to add some margin top where we have that container so i'm going to add that class margin top five so that one will fix that and then save and there you have it the next step now is to make sure that our content is fully responsive so i'm going to open the inspector so inspect element so that is how the content looks like on a medium device and that's an ipad screen wind 768 and you can see already the media breakpoint is already working so i'm going to switch to another device this one will be a small device so let's go to moto g4 so again here you can see the content is fitting nicely on that screen device so let's switch to another one so let's go for a larger device ipad pro so again here you can see the content is also fitting nicely and it's fully responsive so even without writing a single media breakpoint you can see our columns are already creating the medium requirements we have created so the only thing i'm going to do is to add the mx auto that is the class for horizontal centering on the columns that we have so i'm going to select all the columns and then add that class so we have the second one the third one and then the fourth one so we have that class mx auto so i'm going to save let's see so with that our content now is fully responsive and you can move on to the next part which is part 4 of the footer that is the bottom footer so on the bottom footer we have the copyright info and this is our fourth part of the footer so let's work on that so on the html i'm going to create a container for that content so let me start with the comment which is start the copyright info so here i'm going to create a class called footer bottom so inside that we need a cloud container so i'm going to create that container and arrow with a class of text center and a class of text white and then tab so inside that row we need a class or a column so i'm going to use call 12 then inside the column i'm going to create another class or another container for the copyright content so we have footer bottom and then underscore underscore copyrights so from the left here we have the copyright symbol and then the text so i'm going to copy the entire text and then you're going to start with that symbol so we have the code copy we have it here and then the text so we have copyright 2021 and then here we need a link so i'm going to create that link and then paste and then here also we need a link and then paste so i'm going to save let's see how it looks like on the browser so now you can see we have the text at the bottom and that is the copyright info so the next thing is to style that content so on the footer.css i'm going to start by setting the background color for the footer bottom so let's go to that file and then at the bottom here i'm going to start with a comment which is style the copyrights footer or basically content so we have that class a bottom so here we have the background color and i'm going to use black so we have that color on the sass file and then here i'm going to nest it the way you have done on the html so we have underscore underscore copyrights so i'm going to set the color to gray 600 so we have that color gray 600 and then phone to it i'm going to set that to 400. then we need to style the links again inside the copyrights so we have a link and i am going to set the color to gray 300. so we have gray 300. and then text decoration we're going to set that to none so i'm going to save let's see from the browser so now that is our corporate so we need to add some padding so on the html where we have that class i'm going to add padding top and padding bottom so we have padding top i'm going to set that to five and then padding bottom also five and then i'm going to save let's see again and there you have it now you can see it's much better so the next thing is to create the hoover so we need the links to turn to our primary color so on the footer inside the link you're going to create that hoover effect so we have hover so the color we're going to set that to primary and then text decoration we're going to set that to underline underline so i'm going to save let's see so now if you try to hover the links you'll see we have that hoover which is our primary color so we need also to make sure that our footer bottom our copyright info is fully responsive so i'm going to right click and inspect element to see from other devices so that is how the content looks like on a small device which is with a screen window 360. so i'm going to switch to another device another smaller device pixel 2. again you can see your content is fitting nicely on that device let's go for a medium device again our content is fitting nicely on that screen device so with that we can move on by creating the next item which is the back to top button so you can see it here we have this back to top so on the html i'm going to create that button at the end of the footer so here we have a comment first which is back to top button so we're going to create a link so we have the link with a class of shadow and a class of btn primary to give it that purple color and then we need to give it that rounded circle so go toward that class which is rounded circle so we have tab and then inside the link we need that icon so you can see here from the layout so we have this chevron app icon and that is the font awesome icon so here we have the icon with a class of font or some solid and the name of that icon is chevron app so i'm going to save let's see how it looks like so on the left here at the bottom left you can see we have the icon already so the next thing now is to style it and make sure that you position it at the right bottom so inside the footer so the bottom here i'm going to start with the comment which is style the back top button so here i'm going to create a class which is going to position and style that button so i'm going to call it back to top so i'm going to set the position to fixed that is the first property that i'm going to have so we have fixed and then set the width and the height of that button so we have width i'm going to use the ram and also the height also 3 ram then i'm going to set the position from right so we have right 1.875 ram and also the position from bottom also i'm going to use 1.875 ram also we need to set the z index so here i'm going to set a higher number so we have 9999 and then i'm going to save and then we need to add this class where we have that button so after the rounded circle paste back to top class and then i'm going to save let's see from the browser and there you have it you can see now we have that rounded button so the next thing is to position this icon at the center of that circle or the rounded circle so here you're going to nest it we have icon and then we have the color and the font size so i'm going to set first the color so we have color so white and then the font size so the photo font is i'm going to use one ram and then we need to position at the center so we're going to include that mixing so we have include and the name of that mixing is absolute center and then close i'm going to save let's see and there you have it now you can see you have the icon at the center of that rounded circle or the button so now if you click the button you'll be able to scroll to the top and you can see the button is already working so click again and there you have it so with that we are done with that part and we've come to the end of this project if you made it to this far congratulations hope you've learned a lot from these projects and if you have questions please post them on the comments thanks for watching

Channel: Vaxa Code

Views: 2,829

Rating: 4.9555554 out of 5

Keywords: Bootstrap, Bootstrap 5, SASS, CSS, LEARN BOOTSTRAP, SCSS, BUILD A WEBSITE, BUILD A LAYOUT WITH BOOTSTRAP, HTML, HTML5, CSS3, PREPROCESSOR, Customize Bootstrap, Navbar, CREATE NAVBAR, FOOTER, JAVASCRIPT, VIDEO POPUP, LEARN SASS, NODEJS, FRONT-END, VARIABLES, CSS VARIABLES, @MIXIN, NESTING, SASS NESTING, SASS MIXIN, RESPONSIVE DESIGN, ADVANCE TUTORIAL, BOOTSTRAP 5 ADVANCE TUTORIAL

Id: IrUER6uq1f4

Length: 301min 58sec (18118 seconds)

Published: Mon May 31 2021