Product Category Page for E Commerce Website | Create Product Grid Page | Product Category Page

hey there everyone what's up this is arum here and today we are going to create a product page here is the product page this project product page is related to this e-commerce website few months ago i have created this ecommerce website page and many of you have asked me about product page of this webpage website and about a logo logo in an image so our logo uh image logo okay here it it this logo is just a um a text logo but i have seen that many of you have asked me this in the comments that comment section that how we they can add the image logo or how would be the product page so here is the category or the product page i have created in the context of this webpage okay this e-commerce website so we are going to create this product page today now let me close this one so this is it has an image this is an image okay then here is a drop down list then i i haven't uh i didn't add that nav bar it's a little bit different because all of the questions you have asked me i tried to add all those things here like this drop down list and the image plus the breadcrumbs and the the filters all these things okay so you guys will i hope that you guys will like this and those who were asking from me about this one i'm sure that it is going to help you guys in your project so again let's move on and let me show you this again as i've told you this is an image the navigation the nav links with a drop down and um what is this a shopping cart then we do have this site section of some product filters okay and then here when user is going to hover over the image here or the image is going to it is going to have a wish list our shopping cart icon okay shopping cart icon and then the hair is and yeah and it has more items or button for loading more items okay so it's a very simple project and it is especially for those who were asking me uh about all these things and i have uh i have added all those things what you guys were asking for me okay it is responsive too let me show you the responsiveness of this you guys can see here is the drop down menu okay let me close it the logo is in the middle and then we do have these uh product filters and the products i click on it you know the image the icons appear uh icons are appearing so it is responsive everything is in the middle of the screen stacked nicely on top of each other and here is the more items button i didn't add any footers a footer in this one so it would be according to your choice whatever the photo you guys want to have in this project you guys can add it okay let's start working with this product or a category page so here is the vs code editor visual studio code and i am i already have a folder on my desktop the folder name is product cat and we are going to create within this uh folder we are going to create files within this folder so the first one i would like to go with the index dot html as usual i have used the bootstrap in this one okay main dot css here i do have a bootstrap extension b4 press enter and here is the starter template or a boilerplate and now let's say product category okay and then let's link our style sheet with this link related to [Music] um sheet and this time sheet is going to be mean dot css then we i would like to have a google fonts so here i want to use let's use the open sense okay so click on open sends and here i would like to go with this 400 and then this 600 volt and then 700 okay and i want to use uh this link and if you guys want uh want to have it go and download it uh i don't want to download it and then i want to go here let me add this link here okay then it has another thing which is for css so here is css rules to specify families let me copy this copy this one here in the main main.css body and paste it here save it save it too okay then i would like to go with font awesome icon for the shopping cart font and for the shopping cart forms this card font and i have used these for um for the nav bar also okay here is a fun awesome icon website so for awesome.com and you guys start with start for free okay and when you click on start for free add your email address click on this button follow the instruction you are going to get an email address i have my code here i'm using this one to copy this and i want to paste it here okay if you want to download it you can download it too but i'm using the cdn links so i just copy and paste the links let me close this one and this one too and now let's let's start working let's start creating our product category page okay i need some room here in this section uh in the body section so here let's start creating having uh comments first so this command are going to be known as a let's say nav bar okay and end off bar then okay so let's go with the header element and assigning it a class this class is going to be main menu and then i would like to have another class which is going to be menu only then let's have a div assigning it a class this class is going to be raw uh natural sorry container that's how we continue our spelling is fine container fluid okay to keep it responsive and then let's go with another div assigning in a class this is going to be raw and then let's align items setter and justify justify content justify content setup let's have another div assigning a class this is going to be column here i'm defining the breakpoint large element let's have a nav here let's assign it a class nav element from h05 and this class is going to be navbar nav bar then let's have in that bar expand and large then let's go with them bar light i have to find all these things in the previous projects if you are new here please watch any other previous video or video from this channel and you will know that how all these things are working so here let's say the class the classes these are the bootstrap classes okay the class is navbar uh nav bar brand this is for the logo okay the logo we are going to add here i want to say the href as let's say index.html okay when anybody is going to click on the logo you are going to get to this main page so here the image the one those who were asking from me about the image out this uh at the image so here this section is for you guys let's use the image source and the source i do have the images yes i'm using the same old images um from that previous website and web page and all these images i've got from uh pexels.com okay so within this images folder i do have a logo image the name of the image is logo.png i've created this image uh just by using some font on my on in photoshop okay and then let's have a button here button element and then assigning it a class and this class is going to be nav bar toggler and let's have a type the type is going to be button and we have to use a data all these are uh from bootstrap it's a bootstrap class and everything is here i'm using in the navbar or in this section are from the bootstrap most of the classes are from bootstrap this is also from the bootstrap so now then data toggle is going to collapse and let's say data target data target and it is going to be let's have an id it is my nav and control area control is again going to be my nav and my nav okay then i would like to go with arya ex printed and aria expanded is going to be false then we have to use aria label this would be toggle navigation toggle navigation then i would like to use a span element here or with a class this class is going to be nav icon okay and now icon is going to have a font awesome icon class within this expand element so i class fasfa bars and close the tag save it okay let's move on to the browser i'm using the live editor live server so here is the live here it is open with live server okay so here is the logo image okay this is what i've created with using a font okay so it is it's an image as i've shown you here you can see logo.png so uh not this one sorry this one okay now let's and let me show you another thing which is this this is a this is from awesome icon the navbar uh the bars okay for this hamburger menu so let's move on to the index.html and now after this button element let's create another div with a class and this class is going to be collapse and nav bar again it's a bootstrap class collapse main menu and main menu item okay then here i would like to have an id2 so here the id would be my nav this id i'm talking about this target okay so this target i data target this id i'm using here within this let's have a unordered list assigning a class and this class is going to be nav bar let's have a list item assigning it a class it is going to be nav item class is going to be nav link h ref and uh i don't want to go with a link here but it should be whatever you want to name it okay i just want to keep it uh keep this video brief and oh no don't want to make it too long okay this product page so here within this uh after this home okay actually first of all i would like to change something here and the second one is going to be drop down class so for the drop down menu okay then then up link and nev link and here i should add another class this class is going to be drop drop down toggle okay and here i would like to have an id of um never let's see left bar bar drop down let's say one okay now about drop down one if you guys want to have another one then you guys can change it to two three and so on so forth and then i would like to have a role so you know the rule uh as i have to assign a rule and this rule is going to be button and then we have to go with the data toggle and then their toggle is going to be drop down okay and drop down and let's have him aria arya arya has pop up and this is going to be true um true then arya expanded so arya expanded is going to be false and here in place of this home i would like to use shop okay shop then we have to go with the drop down menu items so for this let's have another dip assigning a class class is going to be drop down menu and aria label are labeled by aria labeled by and nav bar drop this one let me copy this okay aria is labeled by navbar this is going to be nav bar drop down one okay let's have another anchor tag and assign it to class this class is going to be drop down item so drop down item and let's have h ref then let's see shop and i would like to copy the same element the same line and let's have it here and here it is going to be product okay so for those who want to know about the drop down and and this should be shop i think let me check something here shop category and product details so where is this shop category and product details okay and then we have to go with another um another list item so this list item is going to have a class again now item and anchor tag that's planning a class nav link and then we have to avoid the href and contact okay save it move on to the browser okay so we do have home shop and contact okay so the next thing is i i just want to check something let me check recheck my code i think uh i don't think i have missed anything but just for avoiding the mistakes and errors let me check this one nav item drop down and nav link drop down toggle yeah here is the first mistake i found nav link drop down toggle and the id is the href uh is navbar drop down one then the rule is button and data toggle is drop down area has bob uh oh yeah it has pop up and aria has pop-up is true are you expanded false and it's sharp another div drop down menu and drop down drop left bar drop down so you know it's not drop again another mistake and then drop down item okay let me save it i just want to check it again yeah now we do have this button so the mistakes i have made not fixed okay now i think we should go to the css and style this first or let's create the bread crumbs section and then we will style it and yes we actually we have to create the shopping cart also so the shopping cart icon so first of all let's go and create the shopping cart i couldn't give assigning a class and let's say display flex and here within this div class the class is going to be card and for an awesome icon class this is going to be a face f a shopping cart okay and let's save it now okay so we do have a shopping cart here let's create the bread the marker for the breadcrumb section and this one and then later we will style them together okay so here in the index.html our headers section is done so after this header section let's have a comment so the comments are going to be bread crumbs okay now let's start creating it with the section element and the section element is going to have a class again it is from bootstrap red crumb and red chrome background this is what i'm going to use in css this breadcrumb bg and let's have a div here assigning it a class and this is going to be container container then let's have another day assigning it a class this is going to be raw justify content center justify content setter okay and div assigning it a class this class is going to be column lg 12 and let's have another div assigning it to class chrome inner okay so dave class chrome inner and then i would like to go with another div assigning a class and this class is going to be chrome text okay and then with a p element home and category okay let's save it for you guys i have opened a getbootstrap.com website here so here if you want to know about the bread crumbs so you guys can see that the it's a component and you can see that here is the code for this okay for the breadcrumb and all the classes um predefined classes here in in this one so you guys can see if you want to know anything about this please check the bootstrap documentation okay then we have done until now so let's first of all let's go to the product category and here you guys can see that here is the breadcrumb section and now let's go to the main.css and start styling it so first of all after this body i would like to go with the list item i want to define the list item globally and let's say list style type is none okay because we are going to use them so it should be here i wanted to be to define it globally okay now let's start working with the main class of main menu and nerf bar brand okay main menu and navbar brand let's have a padding top here so it is going to be i'm using rams here so 0 rem and [Music] padding bottom this is going to be 0 pixel okay then i would like to go with main menu again uh okay so so let's have another class main menu nav bar and this is going to have a padding of zero pixels then i would like to go with main menu item so me menu item with unordered list and the list item and then again the nav blink and here um the knob link is going to have a color so the color is going to be black then we're going to go with the font size which is 15 pixels and padding 35 pixels and um 25 pixels and you know let's check here okay text transform so this is going to be capitalize line height it would be 12 pixels let's go with the font weight so 400 okay let me check again here something about the font so i have used 600 and 700 okay then i would like to go with um let me get the same selector this main menu now link and okay and i would like to go the over so the hover color is also going to be black now let's define it at okay at media and only screen um and the minimum width for this is going to be 992 pixels and then and the max width makes width is going to be 1200 pixels and then let's say mean menu and mean menu item on ordered list list item then nav link and here let's have a padding of 35 pixels and then 20 pixels okay then i would like to go with the shopping cart menu uh icon sorry so the cart class or for awesome icon and color is going to be black then i would like to have a position so it is going to be relative z index 1 and font size would be 15 pixels then i would like to go with a i would like to copy this selector copy this paste it here and let's use the sudo element after and you know let's think of me okay and then let's have a position uh it is going to be absolute then we have to go with the border radius 50 percent this thing i'm working here now is for let me show you for this you know and there is a very small item number um number five uh over this shopping cart icon so now uh we are styling for this thing okay for this icon or this number this small number and you guys can see that here we don't have that but when i'll save it you guys will see the changes okay and then let's have a background color so the background of this one is going to be 7 seven a and seventy oh sorry seventy seventy seventy okay let's go with the width width is going to be 14 pixels and height is also 14 pixels right is going to be minus 8 um pixels and the top is also also going to be top it's going to be minus 8 pixels the content for this is i've used the number 5 there so the content is 5 and let's use the text align standard and line height line height would be 15 pixels let's go with the font size and the font size here is 10 pixels and let me bring it here okay then we have to go with the color so the color is going to be white save it now and let's move on to the browser first let's see okay so here is the icon and all the thing inside it okay and the content inside it the next is drop down uh menu so first of all if you guys see that it it's very boring so we have to work with this drop down and drop drop down then drop down menu let's add a transition here so the transition is going to be all 0.5 seconds and overflow hidden transform or origin so transform origin is going to be top center top and center then we have to go with transform here is the transform scale and scale is going to be one and zero then let's use the display property and block okay so after this let's use the border and border is going to be zero pixel solid transparent background background is going to be black save it and here we go so [Music] okay need to work on it still then we have to work with the items so i just want to copy this selector copy this paste it here and let's say drop down item okay and here font size font size is 14 pixels then we have to use the padding and 8 pixels 20 pixels and you know you need to use the important flag here so because we are writing so then we have to work with the color and the color is going to be white let's go with the background color again and black text transform capitalize save it now we have to create the hover effect so drop down over and drop drop down menu transform scale one okay let's save it and nutri how does it look now okay you know it has a nice effect fine okay now let's work with the media at media and media screen so the next width is going to be 991 pixel main menu padding 26 pixels and zero pixel then i would like to have him menu clef um remember we define this menu class menu mean menu item and then here we are going to have a padding uh padding left this is going to be 0 pixels and i would like to define the main menu again main menu item and nav item so the padding here would be 5 pixels 15 pixels and you know we are overriding so let's go with the important flag again uh what i'm thinking to have i would like to copy this this selector copy this let's paste it here and then let's have another class which is going to be the nav link and let's define the padding here the padding would be again 5 pixels 15 pixels and important flag so important flag is going to be here then we have to use the color and the color is going to be black okay now let's use the nav bar collapse and the work lapse class here now bar collapse the index is going to be 999 and let's say important position is absolute left would be zero and top is going to be 50 pixels let's use the width which is going to be 100 background color white and text a line is fender and again we are overriding so flag important then we have to use the drop down here within this media so drop down and then drop down menu and let's use the transform and the scale is going to be here the scale is going to be one and zero again let's use the display so for this i don't want to display everything so it should be none margin top margin top is going to be 10 pixels and now we have to work with the nav bar brand and image so it is going the maximum width is going to be 100 pixels then margin is going to be 0 auto and position absolute let's use the left zero right zero display inline block and top 0 then we have to use the nav bar light and number toggler so here nav bar not brand but amber light and bar toddler butter butter color is watercolor is going to be transparent let's use the position absolute left zero let's use the nav icon and follow some icon the color is going to be black because it was grayish and let's use the main menu anchor tag for awesome icon margin margin left actually and not kept margin left and it is going to be 13 pixels and it's done now we have to do another media screen so for our media max width is going to be 576 pixels and here the main main menu not item but the main menu is going to have a padding of 20 pixels and again zero pixels then we have to work with at media only screen and the minimum width is 576 pixels and max width is 767 pixels then we have to work with main main menu and padding would be padding would be 20 pixels and then zero pixels ps and then finally we have to we are going to finish this main menu and it's a main menu item sorry main menu item where justify content fender and the flag is going to be important save it let's move on to the browser okay so here we are done no we have to style this bread crumbs section so and here as i've defined show none display none so it is not displaying anything okay now let's style this breadcrumb section so for this let me go with the comments first and bread crumbs section okay here we do have a class of bread crumb and with in this class let's use the position relative the index is going to be 1 background would be uh three eight and three a and then three eight okay it's gray but better um dark radiation a little bit dark dark gray variation dark variation of this gray okay then another red crumb and you know the chrome inner class so chrome in the ring it has a p element so here the font size we are going to use 15 pixels then let's choose a color which is white save it move on to the browser okay so now the next thing is we we have to work with another breadcrumb class and you know what i need to define the margin so within this let me define margin bottom and zero pixels and let's say important because we are overriding so it is i have to use this important flag okay fine so we have done with our breadcrumb section now let's move on to the index.html and start creating this this side section okay for this we are going to use a side element html5 aside element and here we go so first of all i would like to you know remove this save it so let's create the next section so for this let's have the element oh sorry comment side sidebar end of sidebar okay so we are going to create this sidebar here in the this section let's create a section element assigning a class this is going to be category and div with a class uh container and let's have another do with class this is going to be raw let's have another div finding a class this is going to be column lg 3 uh wrapping div without any class just a wrapping div and here let's use the aside element assigning it a class this class is going to be site area and product product site and let's say side shadow we are going to use all these classes in css and let's use margin top five okay let's have a day with signing in a class and this class is going to be site title again we are going to use it in css let's have a heading 3 and the heading 3 is going to be product title okay then we have to work with another div of signing in a class this class is going to be site content site content okay unordered list sorry with a class of lists let's have a p element and let's see brands okay then after this let's have list item then input input type the type of input is going to be radio radio and area label is radio button uh radio button so button and let's have an anchor tag with nothing right now and let's say apple then i would like to go with another list item so for this i just want to copy this one hold on i just want to align it you know it's not you know yep it should be here and this should be here and i would like to copy this paste it here in place of this apple let's use rolex rolex and another here it is going to be radu then we do have another one which is going to be sql these are the watches brands and it should be samsung samsung okay then after let's have an other first of all let's say which let me show you what's going on here in the browser so we do have the different brands okay now we need the color so for the colors let's go back and let's have another list unordered list item with a class and classes same list then p element color and let's go with the list item and you know it is going to be the same so i just want to um sorry sorry sorry it shouldn't be here um let me copy this one so the list item from here to here i need to use the colors here so for the color you know i do have a alignment problem here so so so let me fix this okay so here the the title is going to be change so i should say black and let me copy this one this is going to be black leather and this would be black with red and let's say gold gold and another should be space gray okay space gray let's save it and in the browser okay so we do have the colors and product brand so i think let's let's style this section and then we will move on to the other one so here is the problem uh where is the problem list item and yes here it is in the list item and like leather and here again it should be within the list item and this is also going to be this item oops save it move on to the browser now and let's see okay now everything is fine so first of all let's try this and then we will move on to the next section here in the main dot css sorry not here let's go with the side bar sidebar section so i just need to check something which is side area okay so let's start working with the class of slide area side area is going to have a margin bottom one button bottom 30 pixels then let's use side area last child which would be which would have a margin bottom of zero pixels and [Music] there was some problem side area last child and yes this shouldn't be here experiences here okay then we have to go with the content so for this let's go with the product product side and the side content where the border border bottom is one pixel solid and the color is white not pure white but whitish then we have to work with the product side and this site content plus let me let me copy this add it here and let's say last child and here the border bottom would be zero pixels and then we have to [Music] work with the product product side and list and then let's see border top one pixel solid and here is the color so padding top would be 25 pixels [Music] margin margin sorry margin top would be 25 pixels and let's use the product site then the list and sudo element first child then we have to say that padding top would be zero margin top is also zero border top would be zero pixel [Music] solid trans parent and okay let's use the product site and list then list item where margin bottom would be my margin bottom is going to be 18 pixel and let's use the transition here so this transition is going to be 0.5 seconds okay then i would like to go with product side um then list list item and anchor tag so the font size would be 14 pixels and font weight is going to be normal and then let's use the color here and the color is going to be 6 0 6 0 0 then we have to use the position here so not inherit but relative and okay so now let's use the side shadow class so side shadow let's have a box shadow and it is going to be 0 pixel then 10 pixel again 10 pixels zero pixels and let's use some rgba where 153 and 153 and 153 and then 0.2 okay now let's use some media screen so media curates max width max max width is 991 pixels okay and and and we have to use the site title class here site title so the site title is going to have a padding left of zero and padding right would be zero two then after this let's use the site title site title uh heading 3 and margin bottom 20 pixels font size 14 pixels color would be white font weight is 600 i need to check it again okay because i forgot about the font four six and seven yeah so i was correct and 600 and then you have to use the line height so line height line height would be 40 pixels position is relative and background background is going to be four four four five four six and then padding and ten pixels 15 pixels it shows 10 pixel again and then 30 pixels okay text transform upper case save it one to the browser so here we have done and what's the problem is wrong with this then there must be something wrong within the markup so let's check this black leather let's try it save it and here we go so we have done with our this side section now we have to work with this this product section the main product section or this section in the middle okay so let's put now we are already here in the index.html let me remove this extra space and okay so you know what this the section we are going to create means this send this middle um or this body we can say the body of this page or the product main product section or with the product items they are within the sa same section uh so for this you know i just want to have after these two divs after after the aside these two divs let's have another div we are not going to create another section but we have to work within the same section okay and the column large is going to be nine and here is the error column large nine okay then we have to say have another division and this div is going to have a class of raw then another div assigning in a class this class is going to be column large 12 let's go with another day we're signing it a cliff and product top okay display flex and justify sorry justify content and between okay and align items now we would like to go with another div assigning it a class this is going to be product sec or section then the product item and heading 2 with a class of margin top and bottom 5 and let's have a title watches okay save it go on to the browser first and let's see now this one we are here okay then the next thing is the main images section are the product section so the class is going to be column large four and column small six okay then another div assigning it a class this class is going to be product chat or categories so let's have a wrapping div here and within this let's go with the image source i do have the images within within my images folder image one dot jpg and alt text and okay and then you have to go with another div assigning it a class this class is going to be product icon those the icons we are going to have the heart and the shopping cart icon let's have an unordered list here within this unordered list we should go with the list item and you know i am having some issues with alignment so let me bring it here i know this is not the right way but let me do this so and it seems i'm playing okay so enough playing uh after this um unordered list we do have a list item and then we would like to go with anchor tag and then let's have a font awesome icon here here uh we can add the product link where the this link leads us to the main product page where the product will have a description and all these things if you guys want me to create that page do let me know in the comments below i will create that one for you also so here the let's have a class and the class is going to be f e f f a heart and we would like to go with another it's not this is this f f b heart and after this let's have another list item so what i'm thinking let me place it here and now i would like to copy this or paste it here and this should be shopping cart okay so shopping cart save it then after this just for the convenience okay i don't want to make the things okay so look at the image it's such a massive image and and and here we have to work with this images image and let's let's work with with the description also so after this let's have a uh let's use a div assigning a class and this class is going to be product description with heading 5 element and let's say watch brand and then after let's have a p element with the prices and the price is going to be 1500 dollars and this should be again for the convenience save it right now just just i want to have a class here so image flight just to make it responsive okay this this one okay but i don't want this class right now here just to see and just to show you guys and just to see something i just have this here uh save it now what i'm going to do i just want to copy and paste the same um div and i want to have it in the i just want to change the images okay so here i am copying it until this copy this save it here and i know i have to use image fluid just to see um but you know it is going to be image two then let's have another image this is going to be image three another image i'm going out of alignment again four and and and image five look at this you know i'm going out of alignment so for this let me be and okay so i have fixed the alignment so here is the image five okay now first of all let's set these images uh let's style them and then later the rest of the images will add later okay so here in the main.css because here if you guys can see in the browser uh it's a mess of the images okay so i don't want to go with this let's style this first and then we have we will add some other images okay so here let's say product items i i i don't know but let's go with this and the spelling of the product is wrong product okay so first of all let's go with the media and mix width is going to be 991 pixels and here we should go with the product item the width for this is going to be 100 and i would like to use the important flag okay save it okay product item and the weight is 100 and 100 and important flag now we have to work with the product top so [Music] let's go with the product top and product not within this sorry here product top and product section so it has a heading 5 sorry okay and then let's go with the font size which is 13 pixels and let's go to 14 pixels okay and then we have to go with the font weight which would be 600 text transform capital life margin bottom zero and let's go with the product category and image so product i'm just thinking about the spellings yep product image and here i would like to set the image to 100 save it okay so here the images are set to 100 okay then uh let's go with the icon so for this the product product category and product icon product icon so let's go with the position and the position is absolute then right minus 30 pixels then let's go with the bottom which is 100 pixels visibility is hidden and opacity opacity is going to be zero let's use the transition here which is 0.5 seconds okay i would like to copy this let's paste it here and let's go with the width which is 50 pixels height is also 50 pixels um display this time i'm going to use inherit it it has to inherit from its parent and parent element and then let's have to go with the background which is zero then border radius border radius is fifty percent and line height so the line height would be 50 pixels let's go with the text alignment so text online center color would be white and margin right is 10 pixels then margin top 5 pixels okay let's use the product category over and product icon so the position here is going to be absolute then right is 11 pixels and bottom would be 100 pixels widget visibility on hover would be visible and opacity is one okay go on to the browser so when i hover over it you guys can see that it has the icons are appearing now we have to work with this title and the price so for this let's say product category and product description the text alignment is texture line is going to be center margin margin top is going to be 23 pixels now let me copy this paste it here heading 5. font size font size is going to be 16 pixels and color would be black margin bottom is 0 and let me copy the same selector paste it here and here in place of each 5 let's go with the p element where the font size is going to be 18 pixels and font weight would be 600 and then let's use the color and the color is going to be six zero oops it is going to be six zero six zero six zero and yes it's done okay okay so let's add some more images um four more images okay and then we have to add the button also so for this let me get this from here copy this paste it here and here the image is going to be image six let me show you because i want page to show it nicely okay let's have some more images so you know what i'm okay i was thinking to get a few images together so image 7 image 8 and the last one is enough image nine save it move on to the browser okay fine so we do have the images here now we need the button so everything is working nicely effects are looking good now we have to work with this button okay so for this let's go to the index.html okay so let's have a button here button button for this page after this let's have a button here i should go with this side and but for the button let's go with the div assigning it a class column lg 12 and you know that this is l12 then text is going to be setter and h ref and then we have a class here so the class is going to be product btn and the button is saying more items click save it move on to the browser let's see okay here is the button so uh let's start styling this button here let's work with the product btm class and the display is going to be inline block in line block then we have to work with the width of this button which would be 180 pixels let's work with the height and height is going to be 60 pixels then we have to work with the line height and the line height is 60 pixels too then we should work with the text align and it is center let's go with the background background is white and let's have a font size this is going to be 18 pixels let's go with let me bring it here actually my neighbor's dog is making noise so please bear with me the font rate is going to be 600 and uh let's use it to 700 okay and then let's go with the color so the color is going to be 1 e 1 e and 1 e and then we have to go with the transition so the transition is all 0.4 seconds ease in out and text transformation is going to be capitalized then we have to work with the hoover so copy this please paste it here over color is going to be white i need to use the important flag here again and background is black then we have to work with the text decoration text deck or text decoration is none and again for the smaller screens are at media the maximum width for this is 991 pixels product button [Music] product btn and height would be 50 pixels and width would be 140 pixels and then line height not style sorry line height this would be 50 pixels true save it and it's line height not list height line height okay move on to the browser and yes we have done with our product category page and if you guys want to have a full footer of course you want to have a footer add a footer according to your wish and let me show you the responsiveness of this page so everything is working nicely here let me show you this um it's also working the drop down so all those who are asking me the things um i hope that this is going to clear and this is going to help you guys so here is this is the menu okay close it product sections category when i click on it the icons are appearing and it's looking cool nice and i hope that you guys will like this project if so don't forget to hit the like button and don't forget to subscribe the channel i'll see you in the next video hasta la vista ciao

Channel: Code with Erum

Views: 3,458

Keywords: HTML 5, CSS 3, Restaurant website, construction website, coffee shop website, webdesign, how to design a website, how to develop a website, how to create restaurant website, how to create a website using bootstrap 4, how to create a ngo website, e-commerce website, how to create e-commerce website, e-commerce website using bootstrap 4, responsive website, responsive webdesign, Product category page, product category page for Ecommerce website, website product category page

Id: EQz9b8sJP6g

Length: 89min 17sec (5357 seconds)

Published: Thu Feb 11 2021