Create Amazon Clone Using HTML, CSS and JavaScript | Frontend Project For Beginners

hi guys welcome back to another video of creat Stack today in this video we are going to create Amazon clone website using HTML CSS and very simple JavaScript so let's see the website overview that we are going to create in this tutorial so here we have the Amazon clone website where you can see the navigation bar with One logo search bar cart icon and other links after that we have the submenu where you can see these menu links after that here we have the image slider we will click on these Aro icon so it will change the background image so this is one image slider after this slider we have some cards that display some products category here also we have four cards then we have some products in this row and these products are a scroll level when we scroll it you can see we can see more products so we can scroll these products using the mouse wheel so this is horizontally a scroll product list after that again we have some cards here with different product category and now again we have the products with product detail like price text and here also we can scroll the list we can use the mouse scroll wheel to scroll these products and we will see more products now let's scroll down and again we have some products and here we have the card and at the bottom we have the Amazon logo and copyright message now let's scroll up and uh we will open any product so here we have this product let's click on this product image and it will open the product detail page where you can see the product main image and product title then price then product variant and these are the product description in the right side you can see the delivery option and add to cart button at the bottom you can see some recommended products and now we will see the card page so here in the top right side we have the cart icon let's click here so it will open the cart page page on this cart page you can see two products with the product image title delivery time here we have the price and in the right side you can see this proceed to checkout button after that we have built the signin and sign up page so here we have the link signin let's click here so it will open the signin page on this signin field we have one input field to enter the email ID or phone number and continue button or you you can go to this page create your Amazon account we will click on this button and it will open the sign up page where it is asking for the name mobile number or email ID and password we can click on this logo so it will take you to the homepage so this was the overview of the project and we will start building this project but before starting I request you to watch this tutorial till the end and build this project by by yourself once you complete it do share the project preview video on LinkedIn and tag greatest stack so that we will review your project and feature it on our LinkedIn page now let's start creating this Amazon clone here I have created one folder with the name Amazon clone in this folder I have one folder with the name assets and in this assets folder I have some images and icons that I will be using on this web page you can find all these images download link in the video description now let's open this folder with the vs code editor you can use any code editor now this Amazon clone folder is open in this vs code editor here we will click on this icon and create a new file and write the file name index.html and in this file we will use exclamation tag then tab so it will create the basic HTML structure after that here we will click on this new file icon and we will type the file name style. CSS so it will create a new file style. CSS next we have to connect this CSS file with the HTML file so in this HTML file before closing of this head tag here we will add link real style seat and HF style. CSS so it will connect the HTML file with the CSS file here we have the title so let's change this title I will add Amazon clone by greatest stack after adding this we will right click here and select open with live server you need to install the live server extension in vs code so you will get this option so let's click here so it will open this web page in our web browser so you can see here we have the title Amazon clone by greatest Tack and this web page is completely blank now let me open the official Amazon website so so you can see on this official Amazon website we have the navigation bar where we have the logo then this text deliv to then we have the search box then we have the option to select the language and then signin link then return order then cart button so we will create this navigation bar so let's come back to the code file here within this body first we will create one nav tag and in this nav we will add One logo so we will use the IMG tag and in this IMG tag we have to provide the file path of our logo so let's open the folder you can see in this folder we have the assets folder and within this assets folder we have the file name Amazon logo.png so we will link this image with our HTML page so let's come back and and here we'll provide the file path so just add do/ assets and here we will use Amazon logo.png now for this image we will provide one width so we will add width 100 after adding this let's come back to the web page and you can see here we have this logo which is not clearly visible because the logo text is white and background is also white so we have to provide the color for this navigation bar so let's come back and we will add the CSS for this nav but before adding the CSS for this nav tag we will add some CSS properties for the complete web page so in this CSS file here we will add as Trix it will select all the HTML elements of this web page here we will add the p adding zero then margin zero box sizing will be border box then we will add the font family to change the font we will use the Google fonts so let's open Google fonts and here we will search for one font that is outfit in this search box we will search outfit click here and now we will click here on 400 500 600 7 800 and here we have the import let's click here and we will get this link just copy this one and come back to the CSS file and we will paste it here at the top of this CSS file so we have added this Google fonts import link and now we can use the font family so in this font family we will use the font that we have imported that is outfit so these CSS properties will be applicable for all the HTML elements after that we will add the body tag so for the complete body we will change the background color so in this body we will add this background color and after that we will add the CSS properties for all the ankle text so in this a tag we will add text decoration that will be none and color inherit so we have added some default CSS properties for complete web page now we will add the CSS property for this nav tag so here we will add this nav tag and in this nav tag we will add display Flex so all the elements in this nav bar will be aligned horizontally here we will add align items Center and justify content will be space between then we will add the background to change the background color of this navigation bar so this is the background color code then we will add some padding that is 10 pixel from top and bottom and 20 pixel from left and right side and here we will add color white that will be the text color inside the navigation bar after adding this come back to the web page and here you can see we have this background color in this navigation bar and you can see the logo is clearly visible next we have to make this logo clickable so that when we click on this logo it will take us to the homepage so let's come back and in this HTML file we will add this IMG tag inside one a tag so let's add a tag hdf in this hdf we will just add slash so it will take you to the homepage and place this IMG tag within this a like this so we have added this image tag within this a tag now this logo is clickable we can click here and it will take us to the homepage now after this logo we have to add this text that is deliver to and the country name and one location icon for that let's come back and after this a tag we will create one div with the class name nav country and in this nap country we have to add one location icon so we will add image tag and here we have to provide the image file path so we will add do/ assets SL location icon do PNG and here we will provide the height 20 now in this nap country we have to add two text so we will add one div and within this div we will add the first text in P tag deliv two after that we will add another text in the H1 tag so in this one we will add the country name let's add United Kingdom after adding this come back to the web page and here we have the icon deliver to and United Kingdom in the right side so we have to add the CSS properties for this text so let's come back and we will copy this nav country class name and we will provide the CSS for this so write it here in the CSS file with the dot because it is a class name I want this icon in the left side and in the right side we will add to text so we have to add display Flex here we'll add display Flex so that icon will be in the left side and text in the right side align items and so the icon will be at the bottom here we will add the margin from the left side let's add 15 pixel then we will add the font size it will be 13 pixel and here we will add the color so so we will add this color code and you can see here we have the icon in the left side and the icon is at the bottom and here we have the different color but I want to change the color of this text which is the country name and we will increase the font size also so let's come back and in this nav country we have added the country name in H1 tag so for this H1 tag we will add the color white and we will change the font size so it will be 14 pixel so you can see this text in white color now we have to add this search bar so let's come back to the HTML file and here we have the closing div for this nav country so after that we will create another div with the class class name nav search and in this nav search first we will create one div that will contain the text all and this drop down icon so here we will create one div with the class name nav search category and in this one we will add the text that is all and after this text we will add one icon so we will add the IMG tag and here we will provide the file path it will be in the assets folder and the file name will be dropdown icon.png and here we have to provide the height that will be 12 so after adding this let's come back to the web page and here you can see we have the text all and this drop icon now let's come back and after this closing div for this nav search category here we will add one input field so we will add the input tag and the type will be text and for this one we will add one class name so let's add the class name nav search input and after that we will add the placeholder so in this placeholder we will provide one text that is search Amazon that's it and after that we will add one more icon so here we will add IMG tag tag and we will provide the file path it will be in the assets folder and it is search icon.png and with this search icon we will provide one class name and the class name will be nav search icon so we have added this class name now let's come back to the web page and see here we have the text all then drop- down icon then input field and one search icon now we have to align all these things so we will add the CSS properties so just come back and copy this class name nav search add it here in this CSS file with a DOT so for this nav search we will use flex one so this Flex one will use the entire space available in this row then we will add display Flex align items Center and we will add the background white after that we will add color and here we will use gray now let's add the maximum width of this search bar so the maximum width will be 1,000 pixel and after that we will add the Border radius it will be 4 pixel then we will add the margin from the left side that is 15 pixel so after updating these CSS properties you can see here we have this white box which is the search box and in this one we have the input field and this search icon now let's come back and here we have the class name nav search category so we will add the CSS properties for this one so write this class name name here and here we will add display Flex align item Center then padding then Gap it will be 5 pixel then we will add the background and after that we will add the Border radius after adding this you can see here we have this gray color of box where we have the text all and this drop- down icon after that we will add the CSS properties for this input field so let's come back and here you can see we have the class name nav search input so let's use this class name here in this CSS file and for this nav search input we will add border none outline none then padding from the left side and width will be 100% after that you can see we have the search icon so let's copy this class name nav search icon write it here and for the search icon let's add the maximum width it will be 41 pixel then padding will be 8 pixel and we will change the background here we will add this background color code and after that we will add the border so the Border will be 0 4 pixel 4 pixel and zero we have added added border so it will be border radius come back to the web page now you can see this complete search box is looking great next we have to add this language text where we have to add one icon and one text and one drop down icon so let's come back and in this HTML file after closing of this div which is for the nav search here we will create another div and the class name will be nav language now in this one first we will add one image so we'll use the IMG tag write the file path it will be flag.png then we will add the width so the width will be 25 pixel and after that we will add one text so in this one we will add en n and again we need one more image so we will add the file path and here we will add drop- down icon and for this icon let's add the width of 8 pixel save the changes and come back to the web page so here you can see we have the flag icon then text and this drop down icon next we have to align these content so let's come back and we will add the CSS properties for this nav language use this class name here in this CSS file and for this one let's add display Flex align item Center and Gap will be 2 pixel then we will add the font weight so the font weight will be 600 and margin from the left side that is 15 pixel after that come back to the web page you can see the alignment for this flag and text is perfect now again come back to the official website of Amazon here you can see we have some text so we will use another div to add these text so let's come back to the HTML file and after closing of this nav language div here we will create another div with the class name nav text now in this div we will add one text in P tag and the text will be hello sign in and after that we will add one H1 tag and in this H1 tag we will add account and list then we will add one image tag inside this H1 tag so before closing of this H1 tag here we will add IMG and provide the file path so the this will be dropdown icon.png and we will provide the width it will be 8 pixel after adding this we will come back to the web page you can see here we have this text hello signin and account and list then drop down icon next we will add the CSS properties for these text so let's come come back and copy this class name nav text write it here in the CSS file and for this nav text let's add margin from the left side 15 pixel and in this one we have the P tag so let's add nav text P and we will decrease the font size it will be 10 pixel then we have the H1 tag also so write this class name then H1 and for this H1 we will set the font size 14 pixel save the changes now the size for this text is perfect next we need some other text that is return and orders so again come back to the HTML file and here we will duplicate at this div and in this one we will update the text it will be returned and this will be end orders and we will remove this image save the changes come back to the web page and here you can see another text return and orders after that let's come back to the official website of Amazon and here you can see at the top right side of this navigation bar we have the cart icon and text cart so we will add this one so let's come back to the HTML file and after closing of this div here we will add one a tag and in this a tag we will add class name so the class name will be NAB cart and in this one we will add the IMG tag and in this image we will add the file path of the image so it is in the assets folder then cart icon PNG and we will provide the width it will be 35 pixel and after that we have to add the text also so we will add the text in H4 tag and the text is cart after adding this we will come back to the web page you can see we have the cart icon and text but the alignment is not looking good so we will add the CSS properties so use the this class name nav cart and come to the CSS file here we will add do nav cart in this nav cart we will add display Flex align items Center then margin 0 pixel and 15 pixel save the changes and come back to the web page so you can see the size for this cart icon and text is perfect and the space is also perfect so now we have completed the navigation bar of our Amazon clone website next we will create the submenu so let's come back to the HTML file and here after closing of this nav tag we will add some space and let's add one div with the class name nav bottom in this nav bottom we will add one div and in this DP we will add one IMG tag provide the file path it will be menu icon.png we will provide the width 25 pixel and then we will add some text so here we will add text in P tag it will be all let's come back to the web page you can see here we have the menu icon and text all let's see the official website you can see we have the text all and this menu icon then we have some other menu links and we have to change the background also for this submenu so let's come back and here we have the NAB bottom just copy this come to the CSS file and here we will add the CSS properties for this NAB bot bottom so for this naap bottom we will provide display Flex align item Center then Gap 20 pixel then padding and after that we will provide the background in this background we will add this color code and after that we will add the color white that will be the text color and we will decrease the font size it will be 15 pixel now you can see we have the background color for this submenu next we have to add the CSS for these icon and text that is all we have to align this icon and text in the same horizontal line so let's come back and we will use this div that is inside this nav bottom so in this nav bottom we have one div so just add div tag and here we will use display Flex align item Center and here we will add the gap of 5 pixel which is very small then we will add the font weight 500 now you can see alignment for this menu icon and this all is looking good after that we have to add some other links here in this Sub menu so let's come back and here after this div we will simply add the text in P tag so we'll add today's deal let's duplicate it and we will update the text it will be customer service then it will be registry then the next one will be gift cards duplicate it and the last one will be cell after adding this come back to the web page and you can see we have all the text here now this submenu is also complete next we have to create the slider on this web page so let's come back to the HTML file and after closing of this div which is nav bottom here we will create another div with the class name header slider in this header slider we will add ul and in this UL we will add the images with the IMG tag we will provide the file path of the image in this one we will provide the class name also so let's add the class name it will be header IMG so this is the first image let's duplicate it and we will update the file name it will be header 2 3 4 5 6 so total we have six images in this header slider now we will come back to the web page here you can see the first image if we scroll down here we have the second image then third and we have total six images next we have to add the CSS properties so we will come back and copy this class name header slider in this CSS file we will provide this class name header slider and in this one we have the UL tag so so we will add that ul and here we will add display Flex overflow y it will be hidden when we add this let's come back to the web page so right now we have only one image and if we scroll it horizontally using the shift and mouse wheel you can see the second image is coming from here now this is the third image now all the images are aligned horizontally now let's come back now we have to provide the width for this image so we will use this class name header IMG add it here and for this image we will provide the max width it will be 100% so here we have the first image with 100% width this is the second image with 100% width next we have to add two control icons so let's come back in this HTML file before this UL here we will add one a tag and in this a tag let's add the class name this will be control previous and there will be one more link that is control next in this one we have to provide the previous and next Arrow icon to add the icon we will come back to the Google and search for Arrow icon HTML code open this website site and here you can see we have different icons and their HTML code you can use these HTML code to add the icon on your web page so let's come back to the HTML file and here we will add the icon code so this is for the previous icon and this is for the next icon after adding this we will come back to the web page you can see here we have two icons previous and next next we have to change the position of these icons and we will add the size and background so let's come back and here we have the class name header slider so use this class name here header slider then a tag so for this a we will provide the position absolute then top will be 20% Then Z index it will be one after that we will add the padding five viewport height and one viewport width then we will provide the background in this background we will provide this color code after that we will provide the color then we will add the text decoration none then we will add the font weight 600 and font size will be 18 pixel cursor pointer after adding this come back to the web page again here we have these icons and both icons are overlapping each other so we have to Prov provide the different position for the second icon let's come back and here we have the class name control next copy this add it here for this control next we will add right zero so this icon will be in the right side you can see it is in the right side and this back icon in the left side next we have to add one layer over this image so let's come back and here we have the header IMG in this one we will add mask image it will be linear gradient to bottom then we will provide the color code 50% comma then transparent 100% after adding this come back to the web page so you can see here we have one gradient layer on this image right now all these images are displayed horizontally so we have to hide other images it should display only one image so we will use the JavaScript so let's come back and here we will create a new file so click on this icon and create a new file a script.js so we have created one script.js file where we will add our JavaScript code now we have to connect this a script file with our HTML file so in this HTML file Above This closing body tag we will use a script SRC and in this one we will provide the file path that is is a script.js that's it now this HTML file and a script file are connected so let's come back to this script.js file here we have to select the slider where we will hide the other images and display only one image to select the slider we will use this hter slider then UL then IMG so so here we will add const images and we will use document. Query selected all so it will select all the images and here we have to provide the class name which is header slider write it here then we will provide UL then IMG so it will select all the images inside this UL so this images will contain one aray that stores all the image elements next we have to select the control buttons so here we have the control previous and control next so let's come back to the script file duplicate this line here we will add PR button and provide this class name here duplicate it it will be next button this will be control next so we have selected the images previous button and next button now we will add one variable let N is equal to Z it means we are on the first image when n is zero it should display the first image here we will create one function and the function name will be change slide and in this one we have to hide all the images so we will use the for Loop let's add I I less than equal to this images dot length and here we will add i++ now what will happen it will select each images and make it display none so we have to add images and provide the the index here we have to provide style do display equal to none and we have to call this function so simply add it here now what will happen it will remove all the images from the web page you can see here we don't have any image we just have the back button and next button but we have to display the first image so after closing of this for Loop here again add this and here we will provide n when the N is zero it should display first image so we will add image in style. display block when it is block it will be visible so what this function is doing it is first selecting all all the images and adding the style property none so all images will be hidden then it is selecting the first image when the N is zero it will select the first image when the N is one it will select the second image so it is selecting the particular image and adding the CSS properties display block so the particular image will be visible now if I come back you can see the first image is visible here if I change in one like this you can see the second image is visual let's come back if I add two the third image will be visible right now let's come back and make it zero next we have to add the JavaScript for the previous and next button when we will click on the previous button it will decrease the value of this in and when we will click on the the next button it will increase the value of this n so when the value of n will be changing it will change the image also so first We'll add the on click on the previous button so let's select this add it here previous button do add event listener and here we will provide the event name click then we will create the Aro function and in this Aro function we will add event e and here it will check if the N value is greater than zero then what will happen it will decrease the value of n by one so simply add n minus minus so it will decrease the value of n by 1 then we will add the else condition if n is is not greater than zero then what will happen it will change the value of n to images do length minus one so when we click on the back button and we are on the first image so it will directly display the last image using this images length minus one so after updating the value of n we have to execute this change slide so let's copy this and paste it here so it will call this function and it will update the image also so let's come back and if I click on this back button this image is not changing so let's come back here we have added quy selected all but here we have only one back button one next button so we will use Query selector we have to select only one element else it will store one aray now it will store only one element in the previous button and next button quy selected that's it update the changes and now again come back to the web page and click on this back button you can see the image is changing right now if I click on the next button it is not working so we have to add the JavaScript for the next button also so let's come back and duplicate this code we have duplicated this code for the previous button and we will update the variable it will be next BTN then same event listener it will be add event listener click and here we will check if n is less than n is less than this image do length minus one if it is less than this then what will happen it should increase the value by plus 1 so we will add n++ so it will increase the value of n by 1 and when this condition is false it will change the value of n to zero that's it then it will call this change slide function save the changes and come back to the web page now you can see if I click on the next button it is changing the image so this next and previous button is working fine it is updating the image in this image slider after completing this image slider let's come back to the official Amazon website you can see after this image slider here we have one row and in this row we have four cards where we have the images One title and one link to create this one let's come back to our vs code editor we will open the HTML file and here after closing of this div which is for the header slider here we will create another div with the class name Box Row and in this row there will be four columns so we will create another div with the class name box column or we will add box call like this in this one we will add one text in S3 tag so this is the text then we will add the image so we will provide the IMG tag and file path of the image it will be box one 1. jpg then we will provide one a tag so here we will add a and here we will add the link text that is sop mode so we have added the content for the first card this is box call now just duplicate this this is the second third and fourth card next we will update the images it is 2 3 and 4 then we will update the text for the second one then then for the third one now for the fourth one so we have added different text and different image let's come back to the web page and here you can see we have the first image text and so more link so we have total four Images next we have to provide the CSS for these content so let's come back and we will use this class name Box Row add it here in this CSS file so for this box row we will add display Flex Flex wrap wrap then row Gap will be 20 pixel justify content space between and then we will add the margin 20 pixel and 30 pixel after that we have to add the CSS for this columns so use this class name write it here in the CSS file and for these columns we will add display Flex Flex direction will be column then gap of 10 pixel then we will add some padding then we will add the background it will be white after that we will add the maximum width so the max width will be 24% then we will add the Min width that is 200 pixel after adding this come back to the web page you can see all these cards are aligned horizontally next we have to add the CSS for these links which is sof mode so for this one let's come back and here we will add box call then a tag so for this a we will add font size 13 pixel then we will add the color this color code then we will add the font weight now the color for these links looks good next we have to move this content up so that it will overlap the slider image so let's come back and here we will add one more class name in this box row let's add one more class name that is header box and for this one we add the margin from the top so just copy this class name add it here and here we will add margin top minus 20 bport width that's it after adding this come back to the web page you can see these images are overlapping this slider but here you can see these cards are not clearly visible because of the overlay color so here we will come back and and in this column we will add Z index 1 now you can see it looks good so now we have created this row now will come back to the official Amazon website you can see again we have the same row so we will duplicate it so let's come back to the HTML file and here we will duplicate this div it is starting from here let's copy it and paste it again now we will update the image and text so first we will add image it will be box two two and two then we will update the text this is Fashion Mart then next one is Pets food then latest devices and the next one is grooming products after adding this let's come back to the web page again and here you can see both row are overlapping each other so let's come back and just remove this class name you can see in the first one we have added header box so in this second one remove this header box there will be only one class name Box Row that's it save the changes now you can see it is looking great here we have the first row with four columns then again second row with four columns let's come back to the Amazon website again you can see here we have some products and these products are a scroll level you can use this horizontal scroller to see more products so here we will add some product and we can scroll this product using the mouse wheel so let's come back and come back to the HTML file after closing off this div here let's add some space and here we will add add one div with the class name product slider now in this product slider first we will add one text in S2 tag so let me add this text best seller in Sports and Outdoors after that we will add another D with the class name products so we have added one div with the class name products and in this one we will add some product images so we will add IMG tag then we will add file path of the image so let's add product 1. jpg let's duplicate it and total we will add 10 products to 3 4 5 6 7 8 9 and duplicate it it will be 10 so we have added 10 products here now let's come back to the web page and you can see we have all these products here that is is very big so we have to add the CSS properties so just come back copy this class name product slider come back to the CSS file and here we will add the CSS for this product slider so here let's add the background this background will be white then we will add the margin it will be 0 and 30 pixel then we will add the padding that will be 20 pixel then we will add margin from the bottom it is 15 pixel and in this product slider you can see we have added one div with the class name products so let's come back and here we will add that product slider then we'll add dot products so for these products let's add display Flex overflow X it will be Auto then Gap it will be 20 pixel then margin from the top 10 pixel after that we will add the same class name then we will add the IMG tag so for this image we will add the maximum width it will be 200 pixel then maximum height it will be 200 now you can see these products are aligned horizontally and the size is also perfect we can use this horizontal slider to see all the products but we will hide this a scroll word and we can scroll this product using the mouse wheel that we will create using JavaScript so to hide this a scroll bar we will come back and here let's add this class name and here let's add web kit scroll bar just add display none this horizontal scroll bar is hidden now we cannot scroll these products we can use shift to scroll this like this using shift and rotate the mouse wheel but I want to scroll these product by simply using the mouse wheel for that we will use the JavaScript so let's come back and here in this a script file we will add const and let's add scroll container equal to document dot query selector all and in this one we have to provide this class name which is products just copy it and paste it here do products that's it now it will select all the div with this class name we will create other div also using this class name where we can scroll the product using the mouse wheel that's why we are using quy selected all now after selecting the element we have to apply the JavaScript so that it will remove the default feature when we scroll the mouse wheel and it will scroll the elements horizontally so here we will use the for Loop because we are using qu selector all that will store the array so let's copy this add it here and from this one we will get the individual element so let's name it as item and from this item we will add add event listener and here we will add the event that is wheel then here we will add the event then let's add the Aro function and here first we have to remove the default feature so we will add event dot prevent default that's it and after that we'll add item do scroll left plus equal to event Dot Delta y after adding this save the changes and let's come back to the web page if I rotate the mouse wheel on this image you can see these products are scrolling horizontally so we have created this part also after that let's come back to the official Amazon website and here you can see after this section again we have this row with four columns so we will duplicate that row let's come back and here we have this row here Box Row just copy this and paste it after this product slider and here we will update the text and image so let me update the text it will be stationary then the second one will be laptop for study then the third one will be office chairs then the next one is gaming monitor here we will update the image also it will be 31 32 33 and 34 save the changes come back to the web page and here you can see after this product slider we have one row with four Images now let's come back to the official website and here you can see we have one row with product slider this is also a slider and here we have the product image price text and discount tag so we will create this section so just come back to the HTML file and and after closing of this box row let's add some space and here we will create one div with the class name product slider with price because we have already created the product slider so this time we are creating product slider with price in this one we will add one text in h2 tag so let me add this text text deal under $25 then we will add this div with the class name products we are using the same class name products that we have used earlier in this products we will add one more div with the class name product card in this product card there will be product image then deal tag then price and then product description so first we have to display the product image so we will use one div with the class name product IMG container and in this product IMG container we will add the image write the image file path it will be product 21. jpg now after this div we will add another div with the class name product offer in this product offer we will display the text in P tag that is 27% off then another text so we will add span tag and in this aspan we will add deal after this div we will add one P tag and in this P tag we will add dollar then Span in this aspan we will add the price and after that we will add the list price and here we will add another text in H4 let's add this text and for this P tag we will add a class name also so let me add the class name it will be product price so now we have added all the content for the single product that is product image then discount then price and some text let's come back to the web page here you can see we have this main title this product image then this discount then price and this description now similarly we will add other product so just duplicate it we have the product card so we will duplicate this product card that's it so let me duplicate it so total we have added 11 products now let's come back to the web page you can see here we have all the products which is coming in the vertical alignment so we have to fix the alignment for these products so just come back and we will copy this class name which is product slider with price just copy this come back to the CSS file and here we will add this class name product slider with price in this one we will add the background that is white then we will add the margin 0 and 30 pixel then we will add the padding it will be 20 pixel after that we will add the margin from the bottom so it will be 15 pixel in this one also we have one class name that is products so let's add that class name products and here we will add display Flex overflow X Auto then Gap will be 10 pixel and we will add the margin top 10 pixel after adding this you can see these products are displayed horizontally still we have to change the size of these product image and we have to add CSS properties for these offer text price and description then we have to hide this scroll bar so let's come back here we will add this class name and then add column webkit scroll bar and it will be display none so that horizontal scroll bar will be hidden after that we will use the class name product card just copy this add it here so for this product card we will add display Flex then Flex direction will be column then justify content end after that we will add Min width 210 pixel then we will add the background this color code after that we have to decrease the size of the product image so use this class name then write IMG and here we will decrease the size it will be with 110 pixel then we will provide the margin 0 and 50 pixel you can see the size for these product image is good and you can see we can scroll these products using the mouse wheel like this now just come back and here we will add the CSS properties for these text which is the product offer text then price and this description so let's come back to the CSS file here we will add class name product offer then P tag so for this one we will add the background in this background we will add this color code after that we will add the color the color will be white then we will add display will be inline block then let's add the padding of 2 pixel and 5 pixel then border radius will be 2 pixel and margin 8 pixel and zero then we will decrease the font size 13 pixel now in this product offer we have one span tag so let's add this product offer and span tag so for this span we will change the color this will be the color code after that we will add the font weight 500 and font size 12 pixel after updating this come back to the web page you can see this red background for for this 27% discount and this deal after that let's come back here we have the class name product price so we will add the CSS properties for this product price write this class name here and here we will add color gray then we will add the font size 13 pixel then we have this H4 tag so let's add product card H4 so for this H4 just change the color it will be this color code then we will add the font size 15 pixel then font weight 400 and save the changes you can see this Complete product slider with text is looking great we can slide these product using Mouse wheel now again come back and here you can see we have the same product row with different images in four column and we have some other product that is the product slider without the title and description so we will add these two columns also so let's come back to the HTML file here above this a script tag we will add the product so let's scroll up where we have created the product slider here we have the product slider so just copy this one and come here paste it and here we will update the product images and we will update the title also so it will be displayed again you can see on the web page again we have these product and we can scroll these product after this we will add one more row like this where we will have the four columns so just come back and let's copy this one that is Box Row just copy this and paste it at the bottom before this script and here we will update the images so let me update the image after updating it let's come back to the web page and at the bottom you can see again we have one row with four columns next we will create the footer of of this website so let's come back here above this script we will add one footer tag and in this footer tag we will add the IMG and provide the file path it will be in the assets folder and here we will add the Amazon logo.png and we will add the width so the width will be 100 after that we will add one copyright text in P tag so let's add this text and after adding this come back to the web page you can see at the bottom we have this Amazon logo and this text next we have to add the CSS properties for this footer so let's come back and copy this footer tag add it here in this CSS file and here we will add display Flex then we will add the justify content space between after that we will add align items Center and color will be white then we will add the background color so here we will add this color code and after that we will add the padding 20 pixel from from top and bottom and 60 pixel from left and right side after adding this let's come back to the web page and you can see here we have the footer for this website now we have completed the homepage of our e-commerce clone website where we have created the navigation bar this image slider then we have some cards with product category image then we have the product slider here we have the product slider with product details like price and description and at the bottom we have the footer if you want me to create other Pages like product Details page cart page signin sign up page and make the website responsive then please hit the like button and help me to get 5,000 likes on this video and don't forget to build this project by yourself and share the preview video of your project on LinkedIn thank you so much for watching this video

Channel: GreatStack

Views: 74,812

Keywords: amazon clone, amazon clone html css, amazon clone html css js, building amazon clone, amazon clone website, ecommerce website using html css and javascript, how to make ecommerce website using html and css, ecommerce website using html and css, ecommerce website using html css, amazon website, amazon website using html and css, amazon website using html css and javascript, HTML, CSS, HTML and CSS, Web development

Id: yjZmtEGq_ss

Length: 79min 54sec (4794 seconds)

Published: Fri Feb 02 2024