Responsive E-commerce Food Shop Website Using Bootstrap-5

hi guys welcome to my channel guys today in this video i am going to show you that how you can make this responsive ecommerce organic food shop website by just using simple html css and bootstrap so here is our website and this website is completely responsive you can see the responsiveness of this website this is very simple website that you can design in 30 to 40 minutes this is very simple and before start designing this website let me just overview this complete website so first of all here we have our navigation bar on the left side here we have our logo in the center here we have our nav links and on the right side here we have our search bar and after that here we have our main section the simple main section with the background image and one heading and after that we have our button more tips with the hover effect and after this section where we have our little section or with the iconic images and the names and after that here we have our trending section simple one heading was trending and the small heading and after that here we have four cards with the images of the product and the name of the product and after that here we have our price of this product all these product cards are same if you design one then you can copy and paste the others so you can get this result and after that here we have one click for more button with the hover effect and after this section here we have our another section simple heading welcome to our organic food society and one small heading and after that here we have three columns first of all one image and after that one small heading and after that here is our detailed paragraph and all of these three sections are same and in the end here we have our button submit button and after this section here we have our store section first of all one heading and after that one small heading and after that here we have a row of four columns having an product image inside this card and whenever we are on these cards it creates a background shadow effect the box shadow effect you can see all of these are same you can just change these images by getting this result and after that here we have on another section with the background image and the linear gradient effect on this image with the small heading and i add this font family from google phones website and after that here we have a small paragraph and in the end here we have our button with the hover effect and after this section here we have our contact us section the very simple contact us section you can see this here we have our first name our email and enter your message and after that one button and in the end here we have our next section first of all one heading join our secret society you have to put your email right here and after that here we have four columns customer care and the others and in the end here we have our social media icons facebook instagram twitter and google plus and after that here we have our copyright section this simple paragraph for the copyright and guys if you are new on my channel then please subscribe to my channel for more videos for such an awesome videos here you can learn a lot of css html and bootstrap by following by practicing my videos so okay guys before starting this website folder first of all here we have our html file one css file and this is the images that we used in our project so okay guys let's get started so okay guys before starting with the bootstrap you have to copy the started template from the getbootstrap website here you have to copy this and paste it in your html file now remove this unwanted content this unwanted links from our file and start building this project so here is our css let me take this universal tag padding 0 margin 0 and box sizing is also 0. whenever you are starting with the css you must have to take this universal tag and this properties and now let me just link the css file in our html file okay guys so first of all we are going to build this nail bar this beautiful nail bar and i take the snare bar from the get bootstrap website here you have to click on the components in the components you have to click on navbar in the nav bar here we have many types of nav bars you can copy any of one right here i am copying this one and just paste it in our html file now this is our output and now let me just customize this nav bar right here i'm removing the fluid class from the container and the bg light and the nav bar light properties and we don't want this drop down that's why we are removing this drop down right here we are going to remove this unwanted glasses and properties from this nav bar and now you can see the output and now let me just remove and add some more classes this is our navbar brand organic just copy this never brand class and paste it in our html and now here we have to design this navbar brand class first of all the font size is to rem and the color is black and whenever we are on this snare bar brand class on the logo its create an hour effect like whenever we hover on this the background the text color of this logo will be remain black after that we are going to design our nav links so copy this nav link plus and paste it in your html file right here the margin right will be 40 pixels the margin right is 10 pixel and the margin left is also 10 pixel and the color is black and the text transform is uppercase and after that we have to add the hover effect on this snail links whenever we hover on these nav links and the color of this nav links will remain black and now you can see the output right here now we are going to add one more ally and changing the name of this allies from link to trending store and contact us and now just copy this one ally and paste it again for the contact and you can see this is our output and after that let me take one search class inside this input tag because we want to design this search class in our css first of all i am taking the height is 40 pixel and the width of this search bar is 80 and the border is 60 pixels the border radius and the outline for this search bar is none and the butter will be two pixels solid red or anything that you want the rgb color that you want to use right here we are using this rgb color for the border of the search bar and after that i am going to design our button with the class of btm0 first of all the height is 40 pixel and the width is 40 percent the outline is none and the border is also none and now we are going to add the background color this rgb color for the background of this button and after that the color of the text will be white [Music] and now you can see the output let me add the border radius for this button right here let me add some padding left and right to inside this search bar padding left and right is two and now you can see the output so here is our and inside the search bar let me add margin right is minus 35 pixel because we want this button and search bar collapsed we want to collapse the search bar and button so here you can see the output and now i am going to add the phones the font family for this navbar brand for the logo this is the google font website from here you can get any type of phone family for your logo for your text so here i am copying this one [Music] we want to add this phone family for our navbar brand just copy this and paste it inside the snare bar brand and now copy this link and paste it in your html file inside the header and now you can see our output you can add any type of phone family and now we are going to design this main section with the background image and this big heading and after this snap i am taking one section the main section the section with the class of main and inside this section i am taking one container and inside this container i am taking one row and this is the column of seven and now i am going to design this main section and adding the background image first of all the background url our image and no repetition the background size is cover and the height is 100 pixel vh and the width is 100 percent and the background position you can add 50 and 50 so here is our output you can see the background image without the text without the heading and button and inside these seven columns now we are going to add our heading and this button now we are going to design this h1 in our css the phone size is 4 rem and the phone weight is 700 and the phone family we have to add the phone family right here so you can see the output we have to add some padding top inside this main section and the container and after that we have to add one button with the class of btn1 [Music] first of all the height is 45 pixel and the width is 35 percent the border is none and the outline is also none and after that we are going to add the background color that we used uh earlier for this search bar for our baytian zero we are going to add the same background color and for our btn one and after that we are going to add the text color the text color will be white and the font weight will be bold or 700 and the border radius is 60 pixels so now if we see the output here you can see our button and now we are going to add some padding top and bottom inside this container and inside this row and inside is column 7 class as well and the text will be centered and margin top for the button so here you can see this is our output but we have to add some padding top up for this heading so that let me add some padding inside this h1 tag i'm taking the class of padding top four so you can see this is our output so this is our output is looking very beautiful with the background image and now we are going to design this little section with the iconic images and the names so after this section i am taking our another section the section with the class of new and inside this section i'm taking container and also 1d with the class of row this is the grid system of the bootstrap this it's create the responsiveness for the web page i'm taking six columns and inside the sixth column i'm also taking one row and inside this row i am taking three columns of four four columns and inside that i am taking our iconic image and whenever you are using bootstrap in your whenever you are using boots image in your bootstrap you have to cop you have to use the image fluid class and after that i am taking one heading 6 and just copy and paste all of this and also change the images that you are going to use in this [Music] project guys if you want the source code then please share your email address i will send you all the source code with images and also the files and now if you see the output we get this all images inside the center and let me add the text center property so we can get the names of this uh images will in the center and after that we are going to design this trending section after this standing after this new section this is our new section after this i am taking the class of the section with the class of product with the one div with the class of container and one row and inside this row i'm taking this four columns with the column of for the large screen is three and inside that i am taking uh first of all uh before this one row i'm taking one another row for this heading and for this small heading inside this row i'm taking five columns because we want these five columns in the center we will also add the margin auto class inside this column five so this is our h6 we have to add some style some color you can use this inline css in your html file using this margin auto property inside the row instead of using inside the row you have to use this uh inside the column class so here is our output you can see our output and now let me just add some font size inside the h1 tag for the h1 because we want this h1 with the font weight of 700. and after that here comes on our another section for the row with the columns of six three three the four columns the images the product images for that i am taking one card class and inside the card we are taking the card body right here we are using the bootstrap cards and inside the card card body we are going to take one image so here is our image with the card the border of on this card you can use the butter 0 class inside this card tag and the bg light so here is our output you can see the output without the shadow the box shadow effect and now i am going to add the name of this product and the price for this product so before after this card card div i'm taking the h6 heading energy food for the name of this product and also the price for this product so you can see this our output but we want this name and the price in the center so here i'm using the text center class so you can see this is our output now you have to add some padding or margin bottom tool so here is our output and now just copy this complete columns and paste it four times so you will get this result and now just change the images you have to change the images and the name of the images you can use any type of image right here that you want but if you want the source code and the images you can email you can share your email address and i will send you all the source code and the images as well now just change all these images so here is our output you can get this result and now after this images after this row i am going to add the button in the end here we are going to add one more row and inside this row we are going to add the columns of six columns and inside that i am adding our button click for more the text will be center and the margin will be auto so we will get all the the button in the center this is the best way to get the button in the center you have to use the margin auto property right here and we also add the button one because we already designed this btn1 inside our css now let me just add some power effect on all this btn one so whenever we hover on this btn one the background color will be changed from this rgb to another color we just want this effect the hover effect on this button so you can add any type of color any color right inside this button and now we are going to add some transition whenever we are on this and which changes background color in the specific time we add 0.5 seconds and now we are going to add the box shadow the box shadow on this boxes on this cards this is the website you can use for shadow generation this is the automatic box shadow generator you can use in your project so just copy this and paste it inside the cards the card class whenever we hover on this card on the cards it's create the box shadow effect so you can use you can see the output and now let me just add some transition we want the smooth effect on this uh cards because whenever we hover on these cards it's generate the box shadow effect in the specific time so this is our product section the trending section and now after that i am going to add one another section with the class of about so this is our another section that we are going to design in this section and as usual you have to add one container and one row and inside this row you have to decide how many columns you want how many columns you need so just copy this h6 because we add some css inside this h6 heading add the margin auto class because we want all this heading and the small heading and the big heading in the center we want all this content in the center whenever you are want to uh uh put all the content in the center you have to add margin auto property and after this row i'm taking one another row with the class of row and the four columns you have to add the image and inside these four columns i am taking one image so this is our image and after that we have to add this heading the h5 and after that our detailed paragraph you have to copy this and paste it inside this p tag you can use any type of heading and paragraph in your project so if you see the output so here you can see the output there is no padding and margin between this heading and the image so we have to add some margin bottom three because we want some uh distance between this image and the heading and now just copy all these four columns and paste it three times because we want this three times with the three images now you can change the images and use any type of image or use one image by using different type of images you can see this is looking very beautiful so this is our about section that we design and after that uh here we have to add some distance some padding and margin between this image row and the heading row so now if we see let me add this d right here and now if you see the output so here you can see we have some good padding and margin between this image row and the heading now you have to copy this row the button row and paste it after this row because we already had this btm one and you can see this uh just change the label of this button because we already designed this btn one in our css for another section you just have to copy and paste this row the complete row and add some padding top and bottom so here is our output and now we are going to design this store section we already designed these cards with the different images for that i am taking another section after this section the section with the glass of shop and as usual that we use uh in another section the container the div with the class of container and after that you have to copy this complete row for the heading for the small heading and the big heading for this and add copy and paste this heading inside that by changing this heading so you will get the specific result that you want you can use any type of heading and paragraphs right here this is the organic food shop website so you can use any type of heading related to food and online shopping and after this row for after this heading row we are going to add our cards for that let me just copy this complete row with the columns of four four we use inside this row we use four columns inside this row so just copy and paste the previous row and you will get this same result as you have so here you can see the result let me show you the result this is uh so here is our output we want this type of output with the box shadow we already add the box shadow on these cards so here you can see and now we are going to just uh if you want to change the images i have limited images that's why i use just four images in this trending and this store section you can use multiple images different images and you can get all the images from the pixobay.com and pixel.com and the freepik.com so here is our another section and now we are going to add our another section we are going to design our next section the section with the glass of apple the section that the girl having an apple in the hand for that i am taking one apple pass and one container and inside this container i am taking one row first of all right inside this column let's just copy this heading and paste it inside the h1 tag and after that we also want the small heading [Music] so now if you see the output so this is our output without the image the background image you can remove this uh style uh properties from the h6 because we don't want the background color for the text and you can use the front weight for inside this h1 tag the portrait property the point weight class inside this h1 tag and after this h6 we have to wrap the button with the class of btn1 because uh in this ptn one we already designed this btn one in our css so we don't have to design a technique in our css and after that we have to add some padding and top inside this row and container and the text will be white inside the section for all the containers the text will be worked and now we are going to add the background image for that i am taking the class of apple just copy this apple class and now the background the background url you can use any type of image right here i am just using this image and with the repetition is none no repetition and the background size will be covered and as usual the height will be 80 vh you can use 100vh or 70vh and the width will always be hundred percent now we are going to add the background linear effect so here is our output you can see the output without the linear effect this heading is not visible that's why we are going to add the linear gradient effect linear gradient before the url and opening and closing tags and the comma inside this linear gradient and the url right here we have to add the rgb color now you can see the output this is looking very beautiful and the heading is also visible and after that we have to copy this font family and use inside this uh apple h1 tag so here you can see this output with the phone family of different family and after that you can see the button that we already designed the button one and after that we are going to design this contactor section after this section i am going to design i am going to add this contactor section after this section first of all i am taking one section with the glass of contact and after that one more div with the glass of container make sure that you are using a correct spelling for the container and for the section and after that you do with the class of row and one class with the column of five and inside that i'm using h one for contact us and this heading six with the color of uh right so let me just copy this heading that 6 and paste it right here and after that now if we see the output and after this row we are going to add another row for the contact for the input sections that we have for the name and for the emails [Music] and inside this row i'm taking one class of nine columns and inside this nine columns i'm taking one more row and inside this row i am taking one class of four columns inside that we want this heading and this paragraph for the address the location and after that the location heading and we are going to add the paragraph for the location the new york or where are you living you can add anytime any address and after that the phone the phone number you can use anything we are going to add this phone number and after that i am taking one more column for the column of 6 for the email let me just copy this heading 6 the email and after that you can use any type of email of your email this is my email that i used inside this tag so now if you refresh the output you will get the same result because right here we are want to add some padding top and bottom for this class so here is you can see the output this is not looking good that's why we have to add some changes and now if you see the output so here is our output you can see the output just add margin auto class inside these five columns and the text load is centered so here is our output you can see the output now it's looking uh kind of good and after this nine columns the four columns i am going to add seven columns [Music] for the input section for the email and for the name and inside this in seven columns i am taking one row because we want uh this uh input for the name and for the email [Music] the sixth column for the input section of first name the class of form control and bg light whenever using input in the bootstrap you must have to use the form control class inside this input tag [Music] and after this row i'm taking one another row for that for the message for the text area after this row i am taking another row with the columns of 12 for the large screen also using the form control class and the pg the background of this input section for this text area will be live this is our last name the placeholder with the last name and the first name we are going to add the placeholder inside this text area for enter your message so here is our output you can see the output you want some margin between these columns so here you can see the output it's looking more than more beautiful than our previous one that we already designed and after that we are going to design this uh secret newslister section the footer section the section with the class of contact the section with a glass of news and one container and one row inside this row i am taking the columns of five four nine nine columns and inside that i am taking this join rc review society heading one and after that we want the input section the placeholder and after that the button the white background button the dtm2 because your design is btm2 in our css so here is our output we are going to design this input section and the button the submit button in our css let me add the background color for this new section the background color will be black and the color of the text will be white for all this section and now we are going to design this btn tone so here is our output the button and we are going to design our input section news to the class of news and the input inside this news class so this is our output you can see this output with the heading and the button and the input section and after this row i'm taking one another row with the column of three three because we want these four columns and inside this row inside this row i'm taking 11 columns because inside this 11 we want this row because we want this fourth columns in the centered and inside this row i'm taking the class of column 3 now just copy all this content and paste it in this hatch heading and the p tags and this is the output you can see but we want we don't want the padding the margin between this heading we have to add the margin 0 so you can see the output and now just copy and paste and change the content and if you see the output and in the last column we have to add the social medias social media icons and copy this uh link i get this link from the font awesome website i'm using font awesome for the icons from the front awesome you can get any type of icon for your project whenever you are signing on the phone person they will send you the link in the form of kit you have you must have always have to you always have to add the link inside the html tag inside the html file inside the heading tag and after that you have to copy the icons and now let me just add padding bottom three inside all these columns all these heading and now if you see the output so here is our icon very small size very font size is very small now we are going to add the font font size for these icons just taking the first class that maybe the font size is 2.5 rem and the cursor whenever we cursor on this icons it's create the pointer effect on that so here is our icons that we used in this uh section from the font awesome website and now after that i'm going to add the footer the paragraph the copyright footer section for that i am taking one hr tag for the line and just pasting this paragraph inside the p tag after this all rows let me add the text center properties so here you can see the outputs and this is all the website that we design and this is completely responsive you can see the responsiveness of this website and now we are going to add this uh toggle button and i'm going to add this toggle icon from the font awesome here i am going to add one icon the burger icon the three lines the toggle button icon the hamburger icon inside this iconic toggler the hamburger so much make sure you are using the correct spelling so here you can see the output and we also have to add some phone size for this icon as well the phone size is 2.5 rem and after that if you refresh you can see the output so this website is completely responsive you can use uh on your tablet mobile or any type of touch screen you can see this website is completely responsive okay guys for now this is all that we design this website and if you want more videos from our from our channel you can visit my channel and practice all the other website designing videos thank you guys thanks for watching and please subscribe to my channel

Channel: Pro Web

Views: 43,552

Keywords: ecommerce website design, how to make ecommerce website, web development, web design, html and css ecommerce website design, ecommerce website design using html and css, build ecommerce website, html css javascript, html css javascript project, html css website design tutorial, bootstrap, bootstrap tutorial for beginners, front end design tutorial, html css website, html css full course, responsive website, ecommerce website, food website wordpress

Id: CxXogNTXJCs

Length: 44min 28sec (2668 seconds)

Published: Fri Apr 09 2021