Build a Full Responsive Landing Page With Bootstrap 5, HTML, CSS

hi guys welcome back to this channel and uh thanks for viewing this video today i'm going to show you how to design a landing page using bootstrap version 5. so we are going to build a landing page just like the one you can see on the screen right now we have the header section with the the navigation bar that is fully responsive and here we have the about section and we have uh our service section as well down here we have our team section and then the last section is going to be the contact us section and as i was saying this is fully responsive so when you reduce the screen here you can see you have your toggle button when you click on that you can see your navigation items down here and when you scroll there you can see the various sections of your website so i'm going to show you how to design a landing page just like the one we have in on the screen here we're going to use bootstrap version 5 and we are also going to customize it using html and css and as i could show you as well i can also show you the scrolling effect example if i click on about us here it's going to take us to the about us page if i click on this back to top button it's going to take us back to the top if i click on um contact us for example you can see it has taken us to the contact us section of our landing page if i click on back to top button it takes us back to the top of our landing page so without delay i'm going to show you how to do that so if we come to our text editor you have to make sure that you have your bootstrap that css file well connected to your project uh you also have to link fontason because i'm gonna use fantasm for my icons for the various icons on this landing page and we also have to link our style that css file so these are the various files that we need to have so here is our my project directory is organized i have a css folder where i'm storing all the css files uh inside i have my bootstrap files and also my i also have my font awesome files in here and i also have the fonts this is for the frontal some as well the fonts folder and the images i have all the various images i'm going to be using in this landing page i also do have my javascript these are all bootstrap that javascript files and then i have the index.html and style.css files as well so i'm going to be showing you how to design section by section so we are going to start with the header section then we will move on to the about our section and after the about us section we are going to continue with the rest of the sections that is going to be the service section the our team section and then the contact us section so let us start designing our header so i'm going to start by uh writing a div and i'm going to give it a class of header background like that like this and inside this div i'm also going to write another div that i'm going to give an id of nav like this and i can give it a class of um i'll call this class sticky now like this so this is what i need to write now inside this uh class stick enough i am going to put my navigation code so what i'm going to do is i will go to bootstrap version 5 website i'll come to components here and then scroll down i click on navbar as you can see in the bar here i'm simply going to copy and paste this portion of code here okay as you can see this portion of code it's going to give me the nav bar so i'm simply going to click on the button copy here and then come back to my text editor i will paste it like this so this portion of code i have copied it on bootstrap website all right so i now can customize the navigation so all i'm gonna do is that uh if i come back to my website if i open it in the browser there you can see how it is looking all right so i'm going to customize this navigation bar for it to look like the one we have in here so i'm going to change a couple of stuff so i will remove the background light here navigation light as well this is go what i'm going to remove and uh here instead of writing navbar i'm going to write code in coding river so this is going to represent my logo all right it's going to represent the logo so here the navbar tuggler icon i'm going to add uh two spawn tags so this is the first one i'm adding and the second one like this so these spawn tags when i'm going to style my css i'm going to use them to have the okay i'm going to show you what is going to happen so as you can see these three lines here so each line is representing the spawn okay so this one and i'm going to show you how to do that when i'm going to be styling my css all right so let me come back to the text editor so this is what i am going to do now i need to change this as well so these are going to be my navigation uh items my navbar items so i'm going to write about us here for the first item and uh so this drop down i'm simply going to write services like this and i can leave all these drop down items like that i think or i can write whatever i want i can say what design for example on the digital marketing marketing and here i can say uh programming okay so after i have done that this one i can remove this disabled enough bar item i don't need that and what else i'm going to need i'm going to add some navbar items okay so what i will do here is i will simply copy this i'm going to copy that come down here paste it i'll change this to team this and then i'm going to paste another one and i will change this to contact us like this okay so this is the contact us and i will save let me come and refresh my page there you can see everything has changed so now i want to place my uh nav bar items at the middle here what can i do okay so one trick i will show you is that you need to come to the unordered list here and i'm simply gonna add class here i'm going to say ms auto like this and save let me refresh here then you can see the navbar items are now placed at the middle of our nav bar so i need to remove this input as well this input here so what i'm going to do is that i'm going to remove that here simply remove right then i'm going to save let me come back refresh there you can see all right so now uh i need to add another thing here so since i'm start i'm i'm coding the header the header part what i need to write here is going to be my uh h1 so i will say h1 class heading and i'll be landing page website and then save come and refresh here okay there i have landon page website so now it's time for me to style uh using my css okay so this is all the html code you need for the header so now it's time for us to start with styling using css so for the css part as you can see i am importing some google fonts so i'm going to be using this form poppins okay and so i'm gonna start by styling my html like this and i'm gonna say scroll behavior smooth like this so this is going to be used uh for the scrolling part but we are not going to use it in this part of the video but i just want to put that here so that whenever we're going to use that i'm going to come back to it and explain to you so now the body i will say margin 0 pad in 0 and i'll say font size 18 pixels then font family like i said we are using poppins i can also add another element here i will say line height 20 pixels and the color i'm going to use this particular color b1 b4 b d and i also need to give a background color so i'm going to use this color so 32 3a 45 so this is going to give us a dark background color also as you can see here so now the body is having a dark background color because we precised this background color here and i can say for the links i will say i will give them a particular color the same color as the one we gave to the body and i think for now that's okay and i will say font weight 500 then anchor at i would say hover i'm gonna give it a red color like this then save so let's come back to the html part of our code so i'm gonna start styling the first class here we are having header background okay so in the css part i'm going to say header background test so position static display block then i'm gonna say overflow visible then top will be zero height will be hot auto and then the minimum height will be 750 pixels margin so here i'm going to say margin bottom 50 pixels and pattern bottom as well um put in the bottom i will say 70 pixels like this so what else can i add here let me save this come back here yeah so as you can see so i'm gonna add some background image so as for the background image i'm going to say background underscore image so i will say what kit gradient and i will say linear left top left top so i want the overlay on this header uh to be gradient so that's why i'm adding this portion of code here and so from here and then i'm going to add a color so this is the code of the color i will add so 69 0.9 like this and i'm going to say background image again and linear gradient 100 degree then i will say rgba i will simply copy this in color here but i'm going to change some few numbers here so instead of 0.9 i'm gonna say zero point uh let's say five five okay so i'm gonna say comma let me copy here after the comma um i'm gonna paste it and change some few stuff here i will say 74 then i will say comma here url then here i'm going to add the image so i'll say images so i have an image here called b g then save all right so after that i'm going to say flex direction column like this let me add some background position i guess let's see like this position background position what are my going to right here so i'm saying zero pixels zero pixels comma 100 percent 50 and then the background uh this is going to be the background size background size so auto cover like this and i'm going to say a white space normal and object fit you'll see field so oh object fit fill alright so let me come back to here and then refresh there you can see the image is showing and then the overlay is also showing on top of the image because we we specified the linear gradient you know 100 degree here and then the various colors and uh and then the image as we did right here so i can add some few elements just for uh for it to be more responsive so i'm going to say webkit box orient like this vertical then what kit works direction that will be no more and webkit flex direction i'll say column okay column like this then ms flex direction will be column as well all right so that's it the second element i'm going to style is going to be the sticky nav okay so as you can see here we have a class called sticky na and i need to style that as well so this is how the stalin is going to look like so i would say that c key now like this then the position will be sticky okay i want enough part to be uh sticky so i can add position webkit sticky this then i will say top zero pixels um pardon will be 20 pixels the index maybe one and then i'll say webkit align self auto and ms flex item align adobe auto as well and ms grade raw align auto so i'll say align self will be auto webkit box original group b1 then webkit order 0 and ms flex order my bad let me come back here so put 0 here as well semicolon and i'm going to say order will be 0 as well then here i'm going to say the background color of this will be rgba i think i'm simply going to say 12 32 55 0.5 then come here refresh there you can see how the nav bar is now looking okay based on all the styling we did here on the header background class and then the sticky nerve class so we are going to continue our styling then i'm going to style next the navbar brand so i'm going to say navbar brand so in here i'm simply going to change the font size so i will say font size now i i need to change them i have to change the pattern so i would say one and zero here all right then after the pattern i can add say display block as well and then text decoration will be none so i can add the font size i'll say 2.2 rem and then i'll give it a different color so i will say white so the nav brand here is actually the logo so we are styling the logo so let me come back to the website and see if any change has happened to the logo no not actually so what i'm gonna do is i'm gonna say navbar brand like this i will simply copy this i'll cut it actually and paste it here and save come back to my website there you can see now the logo has changed so based on all the styling that we have put here in our css so now i can style my nav bar tuggler so i'll say nav bar top blur like this the border is going to be uh let me say none okay and then the pattern 10 pixels and six pixels outline will be none like this so let me say enough bar toddler spawn see display block the width will be 22 pixels the height will be two pixels border will be one pixel and then the background will be white then save so i'm gonna do for the second uh navbar tubular so i'm simply gonna copy this paste it let me remove this so i'll say spawn plus span so to make sure that we are going to style the second spine tag so i will say margin top 4 pixels and then the width will also be 22 pixels so i'm gonna copy this face like this and add plus the third spawn and then keep the same width so the width is going to be 22 pixels so now let me come back to my web page let me refresh that and as you can see if i reduce the size there i have my toddler button okay when i click on that you can see that my navigation bar is uh collapsing all right so after i have uh styled this portion of my code i can now style my navigation uh links okay my navigation items let me come back here so what i'm gonna write is going to be navbar expand rg that navbar nav that nav link like this padding 1.4 rem 1 r e m and then the font size will be 1.2 r e m and its position the position of my nav links is going to be relative like this all right i am going to copy this paste on my bad let me remove this so i will remove this and i will say that active so this is to say that whenever the link a particular link is active i want its color to be different from the rest of the links okay so it's going to be red all right then let me save okay so this is it because if you can look at the html or the bootstrap code here we have that class here active right so that's why we have in home having a different color uh from all the other um nav links up here so that's it now after we have done that i'm going to style the button so i'll say button let me come back to my bootstrap code here so i'm going to remove this save that okay let me come back to the css code so button i want to give it a background color so i'll say background color that will be red like this and the color i will say white as well the border radius border radius let me say 10 pixels pad in one rem 1.5 area like this and then the font size i'll say 1.2 rem i think that's going to be good now let me copy this paste it remove like this and here i was simply going to say hover i can also remove the color here and the background color i will give it another a different color so i will simply say 0 a3 so this is the code of the color i actually want to give to my button whenever i hover on it all right so as you can see uh so i also need to put the color here so i'm going to say color white all right okay and i can also change the text here instead of saying search i can simply say get a quote now then save come back then you can see the button get record now okay so that's it next in order to finish our uh the styling of our header we are going to style this class heading so that means in our css code we will say heading like this then font size that will be um so we want it to be big so i would say 5 rem it's font weight we want it to be bold like this and the line height we will say 1.4 and the text align i need to be centered then the color the color we we can say that the color will be white as well so that's it let me save and refresh my uh webpage so when i refresh there you can see so i need to move this a little bit down here at the middle of of the screen what can i do so i will say margin top margin tab let me say 180 pixels let me refresh there you can see landing page website so in case we wanted to add some text uh down uh that heading so we could also make sure that we add a margin bottom as well so something like i can say 8 pixels for example and we could also uh add a minimum height to this heading something by giving it this minimum height of 100 pixels for example so let me refresh so this has not changed too much because we are having a single line and so i just want it to look like this here all right so and as you can see here that we can see that the nav brand or the logo is uh is not like here okay here we having the button that is stretching far left uh the the logo is stretching far left and then the button is also stretching for right here so this is because in the bootstrap code we copied the nav bar is having a class of container fluid okay so when you say contain a fluid it's going to occupy the whole width of your page so we are going to remove that we want it to be uh simply container so that we will get the margin left and margin right here so when i do that as you can see now we're having uh a pretty much big margin left here and then a margin right uh here so that's it concerning how you could design this nice um header so here you have your nav bar and your nav links and the button on the nav bar when you scroll down you can see that the nav bar is sticky and you also have your header image and overlay and you have a heading here you could write whatever title you could write on on this portion of this website but just in order to show you how to do that i prefer to write landing page website and i can also show you that the nav bar is responsive as you can see whenever i reduce the size of the of my browser you can see that the nav navbar is also responsive and when i click on the toggle button here there you can also have a look at your navigation links or your navigation menu you know and you can also scroll so guys that's it on how you can design a nice looking navbar menu or and header so in the next video we are going to see how to design uh the about us section okay as you can see here about us i'm gonna show you how to do just that so without uh wasting time let's meet in the next video and don't forget to like and comment and share your point of view concerning this design and i really do appreciate that so let's meet in the next video bye hi guys so let's continue the design of our landing page in the first video in the first part of our video we developed we designed this header you know with the navigation bar now it's time for us to design this about us section so i will quickly go to my uh index.html file and down here i am going to write div and give it a class of container fluid container fluid like this and inside i'm going to have another class that would be row and in this row i'm going to have two columns so i'm going to say steve class column 12 so as you know this is actually to make my website with the various columns of my website responsive and i'm going to say column on a large screen six and i'm gonna add another class name that i'm gonna call column left like this that's it i'm not gonna put anything inside this column i am going to add i'll just copy and paste so this is the second column all right and this column i will call it column write like this and inside this column right i now going to write the text and i will give a class of section title and i will say about us okay so as you can see i'm having about us here so that's the text and i'm gonna add another paragraph tag that will allow me to add this text that you can see here so what i'm gonna do let me come back to the html uh code here and i'm gonna say p so this is the paragraph type and the class is going to be paragraph like this so i need to put in the text so i will simply copy this text here or you can go on the internet and find some dummy text that you can put in your website so that's the text i just copied and pasted like this all right so i'm just going to align this like this and save so that's it for the about us section now let me come and refresh my page here and scroll down there you can see i'm having the about us and then here i'm having the paragraph text so i am also going to add um an id element here so i'm simply going to say id and about us so i'm going to use this id when i will show you how to make the scrolling effect okay when you click on the navbar item about us it will lead you it will scroll down to the about us section but that is going to be in another part of this um tutorial so now the html part of our uh website is um okay so let's jump to the styling of this uh landing page section so the first styling we're going to do is going to be on the class that we called column left okay so as you can notice here so column left is this portion here where we are having the image so all we are going to do is to add an image there but the first thing i need to do is first of all to determine its minimum height and i will say 75 pixels 750 pixels and save then i'm going to add some image so about the image i'm simply going to copy this portion of code here i say copy then come down here and i will paste it right face let me remove this flex direction then save and i'm also going to change this image so instead of the image bg i have another image here called bg1 so that's what i'm going to put there and i'm also going to change some color so here i will give a different color so i would say 12 comma 32 comma 51 okay so that's the same color i'm going to be using down here as well i'll just copy and paste and here paste then i need to save okay so i have the background position i have the background size that's okay uh i need to add a background on background attachment now simply say scroll scroll then object fit i'll say fill object fit um i think the object fit i will put it to cover so cover like this then save so let me come back to my website and refresh that when i refresh you can see the image is now showing all right and then the the gradient c the overlay is having a gradiency uh as well but you can notice that there is a little bit of space between the header and this section here i guess this is because in the header header background here we say that the margin bottom is 50 pixels let me remove the 50 pixels like this and then refresh the page there you can see we are not having any space there so the left column class is okay it's now time for us to style the column write class okay as for the column right we will say um so i'm going to say column right like this and i'm going to style the section title so the first thing i will want to style will be the the margin top imagine top i would say pixels like this and then the padding 5rem to the top to the right i would say 2 rem and to the bottom i will simply say 0 ram and to the left that would be 5 rem as well and the font size will be 2.8 rem then the color i will use this color b1b4 bd and the font weight so i would say 500. then save when you come to the website and refresh there you can see that change has been made so i will also style the paragraph so i'll say paragraph like this now let me say column column right paragraph then in here i will give so let me just copy this because probably all most of these elements will be also needed here i didn't copy that so say copy paste so for the paragraph i want its margin top to be 15 pixels so that would be 15 pixels and the pattern i want at the top about only to be one rem the right that will be five and uh bottom will be one and then the left is going to be 5 ram as well as for the font size i want to give it a different font size so that would be 1.1 rem and the color will be this so i know i don't need the font weight i will add another element that will be the line height let's say 1.4 then the text align will be justify like this yes everything is okay when i come and refresh there you can see everything is looking pretty okay as on this uh page here so here we are having about a section and that's it so guys we are going to um for this section that's all you have to do the html part and then the css part uh in the next part we are going to start designing the service part okay this section so it's also going to be very simple and i'm gonna show you how to do just that so thanks for viewing and let's meet in the next video okay so after doing the header and the navigation bar as you can see on the screen here then the about us section i'm now going to show you how to design this section so this is going to represent our services okay if your company has services that you want to represent on a web page you can do that by designing a section like this one so without delay let's go to our index.html file and then we are going to add another div that is going to have a class called container fluid and i can also add an id and that id i'm going to call it our services like this in here i will add another div i'll say row okay that's the class and then i am going to add the columns and give the column some points okay so i'm say extra small i'll give it 12 points for the column small uh size i'll say six and then i'll say for the large one it will also have six points so that's it i would need to have two columns like this one so i'm going to copy this copy and paste it down here so that's it that second column here i'm going to add another class and this class i'm going to call it our service and i will just simply say write like this okay so let me start putting some other elements inside the first column here i'm going to add an h1 tag and uh i will add a class that i will call service section like this and in here i'm gonna say what we do best okay and after that i'm going to add a p tag and inside the p tag i'm going to add a class that i'm going to call paragraph like this and then inside paragraph i will add some text so let me just copy this text here you can find some dummy text on the internet and then just paste it here or if you have uh actual text text you can put that in here so this is just some dummy text that's what i wanted to say so after that i'm going to add another div and i'll say class row and this row i'm going to add a div class and i'll say column so let me just copy this copy paste it here and i'll add service 1 as the name of the class and paste it like this i will copy this again and paste it and here i will say service to all right so in service one i am going to add an icon so this is a font awesome icon and i'll say fa magic so you have to make sure that your font awesome is actually uh installed in your project for this to work okay so you need to have the link to the font awesome and then i will say h1 tag class service title service title one okay that's what i'm going to call it and i'll say well design so that's the title of the service that we are offering as a company and i will say class here i need to give it an email simply say service paragraph paragraph one yeah that's it so let me simply come here and then copy this small text come back here and paste it all right so that's it for service one service two i can pretty much uh copy this and paste it in here i will simply change the the icon the class here is going to be service title 2 and then here it's going to be service paragraph 2 okay so this is just because i want to be fast so that's it concerning this row and so that's it concerning the html portion of this uh web site so now let's jump inside the style.css so the first thing i'm going to change here i i want this paragraph to be kind of uh universal because i'm going to have multiple paragraphs in this website so and this styling is going to be generic for most of these paragraphs so that's the reason why i want to remove the column right here and simply put the class paragraph okay so that's it now after we have done that we can now start by styling i'm going to start with the class our service right since this class i am simply going to put an image in it so what i'm going to do i am going to copy some of the elements in the column left here copy and paste it like this all i'm going to change will be the background image so instead of background image 1 i will see background image three that's it that's it so let me come back to my site here when i refresh there you can see the background image on our service the right side and here we have some text so now i need to style the text okay so let me come down the first class i'm going to start styling with this section title uh no i i called it service section okay yeah so this section like this one so i'm going to say margin top 25 pixels okay padding 5 rem and 2 rem 0 rem at the bottom and then 5 rem on the left and then the color no i don't need a color what i'm going to put here is going to be the font size i would say 2.8 rbn and then the font font weight will be 500 then i will save let me come and refresh yes as you can see now the service section class is styled properly so now i'm going to say service title 1 i'm going to specify its pardon so the pattern here i'm going to say one rem uh at the top to rem on the right one rem at the bottom and then five ren on the left then the font size the font size is going to be 1.8 rem okay so i'm going to do the same thing for the service title class uh service starter 2 but then here i am simply going to change the pod in a little bit so i'm going to say 1 rpm at the top 5 rem on the right and then 1 rpm on at the bottom and 1 rem on the left but the font size is going to be the same as in service title one then this is going to lead us to style the service paragraph okay so i think we called it service paragraph and the first one we called it paragraph one okay that's it so i'm going to say margin top here the margin top i'll say 15 pixels and then the padding uh simply say zero rem one rvm one ram and then five variant the font size let me say the font size one point one and the line height maybe 1.4 then a text text line i would simply say justify okay like this so this is going to be the same thing for service paragraph two okay except here the padding i'm going to say zero and uh here i need to write five and then one here so that's it now let me come and refresh the web page there as you can see so here i need to say service paragraph too okay refresh okay so the next thing i'm gonna start is going to be the icons okay so for the icons uh yeah i'm gonna use the class fa so the font awesome and uh so i need to precise its font size that would be for rem and then the color will be red like this okay so i'll say service 1 not fa i need to specify its pattern that'll be 3 rem 2 rem 1 rem and five rem like this i'm simply gonna copy this and do the same thing for service two so here service two that will be um three rem five rem one rem and then one rem like this so let me come and refresh there you can see that we have designed our service section the same way as it is showing here okay so here i simply need to change the text so i will write digital marketing all right and then when i come here refresh yeah so everything is looking the same way so guys that was it on how you could you can actually design this section of your web page of your landing page using bootstrap html and css so in the next part of this video i'm going to show you how to design this uh our team section so i hope this video was informative and don't forget to like share and subscribe let's meet in the next video all right guys i showed you how to design the header this about us section and then this our service section so now it's high time for us to start with uh the this our theme section so now we without delay let's go to our html file so in the index.html file what we are going to do is to add another div and a class of container fluid like this i will add an id and so i can say id here say call a team right and in this div we are going to add another div and with the class of row and we are going to add another div with a class and then here we're going to specify some columns with the points okay and then like this i'm going to add another class here i will call this class port portfolio all right so in this portfolio class i'm going to say the class row and in the row i am going to add another div with a class of columns this column like this and then i'm going to add two more classes i will say gallery and img one yeah so i will copy this paste it down like this so i'm going to copy this row and paste it two times all right so all i'm going to change here is going to be image 2 image 3 image 4 image five and then image six so this is what i need to change so these rows okay these columns are going to be used to output to show us the images as you can see here i'm having six images so i'm gonna use these columns here and this class img six five to actually uh show these images all right and uh so after i have done that i need to come down here i'm going to add another div i'll say class in this class i'm going to say com xs column a same six points and then column lg six points as well and inside i'm going to say div class row and uh in here i'm going to add another div so that will be leave class in this class i'm going to use text left center text like this and then i'm gonna say another div class left center so this here will be left center block this one left center text and the thread div will be we'll have a class called left center part all right and in here i'm going to say h2 and class will be team section and i'm going to say i'll write some text and say meet our team so that's it and then paragraph class that will be team paragraph all right so i need to copy the text so i'll copy this text paste it like this all right so now after the paragraph i'll add another div and i will say class row and in the row i will say v class again and i will add some columns yeah so i'll say copy and down here i'm going to paste it i'm going to add another class that i will call uh blog team all right so in this i will link an image so i will say images image one let's say image one and i'm going to add i can add another class so i will say team member like this and hf3 that's another tag h3 uh we'll call the i'll write the name that will be and this h3 tag is going to have a class now i can leave that like this then after that i'll say small that i will say photo graphic and then paragraph i'll say class paragraph so what i'm gonna do is come back here and then copy this text come back to my index html file and paste it okay so that's it after how you've done that let me write another div this div and give it the class of social media and inside i am going to add some fantasm classes fa face book i'll copy it's like this so here it's going to be fa twitter if a dribble all right so that's it so now all i'm gonna do now is to copy this and come down here paste it so all i'm going to change will be here instead of image 1 i'll say image 2 change image 2 again all right and uh i'll leave the class the same as for the name here what which name did i give okay so this would be any motors and i'll say designer okay as for the paragraph i can leave it like that so for the social media icons i'm gonna add another icon so i'll say copy paste like this so this here i'm gonna change it to linked in and the last one is going to be youtube okay let me come back to our site and refresh okay here there's a third icon that is missing let me check okay so dribble is supposed to be written with three b's yeah so let me save come back here refresh and there you can see the the icon all right so now let us go to the css portion of our code so in the css i'm going to start with the class portfolio and i will say minimum height 750 pixels and the overflow will be hidden after that i'll say gallery minimum height 252 pixels and the background position will be zero pixel zero pixel background size will say cover and opacity one okay next i'm gonna style the images classes so i'll say img one so i'm simply gonna put some background image in this class so all i'm gonna do is to copy this portion of code copy come down here paste it like this and simply change the color the image okay so i'm gonna do the same thing for the other images so let's say one two three four five so i'll say image two background image one class img three background image two uh this would be img4 background image three img five and background image four img six the background image five and i come here and refresh okay there you can see that we are having images all the six images are showing all right well we are good to go now we are going to start styling the text okay this side of our the right side of the section i will start with uh this class text left block like this and weight will be 100 left zero and a height will be one hundred percent and uh that index maybe nine nine nine overflow hidden if i refresh okay let me check if i gave the same okay so we are good to go now um i'm gonna say text left block left uh center text and come back here so actually the class we are text left block okay i need to change this class so it's supposed to be text left block like this and uh left center text okay that's it so i'll say display table and the position relative then the height 100 vh and the padding pardon zero ten percent text align left come up to my website and refresh okay now you can see how the site is looking so i'm gonna keep on uh styling some of the other elements remain in yeah so down here we'll say text left block left center text left center part like this display table cell and then vertical align will be middle let me copy this and i will style the h2 tag h2 i simply want to give it a font weight of 500 come here all right so now we are going to go so i will say down here team section i guess that the name we gave to that okay we have team section here the class team section so that's what we want to style now so i will say padding 0 rem 0 rem 1 rvm 0 rn and then the font size will be 2.8 and also the font weight is going to be 500. i guess it's okay let me come in refresh and see what happens so let me continue i will say uh team paragraph like this the padding is going to be 0 rem 2 rem 1 rem and 0 rem the font size maybe 1.1 rem line height will be 1.4 and a text aligned will be justified so down here i will say block team i'll simply say margin one rem zero zero okay and then yeah i'll say blog team img so that's the image tag then team member for the width 240 pixels and object fit we feel then refresh like this there's actually a problem with the head in here let me go and check in the css so i guess the problem is with the font size here we didn't say rem all right so let me refresh yeah there it is so i think everything is okay so i'm gonna say block team h3 so margin top will be 15 pixels and then the font size will be 1.4 rbn so the same thing blog team small of a text transform uppercase the font size will be one rem the color will be red the font style say italic and then the margin button all right so let me comment refresh that's it so now uh i can style the block theme paragraph i'll simply say padding 0 rem 3 ran on the right 0 at the bottom and 0 on the left save it and refresh now this is how it's looking and so say block team social media f8 and say margin 4 pixels the font size 18 pixels and the border 1 pixel solid white border radius 50 percent and the width i would say 30 pixels the height as well will have the same size and the text line i would say center pad in top five pixels so now let me come and refresh okay so this is how the page is looking so i need to move this uh meet our team a little bit down what can i do so let me come to the team section here if i say five i ream like this okay so when i say 5 rpm it has moved it so i can say 4 and refresh okay or three i think like this it's okay so guys this is how you could do to design this our team section of this landing page so i hope this video was informative in the next video uh we are going to see how to uh design the last section of this landing page which is the contact us section so don't forget to like and to subscribe to this channel for more videos like this one let's meet in the next video right let's now start working on the contact us section of this landing page all right we've already done all the other sections now is time for us to do the last section so let's go to the index that html file and as usual we are going to add another container fluid class so i'll say div class container fluid and i can also add an id so i'll say contact like this and in here i'll div class row okay and then down here i'm going to say div class column xs 12 column sm 6 and then column lg 6 and i will say contact left so that's another class all right so here i'm gonna just repeat this column paste it down here and this i will call it contact right so that's it so now in the contact left class i'm going to add another div i will say class text left block so that's the same class we used in the previous uh section so we're gonna use the same class again in the contact us section i'm gonna say class left center text and div again class left center part and i'll be h2 class contact section and i will say get in touch that's the h2 here i will say uh p tag then class paragraph now um i am going to write some text and say we are here to help you then i'll uh add a strong tag monday through saturday from let's say from 8 00 am to 10 no from 8 a.m to um 6 00 p.m and i will say break tag contact us via don't say strong again foreign so here i'll say href then i will add a class and this class will be called phonemail link so the phone number so you can write the phone number here it will be all right six six eight eight eight nine nine five and this is just uh a random number i i i wrote here so i'm gonna say or strong email then semicolon say copy the link yeah and in here i i am going to write the email address okay so just after the paragraph i am going to add a tag um a div tag and class row okay and in here i will say div again class column 12 column let's send 12 again and then column lg 12 and in this column um i'm going to write a form tag that's it yeah and this form tag i'm going to give it an idea of contact form and the name that will be contact form as well i can even say that the method will be post and that name will be contact form and inside this form tag i will say leave class row like this and then i will say div class i'll copy this column paste it like this and i will simply change the points here i'll say 6 for the sm and 6 also for lg here down inside i'll say div class form on a score group and i'll say input i need to write an input type text the id will be name the class will be two classes so form and form control the place holder say name like this and then after the placeholder i'll say name will be um name and data name i can simply put name and i will write required so to make sure that this input is actually required right so that's it so now all i'm going to do is copy this paste it down here and so now here this input the second input is going to be of type email the id will be email the class will be the same the place holder will be email address the name will be email and the data name will be email address and i'll also make sure that it is required so i'm going to add a star here so now i'll copy add another input so this time around instead of email i'm going to say company uh now i'm going to say text and then the id will be company here i will say company name and then the name will be company and the doctor name uh as for this one i can say that it's not necessarily required and uh i can remove this okay let me add another one this is going to be uh of type tail telephone tell for telephone and the id will be foreign uh the class will be the same the placeholder will be uh i'll say phone number the name will be phone and the data name i will say phone number and make it required and then the last input is going to be a text area so this is how it's going to look like so instead of writing input here i will remove the input tag and i will write text area okay so in the text area i'm going to add an id id of text area and a class of form another class would be text area and the other class will be form control yeah that's it so please holder i'll simply say your message here okay then i guess i need to add some other elements the other elements would be the name let's say message and then that name will be text yeah and i'll write the required class and then i will save i also need to change this this point here for the text area so all the columns so for the xx i'll keep it to 12. this i will say 12 as well and 12 here i guess so we are good to go now so down here i'm going to add a span class a tag and add a class and i'm going to call sub text okay and i would simply say star required fields so this is just to say that all the inputs that are having this star are actually required fields so the user will have to fill this fill uh these inputs in order for the form to work okay so now after we have done that we can now add a button so i'll come down here i'll say button of type submit okay and of id valid form and the class button color like this and the text that will show on the button will be send message simply like that that's okay and then after we have added the button we can uh add another paragraph tag and add a class in that paragraph tag and call it copyright okay so i was simply gonna say [Music] designed with love okay instead of writing love i'm gonna add a fontasome icon and i'll say f a f a part like this and i'm gonna say dial font size 12 pixel and here i'll say by coding river okay so that's all we need all right so that's all we need to write for the html part now let's go to the css part or before we do that let me just come to my web the website here and then refresh so when we refresh there you can see how everything is looking at on our contact us section of the landing page so now we need to add some css in order to place each element at the right place so in the css file we are going to start with the contact right class and all i'm gonna do is to simply copy this portion of code and then paste it here all i'm gonna do next is to simply change the image instead of bg1 i will say bg5 and save so when you come back to the website and refresh there you will see the image placed uh on the right side of the section all right so now after we have done that we are going now to style the contact section the class we called contact section so as usual i'll say the pattern will be 1 uh rvm at the top 0 rem on the right one rvm at the bottom and zero rem on the left and then the font size will be 2.8 rbn then the font weight will be 500 then save so down here i want to say [Music] contact left paragraph so all i'm going to add here is going to be the pattern so 0 rem at the top three rem on the on the right and the zero rem are at the bottom and zero rem on the left now let me see what happens okay now when i refresh this is how it's looking okay and i can also add of the font size if i want to reduce the font size here and the line height as well you can see the 1.4 i will say 1.2 for the line how you can see how this will look on our page okay now this is how it's looking like um i think it's okay now so i will simply say for the strong tag i will say its font weight must be 700 okay and then the class phone mail link i want its color to be white and the font weight will be bold like this let me copy and paste remove this i will add column then hover and i will say color will be red like this so that's it let me come back here and refresh now when i refresh when i hover here it's okay so i will say uh contact forms of contact form here is the id we specified uh now say margin top like 40 pixels and then down here again i will say contact form from control and the background will be um i need to give it a special color so that would be to e a color that is going to be a little bit more darker like this all right and then i will say border none border radius 0.3 rem under box shadow will also be known like this what else can i add i would say font weight will be 300 uh alkaline let's say medium none and the pattern would be one rvm to rem like this the font size of the text will be one rem and also the line height will be 1.2 the height of hotel the width of say 100 percent and the color i'll say white and then i will say margin bottom margin bottom one ran and also the transition i'll say all point two seconds is in out on the text align say left like this all right so now let me come back here and see what has happened okay let me come back okay so here there's a mistake in the html so i have to say form control i have to put the iphone here all right so that's why uh nothing happened so now let when i save this and refresh that you can see how the output is uh the input is showing on the screen okay so that's it let me now uh move down so down here i'm going to say i'm still going to use the contact form like this that form control colon cover and contact form that form control focus let's say box shadow none on the background i'll add another color so i'll say um 29 30 39 like this now i um i need to increase the height of the text area okay so the height of the text area how to increase that i'm going to say contact form text area and for control like this and i will say minimum height will be eight pixels okay so you know and i would say h rem so if i come back here and refresh i didn't save so now when i refresh you can see that the um the text area uh height has increased so down here i'm going to say contact form span sub text i will give it a different color so that will be 939 the a5 and the position will be absolute and its font size will be 0.9 rbm so i'll say right 5 rem now i may refresh so now you have required field uh showing down there okay so we will continue again so now it's time for me to start with the styling of the button so i'll say contact form then button and then i will use the id that i put in the button the id was valid form and so in here i'm gonna say that the background the background of the button is okay so what should i put i would say font weight 300 and the text transform will be uppercase pad in v1rem to rem the font size will be one rem and then the color i will say white okay so after that i will say margin uh imagine holding now i i okay i will say auto but i will add some magento um one pixel then the border radius will be to rem so i'll say border none and then display inline inline block yeah all right so um copy this paste it remove this and here i will say colon hover and i'll say background so the background is going to be 0 0 e 2 c0 like this so when i save this and come to the website and refresh so now you can see how the button is looking like all right so after the button we have styled our button so we will come to the next class to style is going to be the copyright so here i'll simply say that its position is absolute left five rpm uh bottom here i would say minus um 45 pixels and the font size will be uh 0.8 rem and the front weight 300 and the line height we five ram and zid index say 999 then come here and refresh there you can see the copyright section looking down at the bottom so by the way by the way it's showing now you can see that this getting touch here is really at the top we want to bring it down so one way we can do that is to come to here i think where we styled it okay contact section instead of one rem we will say five rem for example and oh actually here there's a mistake so it's foreign phone all right and save so now if i come here and save there you can see that the getting touch uh header has come down a bit i think like this it's okay all right so now as you can see uh i can add a little bit more sorry say six every air like this okay yeah so now as you can see we have designed our contact us section of the landing page so the website is um i would say complete okay so all the sections have been designed so now in the next video or in the next part of this video i'm going to show you how to um to add the battery top button and also how to scroll through the sections of this landing page so by simply clicking on um a navigation item here for example if you click on contact us this is supposed to take you straight to the contact us section okay so stay tuned i will come back with another video to show you just how to do that so thanks for viewing this video and uh i hope you enjoyed it and don't forget to like uh subscribe and share this video so let's meet in the next one all right guys so now in this video i'm gonna show you how to create this back to top pattern see when i click on this button it takes me at the top of my web site okay and when i click on contact us on the menu here it takes me down to the contact us section so um in this video i'm going to show you how to do just that so first of all i'm going to show you how to to make sure that when you click on your navbar item here for example you click on about as it takes you to the about us section okay okay now so one way to do that is let me go to the index.html file and if you can recall when we were starting our each section we were given a certain id to each section for example in this contact us section we added an id and we call that id contact right in the previous one in the previous section we also added an id and we called that id team here and okay up here we called that id our services and uh here we called it about us so in order for you to uh to make sure that when you click on your nav link and then it takes you straight to the section uh in question all you have to do is to use these ids okay so what i'm going to do here i'm going to come back to my header my navigation code okay so at the start of our code in the body so as you can see here i'm gonna look for the navigation links so here we have home we have about us and down here we have services team and contact us here so all i'm gonna do is in the href uh section here i'm going to use the ids that we added in each section so for example here we are having the nav link about us so i want that the user when it clicks on the about us nav link to be taken to the about us section so all i'm gonna do here is to write the id we gave to the about us section so that id was called about us like this so here when i come to services when i want the user when he clicks on the nav link services i want him to be taken to the our services section and we called that id so you need to add the the sharp uh symbol there and then the name of the id that was our services okay that was the name of the id we gave to that section so i can also just for the example add that here okay so i will simply say our services and here as well our services our services so for the novelling team i want when he clickety clicks on that link i want him to be taken to the team section so i will simply say team so that's the name we gave to uh that name will give to the id in that section and contact us the id name was contact so now when i save and come back to my website here and refresh right so now you will see that when i come to the header and in the navigation menu and when i click on about us it is taking me to the about us section of my page and i come up here when i click on web design here it takes me to the our service uh section of our page when i click on team it takes me to this section of our team okay and then when i click on contact us it takes me to the last section of my website and as you can see that when it's scrolling it's scrolling uh smoothly also because we specified in the style that css here at the beginning you can see here we said in the html tag we say that the scroll behavior must be smooth so that's why it is scrolling smoothly okay so that's it so now what what happens if you scroll to the contact us page and then the user wants to go back to the top so it's not always uh very practical for the user to come back here and then be scrolling up himself so we want to add a button whereby when the user clicks on that button it takes him straight to the header uh and to the navigation menu so one way to do that is to come to the index.html trial and add a button so come here we will say with a href okay and we will simply put this symbol here and uh we'll add a class and that class we will call it go to top go top vtn like this and inside i'm gonna add a font awesome icon so say class f a f a arrow r like this so that's the only html code you need to add so now all you have to do is to add um some css study but then before we add the css styling let's come back to our web page and then refresh see what happens so when you refresh you scroll down you can see down here we are having uh the button okay the icon and as you can see when i click on that icon it is taking me to the top of my web uh my web website so i need to put some styling for you to look uh good and to actually be appealing to the user to click on that so in the css part of the code what i'm going to write will be uh so i'm gonna say that go top btn that fa i simply wanna make sure that the font size is uh 20 uh 28 pixels the margin top is 10 pixels let me come back here and then refresh so down here as you can see now the button is smaller the icon is smaller and i need to move that icon to the right side of the screen what i can do is to come here and say go top btn i'll say position so i want position to be fixed so that no matter where you are on the screen the button will always be there so it's not going to move uh even when you scroll down or scroll up you will see get the button and allow you to click in order to go to the top of the page and obviously weed will be 50 pixels and the height will be 50 pixels here at the bottom i'll say 40 pixels and the background the background color uh i'll give it a grayish kind of background color so f6 f a f eight and i'll say right so i want it to be placed on the right side of the screen so i'll say write 50 pixels and the text decoration will be none and the text align will be centered then line height maybe 50 pixels now when i come back to my website and refresh then you can see that we are you're having the icon here so if you click on that icon it takes you straight to the top of your web page so when you scroll down as well the button or the icon is still there and it allows you to go back to the top of the page so that's actually so when i click on contact us it takes me to the last section and when i come here and then click on uh that back to top button it takes me back to the top of the page when i click on the service here it takes me to this section when i click on this battery top button it takes me back to the top right so this is actually so uh i can also add let me simply say something here i'll copy this paste it remove and i will say colon hover like this and save so when i come here okay as you can see so when i put the cursor on it the background image changes okay so everything is working correctly i clicked on about us navigation item and then i click on this icon back to top icon and as you can see it takes me back to the top now click on team okay and then it takes me back to the top takes me back to the top so guys this is it concerning the smooth scroll and also how you can add a back to top button or link on your website so our landing page is complete with all its sections and the battery talk button and also the smooth scrolling effect so i hope this video was informative and please don't forget to like share some comments and also subscribe to this channel for more videos like this one so let's meet in another video

Channel: Coding River

Views: 29,297

Keywords: bootstrap 5, bootstrap 5 responsive navigation bar tutorial, responsive navbar bootstrap 5, bootstrap 5 responsive website, landing page with bootstrap 5, responsive bootstrap website with bootstrap 5 html5 & css3 from scratch, full responsive website with bootstrap 5, back to top button bootstrap 5, smooth scroll bootstrap 5, landing page using bootstrap 5, build a landing page with bootstrap 5, responsive landing page with bootstrap 5, landing page website bootstrap 5 tutorial

Id: h2jVZ8ans_o

Length: 94min 19sec (5659 seconds)

Published: Tue Jan 19 2021

Reddit Comments

[u/AmbientNortheast]

Very informative!