Bootstrap 5 E Commerce Website | E-Commerce Website using bootstrap 5 | Bootstrap Website design

hey there everyone this is iram here and i hope that you all are doing well so today we are going to create a bootstrap 5 e-commerce web page this is the first video on my channel of bootstrap 5 in which we are going to create a e-commerce webpage so here is the overview of this webpage you guys know that what we are going to create so here is the navigation bar this is the carousel and with a title subtitle and this time carousel is working okay so you can see that it is moving and it is moving automatically to itself to okay with the functionality here is the category section and it has three categories with these buttons yes let me show you that the nav bar also have some hover effect and then it has a shop now section with a carousel and tabs so you can see that here is a popular and this one is the latest this is the carousel it is working again in the popular section too it is working with the price price and the title of the wine then this is the services section here is the offers section and this is the footer section with some useful links about us contact and some social links and it is a responsive page let me show you okay so you guys can see that it is responsive menu and slider category section shop section again latest and popular and this carousel is also working here and this is the services section today's offer section photo section so everything's stacked nicely on top of each other it's a very a nice project simple and it is simple using bootstrap version five so let me tell you the images i've got in this section is from pexels.com the keyword is wine bottle and some of the images i've got from unsplash.com again the keyword i've used is same wine bottle so the bottles or the images you are seeing on this webpage i've got from pixels and unsplash okay the size of the images here in this section in this offers and shop now section is 1920 by 1080 i'll get the size in the description below you guys can choose the images of your own choice today i've seen this it's a very beautiful bottle but i've already added the images there with the size so i'm not going to save it but i like this one too so let me close this one and this one too okay now let's go back and start coding for this webpage it's almost almost it is made in uh very bit of css is used but most of the part of this web page is done in bootstrap five okay let's create the file okay index.html then i would like to create another one which is gonna be main dot css okay so index.html and main.css what i'm gonna do first here in index.html here is a webpage website from getbootstrap.com bootstrap website getbootstrap.com go to docs and here getting started on the first page what you guys are going to get from here is a starter template here is the starter template copy this code from here go and paste it here okay so here is the code um starter template then what i'm gonna let me show you save it and by using my live server okay so the starter template has a title of hello world and heading of hello world what we are going to do first of all let's change so let's link our css link related to style sheet href is gonna be mean dot css then the next we have to use the font awesome icons so all you all of you know about my trick of having this cdna for awesome icons sorry and let me copy this one from here and i'm gonna paste it here then after having this one awesome icon i would like to go with the font and google font i would like to go with lobster here is the lobster and i'm gonna use this one in the page so let me get the link from here and paste it here and for css i would like to get this one from here main.css body selector let me paste it here save it and save it here now first of all let's change the title the title is gonna be ecommerce um five tutorial okay and here just to check the font and everything is attached nicely to this so let's say hello boot strap save it and then here is the so the font is attached nicely the title is ecommerce booster 5 tutorial hello world strap okay let me close this one now we are not closing this bootstrap website because we need uh help in further steps so here we are now let me delete this one and let me delete this optional javascript choose one of two okay so within this body section let's start working with this so first of all let's start working with the header and let's say end of header i would like to go with the nav and let's assign other class the class is going to be navbar nav bar expand large navbar light bg dark we are we're gonna vg dog background doc and shadow class okay all these classes are predefined in bootstrap okay let me show you this snap bar thing first of all here in get bootshop.com go to the component section and here if you go to the component section you guys can see nav bar okay so the navbar it has a bit of a changes they have made in the navbar uh it's not that much different with the previous from the previous version and here is the here is a code also you can get the code they have mentioned everything the ids and the classes okay so everything is mentioned here don't worry that from where i got all these things i got all these things from here whatever i'm gonna type i got it from here okay and it has the navbar it's telling about us about the brand the text images if anybody want to use the image like in place of logo of the webpage uh and the navbar expansion each and everything about number okay i don't think that i need to explain it more in more detail because we have already done it version four and it's not it has not too much differences uh okay then after this let's have a dip dave is gonna have a class of container and display flex justify content between align items baseline sorry center and within this step let's go with another with a link plus navbar brand and let's name it heading one okay and here it should have a href href is gonna be index dot html fine let's use a span element here span class the class is gonna be text danger and heading four sorry heading 4 we should name it wine and another span let's define another span element have a class of text white with heading 4 and here we have to say shop save it onto the browser let me show you what i'm talking about so you can see wine shop okay this is the dark background and this is the nav bar okay okay so after having this nav bar what we have to do we need a button and for the button let's go with button element sending it a class the class is going to be there bar toggler border 0 and type is gonna be button then here a bit of uh difference from four to five version four to five s data then we have to use bs bss bootstrap toggle okay and collapse this data bs toggle is let me save it here and let me show you this database toggle okay this data base toggle is here like data bootstrap toggle is here you guys can see when you read the documentation you're going to find it from the documentation that they have used it here in the navbar so here uh navbar you can see that button class is navbar toggler we have used border also and we said that but type of the button is in the type is button then data bootstrap toggle is collapsed so all these things i've got from here okay here it er it has the definition here in the webpage of bootstrap five then after this what we have to do it we have to use the target so after bootstrap collapse let's use data bootstrap vs target target and it has an id is gonna be bar toddler sorry navbar toggler success okay then after rabbah toddler success the id has to be in codes okay navbar toggler success then we have to go with arya controls area controls and navbar supported content then we have to say aria expanded that will be equal to false okay so this navbar supported content it's also here you guys have to read it uh read this navbar and each and everything from here so you will find everything about uh the things we are using here you're gonna find it from here okay let me show you let me go here on top and you can see here the ids navbar supported content okay and then after this after area expanded let's use the aria label arya label it's gonna be label and it's gonna be navigation okay then after this we have to use a span element and it has a class the class is gonna be nav bar toggler icon okay never toddler icon save it moving on to the browser here so you guys can see that the toggler icon is here okay okay so after having this never toggler i can let's create the links for that what we have to do we have to create another div assigning it a class class is going to be align self center and here is align self center collapse nav bar collapse flex fill then we have to say display large and flex then we use justify content large between justify content lg and between then we do need an id an id is gonna be nav bar toggler success okay navbar toggler this one it has to be here now by toddler success okay after this let's create another live view it was going to have a class of flex fill mx excel 5 and mb 2 then after this we should go with the unordered list the url is going to have a class class is going to be now then display flex justify content between so justify content between and then we have to go with mx excel five text is gonna be center and text would be dark within this let's create a list item having a class because it's gonna be nav item and then we do have a link let's assign it a class the class is going to be now link btn that's called outline danger and rounded pill padding on top padding from top and bottom is gonna be three then we do need a link here but i'm not gonna have any kind of link i'm not gonna mention anything and let's see home okay then after this let's copy and paste it for a couple of several times not couple of times copy the second one is gonna be categories then shop now services special offers okay so the first one is home this one is gonna be this should be shop now and this one is going to be services and then we need a special offers okay then we need special offers save it go on to the browser and here are the image sorry the icon nav links sorry okay you know it is nice it has a nice off effect because here we have mentioned that outline danger rounded pill okay then after this what we need is these social icons okay and for these social icons we need another div assigning it a class the class is gonna be nav bar align and sorry navbar and let's say align self center display flex then we have to say that let's create a link and it's going to be nav now link should have a link and let's go with a for awesome icon plus and this is going to be f a b f a facebook text is gonna be danger and let me copy this one a couple of times and here in place of facebook let's go with instagram instagram and actually youtube youtube save it move on to the browser here is our page so we do have the facebook instagram and youtube here we do have the social icons and the nav links okay so we have done with the navbar now let's go to the css and make these links white so for this here in main.css let's go with now link and the color is gonna be white as we are writing so we need to use the important flag save it okay so now it's looking good better than before okay then after this we let's create let me bring it here okay and let's create this slider the carousel image image carousel and let's go back to the index.html after that just here after this header let's start hero section so within this hero section what we have to do or the banner within this banner what we have to do we have to go to the nav bar sorry you get bootstrap.com website again here it has a carousel component we are going to use this carousel component here from here and it has different options the first option is slide only i'm not gonna use this one then with controls of course i'm not gonna use this one this one also not i'm gonna use it with captions okay so i'm gonna use this one and for this i just want to copy this copy the code from here and let me paste it here okay save it now what i'm gonna do i'm just gonna change the images here so first one the first image is the first image name is bg background one in my case dot jpg it's not here sorry source images and vg1 dot jpg then the second one is images then bg2 background two and the third one is gonna be images background three save it move on to the browser here is the browser and yes we do have the slider the the image image one and here is the image two i think image two is bigger than the image one yep okay no problem you guys can uh find the images according to your requirement this is i'm just using it for tutorial purpose you can add the title the subtitle here okay so we have done with our hero or the banner section okay now the next is the next one is this category section so categories of the month let's go back and back to the editor and here after having this one let's go with the let's start the categories section so we should say category section end of the categories section here what we have to do is to create a section element within this section element that have a class class is gonna be container fluid to make it responsive then py padding top and bottom is going to be 5 i just need my category bg we're going to use it in css then we do have a div starting at a class class is going to be raw text center and padding top is going to be 3 okay let's use another div assigning it a class this class is going to be column large 6 margin auto and then we do need a heading one heading one should have a class of text white categories month then after heading one then after heading one let's use a p element assigning it a class the class is gonna be text white and let's have some lorem ipsum of 15 words okay it moving on to the browser let me show you yeah we cannot see because the text is white okay and the background is also white so when we change the background it will be visible go back to the editor and here let's have another do assigning it a class this class is going to be raw then other div assigning in the class we should name it column 12 column medium 4 padding 5 margin top three and a link so [Music] right now i'm not gonna use any kind of link here but i'm gonna use an image and the source of the image is gonna be images and i'm gonna use image one dot jpg let's have a class rounded circle and to make this image responsive i'm gonna use image fluid class and after using the image fluid let's use the border class and okay save it going on to the browser okay we do have our image and rounded circle okay what we have to do next is to yeah no we have to add hold on heading five and having a class the class is gonna be text center text white and empty margin top is three mv is gonna be bottom is gonna be three and should i just wanna name it wine one okay then we'll have a p element assigning it a class the class is gonna be text centered and within this let's use a link assigning it a class class is going to be btn btn btn danger rounded pill that circle uh rounded pill and we should say shop now i'm in my hold on go shop here in this um dummy project i have used go shop so that's why i'm gonna use go shop here and or shop now whatever you guys wanna you you use you can okay and then after this what we have to do is to have another div and it's going to be here signing in a class the class is going to be column 12 md for hold on i found a mistake here this is medium 4 okay and what i'm going to do i just want to copy and paste it from there the same div this div let me copy this paste it here and here in place of image one there's an image too it should be one two save it let's check okay then we do need another one so i'm just pasting the same code and here it should be image three one three save it and here we are okay so you know this image too did not look good here i just want to change this image it should be made five i don't know what's in image five but okay it's looking good fine we have done with this section also the next thing we have to do is to go to the css and start working with the css of this categories section and the css for this section is not um that much it has only a class of cat bg and category background and we have to use background color it's gonna be black save it okay i was looking good fine cool okay what we have to do next after having this one let's go in this shop now section it is it's gonna take some time this shop now section so let's go to the code editor and start working with this section okay here in index.html let's go to the next section and this section is gonna be shop now section and end of shop now okay let's create a section here and starting in a class p e y padding top and bottom gonna be zero then padding bottom gonna be six and this background class we gonna use in css let's use an id and this id is gonna be collections okay now within this let's create a div assigning it a class the class is going to be continue then we use another div assigning it a class class is going to be raw and height of this is going to be 100 then we have to use another div assigning it a class this class is going to be column large seven and margin top is also gonna be seven then we need a heading five with a class this class is gonna be fs 3 and f s lg 5 and these are the fonts okay and then we have to see lh is gonna be sm small and mb 0 then text is gonna be upper case text right okay let's name it shop now before moving on let me use this background class here in our css it would be easy for you to see because everything is going to be white and the background scrolling up background background class will help us let me show you okay here and we have a black background with this shot now title okay and then after this let's have another div and for this let's go to a div find it in class column 12 have enough what i'm gonna use here same as we have in version four of bootstrap so here you guys can see navs and tabs okay so i'm gonna use these nerves and tab section from here and i'm gonna use this one okay for more detail or to know more about it please read the code and the details are the description added here in this section component section okay so now i'm gonna use the nav and then after within this nav element let's have a div assigning it a class and this class is going to be this class is going to be nav now tabs and i'm just naming it vine tabs i'm gonna use it in css mb margin bottom four and justify content end okay then i'm gonna use an id id is nav tab okay and the role of this is gonna be tab list let's use a button element here you should see class class is gonna be now link and i should say active and let's have an id this id is gonna be now latest tab and then data bs bootstrap toggle and it's gonna be tab then data bs target and it has an id the id is gonna be nav latest let's have a type type is button the rule of this is tab the function area is gonna be are your controls rule is gonna be tab let's use the aria controls and it's gonna be now latest then area selected are you selected is gonna be true and here let's name this button and it's gonna be latest what i'm thinking to have i am thinking to have another button so for this let me copy the same button copy this paste it here and here in this button i just want to change few things where i have said that the button class is now linked active i need to delete this active class from here we need only one active button then we need this latest tab is gonna be popular non-populate popular and then here nav latest is gonna be nerf popular this id popular again this are your controls now latest is gonna control with uh change with nav popular and here are your selected it is gonna be false save it okay so let's go to the browser and here okay it's the tab is working but there is a problem it's not latest this is popular popular okay fine in css we will fix this issue okay then now let's go and start creating this castle okay so for this i'm going back to the editor and here in the editor let me go back after this now okay so now let's create another div and this div is gonna be the it's gonna have a class the class is gonna be tab content and we should have an id also id is gonna be nav tab content then let's have another div assigning it a class and this class is going to be tab pen say fade and show and let's say active class and have an id id is going to be latest and on top we have these one these ids that role is gonna be tab panel and aria labelled by arya labelled by nav latest tab spelling of libert okay now latest tab and then we need another div assigning it a class this class is going to be carousel and we have to have another class that's going to be slide then we have an id and it's going to be [Music] carousel [Music] latest again data bootstrap right and we have to say carousel okay then after have another day assigning it to class this class is gonna be carousel inner and within this carousel inner first of all let me bring it here okay carousel inner let's have another dip signing into class carousel item okay so carousel item active let's use the data bootstrap interval you guys can change it also but i'm using 10 000 milliseconds and it has to be in code and then after we should use the another dip assigning it a class this class is gonna have a raw and height is going to be 100 align items center let's use another div signing into class this class is going to be column small 6 and call md four and mb3 margin bottom three and then we have to say mb md 0 let's have another dip assigning it a class and this class is gonna be user card background black texture is gonna be white padding six padding bottom eight adding bottom eight and let's add an image here so the image is i have a class class is going to be called image and source for this is going to be images image 7. and jp i'm thinking right not getting my image if i've made any kind of mistake somewhere spelling of the source is fine image class source src and okay let's see and aren't just gonna be anything okay first of all let's save it move on to the browser and let's see so here in the browser okay we do have a image it is it got my image okay then after this we have to go with the with another div okay so within this do let's have a class the class is gonna be card image overly and i'm going to use effect class in css then bg dark and dark brigade and then we have to use display flex flex column and reverse flex column reverse and let's use the alignment and economy online items center fine then after this let's use heading six and assign it to class this is gonna be text danger btn then you should say bdn outline and light then we have to see a rounded pill and let's have some amount it's gonna be 15 dollars save it move on okay so you can see that it has a 50 dollars we need to fix all these other issues in css then after this we need our heading 4 heading 4 assigning it a class and it's gonna be text danger let's use the name client and here f after this let's have a and we're going to link it okay no need so just leave it okay save it moving on to the browser there is the title okay so we're gonna use this class and then we have then it will be understood but it's it's fine until now okay now let's use the other images and for that what we have to do for the other images we need to [Music] let me just for my convenience a kind of a separation line i needed okay and i need to have what i'm thinking i'm thinking to copy this and paste it in paste it another you know what not here sorry i wanna copy this whole div hold on okay just for the separation what i'm gonna do is just to copy this dip and let me paste it here but here let me change the image should be image five just see that okay image five is almost same let's change the image could be image one then just okay so if you guys want to change the name go and change the names also i'm not going to do that i'm gonna pasting it again and i'm just gonna change the image image three save it i'm just using the random images okay okay so what we have to do next let's copy and paste this first of all just for my convenience um let me have it here and what i'm gonna do is just to copy i'm gonna tell you what i'm gonna copy i just wanna copy this this div carousel item active class but i'm gonna remove something i'm gonna make some changes so what i'm gonna do i'm just gonna copy this i've copied it from here and below here let me paste it okay so first of all what i'm going to do here i just want to remove this active class first despite of having the time 10 000 i would like to go with 5000 milliseconds so the database interval is gonna be 5000 milliseconds okay and [Music] other things what i'm thinking to change let me just check my images so okay i'm thinking just to change some of the images here in place of this image let's use image two and image two then i'm gonna use here image six and [Music] here it should be image five save it move on to the browser okay so cannot see anything right what we have to do just to to see the things or to make it working let's go and create another dip so here i am and i'm gonna create another div and here i would like to create that view [Music] not here's right here the div has to be here their class is gonna be raw and let's create a button here button is gonna have a class of carousel [Music] control sorry casual control previous and type is gonna be button button and data target is gonna be uh id we have to use an id the id we have used before so it's to be spelling of cursors carousel latest then data bootstrap slide this is gonna be pre previous let's use a span element here assigning it a class carousel [Music] control preview and icon and what we have to do is to get a get um aria hidden oh yeah hidden is gonna be true then we do need another span element and signing it a class not here sorry just a moment and then here i need another span element and this span element we're gonna have a class of visuality uh visually hidden not virtuality visually hidden and we should name it next okay visually hidden means that on screen it cannot be you cannot see this next then after this what we have to do is we have to create another div and this there is gonna have a class this class is gonna be tab pen fade let's use an id of nav popular roll is gonna be tab panel and aria the label by nav popular tab then you have to use another div assigning it a class class is going to be carousel and should have a slide then we have to use an id id is going to be carousel [Music] and popular then we have to say data bootstrap right and again it's gonna be carousel let's have another div assigning it a class again castle inner the same we have to create for the popular images okay and then another div assigning it to class carousel carousel inner then we have to create an other day assigning it a class carousel [Music] item and let's say active then we have to see data bs interval again we're gonna use that 10 000 milliseconds let's choose another div assigning it a class this class is going to be raw height would be 100 a line items center another div div class column sm 6 then call md 4 and m b 3 then mbmd0 okay and then again another div assigning the class card bg black and text gonna be white p six p b eight p6 pb8 and then we do need an image again we need to declare the source first of all let's go with the class card image source is gonna be images let's use image 4 and alt then you need another div this day should have a class of card image overly then again i'm gonna use this effect class bg dark and ingredient vg down gradient then you need to display flex then flex column reverse and align items center let's use heading 6 here assigning it a class text danger btn btn outline um outline light rounded pill and let's 120 usd okay then after let's have a heading four signing in a class this class is gonna be text danger medium and btn outline it's not danger but it's out outline sorry it hasn't outlined my apologies it has only a text danger and okay so here we just name our brand event here and save it go on to the browser okay so we do have okay so we do have another image in the popular section okay there is the latest what happened popular latest also have the same what's going on need to fixation problem okay so let's do let's do this and then we are working on it okay so the popular has one image now what i'm gonna do i just wanna copy and paste same as we have done previously so let me do that okay so for my convenience let me have it okay and for this what i'm gonna do let me get it and and then where is the column so we just need to copy this one from here paste it here and here in place of image four let's use we check to have seven images so let's use image two okay and another one so here another one in here it's gonna be image one save it and go back okay so we do have three images here we need some more so for that what i'm gonna do let me go back and i'm thinking to copy and paste the whole thing and the whole thing is so what i'm gonna do is for my convenience again let me have it here and it will be easy for you to understand what i'm um let me show you what i'm gonna do so so so i'm gonna get another carousel and that carousel starts from carousel item and it's gonna say active not at all okay let me get it from here so okay let me copy let me check copy it let me paste it here and what i'm going to do i just want to remove this bs interval and this active class save it and i would like to change the if i change the brand name okay let it be let it go with the same okay so then after this with the same images and everything i've got it here and after this let's go with another div so let's have another div here assigning it a class is going to be raw then we have a button here assigning in a class the class is going to be careful control again prev let's see type type is going to be button and i should go with data bushrap target and the target we are going to target now so popular carousel popular and then we have to go with data bootstrap data bootstrap slide and again we should say next then we have to go with a span element i mean hold on let me delete this one and within this button let's create our spam element this span element will go with the class class is going to be carousel carousel control p means pre previous and then after uh carousel control previous icon okay and then we have to say arya is gonna be hidden which is true then we need another span element and we should say that the class is gonna be [Music] visually hidden okay and previous okay then after this let's have a another button element assigning it a class and this class is going to be control carousel control next type is gonna be button data bootstrap target i have an id of carousel popular and you know what let me wrap it to you okay then we have to say in data bootstrap slide next and again uh okay after having this next slide the next slide next let's go with the span element spam class is gonna be carousel control carousel control next and next icon and then we have to say aria hidden arya hidden is gonna be true not false sorry true and let's have another class that is visually hidden so for that let's say spam class is gonna be visually hidden and we should see next here save it now let's go back to the browser and see that how does it look and what so we can see a one button but the other one cannot see there must be an error here in this button let's go and find out okay so let's find out the mistake the first mistake okay let's find out the mistake so i have found a mistake here this is okay now related to our problem let's move on and let's see because that issue what i have noticed here you can see let me show you that here in the latest section the issue is here when i click on the popular the issue there isn't any issue it has two icons but here in the latest section it there is only one let me refresh it so there is only one let's go back and we have seen yep here the problem is here you know we have to have two buttons we need two buttons okay so what i've done it's gonna be again let's move on and search for that issue we have here that would be where is that that could be here in you know we have defined the button in the latest section so now and here the problem could be here you know what let me copy this this button and let me paste it here and in place of this previous let's use the next and carousel latest then carousel previous icon and face of this previous icon it's gonna be next icon and here it's also gonna be [Music] next and and and i think i'm sure if we we just created one uh link here we didn't create another one the icon so yep we do have here so you can see it's working in and it is here in the popular section yep now let's uh fix these issues uh style this style these latest and popular buttons so for this like i want to style it seem like this it has the underline and you know all these and and all these uh effects so for this because it is not really invisible we cannot read it and next right it has to be text danger so [Music] let me go and let me check here okay the problem is here it stacks danger so let me copy this one uh hold on text page find and replace so let's replace it with text danger okay save it and not not no need to see if we have to replace it from here and another error you know with double r let me let me change it sorry because it's adding another r within that so here is text danger and then and then heading 4. so so so you guys find the mistake the error i have made so please fix it on your own because it will take too much time i just mentioned that here here it it's a mistake from a type 1 stake from my side so yep takes danger danger okay uh only it is here in this popular section yeah it's only here in this section so it was just a typo error please fix it it's not a big issue if you guys can do i'm sure okay let's go and go to the main.css and start styling these nav tabs so first of all let's get this snap tabs border bottom minus one pixel then sorry border bottom is not minus one pixel it's gonna be one pixel solid and the color is gonna be gray let's keep it and close to white not not pure white then we have to go with the nav tabs enough links so now tabs and now link margin bottom minus one pixel background it's on your background and background is gonna be none border one pixel solid and transparent motor top left not radius but only top left is gonna be zero border top left is gonna be zero okay and after having this transparent let's go with border top left radius this is gonna be zero let's go with top right radius so border top right radius is also gonna be zero then we have to go with nav tabs and now link over over and let's see now tabs it's a class nav tabs and nav link focus border color watercolor is gonna be f5 f5 f5 and and then we need isolation going to be isolate then after this let's use the nav tabs and nav link active active class so it's going to be n and and hold on active and nav tabs nav item show and now link now here change the color so the color is going to be 757575 background color it's gonna be black border watercolor border color it's gonna be transparent and now let's use the wine tabs wine tabs so border water bottom it's gonna be zero wine tabs now link over and wine tabs leveling focus border color again we're gonna use wine tabs and now link active and wine tabs now link the nav item sorry now item show and nav link border bottom and water bottom color it's gonna be seven five seven five seven five now let's use uh let's save it and let me show you okay so you guys can see that it's looking nice now we have to use the effect class for the images so for that let's use the perfect class okay effect class and let's have a background rgb and it's going to be 0 0 and 0 then let's use background linear gradient background and here we have to say linear gradient and within this let's go with zero degrees okay zero degree and then we have to say rgba zero zero zero one uh not rgba it's rgb sorry okay rgb 0 0 0 1 and let's say zero percent then we do need another rgb hold on we have to add a comma here and rgba this rgba is gonna be zero zero zero and zero then we have to say 33.33 percent and another rgb that would be two five five and two five five again two five five one and uh should say 66.66 percent then after we need again our gba two five five two five five and two five five zero and it's gonna be 99.99 percent okay and so it's a background linear gradient yep actually our chance to be here then after this we do need a [Music] zero degree rgb a and i think i made a bit of a mistake that mistake is that this zero degree isn't okay it is let me save it yep okay so we have saved this one and let's move on and go to the background size and background size is gonna be 300 and 300 percent and then background position background position zero percent and one hundred percent then we use transition transition is gonna be 0.5 seconds let's save it move on to the browser okay so you can see that the images were too shiny before but um adding all these effects and setting up it in css it is it's looking nice and the main thing that the water was very visible before the image water and i don't want to have that one so that's why we are i had this one that it seems that it is encrypt within the background or with the background okay so let's move on and start working with this services section okay so here we are in our editor let's go to the index.html and let's go down and here let's add our services section and end of this services section for this let's create a div assigning it to class the class is going to be container fluid then we need to add a background class and padding top and bottom is gonna be five let's have another dip it has a class called raw justify content center and it's gonna be justify content center another div assigning it a class column extra extra large it's going to be 10 then another div class and card and then we are going to use card carve spam shadow sorry shadow uh just go with the shadow class okay and i was thinking to give it a color but leave it okay then let's go with the style style is gonna have a border radius and it's gonna be 35 pixels then we do need a card body and for this let's have another div with a class of part body card body pairing top and bottom five card body and then let's go with another div having a class of raw then justify content even evenly let's have another dip trying to class this class is gonna be column medium three another div assigning it to class and this is gonna be display flex md block and for excel flex justify content evenly and then again justify content lg between let's have a phone also micro class f e s f a tags and i want to be three times bigger than its actual size text the color is gonna be danger then we need another div assigning it a class display flex display lg block and d excel flex and then select center heading to heavy class font read book boulder and text gonna be 1000 margin bottom 0 text danger here we're gonna say daily discount save it and let's move on to the browser first let's see what's going on here okay so we have this here you guys can see i like this this um bottom part of this image section and okay we have this daily discount here now let's go and work with the other one so the other one is gonna be let's have it do assigning it to class class is gonna be call md three then hr horizontally vertical and then we need another div assigning it to class display flex and md block just wait extra large and flex justify content evenly and it's not gonna be large but it's gonna justify content evenly and then we need justify content large between not mdmd i mean okay let me write it here justify justify content lg between okay then after this let's go with the for some icon class fps f a phone alt three times bigger and then text is gonna be danger okay let's have another div here assigning the class display flags and let's play lg block and display extra large flex flex center h2 signing in a class and font read again boulder text gonna be 1000 mb 0 text danger i have to say available call save it okay so it's here now for the third one what i'm gonna do let me copy and paste it okay just for the convenience not to mess with anything else copy this i want to paste it here and please of this phone alt let me change the icon and here the icon is going to be truck it's a truck and and here let's see quick delivery save it move on to the browser okay so here we are now what we have to do let's just change this background white background to black and for this let's go to the main dot css and here we do have a card class and we should say background color background color and we have to say rgb a and it should be 0 zero point two uh yeah zero point two save it move on to the browser okay so it's looking cool now let's finish this today's offer section and after having this offer we have this footer section okay so i guess i'm gonna give the code in the link code link in the description below if you guys need a quote you can get it from the description okay okay so here we are and after having this one let me remove these extra spaces from here here let's see offers section and end of the offers section okay so here in the offers section what we have to do first let's create a section element in the section element let's have a class of background and it's worth black background then within this let's have a div assigning it a class this class is gonna be container it's just a container blade is also okay but i'm just gonna go with a container then div assigning it to class raw and 100 each 100 then we have another day we're sliding into class this class is going to be called lg seven mx auto text center mb6 then we need h2 class is gonna be the font tweet of only bool font size three then for lg large devices it will be large would be five l h s m and m mb3 mt5 and text gonna be white and here we just need to write today's offer then after this let's save it and okay continuative and we need another day also yeah okay so now our divs are complete and now after that uh let's create another div assigning it a class this class is going to be raw and gx then we need div assigning it a class column sm 6 and then column medium 4 column lg 3 and which is going to be height is going to be 100 margin bottom is going to be 5. within this step let's create another doom assigning the class this class is gonna be carg and card spam h100 text gonna be white and rounded three let's use a image here and we should say image um image have a class image class is gonna be image fluid to keep it responsive and let's say rounded three the border of the image height is gonna be 100 and then let's use the source image sources images and image 2 dot jp okay and then after this let's define another div it has a class these classes of dave is gonna be card image overly and ps 0 then we have to say that let's let's have a spam class of spam is gonna be badge and badges background is gonna be danger p p two and it's three and let's define the badge here and it's gonna be a psf a tag m e 2 f s 0 m e 2 f s 0 and let's have another span element assigning it a class this class is gonna be fs0 and we have to say it is fs not fafs0 and then let's see 20 discount and 20 percent off okay let's save it move on to the browser okay so you can see that we do have an image here okay now the next is i just want to copy and paste it and we'll change the images only okay so for this for changing this one for this what we have to do let's copy and paste it so just for the convenience let me have it here and let me check how many images do we have here okay four so i need four images and for this uh let me copy this the code from sorry this div okay i wanna copy this one and okay copy paste save it let's check okay and other one and another one save it let's check okay so that just just need to change the images this is gonna be image six and [Music] image five then we have to go with image three and i don't want this image to here let's go ahead and image four and okay so here we are we have done with our today's offer section okay now let's go back and here we have this footer section this is the final section we are going to work with so here at the end i'm not going to define any kind of section or comment for this so let's go and start working with the footer section so for footer i would like to go with the footer element assigning it a class class is gonna be background p t margin uh padding top is gonna be four then we do need okay and let's have a div assigning it a class and it's gonna be container let's have another dip okay let's have another div assigning it a class this day is going to be raw and padding y will be 4. then let's have another div assigning it a class call lg 3 and then call 12 align left let's go with the link class and it's in there bar rant and href and then let's go with the font awesome icon class it's gonna be fvs f8 wine bottle and f a two two times bigger than its actual size and the text is gonna be danger and then after this let's have a spam element spend assigning it a class class is gonna be text white because the bottle is alright so that's why i just change it a bit here line and then let's have another span element class is gonna be text danger heading three semi rolled and 600 okay and then let's say shop then after this we have to go with a p element assigning it a class first of all let me save it and show you what's going on okay so here okay so butter and title of the web okay then after this we have to go with the text and text is gonna be light lg 4 and margin top and bottom two let's go with some lorem ipsum okay then after this p let's have a unordered list signing into class this class is going to be list in line footer icons and light is gonna be 300. within this let's go with the list item assigning it a class class is gonna be list inline item list in line item margin 0 let's have a link assigning it a class this is gonna be text light and [Music] font awesome icon class this is gonna be let's use a brand everybfa facebook and facebook square then if a two times bigger than its actual size and what i'm gonna do i just wanna copy this uh list uh in line so list inline item for a couple of times so this should be for instagram and this should be for youtube and for instagram i just need to change it to instagram and here it's gonna be whatsapp not youtube it's gonna be watch app square whatsapp square okay save it move on to the browser so here we have some something about the shop and some text and the social icons the next we need these useful link links about us contact and i'm gonna create this folder also this copyright section altogether okay so for this what i'm gonna do next is let me go to this create another div assigning it a class this class is going to be call lg 3 and then call md 4 md4 and then margin top and bottom and small devices gonna be zero and margin top four let's have a heading three here adding three have a class of h for p b l g three and text is gonna be light then light 300 and here we have to see useful links useful links then after again another list class is gonna be list unstyled and text is gonna be light then light is gonna be 300 and after this let's have a list item class is gonna be pb two let's have a font awesome icon class where we have to define fps fp chevron right and a link then a link is gonna be class with text decoration none and text is gonna be light and for sure we need each ref and here it has to be home now what i'm gonna do i just want to copy and paste this one this link from here and uh paste it for several times home categories shop contact and blah blah blah so what i'm gonna do the first one is gonna be home this is going to be categories shop now and this is gonna be services this should be shop now and this is gonna be contact save it move on to the browser okay so we do have these useful links here okay now we need to go with about us and contact us okay here we are and for next okay then here let's have another div assigning it to class this class is gonna be column lg three and call md four margin top and bottom is gonna be and small devices is gonna be zero margin top is to be 4 and h2 h2 heavy class of h4 pb lg 3 pb pv lg 3 and text is gonna be light right would be 300 let's see about us and then after let's have a p element assigning in a class text gonna be white from lauren epsom of 15 words okay finish let's have another day assigning the class this class is gonna be call lg three call md4 and sm 0 mt4 okay then h2 class is gonna be h4 pb lg three and text is gonna be light light would be 300 here what we have to do is just say contact us and then after this let's have a unordered list assigning it a class pass is going to be list unstyled and text light and light is going to be 300 so we define the weight then we have to move on to list item assigning it a class this class is gonna be p b two and then we need a font awesome icon class and this class is going to be f e x f a p e 24 an alt and it's gonna be two times bigger than its actual size then we do need to have a link here and link is going to have a class of text decoration none test a text decoration none then we need a text light and padding top bottom white one and then we need a href here let's add a number and sorry okay then after this let's have a an email and it's going to have a class of pb 2 again i class pb no i'm sorry um no need to add fun also mic you guys can add it on your own i just want to go with a link here and the link is gonna be text text decoration none then text is gonna be light and padding top and bottom gonna be one then of course each ref and here i should go with the info at company.com okay save it on to the browser okay fine for email just add the email icon if you guys want now let's finish this and create this copyright section so for this copyright section here i'm gonna have a div assigning it a class this class is um the width is gonna be 100 bg footer i'm going to use this in css bg footer and padding y is going to be 3 then we need to go with another div assigning it a class the class is going to be container and then we need [Music] another div assigning it a class raw padding top to div assigning it a class call lg 6 call sm12 and it's an error here okay then we need a p element assigning a class class is going to be text lg start and then we have to say text center text light light is going to be 300. uh we are not using these weights but i'm telling you it's just uh just for your use in future okay and then copyright text and copy copyright text something and then i'll write reserved and and then after we have to go with the div assigning in a class class it's gonna be column lg 6 and then column sm 12 and then after this let's go with a p element designing in a class class is going to be text led end and text center text light again light is gonna be 300 i'm using one font variation that's why i don't have this one but you guys can use this one and here i should say designed by lauren [Music] two minutes okay let's have a link here the link is gonna be link and link and we should have a class the class is going to be text decoration none and text light then we need to say let's use the strong strong element here we should say lorem ipsum and we have done with our footer let's let me show you okay okay let's see so here is the footer and there is something like uh let's let's change this one and then i'm gonna explain you what is that it's a bg footer and the bg footer has a background um background and background color the color is gonna be 2 c 2 c 2 c 5 b ok save it and here ok so here it looks prominent and it is looking nice so here is our responsive bootstrap 5 e-commerce web page uh let me show you the responsiveness of this one so here we are and let's let me show you okay so yes the um nav bar is working the toggle button is working here is the slider mean slider then the category section shop now section you can see latest and popular then we do have the services section here offer section footer i hope that you guys like this one if so don't forget to subscribe the channel and hit the like button i'll see you with the next in the next project with another interesting with another interesting build so see you in the next one hasta la vista ciao

Channel: Code with Erum

Views: 969

Keywords: Restaurant website, construction website, coffee shop website, how to design a website, how to develop a website, how to create restaurant website, e-commerce website, how to create e-commerce website, responsive website, responsive webdesign, e commerce website, ecommerce website using bootstrap, ecommerce website using bootstrap 5, making ecommerce website using bootstrap, bootstrap 5 tutorial, bootstrap 5 tutorial for beginners, bootstrap 5 navbar, ecommerce website design

Id: QenHhpJvcFg

Length: 129min 29sec (7769 seconds)

Published: Mon Aug 23 2021