Bootstrap 5 Landing Page | Tourism Responsive Landing Page using Bootstrap 5 | Bootstrap 5 Tutorial

hey there everyone what's up this is aram here and today we are going to create bootstrap 5 project this booster 5 project as a landing page of a tourism company i hope that you guys will like it let me give you the overview of this project here is a very simple an f bar and i didn't use the typical bootstrap code here in the nav bar and then this code is very simple just a simple html and css code then in the hero section we do have a video background with an overly effect uh join us button here is the packages section where you can see different packages with some discounts and some other categories of the um the company the company offering different packages or different categories regarding tourism then here we have a services section with the services they are offering and the testimonial it's a carousel we have used it it is working it is functional so uh it is working itself too then here is the contact form and some social links a nice footer it's a responsive landing page let me show you the responsiveness of this and let me talk it so okay let me show you you can see that here everything is stuck nicely then this is the nav bar and it is working here is the title some of the links button everything is looking nice okay so let's go and start creating this page and i'm using vs code editor i already created a folder my folder name is bootstrap 5 tourism let me create a file inside it first file i want to create is then index.html going to create a main dot css and here in the index.html what i'm going to do here is a getbootstrapped.com website and this is version 5. um i just wanna get the starter template from here i wanna copy it and let me paste it here fine beautiful okay after having this starter template let's add a style here to for stylesheet we need to link it link related to style sheet href and main dot css then i would like to go with some font awesome icons and here they are [Music] here is the website of one awesome icon so for awesome.com you can search the icons from here but before using these icons we need uh to link it i always prefer to use the cdn so i have my code here you guys what you have to do just go to this start or start for free mention your email address follow the instructions and you will get a code code will look like something that it will look like this i do have mine i just want to copy it and i want to paste it within the head section okay so here it is fine let me save it and i don't think that i need anything else okay so i would like to change the title of this one the title is gonna be bootstrap 5 tourism fire and or hold on let me change tourism [Music] planning i'm just adding landing page okay i want to remove this hello world from here okay let me save it and by using my uh online uh sorry um where uh my server i would like to check how does it look here so we don't have anything we have on the title i've had this tourism planning page okay yes i do need uh let me close this one and this push-up also i do need the fonts so i've already used really font you guys just search the really font from there and i'm using the railway font 400 and 600 okay so i just want to copy this from here and let me paste it in the head section here i also need the thesis of this font and here is the open sounds really so let me copy this one here we are and here i should say okay let me save it and i want to save it from here too just to check the font let's write something here okay just for the font so each one and say bootstrap five landing page save it here we go okay so it's it's a we do have a really font here i just wanna close this one too okay let's go back to the editor let me remove this one again and let's start working so i would like to go with the navigation and very nation or nav bar so end of nav bar navigation and navbar let me add it to you now bar okay so here i would like to create a div assigning in a class it's gonna be no it's a simple one i'm not using the typical bootstrap nav here then let's use input and the type is gonna be check box and let me use an id this id is gonna be no check then let's use another div and it has a class of nav header then let's choose another div assigning in a class and this class is going to be nav title then here we should add tourism website tourism landing page or let's see tourism learning then after this let's have another div this div should have a class of nav button so nav media we do need a label here and label for it's gonna be nav check let's use some spam elements here choose pan and i'm gonna use it for a couple of times so i'm just copying it two and three okay and uh let's now let's create the links okay within this here let's create links so div class is gonna be nav links not longs now links and each ref the first one is gonna be packages let me copy and paste it then i'll change some of the titles the link link titles and so this is testimonial and content so let me remove all these three from here and this one is gonna be not not all services the second one is gonna be testimonial sorry the third one testimonial and testimonial okay then i wanna add a contact okay save it let's move on to the browser and see okay you guys can see that it hasn't anything it's just a simple html uh result let's give some style to this one are before using the styles let's go to the let's go and create the hero section also uh the hero section or this main section uh uh let's place this video some titles and tags taglines and this our intro actually it's not a tagline intro and the button okay and then all together we will style them in css so [Music] what i'm gonna do if i have this end of snap file let's say little section and end of the hero section now here what i'm going to do i just want to create a section i'm finding it in class this class is going to be section main banner and let's have an id this id is gonna be top let's use data section and it's gonna be section one then within this what i'm going to do i'm just going to add a video here or to play and mute it if it has a sound it's not uh um it's gonna it's not gonna do anything there it should be muted loop it has to work again and again id and id is gonna be bg or background video okay now here i need to add the source of the video so for that source and again source here i would like to add the video link and here in pexels.com i'm going to give this link in the description below you guys can get the same video from here and here in free download i just wanna copy the link address okay copy the link address paste it here done now i want to add a type here and the type is gonna be video then mp 4 okay then after this i have to add the type is video mp4 and there is something i think which is something is missing from you let me check what is that let me close this tag okay okay the source uh now it is closed and then after let's have another div here it should have a class of for the overly effect i would like to go with video overlay and header text this is this overly and header text is gonna be let me close this one too so this overly effect there is a uh an overlay on the video and here is the text so let me show you that i didn't save it i think yep let me save it let me show you from here and it's loading okay so here is the nav bar and here is the video here the video is completely different and i have used an overlay here so i'm gonna use the same overlay here too so for that what i have to do header text and this header text overlays for this overlay and here is the header text is this welcome to site and some of the description or detail or info or intro whatever you want to say then the next thing after having this we would like to go with a div and a class and this class is gonna be container okay and within this container another div class is gonna be raw and then after this let's have an other div with the class and here it is the class is gonna be column large 12. then we need another div assigning it a class and it it's gonna be caption okay on the caption then we need heading 2 and the heading 2 is gonna be welcome to welcome to site okay let's use a p element with some uh 15 words of text and then after this let me bring it here let's have a let's have something for the main button and do assigning it a class the class is gonna be mean button we will style this simple signing there right css and for link of the button or for the button link wrong i would like to add a link here and it's gonna be join us and join us now okay then save it let's go back see what's going on in a browser okay fine so now let's style each and everything in css and you guys will see that how how we change the look of this uh of all these two sections okay for that i'm going to mean dot css so here i would like to go with um main button the main button or the button i'm going to use the same main merchant class for there is another button also so i am i'm going to use it as a or i'm going to use it globally actually not asy but i'm going to use it globally for to apply the same uh style on the other button too okay so let's go with the background color the color i have used is black the theme i have used here in this page if you guys have noticed is black and white so you can see that it's black and white i have tried to find a video uh where if i give the black little black overlay that looks much better but i didn't find that so i have fine uh i just used this one if you guys find a better one and use that one okay and here we are let's go back background is gonna be black and color text color it's gonna be white then i would like to use the display it is in line block and i just want to use the padding padding is going to be six pixels okay save it then i have to move on uh hold on mean button link and here the color is gonna be white and then i have to the text decoration is it's gonna be none let's use the nav now okay and the nav has a height of 50 pixels then i would like to use the width it's gonna be 100 percent let's use the background color and 40 4 40 sorry 40 40 and 40 then i would like to go the position define the position and it's gonna be relative and z index because uh uh when i was creating it it was just behind the mean um behind the video so i want to keep the nav bar on front of that to the hero section that's why i'm using the z index here and let's use the display here display is gonna be flex this play is gonna be flex and let's use the justify content and it should be space around let me check here space around let's save it go on to the browser and okay need to fix many other things we'll do that let's go back okay so after this let's use the nav class and [Music] nav bar sorry nav header and let's use something which is uh we known as in line not block on the in line and after having this in line let me show you how it's gonna affect their can you guys see now the next thing we have to add is let's see nev and it's gonna be nav header nav header then nav title and display inline block and font size is gonna be 22 pixels then we do need to use the color white padding is gonna be [Music] 10 pixels and 10 pixels and 10 pixels and then again 10 pixels save it more to the browser fine you guys can see that difference here now let's do another thing and that other thing is let me bring it here the other thing is gonna be nav and nav btn the hamburger menu and it's gonna say display none okay save it okay then we do need something else which is now now and nav links display inline i'm gonna use float here and float right font font size 18 pixels let's use another nail not and i don't have another class here and now links and we do have links here so we should say display inline block and padding is gonna be 13 pixels 10 pixels again 13 pixels and 10 pixels then text decoration text decoration is gonna be none here too and color is gonna be f ef save it okay it's not working let's check okay we have to use nerf check then it's um now nav and ids we now check and display display none hold on left check display none save it okay getting better let's use and another thing which is going to be now and now links anchor point over and over it's gonna be background the color let's use rgba and zero zero zero zero 0.3 0 0 0 and 0.3 save it okay let's define some breakpoints and here we have to see it makes width it's gonna be 600 pixels and now nav button now btn and everything is gonna display inline block let's use the position and it's gonna be absolute right zero pixels top zero pixel then we have to use something else it's gonna be now nav media label display inline block which is gonna be 50 pixels height is also gonna be 50 pixels padding let's go with 13 pixels let's use nav and nav button live bdn and label and then spam element let's target all this here it's gonna play display and this display is gonna be block width would be 25 pixels height would be 10 pixels border top and 2 pixels solid and white let's choose now and now median label over and we do need to use the nav and now check and it's gonna be checked and we should say now bdm label and the background color for this let's use rgb a and 0 0 0 0.3 save it let's target the name links first of all let's move on to the browser okay you can see that we just worked with the button on the rest of the things are still here so we need to work let's go back and and actually it sounds 600 pixels so okay we will fix i will check later on then after this let's go and work with the nav links [Music] links nav links have a position of absolute display gonna be block wait hundred percent background background is gonna be three oh gray three three three height would be zero pixels transition and this time all 0.3 seconds is in overflow hidden top is gonna be 50 pixels and left would be zero pixels save it then we do need to use nav sorry now links display block and width is going to be 100 again we need to use now and now checked and left check not and then let's see checked and we do need to have now links where we should see that height is gonna be zero pixel let's use nav and now check and checked levelings height is gonna be i'm gonna use the calc function here and 100 view height minus 50 pixels let's use the overflow it's gonna be auto okay you want to save it okay let's check what we have done um let me check here first and we will the hamburger menu is working but there is a problem we use the transition here easing and we do have an issue here with the with these links let's see we have made a mistake somewhere something it's about now links so [Music] we are okay here so it's it's here okay here we do have this issue and it's now links not now link save it okay so the error we have made we fixed it so we do have a nice nav bar and if you guys want to increase the height of this never you guys can do so and here it's it's looking cool too okay fine good let's go back and start working with this banner it's too much here we go and let's have a comment for for the hero section hero check okay the class we do have is main banner and the main banner should have a position relative and and and then we need um maximum height it's gonna be 100 over flow this is gonna be hidden and margin bottom minus seven pixels okay save it one to the browser okay so you guys can see that now it is in the limit the overflow is hidden and the height is 100 percent cool we need to work now let's work with this video and background radio the id we have the minimum weight is gonna be 100 let's use the height sorry height is gonna be 100 view height 100 view height and after having the height uh let's use the max minimum width and the max width is going to be 100 let's use the max height 2 and it's going to be 100 view height let's use the object fit and we should say cover and you do need the z index here it's gonna be minus one save it let's go back and see okay now it's looking good before it covers the half of the page now it's looking good okay let's go and work with the it should be video overly so we do have a class of video overly where we do need to use the position and the position is gonna be absolute let's use the background and the background is gonna be rgba we have to use 31 39 43 and 0.7 okay i want a slight black and gray image like it should be like this then let's go with the top the top is gonna be zero left is also gonna be zero bottom and right is also gonna be zero and then we do need to use the width it's going to be 100 let's save it move on to the browser and see how it effects so you guys can see that it is working we do have the button and all the uh written stuff here the text so let's go and fix all these things too so after having this let's go and [Music] get the mean caption mean banner and we do have a caption class so position is gonna be absolute top should be 50 and transform is gonna be translate y hold on translate y and minus 50 save it move on to the browser and now you guys can see that the text moves here let's let's fix other things too okay so we do need to mean banner here main main banner caption heading 6 margin is gonna be the margin top is going to be 0 pixels font size is 15 pixels text transform text transformation is going to be uppercase and the font wait it should be uh i've targeted 600 i think and the color is gonna be white letter spacing it's gonna be one pixel save it move on to the browser yes but there must be a problem somewhere let me check okay we do have heading two we don't have heading six uh here is an error of heading six because we have targeted we have heading two okay so now you guys can see that it is let me refresh the page and just so small let's fix the things and see how does it look main banner caption yep man heading 2 and [Music] font size is 15 pixels so i don't want it to be 15 pixel actually um okay let's go with this right now we'll fix it let me check some other things then we'll fix this issue if it remains an issue margin top is gonna be hold on just a minute i think i've made a mistake here okay after having this main banner caption let's say let's use the mean banner and caption and heading 2 where we are going to use the margin top as 20 pixels and we do need the margin bottom 20 pixel 2. so let me add it here so it's going to be margin margin bottom it's going to be 20 pixels too let's use the text transformation and text transform uppercase i would like to go with some different font weight it's gonna be 500 and we do need to change the color this should be white letters piecing is gonna be one pixel save it move on to the browser okay it's looking good now let's move on and if i notify let's use the main [Music] main banner sorry main manner and caption heading 2 emphasize the font style i don't think i need this hold on i just want to keep it simple let's keep it simple let's work with the after having this mean caption sorry this action heading 2 let's target the p element the paragraph element so we should say main banner and caption and we have a p element and here we what we need it's a color color is gonna be white let's use the font size and 14 pixels the max width of this one is gonna be 570 pixels save it move on to the browser okay now it's looking good before it was just there let me show you that what if we don't give we use if we don't use this so you can see the text it doesn't look good just put it here save it now it's looking cool the next thing we need to do is some media query and for that what do we need is at media screen and the next width is gonna be 767 pixels mean banner and caption heading 2 i should say font size 30 i think let's go with 32 pixels move on to the browser here is the okay that's looking good it's looking cool uh while here i have noticed it is more cold plus i've noticed something else which is yeah it was just it's it's because here i've used the same font size 36 so it's it's it's stretched uh sorry it's touching the screen from this side like it's very close to this uh edge i don't want this here so i want to keep it um i want to keep some distance or some space here so that that's why i have used the front side 32 pixels here it's looking cool that's good okay let's close this one and this one too and we do need to move on to the next section the next section is about the packages and here the packages are and yes all the images i have used here i've got from pixels.com okay and for the next section i the images i do have an images folder now within this uh main folder like bootstrap tourism folder i do have the images folder now because we need to use the images here and all these images i'm gonna give the links of these images in the description below please check that now let's move on and start working with the popular places section so our popular tourism sections are popular places and let's say end of the popular places let's use the section element here where we do need to add a class of packages and its packages okay and within this i would like to go with a div assigning in a class this class is going to be container and let's use the div here this div should have a class this class is gonna be raw and another div class is gonna be column large 12 defining the grid here and dave assigning it a class this class is going to be section heading and heading 2 heading 2 should have a class text white font tweet board and let's see our packages the packages this company is offering save it to you okay after having this let's have another day of assigning it a class it's gonna be column lg four and div having a class of div having a class of categories and we do need heading 4 this heading for let's let's use some alarm categories and okay what are uh what is this this is we are working for defining the html for this section okay sorry this section for for this card okay this one and not here sorry it has to be here okay alarm categories then let's use the unordered list here u l wait and then let's go with the list items some links and then within that we do need some royal website and um it should be of five words forward would be enough i think sorry within this within this unordered list let's have a list items and then anchor tag we don't need that we need to define some links here and sorry the next thing we need to do is to have a button here and let's say div class is gonna be main button we already uh done the we already have done the styling of this button so we don't need to do that and after having this this is the class class is gonna be text white and we should see more packages and promotions promotions save it okay you can see it's here what next we need is we need these other um so what next do we need is to create the these cards these one these section this section and these cards so for that what we have to do we just need to add a div here assigning a class this class is gonna be column large eight and there is gonna be class it has to be raw and you should have a class this is gonna be column lg six and div should have a class of package description then let's use another div it should have a class and this class is going to be thumb and after having this thumb let's use some other div this day should have a class and this class is gonna be price and let's use a span element here here within this span element let's use 250 250 dollars then after this let's use an image here and here we have to the images that are the img let's use the image here image source and assign it a class the class is gonna be image fluid to make it responsive and we do need the image source and image i do have a folder here and images and the image name is image 1 extension of damage is jpg save it and for having some alternative uh description for what i want to have but if you have to write something please go ahead and do i'm not doing this right now but it's good it's a good seo practice okay so we do have an image here with some uh amount right and now what we have to do we need to create something else that's something else you need to create is div class this class is gonna be down content content which is written below and div class is going to be deal and we do need a heading 6 here and let's have a class this class is gonna be text dark font tweet bold and let's say off i would like to use the span element here 10 save it and we do need a link here here it's gonna be each ref and let's add a link here it's gonna be heading four adding 4 should have in nature views save it then we do need an other element which would be p element and within this let's use some lorem text and then after let's use a break and have some other text which is also gonna be lauren lips save it and i just want to check something here okay uh first of all let me show you what's going on here and then we'll move on here we do have the detail description everything what i'm gonna do now i just wanna copy it let me just for the convenience purpose i just want to put it here and okay let's copy and paste straight for several times copy let me paste it here save it let's check okay let's do another one there must be a problem in the library let me check okay fine let's have another one too and it's gonna be here cool let's change the images and some of the other stuff so here i have to be where is the first one this is this is the image one and let's go to the image two it should be museum [Music] historical places and the image and we should have okay let's add image tool here save it if we need to use fine then you do need to have something else let's not change the text and other things because i'm thinking that it's gonna too much time it's gonna take too much time too much time so let's keep it simple only by changing the images okay and cool fine everything is looking good now what we have to do next is to style it so for that let's go to the css and start working on the style okay now let's start working with the popular places section so let's start with the comments popular popular places and here we go so first of all we would like to go with the packages we checked it fast again so it is packages okay packages and yes i have copied the images folder from my old folder and this one in bootstrap 5 tourism so packages let's add the background here the background is gonna be url and the url is in the images folder image name is image one gpg let's add the background position background position is gonna be seller feather and background attachment attachment is gonna be let's add a background attachment and it's gonna be fixed let's add background repeat background repeat i should be no repeat background size let's add color and padding top this is this should be 230 pixels let's add padding bottom two and this is gonna be 110 pixels okay let's go to the browser and see how does it look so here we are i have used a different kind of image there [Music] let me change this image because here i have used this black image and let me change this image mh1 img one why do i have this one which one is this let me check yeah i'm think it should be oh it's a package.jpg i think sorry let me check yep let's replace the image it's not image one it's package package okay save it move on to the browser and i have i wanna have the same field as i have in the demo webpage so okay here is the background image now what we have to do let's work with this section first okay so first of all let's go with the section heading and the text align is gonna be seller save it and there refresh it and here we go it is in the center now we what we need next is packages category so let's go with the categories section and the background is gonna be white let's use the border radius and it should be 20 pixels let's use the padding padding is going to be 40 pixels and margin right this should be 45 pixels good move one let me refresh it okay cool still need to work now let's use the categories heading 4 and let's add the font size this could be 18 pixels and color and gonna be 1 f 2 7 2 b margin bottom margin bottom is going to be 30 pixels and padding bottom this is gonna be 20 pixels border bottom one pixel solid white save it let me close this one okay and okay so next we do need is let's add some font weight and you font we it should be five hundred category heading for lauren categories and these are the alarm categories okay go back and let's do something else something else is gonna be let's target these these lists okay these unordered lists and for getting these unordered lists we need to call the categories class with another list and list item we need to display an inline block then we need a margin bottom this is gonna be 15 pixels save it and cool what else and if we add something for over for the link let's add something for the link okay and for having that let me get this copy this paste it here anchor tag and a link and let's go to the font size it's gonna be 15 pixel let me add the color and one f27 to be font weight it should be 500 let's add the transition here the transition is gonna be all 0.3 seconds the next thing we need again is a it should be a package description so package description and it's a package description package description uh let's say margin bottom margin bottom is going to be 30 pixels save it go on to the browser me refresh it okay let it go fine you check something okay and now we have to work with this package description we have just added the margin bottom of 30 pixels the next thing we need is let's use work with the thumb so package description and thumb position is gonna be relative save it the and after after having this package description thumb image img its thumb hold on okay some image this one is going to be border top sorry butter top uh right radius it's going to be 20 pixels when we we need to add a border top left radius it's also going to be 20 pixels save it move on to the browser let me refresh it my live server isn't working i don't know the reason it's like okay you can see the rounded borders of 20 pixels okay the next thing we need is a is the price class for the package and it's a package description package and description we're gonna use the price of some and the next class we have to target is a price where we need position absolute absolute we do need to add a 20 pixel from left and top is also going to be 20 pixels save it moving on refresh it and here are the prices okay the next thing we need after having the prices this pad element and what i'm going to do i just want to copy this class let me paste it here and let's say span for this we need the font size font size of 16 pixels 16 pixels and the color is going to be 1 2 1 f 2 7 2 v we need a background color background color is gonna be rgbe and let me add 250 and 250 and 250 and then 0.9 cool let's use the padding padding is going to be 7 pixels and 12 pixels border radius this is going to be 10 pixels save it move on to the browser okay after refreshing this fine looking good the next thing we need to work on is this description content um down content so for this what i'm gonna do let me have the package description down content and here first of all let's go with a background color it's gonna be white then we need the padding this should be 30 pixels we also need the water bottom right radius this is gotta be 20 pixel and again border um here we need left radius and this is also gonna be at 20 pixels save it browser refresh it good what else we need more is the deal okay so package description package description and down content then the class we are targeting is deal class here let's say text align center display inline block margin [Music] right [Music] it's right not left margin right is margin right and margin right is gonna be 20 pixels save it moving on to the browser okay and if i use something which is float left let me check how does it look how it works i'm gonna remove this float left i don't need it sorry i'm gonna remove this float left i don't need it right now or just checking something okay so after having this text align center and displays inline block what i'm gonna do is let me copy this seam thing from there edit here heading six and let's add the font size here this font size is going to be 13 pixels then text transform upper case and color is gonna be a 1 2 c 2 f okay let's save it moving on to the browser refresh let me remove this one because i have mentioned text dark there so i don't need that here and i also want to remove this um font size let's save it let me check how does it look now and again i need to refresh it yeah it's looking better than before and let's stick with this go with this again i just want to target the span element here where i would just say that display is gonna be in block and yeah here i want to find the color [Music] here i want to define the color the color let's define the color here color is gonna be 1 f 2 7 2 b and the font size margin top let's use the margin top let's add it for seven pixels save it moving on to the browser let me refresh the page okay that's looking good no need to um no it's looking better great next thing we need to do is let me bring it here and content down um down content adding four i just want to target the heading four here and four the heading 4 color is going to be 1f272b and display it's going to be inline block let's use the margin bottom the margin bottom is only 15 pixels save it and i do need to add another thing down content p element this p element is going to be margin left 50 pixels let me check something okay 50 pixels and let's add a color here it's gonna be 1f to 72b font size this should be 14 pixels save it move on to the browser where let's check okay everything is looking good uh you guys can see we have done with our packages section if you want to check it on our responsive uh later on let's move on to the next section and then you will check it out everything all together okay so for that what we have to do let's uh go to the services section and start working on the services section okay okay so let's move on to the index.html page and here let's begin with the services section and services section end of the end of the services section what we have to do now let's have a here assign it a class and this class is going to be card 1 background image and let's have an id and this is oh my gosh let's have an id and this id is gonna be services within this let's have an id another id add a class container div class is going to be raw let's have another div assigning it a class it's going to be column large five after having this let's go with another dip assigning requests this is gonna be text container so text container let's have a heading 2 here with a class of text white font tweet board services that we offer oh let's need to add such a big statement our services and let's close the heading two after having this one let's go with the p element assigning it a class this class is gonna be text white and let's go with some lauren epson of 15 words again i do need another p element and i just want to copy and paste it and i want to remove some of these words then after we need to add unordered list with a class and this class is going to be list on styled and list item space large let's add a list element list item the class is gonna be flex and it should be display flex after having this flex let's use it for some item class and we have to say f a s f a square and text white then we need a another div with a class of flex group flex grow one text white and let's go with some text of life word after this i just want to copy and paste it for several times and what i'm thinking to do is just to get it from here copy this paste it here here and here let's save it move on to the browser one two and three and three and here we go okay so we can't see anything we need a background image and for that what i'm thinking to do we should add a background image one two three four okay but just for and just to show you guys if i highlight it here you can see we do have a text here and some p element these are the list items the down below these are the p elements and here is the title okay let's add some these cards and this section is made by using cards so let's add this one and then we can style it so for adding this one what we need is to just for the convenience just to avoid uh the mistakes i'm using this one this line here all right partition you can see and this is the end of the text continue and what attitude is should be here okay having this let's add a div with a class and the class is going to be column and lg 7th then we need another div class is and gonna be card continue card container and let's start working with the cards here okay so this is gonna be a div class card and a div class card icon and a span element with a class of fesfe utensils utensils span is closed dew is closed and after having this let's have another div this div should have a class of card body and we should add um heading 5 within this with the class this class is gonna be god tito and the text again is gonna be white let's add best food from the from the place okay i know it doesn't make sense but right now we should go with this one let's end it here and [Music] end this card here and [Music] we can only see that that follows awesome if i consider the utensils icon there is a thing there is a thin butter line here and best food from the place the next we need is what i'm thinking let me copy this one from here let's paste it here save it let me check the second one and we need to add a shape here okay and this is gonna be a ship save it cruise ship i have made a mistake i need to copy it um no it's it's it's fine sorry the the ship is same i was thinking i need to copy the code from foreign but it's fine it's a shape fasfa ship and here we should add another title cruise ship tour then we need to add another one here we need to add f e s f a store and this this should be a shopping malls let's have another one this is gonna be visit to landmarks visit to land mark and the icon for this is gonna be monument the next we need is to and uh the icon is gonna be plus and let's add the title here it's gonna be city chores this one and this and this one could be a seven star hotels stay and here we should use fasfa hotel save it move on to the browser okay so we do have the icons now let's go to the css and start styling this section okay so here is our css and let's see what is the name of this section services okay so the services section first of all it has a background image let's use the background image url images the image is gonna be service dot jpg let's use the background position here center enter background attachment attachment is gonna be fixed background repeat no repeat background size cover padding top padding top is gonna be 230 pixels and padding bottom we gonna use 110 pixels save it move on to the browser and okay we do have a nice image here cool but we do need an overlay here it's not going to be too dark but i just use that overly so background image overly position is rather absolute we need a background color rgba 32 32 32 and 0.7 so the top top is gonna be zero left is also going to be 0 bottom also 0 right 0 which is going to be 100 save it bring it here now let's target the class cards one where we do need to add a padding uh top and in this section i have used the ramps so i'm going to use 9.5 rem let's use a padding button and it's going to be 5.5 rem let's use a card one heading two and the margin bottom for this one is gonna be 1.75 re m then we need the cards one text container where we are going to use in in this one we are going to use a margin margin bottom margin bottom 5 rem save it let's move on to the browser here we are okay things are working what else we need we do need to target those list items and the unordered list so cards one and we do have a list on styled margin top is gonna be 1.5 rem now let's target that those squares so for this i just wanna copy this pasting it here i need to add some space here and i think styled reaching the spelling of my stun margin top is 1.5 rem and in other we do have unstarted okay so cards list once uh unstyled fes we do need to target the forest like class here and what i need to add here is the color color i'm gonna add is white and the font size is gonna be 0.37 5 rem line height is going to be 1.625 rem okay now let's start working with this section the with the uh with these cards so for that let's move on to the editor and let's start styling this one it is called container and let's use the text align and center it's it should be setter then let's use the card class and it is a class here we need to add display inline block margin right and here i'm using the rams so rem margin right 1.5 rem margin bottom is gonna be 3.75 rem then let's use margin margin left and margin left is going to be 1.5 rem let's use the width and it should be 150 pixels let's use water butter is gonna be none background color and it is background color it's gonna be transparent text align center and vertical vertical align top save it move on to the browser let me refresh the page okay so it is looking nice let's add some more styles to this so let's use the card icon and the card icon is gonna be each class okay the width for this is 90 pixels height is also 90 pixels margin right is gonna be auto margin bottom 1.5 rem margin left margin left is also going to be r2 and border radius border radius is 50 percent background color background color is black and text align center save it move on to the browser refresh the page okay good now let's work with these let's start working with these i um icons and for that what we gonna do is let's say card is a class of card icon and fvs here we have to say the color is gonna be white and margin left margin left would be um 2 rem color is going to be sorry i've done the color font size sorry font size would be 3.75 rem let's save it move on to the browser and see how does it look we refresh it i don't know how it's it's not getting it again so this is the services section and it it's looking good there must be some problem with this with the text so with the title and let's go and check this one and here let's go with the card title and padding padding is gonna be zero save it let's see okay now let's check the responsiveness of this we have done with this one and here is so let's start from top and yep everything is looking nice let's check nicely and it's looking good cool okay now let's start creating this carousel and it's working so here in our text editor i am thinking to start it from effortless services section testing manual and end of the gesture monument let's have a section element here assign it to class this class is gonna be padding top and bottom seven then bg class and then after this let's have a div assign a class this class is gonna be container fluid let's use another div assign a class and it should be raw flex serve then [Music] we have to use another div assigning it a class and it has to be column medium 8 and column lg 5 text center heading 2 and let's assign the class this class is going to be text white and font weight word unless our title our happy clients then after this let's create a div assign it a class and it should be carousel um carousel slide padding top six id is gonna be carousel castle example dark and and and then we need a data right and b is data right actually um sorry data bootstrap right and let's say carousel okay spelling of carousel fine let me bring it here in the middle let's have another dip assign it a class this class is going to be carousel enter and another div i have another class carousel item active data bootstrap in turbo and this is the time jump thousand then let's have another day assign it a class this is gonna be raw heading 100 another div assigned a class column medium four and margin bottom three then margin bottom and for the medium devices is gonna be zero then we have to go with another div assign it a class and this is gonna be card and each is gonna be 100 card span padding three with another div and a clef car body heading 5 class is gonna be margin button 0 text white and fantastic service let's have a p element assignment class and this class is that i'm going to have some card text padding top three text gonna be white close it let's have some text of 15 words fine and after this let's have another div this div should have a class of display extra large flex then justify content between and align [Music] itunes center another div class display flex align itunes center let's use an image and i should have a class of image fluid then we need an image and i do have a avatar so i'm images and the image name is avatar dot p and g a png is extension of my image and alt is gonna be three dots right normal thing and okay and then we need another um another div here so this div should have a class uh flex one and margin small is gonna be three then we do need a heading six here let's say class and this class is gonna be margin bottom zero and f s 1 then m s sorry text 1000 and for weight medium text white close it let's have here john smith save it okay let's see what's going on in the browser and here in the browser we can just see the avatar and something goes wrong and what is that something which goes wrong i i found it while i was working with this section you know we have used the card here the card text card body card and what happened that css classes from [Music] here from these cards are gone got by this section okay so what we can do just to fix this issue first of all let's let let me add uh some css uh then it will be easy to make you understand what what happens and where is the mistake here is the main dot css and let me let me go with that testimonial not this this and here in the testimonial look at this let's start working with the bg class here and the bg class we have let's add the background image here we do have a url images and the image i have used is called test.jpg then we need a background position and it's gonna be center let's use background attachment and it will be fixed then we should use a background repeat background repeat is gonna be no repeat not calc background repeat is no repeat let's use background size and size is gonna be color padding top is 230 pixels and padding bottom 110 pixels now what i'm going to do uh let me get the card glass and the background color for this rgbe 32 32 32 and 0.7 let's use the carousel position is gonna be [Music] relative carousel inner is gonna be uh it should have a position position is gonna be relative width of this is 100 overflow hidden now let's use again the same class carousel in our and this sudo element after display block clear both and content is gonna be [Music] nothing let's use the carousel item here and position is going to be relative display none and float left width is going to be 100 margin margin right minus 100 percent back face visibility hidden transition transform 0.6 seconds is in out save it move on to the browser okay here you know i have seen i found a problem let me show you let me explain where the problem occurs and look at this service section too so the style i'm applying here in this section is also working in this section too which isn't my plan or which is when i i don't want uh to have this so to avoid this one and to make them separate what i'm gonna do let me show you let's go to the services section here and i just want to add the parent class or the main class of this which was card one okay so i'm gonna add these cards one with all the services classes with all the services classes with uh because we have used the card here and we have used the card below too in the castle that's why it is interrupting the design is interrupting so let me select this one this card i'm pressing the alt this card this one and this one and now i'm just gonna add it card one space error let me go back and i don't need to refresh it but it is working without refreshing so you can see it sets itself like while adding because i've mentioned the design or i mentioned to the browser that this is in the part of this one now it is keeping them separate this is the this is what we are creating in client section and this is what we have done before but the card the class name was same and that is why they were interrupting with the design was uh it was just getting messy now everything is gonna be fine let's complete this css and um what i'm gonna do let me show you i just wanna copy and paste it for a couple of times just for my convenience to keep the things clean to and to avoid for coding so i just want to copy this one i want to copy it okay and let me paste it here save it let me check okay so let's save it and let's see we do have the three these three cards now we need three more so for having those three uh what we're gonna do let's create an other div here assign it to class this class is gonna be um carousel item and data bootstrap interval and this is gonna be 2000 let's have another div assigning it a class this class is gonna be raw and height is gonna be 100 then we do need another div assigning it to class and well let me and a class and this class is going to be column medium 4 and margin bottom three then margin bottom and for medium devices is gonna be zero then we do need another div assigning it a class and this class is this class is gonna be card again height should be 100 card spam and padding three let's have another day with finding a class and this class is gonna be called party then heading 5 class is gonna be margin bottom 0 margin bottom 0 and text gonna be white then we have to say again and just take service after having this let's go with the p element assigning it to class this class is gonna be got text and padding top would be three text white some [Music] text of 15 words let's have another dev element assigning a class this classes and display extra large flags justify content between and align items center then after this we do need another div assigning it a class this is gonna be displayed display flex align items center align items center then we do need an image here and for that image class the class is gonna be image fluid let's use the source source is going to be images and image image is our tor png energy not mg png and then after show all text and that's all we also need another div with a class of flex and flex 1 ms3 heading 6 class is gonna be margin bottom zero and fs font size small font size one then we do need the text here and text is gonna be 1 000 font read would be medium and text can't be white and let's go and go with john smith save it and after saving it let's go to the browser okay so we cannot see that one for that what we have to do next is let's um copy and paste the same code again so [Music] here is the uh what i have to do is to copy and paste the code so what i'm going to what i'm doing here let me get the get it from here and margin bottom medium 0 and let me copy this one and paste it for a couple of times okay so we do have this for six times now what next we need we need the indicators okay so let's add the indicators here for the carousel indicators div class is gonna be raw padding left and right gonna be three padding left and right for medium devices is gonna be zero and margin top would be six then we need a div assigning it a class column 12 position relative ordered list with a class of carousel uh indicators within this let's go with a list item and a class is gonna be active data bootstrap um data bootstrap target and we do need to use the id carousel dark uh castle example dark then we need again data bootstrap slide two data bootstraps like two zero okay list item is close then next we need is let me copy this one i'm going to paste it here so let's paste it here for two times and i need to change this active class i don't have to use any active class here and this one also it's only the list right term and this should be [Music] 1 and this should be 2. save it move on to the browser okay so we do have the indicators okay so i have just used here the six images the carousel is working it's looking cool nice if you check it on that see a responsive screen on our mobile screen let's see okay it's working it's looking nice let's move on to the next section the next section we are going to work is a contact form and i'm gonna i'm gonna create all these three parts together and and html it and then design it all together okay so let's move on to the index.html we are here let's start creating the next section which is contact form let's start a section element started with a section element class is gonna be contact and after let's have another div assigning it a class this is gonna be container fluid let's have a row here okay let's have another class so i'm going to have another day the class is going to be raw and justify content center then we need another div assigning it a class column medium 6 and column large 5 and then column extra large 4 then let's have a heading 5 here the class is gonna be text white and font weight bold foreign then we need what else okay request a call back so refresh a call back let's have a heading two here class is gonna be text white and eight words or enough of five words i think enough okay then after this we do need a pre element of planning a class this class is gonna be again text white should say monday to friday and nine a.m to friday's planning sorry to friday and it should say 9 a.m to 5 p.m then after this let's use an other div and this div should have a class of column medium 6 column large 5 and column extra large 4. then within this we need a form element planning it a class it's gonna be raw the next we need is another div assigning it a class and it should be margin bottom three margin bottom three then we need a label element assigning it a class form label visually hidden for input name let's have a name here after this let's go with input element and we should say class form control and id input name type is gonna be text and we should say please folder it's gonna be named let me save it let's check what's going on not this one actually the text is white i don't think we can see anything oh only we can see name on the okay fine okay then after this let's go and have another dip this div should have a class this class is going to be margin bottom three label class form label visually hidden for input email it's gonna be input email let's just say another label let's have an input here assigning it a class this class is going to be form control and id is again input email type is gonna be email and the place holder we are adding the placeholder is also email then after this let's have another div for the text messages and assigning it to class it's gonna be margin bottom five and let me get the label and all these things from here i need to change it from here i've got the label from there but in this label i should add here the far is gonna be validation text area so validation text area and here it should be message okay then let's create a text area here so text area should have a class of form control is in valid border 400. let's use an id here validation text area please holder gonna be message let me use some style here height is gonna be 150 pixels then let's say required and required is also equal to required pull in the text area save it the next we need a submit button so if you're having this let's go to the div assigning it a class display grid let's have a button element here assign another class it's going to be btn btn light type would be submit and here it should say send message and with this i would like to go with a font awesome icon paper plain and this is done let's move on to the browser and see okay we have things many things we have some better things over here let's create this um what we can say is social for under this section for the social icons and footering all together we will style them the next is gonna be footer and footer i don't want to comment it but i'll leave it like this div class is gonna be footer let me create another section actually wrap it into that section okay and close this do so let's have another div assigning it to class it's gonna be container fluid div class should we roll div class column large 12 heading 4 class is gonna be text white and let's go with some text let's have another dip attending a class and social container let's go with the span element and this is ban element sure have a class the class is gonna be f a stack and [Music] let's have a if you give a link here but i don't want to go with a link just a class the class is going to be f e f f a circle f a stack two times i've explained everything it should it means two times bigger than its actual size what i'm going to do i just want to copy and copy this one oops copy it paste paste your tail and here i should go fab fa facebook and this time i should add a one-times fa stack okay the next i need again i just want to copy this spam element let me copy this facebook twitter pinterest um instagram and youtube save it and i just want to change them so facebook let's change it into twitter [Music] instagram pinterest and youtube save it go on to the browser okay we do have something here then after this what what's next [Music] okay we do have this last this section so let's go and create this one after this let's have another dip assigning the class copy copyright pg dark i have a div here this there is with a class of container fluid then let me create another there also close that there and now we need another div a class of raw another div signing it a class this is going to be column lg 6 let's have unordered list assigning it a class and list unstyled then list item space large padding small let me have a list item here and within this h ref let's assign it to class and this class is gonna be text white font tweet bold and let's say articles details now i wanna copy this and i wanna paste it for a couple of times wait this here it should be a lauren epsom one and or just let it be like this then the next we need is another div here assigning it a class column lg 3 p element assigning a class p small and statement text is gonna be white what i'm thinking to do let's just go with a lorem ipsum and that's all save it let me add another div here just finding it a class and i should be paying small um statement text white and made by then me what is this made by let's add a link here oh no need to add a link you guys can go and add a link just made by learn excel save it move on to the browser here is okay now let's start styling this um these all three sections all together so we are going to our css here let's add the contact class and you know what i'm thinking let me get there all the properties from here i want to paste them here just to save our time i just want to change the image here contact image let's go and use the form control here border 1 pixel solid rgba 146 145 161 0.5 that's all border radius border radius it's gonna be 0.313 rem let's use the background color right background color is gonna be transparent padding would be 0.5 rem and 0.5 rem let's use the border color here and the butter color is going to be white here too let's save it move on to the browser and see some of the styles wow it's not looking good this one you know i should change the border radius i don't have to use the water radius leave it save it okay it's looking good now the next we need is what is that okay it's a form is invalid and form control so form control and then is in valid and form control invalid border watercolor i'm gonna be white uh before i was thinking to use focus but uh it i am running out of time so i just want i don't want to use that label i don't want to go with the form label the margin bottom and it's going to be 1.25 rem color would be 9 2 9 one eight one cool let's go and see okay fine good let's work with this section now here we are and the footer i'm pasting all those um the same code and here i just use the foot jpg image save it okay so here is the image for the next thing is again footer position is gonna be relative padding top seven 7.5 rem padding bottom 6 rem text align center footer and decoration circles not this one sorry like i named it stack not that so it's not a decoration circle it's a footer and let me add some footer f a stack which is gonna be 2 e m and margin bottom 1.25 r e m margin right is going to be 0.375 rem and that's all save it let's see okay let me copy this one paste it here f a stack and thing we have mentioned the first one get the two times and here the color is gonna be white transition all 0.2 seconds is and strike one times let's get that color so it should be black and transition here only all 0.2 seconds is save it i'm not adding the hoover thing but here i'm not adding um but uh i think i will i will provide all the code to you guys please check the link in the description below for code and let's go with the copyright because i'm running out of time and it's the dogs they just sit quiet nicely now they are not barking and before they start i want to finish it oh my god let me give the also ah we can leave the whole you guys can have it please copyright padding top 1.75 rem border top 1 pixel solid and d 0 d e e 2 text align center and copy right link and from the text i i think i haven't added the link yeah i i remember i just now right now i just changed my mind and i haven't had any link here yep so let's go with something else so copy write list unstyled and then copy right i have actually quit many things so opacity is gonna be 0.7 and the next eighth last unstyled copy this put it here let's write down margin bottom 0.75 rm save it okay so yeah these links we can say text decoration none let me add it for you guys let me see copy write link and text decoration yeah good okay so you guys can see that we have created a very nice landing page in bootstrap five we have used a lot of css but it's good it's cool let me show you the responsiveness of this one and after that i must say bye to you guys because it's um it i think the video it took too much time so you can see everything stuck nicely on top of each other and from now on i am going to start some javascript and angular and react project okay so don't go anywhere we will start the new series of angular react and some javascript i'll see you in the next one hasta la vesta ciao

Channel: Code with Erum

Views: 183

Keywords: Restaurant website, construction website, coffee shop website, how to design a website, how to create a gym website, how to create restaurant website, ngo website, how to create a ngo website, e-commerce website, how to create e-commerce website, responsive website, responsive webdesign, bootstrap 5, bootstrap 5 landing page tutorial, responsive landing page bootstrap 5, landing page using bootstrap 5, tourism website project using html, tourism website using html and css

Id: bZBVnDchd4c

Length: 171min 53sec (10313 seconds)

Published: Tue Dec 07 2021