How To Create Amazon Clone Using HTML CSS And JavaScript Step by Step Tutorial 2024

hi guys welcome back to another video of creat attack 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 sub menu where you can see these menu links after that here we have the image slider we will click on these Arrow 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 LEL 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 LEL 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 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 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 cart page so here in the top right side we have the cart icon let's click here so it will open the cart page on this card 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 can 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 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 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 you 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 NAB 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 here we will 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 ASX it will select all the HTML elements of this web page here we will add the padding Zer 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 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 stml file we will add this IMG tag inside one a tag so let's add a tag HF and this HF Will 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.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 deliver 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 two 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 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 NAB 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 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 item 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 the 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 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 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 this will be drop down 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 back and 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 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 this and in this one we will update the text it will be returned and this will be and 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 nav 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 p G 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 this class name nav cart and come to the CSS file here we will add do Navcard in this nav card 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 sub menu 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 div 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 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 text 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 just history 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 na 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 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 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 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 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 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 here we will add const images and we will use document. quy 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 areay 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 d at 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 to0 it means we are on the first image when n is zero it should display the first image here we'll 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 index here we have to provide style dot 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 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 visible let's come back if I add two the third image will be visual 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 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 dot 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 not greater than Z then what will happen it will change the value of n to images dot 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 but Buton one next button so we will use Query selector we have to select only one element else it will store one array 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 check if n is less than n is less than this image do length minus 1 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 two 3 and four then we will update the text for the second one then for 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 this 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 WRA R 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 will 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 in this column we will add Z index 1 now you can see it looks good so now we have created this row now we 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 scroll LEL 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 of this div here let's add some space and here we will 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 D 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 2 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 very big so we have to 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 di 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 webkit scroll bar just add display none this horizontal scroll bar is hidden now we cannot scroll these products we can use 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 do do 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 quy selected 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 arrow 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 dot 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 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 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 S2 tag so let me add this text deal and 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 span we will add add deal after this div we will add one P tag and in this P tag we will add dollar then Span in this span 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 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 web kit scroll bar and it will be display none so that horizontal scroll bar will be hidden after that we will use this 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 and after that we will add Min width 200 and 10 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 withd 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'll 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'll 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 SP 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 this 27% disc account 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 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 the sub 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 this website so let 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 amazan logo.png and we will add the width so the width will be 100 after that we will add one copyright text in p 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 foter 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 top and bottom and 60 pixel from 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 uh description and at the bottom we have the footer after completing the homepage now we will create the product page for that let's come back to the code editor and here we will click on this icon to create a new file and write the file name product. HTML here we will add the basic HTML structure and in this title let's add the title product page now we have to connect this page with the homepage so that we can click on any product image and that will open this product page so let's come back to the index.html file and here we have a list of products so in this product slider we have added these product s so let me add one more image I will add the IMG tag on the homepage here we will add the path of the image so let me add the path assets product IMG do jpg I'm adding this product productor img.jpg next we will wrap this image with the a tag so let's add the a tag and close this a after this image tag so we have added this image tag inside this a tag and in this a we will add the HF SL product. HTML we have added the file name of the new file which is product. HTML now let's open the web page again scroll down and here we have this product right now you can see these product looks a stretched so let's come back and in this CSS file we have added products IMG and here we have added Max height let's connect it it will be pixel 200 pixel save the changes and open the web page again now these images are looking good now here we have this product that we have just added so let me click on this image which is a headphone image I will click here so you can see it will open a new page in the title you can see it is product product page that we have just created so this is our product page now we will add the HTML elements and Design This web page so let's come back and we will open this product. HTML file so in this product page also we will add the same header and footer so let's come back to the homepage which is the index file and from here we will call copy the HTML code for the header so in the header we have this navigation bar so let's copy this navigation and after this navigation there is one more div nav bottom so let's select this one also so I have selected the nav bar and nav bottom just copy and we will paste it in the product page so just paste this code within this bot tag that's it save the changes and open the web page again now on this page you can see we have these contents but the alignment is not good so we have to add the CSS so we will just connect the CSS file with this new HTML file so here we will add the link tag link real Styles seat and HF and in this one we will we will add style. CSS that's it open the web page again now you can see this navigation bar and the navigation bar bottom is looking good on this product page now on this product page we will add the breadcrumbs so let's come back and after closing of this div which is for the nav bottom here we will add one p tag with the class name blade crumbs and within this we will add the text so this is the text video games PC accessories and headset save the changes and open the web page again so you can see this text here now we will add the CSS for this P tag so let me create a new CSS file for this new page so here we will click on this icon to create a new file and I will add the file name product. CSS so we have created the new file product. CSS next we have to connect this CSS file with the HTML file so in this HTML file after this link let's add one more link tag and here we will add product. CSS so now this product HTML file is connected with the CSS file now open this product. CSS file and here let's add the class name breadcrumb so we will add the padding for this breadcrumb that is 10 pixel from Top and bottom and 20 pixel from left and right side then we will change the font size so it will be 12 pixel then we will change the color and save the changes open the web page again so you can see this breadcrumb text looks good next we will change the color of this complete web page so we will come back and here above this we will add the body tag so for this body we will add the the background white so now the background is complete white after this bread crumb we will create a div where we will create three column in the First Column we will display the product images and in the second column we will display the product information like product price title description and in the third column we will display the purchase option so let's come back and open this HTML file after this breadcrumb let's add one div with the class name product display in this product display div we will add the First Column so let's create the div with the class name product D image so this will be the first column and in the First Column we will add the product images let's duplicate it and here we will add the class name product D details where we will add the product details let's duplicate it and here we will add the class name product D purchase so in this product display we have created three other div now in the first one we'll add the product images so let's add one div with the class name product icons and here let's add the IMG tag in this IMG tag we will add the file path of the product image so we will add the file path it is in the assets folder then productor img.jpg and here we will provide the width so the width will be 60 now duplicate this one so we have added five images and after closing of this div which is product icons here we will add another div with the class name product main image and in this product main image we will add the same image and here we will add the width it will be 400 save the changes and open the web page again so on this web page you can see here we have five small images and one large image next we will add the CSS properties so let's come back and first we will add the CSS properties for this class name which is is product display so let's copy this open this product. CSS file at this class name and here let's add the Min height 100% then we will add the padding that will be 10 pixel and 20 pixel then display will be Flex so that all three columns will be aligned side by side now in this one first we have this class name product D image so add this class name here and for this one again we will add display Flex because the small product icons will be in the left side and the product main image will be in the right side and we will provide the gap of 10 pixel now we will add the CSS for this product icons write it here so for this product icons we will add display Flex Flex Direction column and gap of 10 pixel so by adding this Flex Direction column all a small icons will be aligned vertically let me save the changes and open the web page so you can see these icons are in the left side and the main image in the right side and these small icons are aligned vertically because we have added the flex Direction column now we will add the CSS properties for these small icons so let's copy this and here we will add the IMG tag so for these images let's add the border 1 pixel solid and gray color then we will provide the Border radius of 10 pixel after that we will add the padding of 5 pixel save the changes and open the web page again now you can see these small product icons looks good next we will add the product details so let's come back to the code file open this HTML file and here we have another div product D details so add a space inside this div and here we will add the product title so we will use the P tag and here we will add the class name product title so let's add the product title in this P tag after that we will add the text for the Brand store so let's add the P tag with the class name theander store and let's add the text and after that we will add one div where we will display the product ratings so let's add the div with the class name product rating let let's add a space in this div and here we will add one div tag and within this let's add another div here we will add 4.3 then we will add the IMG tag and here we will provide the file path it is rating image and for this one we will add the height so let's set the height of 20 pixel after that here we will add the text in P tag and this is the text after adding this let's open the web page you can see here we have this product title then this brander store name then rating and rating text after that we will add some other text so here after closing of this div let's add one P tag in this P tag we will add this text and let's wrap this text in a span so here we will add a span tag and close this span here after this P tag we will add one more text in heading tag so we will use H5 and let's add the text and after that we will add one horizontal line so we will use HR now save the changes and open the web page so here you can see we have these text and one horizontal line next we will add the CSS properties so let's come back and here we have this class name product D details let's copy this open this CSS file and here let's add this class name so for this one let's add the margin 0 and 30 pixel after that we have this class name product title so let's add the CSS for this title so we will increase the font size it will be 25 pixel after that we have this class name brand store just copy this one add it here and for this brand store we will add the margin from the top then we will change the color and then we will add the font size 14 pixel after that here we have this class name product rating just copy this one and for this product rating let's add display Flex Flex Direction column and we will provide the gap of 10 pixel now in this product rating we have one div so here let's add dot product rating space div tag so for this div let's add display Flex then align items will be centered and we will provide the gap of 10 pixel after that in this product rating we have added the P tag so again add that class name product rating then P tag and here we will change the color save the changes and open the web page you can see this title text star rating and this text is looking good next we will add the CSS properties for this particular text so let's come back and you can see we have added the span tag here so here let's add this class name and P tag and inside this P we have a span tag so for this a span we will add the color it will be white then we will add the background this color code then padding of 2 pixel and 5 pixel then border radius 3 pixel and font size of 14 pixel and after that we have this text in H5 so let's add product rating then H5 and for this one we will add the font weight 400 save the changes and open the web page now you can see this number one West seller is looking good with this background color here we have extra space so let's come back we have added 50 pixel so let's make it 5 pixel save the changes now it is looking good after that we will add some text below this horizontal line so we will add the product price so just come back and open this HTML file and here we have this product rating after closing of this div let's add product price in this product price we will add one div and inside this div let's add P tag where we will display the discount so let's add minus 35% and after that we will add H1 tag and in this H1 tag we will add $25.99 open the web page you can see here we have this minus 35% and this price after that come back and here we have this closing div after this closing div we will add one heading tag so we will use H5 and we will add the text list price then we will add $39.99 then we will add some text in P tag then we will add another text in P tag that is free returns then let's add another text and after that we will add one more text in P tag so we have added these text in this product price now let's open the web page you can see here we have these text now we will add the CSS properties so just come back and we will copy this class name product price and open the CSS file so in this one let's add this class name let's add display Flex then Flex Direction column and Gap of 5 pixel in this product price we have added one div tag so let's add div and for this div we will provide display Flex align item Center gap of 10 pixel and we will provide the margin 10 pixel and zero then inside this T we have some text in P tag so for for these B tag we will add font size of 26 pixel then color inside this price you can see we have added the H1 tag also so let's add the CSS for that H1 tag copy this one then add H1 here we will add font size 26 pixel and font weight of 500 and here we have this H5 tag also so let's duplicate it we will change it as H5 and in this H5 we will add the font weight of 400 and we will change the color that's it after that we will open the web page you can see this discount and this price are aligned side by side and and these text is looking good next we will change the color of some text so let's come back and here we will add span tag so in this H1 after this dollar we will add span and close it here then we will add the span tag in this list price so we will add span and close it after this 99 then we will add the span tag in this P here we have Amazon Prime let's add a span and close it here this text fast free sipping will be displayed in bold tag so here we will add B tag and close it here after this fast free sipping we will add this a span tag in this free return also then in this join Prime also and here we have this p in this one let's add a span tag at this point and close it here let's save the changes and open the CSS file here we will add do product price then H5 and span tag so in this one we will add text decoration line through then we will add product price then P tag and a span tag here we will add color save the changes and open the web page now you can see these text are in different color and here we have this line through now we will decrease the size of this text which is .99 so let's come back in this code file you can see I have added span tag here so let's open this CSS file here we have added H1 so in this H1 we will add the font size 14 pixel only so let's add 14 pixel and duplicate this code here we will add span and in this span tag let's add the font size of 26 pixel just save the changes and open the web page now you can see this point .99 in small size here this color is coming from the homepage you can see on the homepage we have added the product price this color code so the same thing is displaying on our product page so it is because of the same class name let's come back here we have added the class name product price so let me change this class name I will add product D price which is product details Price save the changes and open this CSS file here also we will add product D price everywhere now save the changes and open the web page now you can see this text is looking good because it is in the complete dark black now we will add the product variant selection option where we can select the products different color so let's come back open this HTML file and here we have this product D price after closing of this div let's let's add some space and here we will add one div with the class name product color selection in this one we will add one text in P tag color then we will add one B tag so this text will be bold here we will add blue then we will add one div with the class name product color options and in this one let's add one dip with the class name option here let's add the IMG tag write the file path product image. jpg we will provide the width of 30 pixel then we will add the text in P tag that will be black after that we will add the multiple copy of this div so duplicate this here we will add green then let's add pink then we will add blue and here we will add two other copies this will be purple and red after adding this let's open the web page you can see here we have selected color which is blue and then we have other icons and color name next we will add the CSS properties so just come back copy this class name product color selection just copy this one add it here in this CSS file here let's add the margin of 15 pixel and zero then here we have another class name product color options write this class name here let's add display Flex justify content space between then we will add the margin from the top 10 pixel then we have the class name option write it here so here we will add display Flex align item Center so that the product icon and the color name will be aligned side by side then we we will add the padding of 8 pixel and 12 pixel let's add the Border one pixel solid and one color code let's provide the gap of 10 pixel after adding this open the web page here we have these other color options black green pink blue purple and red after that we will add some product information so let's come back and open this HTML file and here we have this product color selection div after closing of this div let's add another div with the class name product info and in this one we will add the P tag then bold tag let's add brand and here let's add the brand name in P tag then let's duplicate this line and we will add the text model name and provide the model name here then let's add the color provide the color then we will add form factor provide this text here duplicate this line then we'll add connectivity technology and here we will add wired after adding this let open the web page here you can see we have these product information now we will add the CSS properties for this one so just come back copy this class name product info open this CSS file and here we will add the CSS properties so for this product information we will add display grid then we will add grid template column Auto and auto then we will add the maximum width of 300 pixel then margin from the bottom 15 pixel that's it now these product info is looking good after that we will add one horizontal line and then we will add some product description so just come back and here in this HTML file after this div let's add one HR tag and then we will add another div with the class name product description in this product description first we will add the text in H1 tag so this is the text about this item then we will add description in list style so we will add us and Li so let's add this text now let me add other description text here in the lii tag so we have added a very long description text here using the lii tag after that let's come back to the web page you can see here we have these description next we will add the CSS properties for this one so just come back and we will copy this class name that we have just added product description and open the CSS file here we will add the product description class name and in this one we will add the H1 tag so for this H1 tag we will add the font size of 20 pixel and we will provide the margin so we will get some space around this text so the margin is 15 pixel and 0 then we have the UL tag inside this div so let's add the class name then UL tag so for this UL tag we will add display Flex then Flex Direction column then gap of 10 pixel and we will add the margin from the left side that is 30 pixel save the Chang and open the web page now this product description is looking good next we will add some content in the third column of this product display page so this product image will be in the First Column this description will be in the second column and here we will create one more column and we will add some content in the third column so let's come back to the HTML file you can see we have already created the third column here with the class name product D purchase which is product detail purchase so in this one first we will add one div tag and with the class name title so in this one we will add the S3 tag and let's add the text by new and close this tag then we will add one IMG tag and here we will provide the image file path dot assets then Circle icon.png and for this one we will provide the width that will be 20 pixel save the changes now open the web page you can see here we have this buy now and this circle icon on the right side now just come back and here we will add one H1 tag after this div so let's add the H1 tag and here let's add a class name also so the class name is PR and here we will add dollar 25.99 and here also we will add the span tag so let's add the span tag and close it after this 25 save the changes and open the web page you can see this $25.99 on the right side next we will add the CSS properties so just come back and copy this class name product D purchase and open the CSS file here let's add the CSS properties for this class name so first we will add the width let's set the width 100% then we will add the maximum width of 280 pixel then we will add the Border 1 pixel solid and this color code we will add the Border radius of 10 pixel and then some space inside this box so we will add the padding of 20 pixel then we have added this title so here let's add the same class name product D purchase then dot title and here we will add display Flex then justify content space between then align items center after that we have added price so just copy this one here we will add do product D purchase do price so for this price we will add the font size 16 pixel then font weight of 400 then margin of 10 pixel and zero so in this price we have added a span tag also so let's copy this one and after that we will add a span tag so so for this span let's add the font size 26 pixel and we will add the padding 2 pixel save the changes now open the web page you can see here we have this buy new and this circle then we have this $25.99 and this 25 is in the big size this .99 is in the small size now just come back and open this HTML file here we have added this H1 tag so after this H1 we will add one div with the class name Gap and in this one we will add one text in P tag get fast free sipping with Amazon Prime now in this one we will make it bold for that we will use the B tag and close it here then we will add the span tag so here we will add span and close it here after that we will add one more P tag in this one we will add a span and let's add the text free returns save the changes open the web page you can see these text here now just come back and we will add the CSS properties so let's copy this class name Gap and open this CSS file here we will add dot product detail purchase then dot Gap we will provide the margin of 15 pixel and zero then here we have this P tag and in this P we have added the span tag so let's add this class name then p and span and here just add the color code now these text are looking good similarly we will add more text here so just come back to the code file open this HTML file and let's duplicate this div Gap and we will update the text so I have added different text here now again duplicate this div here also we will update the text save the changes and open the web page so you can see these text on the right column after these text we will display the dely location so let's come back to the code file open this product. HTML and here we have this product D purchase in this one before closing of this div let's add one div with the class name location so let me add dot location or let's add delivery location and in this one there will be one location icon so we will add the IMG tag provide the path it will be location icon dark.png and for this one we will set the width of 20 pixel after that we will add the text in P tag and we will use the span tag and here we will add the text after adding this we will come back to the web page and here you can see we have the location icon and this text next we will add the CSS properties so just come back copy this class name delivery location and we will open this CSS file here we will add display Flex align item Center enter and gap of 3 pixel you can see this icon and text are aligned side by side after that we will add one text which is in stock so let's come back and open this HTML file after closing of this div here only we will add one text in S2 tag and the text will be in a stock and here we will add a class name product stock let's copy this class name and we will add the CSS properties for this one before that let's preview this you can see this text here so now let's come back to the CSS file add this class name and we will add margin 15 pixel and zero then we will change the color it will be green then we will add the font weight that is 400 so this in stock text is looking good after that we will add the quantity section so let's come back open this HTML file and after this H2 let's add one select option remove this and here we will provide the class name so the class name will be product quantity in this one we will create the options so let's add the option tag here we will add the value one and we will add the text quantity one let's duplicate it we will add the value 2 3 quantity will be two and three save the changes and open the web page you can see here we have this quantity option we can click on this one so it will open the drop down now we will add the CSS properties for this one so let's come back and copy this class name product quantity add this class name here in this CSS file and for this product quantity we will provide the padding that will be 8 pixel and 5 pixel then outline will be none width will be 100% then border radius of 5 pixel then we will add the background so this is the background color code and after that we will add the Border color so let's add this color for the border line now open the web page you can see this quantity select box we can click on this one to change the quantity now we will add two buttons so just come back and open the HTML file after this select let's add button tag and we will add one class name that is BTN and we will add the button text add to cart just duplicate it to create one more button so in the second button we will add by now and here we will add one more class name that is product buy save the changes open the web page you can see here we have add to cut and buy now next we will add the CSS properties for these buttons so just come back open this product. CSS file here let's add that class name product D purchase then do BTN so for this button let's add the outline zero or we can add none then border also none then we will add the background in the background we will add this color code after that we will add the width that will be 100% then let's add the padding of 10 pixel and zero then we will add margin from the top that is 10 pixel and Border radius of 50 pixel then let's change this background it will be this color code and we will open the web page you can see this button add to cart and buy now now we will change the background color in the second button which is this buy now so let's come back and copy this class name here and after that we will add this class name which is product by so write Dot and product y here we will add the background and we will provide different color code that's it open the web page you can see this bu Now button in different color now just come back and here we will add cursor pointer so you can see when I move cursor over this button it becomes pointer after this button we will display the S information so just come back to the HTML file and here we have this button so after this button we will add one div with the class name product seller info within this div let's add one text in P tag and this is the text after that we will add one more P tag and in this one we will add a span tag and here we will add this text which is Amazon now duplicate this and update the text after adding these text save the changes and open the web page so here you can see these information now we will align it in two columns so let's come back and copy this class name product seller info add this class name here in this CSS file and here let's add display grid then we will add grid template column Auto and auto after that we will add Gap that will be 4 pixel then font size will be 14 pixel let's change the color also and we will change the color for the text written in the span tag so here we will add span and we will provide the color save the changes and open the web page so you can see it is looking good we need some space above this text so let's come back and here we will add margin top 10 pixel now it is good after that we will add one horizontal line and then we will display one button that is add to list so let's come back open this and after this div which is product seller info here we will add HR to add one horizontal line then we will add the button tag to add a button in this button we will add the text add to list save the changes open the web page so you can see one line here and one button add to list so let's add the CSS for this horizontal line open this and here we will add dot product D purchase then HR so for this horizontal line let's add the margin of 20 pixel and zero so we have a space above this button now we will add the CSS properties for this button so just come back and open this HTML file and here we will add one class name so in this button we will add the class name product add list now we will add the CSS properties for this class name so here we will add product add list and let's add the width 100% then we will add the padding of 8 pixel and 15 pixel then we will add the Border radius that is 5 pixel then border of 1 pixel solid and this black color then we will add the T text align start after that we will add the background it will be white and we will add the cursor pointer save the changes and open the web page now you can see this add to list button is looking good so we have added all the contents in the third column now we will add the recommended product products at the bottom of this product page for that let's come back to the HTML file and here we have this closing div which is for this product dep purchase and this closing div is for the product details so after closing of this div Above This closing body tag here we will add the horizontal scrolling product so we have already added that on the homepage so let's come back to the index.html file and from here we will copy the code so let's scroll down and here you can see we have one div with the class name products slider with price so just copy this div copy and paste it in this product. HTML file that's it save the changes and open the web page now on this product page you can see at the bottom we have the product list this product is not sliding horizontally so let's come back and here you can see we have added one script.js file and in this one we have added this code that is for horizontal product slider so let's copy this one open this product. HTML file and above this closing body tag we will add a script tag and within this script paste that JavaScript code that's it save the changes and open the product page again now you can see we can scroll this product by using the mouse wheel here I will update this text I will add related products so let's come back to the code file and here we have this title so we will add related products you can see on the web page it is displaying related products on this page also we will add the footer so let's come back and open the homepage and scroll down you can see we have added the footer tag just copy it and open the product. HTML file scroll at the bottom and before this script paste that footer tag that's it after adding this let's open the web page you can see here we have this footer on the product page now we need some space above this footer for that let's come back to the code file and in this footer we will add a class name so the class name is product footer copy this class name and open the CSS file write it here and in this one we will add margin from the top that is 100 pixel that's it save the changes and open the web page now you can see we have enough space above this footer now we have completed cre the product detail page of our Amazon clone website next we will create the cart page to create the card page we will create a new file so let's come back to the vscode editor we will click here on this new file icon and add the file name cart do HTML and here we will add the basic HTML structures and in this title let's add the title that is cart now we will create one more CSS file so again create a new file and add the file name cart. CSS and connect this CSS file with this page which is card page so here we will add the link tag and first we will link the CSS file which is for the homepage which is a style. CSS duplicate it and here we will add the new CSS file which is cart. CSS so we have connected both CSS file with this cart. HTML file now in this page we will add the nav vation bar and navigation bottom so again open the homepage scroll top and here we have this navigation bar and after that we have this nav bottom so let's copy everything and paste it in this cart. HTML file inside this body tag now let's open the index.html file and here we have this HF where we have added the cart icon and cart text so in this hdf we will add/ card. HTML so that when we will click on the cart icon it will open the cart page we will add the same thing in the product. HTML let's open this product. HTML in this Navar here we have the cart icon so in this H we will add slash cart. HTML save the changes now if I open the web page and click on this cart icon so you can see it will open the cart page so you can see the title cart and here we have added the navigation bar if I click on the logo it will open the homepage and on this homepage also if I click on the cart icon it will open the cart page now on this card page we will add contents in two column in the left column we will display the products added in the cart and in the right column we will display the buy now button so let's come back to the code file open this cart. HTML file and after this div here let's add some space and here we will add one div with the class name cart in this one we will create two div that is for the left and right so let's add the first div with the class name cart left duplicate it and write the class name cart right now in the left div we will will add one title so let's add the title in H1 and the title is shopping cart after that we will add one horizontal line so we will use the HR tag then we will add one div with the class name product card list so we have added this div with the class name product card list in this one first we will display the product image so we will add the IMG tag provide the path of the image so we will add this image iPad img.jpg and after that we will add one div and within this div we will add one D with the class name product card title price and here we will add the text in P tag so this is the text after this P we will add one more P tag and in this one we will add the B tag so that the text will be bold and here we will add the price in dollar so let's add 249 0 0 and after closing of this div here we will add another P tag and here we will add a class name so let's add the class name product cart bestseller in this P we will add one text number one best seller in computer tablets save the changes open the web page you can see here we have this text shopping cart then this product image then description price and this text next we will add the CSS properties so let's come back and open this cart. CSS file we will add do cart and let's add display Flex gap of 20 pixel then margin of 20 pixel so you can see some space above this text and in the left side also now just come back and and we will copy this class name cart lift paste it here for this cart left we will add the background this will be white then we will add the padding that is 20 pixel so you can see the white background for this left side now just come back and we will add this H1 tag so here just add dot cart lift then H1 in this one we will add font size of 28 pixel font weight of 400 and margin from the bottom that is 15 pixel and in this one we have this horizontal line using the HR tag so again add this class name then write HR so for this we will add the Border none then height will be 1 pixel and we will add the background save the changes and open the web page so this text and this horizontal line is good after that we'll add this class name we have added product cart list just copy this add it here let's add display it will ref Flex then align items start and we will provide the gap of 10 pixel then padding it is 24 pixel 0 12 pixel and 12 pixel save the changes you can see this image and this text are aligned side by side now just come back and here you can see we have added one class name product card title price just copy this add it here let's add display Flex then gap of 20 pixel and font size of 0 pixel save the changes and open the web page so you can see this price in the right side now let's come back and here we have added product cart best seller so let's copy it add it here here just add font size of 12 pixel that will be very small then margin from the top 10 pixel come back you can see it is in the small size next we will change the color in this text so let's come back and here we have this text so we will add one span tag let's add a span and close it here best seller we have added a span tag here and closing it here now we will add the CSS for this a span tag so copy this class name then write a span and here we will provide the font size that is 13 pixel then we will add the background then we will add the color it will be white and we will add the padding of 3 pixel and 8 pixel save the changes and open the web page you can see this best seller is looking good with this background color now we will add other text below this so just come back and open this HTML file and here let's add one P tag and in this P we will add in a stock duplicate it here we will add free delivery and these text then one more P tag we will add free return and this icon code then let's add one more P tag add this text save the changes and open the web page you can see here we have these text and we have the this icon now let's add some CSS properties for this one so in this one we will add the class name so in this first one let's add the class name product cart stock in the second P we will add a class name product cart delivery then in this return we will add a class name product cart return and in this gift we will add a class name product cart gift option in this text we will make it bold so just add B tag and close it after this date and after this text here we will add one more text which is learn mode that we will add in a span tag save the changes and open the web page you can see this text in bold font now let's come back and we will copy this class name product cart stock add it here in the CSS file for this one let's add font size 13 pixel then color then margin then let's copy the second class name add it here here we will add font size of 15 pixel now let's copy this class name add it here here we add font size of 15 pixel then color then font weight then we will copy this class name add it here here we will provide this color then font size of 13 pixel and margin save the changes open the web page so you can see these text are looking good next we will add different color for this text which is learn Moree so let's come back and copy this one add it here and here we will add the span tag and just add the color so you can see the color in this text learn mode now we will add other information in this card so after this P tag here we will add a space and let's add one div with the class name product card specs for specifications so in this one we will add the P tag then B and we will add a style and here we will add another P tag and write the text duplicate this line here we will add size then color let's come back to the web page you can see these specification here now we will align it in two columns so just come back copy this class name add it here let's add Max width 150 pixel then we will add display grid then grid template column Auto and auto then we will add add row Gap it will be 3 pixel then font size of 13 pixel and margin 7 pixel and Zer after adding this let's come back and you can see these specifications are looking good in two columns next we will add some other accent links so let's come back back and here we have this div for specifications after that we will add another div with the class name cart list action in this one we will add the select tag then we will add the option let's add the value in the value we will add quantity 1 and here also quantity 1 replicate it and add 2 3 4 and 5 here also we will add 2 3 4 and 5 we can remove it from here we will only add numbers that's it now after that we will add one horizontal line then we will add one P tag and here we will add delete and in this one we will add a class name that is accent button duplicate it and add different text and after each P tag we will add one HR that's it now let's open the web page here you can see we have this quantity select option then we have delete save for letter compare with similar items and share and here we have the horizontal lines now we will add the CSS properties so just come back copy this class name card list action add it here in this CSS file let's add display it will be Flex then gap of 12 pixel then font size 14 pixel and we will add the color and this color code after that in this div we have added the HR tag so let's add the same class name then HR and for this one we will add the height of 20 pixel then width of 1 pixel then we will add the background so it will be designed like a vertical line let me come back to the web page you can see here it is displaying all the contents side by side and one vertical line between these links next we will add the CSS properties for this quantity select dropdown so just come back copy this one and here we will add the select tag so for this select tag we will add the padding that is 5 pixel then we will add the Border radius of 6 pixel and we will add the background save the changes and open the web page now this quantity select box is looking good so here we have added one product in this cart similarly we will add one more product so let's come back and select this div which is product cart list copy this one and here add a space and first we will add one HR tag then paste the code now come back to the web page you can see here we have one horizontal line and we have same product again now we will change the product image and description so let's come back here in this image we will add the width so let me add the width of 180 pixel and in the previous image also we will add this width 180 pixel now here we will add the different image so let's add the image product IMG do jpg and here we will update the text then we will update the price and we will update other text here after updating this let's open the web page you can see here we have different product image and product details next we will display the total cart value so let's come back and here we have this product cart list so after that we will add one HR tag and then we will add one D with the class name card list subtotal in this one we will add the text subtotal two items then in the Bold tag we will display the price after adding this open the web page you can see here it is displaying subtotal two items and this is the price next we will add the CSS properties for this one so let me come back to the code file and copy this class name cart list subtotal add it here in the CSS file so in this one let's add text align right then font size 20 pixel and margin from the top 10 pixel save the changes open the web page you can see this subtotal is aligned in the right side now we have created the left column of this cart page next we will add the content in the right column so let me come back to the code file you can see we have created this div which is cart right now we will add the content in this one so here let's add one div with the class name cart free delivery in this one we will add one icon so we will use this icon code then we will add one text so we will use the P tag this is the text then we will add the other text in bold tag like this and here we will add one text C details after adding this open the web page you can see in the right side we have this icon and this text so now we will add the CSS properties for the right container so in the right side we have added the class name cart WR so use this class name here cart write for this one we will add background so the background will be white then we will add the padding then maximum height it will be 220 pixel then we will add the minimum width 280 pixel so you can see it is in the white background next we will align this icon and this text side by side so let's come back copy this class name cart free delivery add it here for this one we will add display Flex then we will add the font size 13 pixel so you can see it is aligned side by side next we will add the total price for this cart and we'll add one button also so let's come back to the HTML file and after this text which is in the P tag we have this closing div after this D let's add one P tag so in this P tag we will add this subtotal and after that we will add another P tag and here we will add this text in this P tag we will add a class class name which is cart subtotal and in the second one we will add a class name which is cart WR gift then at the end we will add one button and the button text will be proceed to check out now you can see here we have these text that display the price and we have one button next we will add the CSS properties so let's come back and now we will add the class name cart total in the CSS file which is cart sub total so let's add margin from the top 20 pixel then we will add the font size of 18 pixel and font weight 500 then we have the other class name cart WR gift add it here and here we will add margin so the margin is 7 pixel from top and bottom Zero from left right then we will add the font size 14 pixel you can see this subtotal price is looking good and we have a space around this text also before this text we will add one checkbox so let's come back and here we have this text so let's add a space and here we will add one input field and type will be checkbox now you can see one checkbox before this text we can click this one to select this checkbox now let's come back and hit here we have this button so we will add the CSS properties for this button so open this CSS file here we will add dot cart right then we will add the button tag so for this button we will add the width 100% then we will provide the height that is 30 pixel then we will add the margin 15 pixel n Zer and we will add the background now we will add the Border none and B radius will be 8 pixel cursor will be pointer save the changes and open the web page you can see this proceed to checkout button is looking good next we will add the hover effect on this button so let me come back and we will increase the height 32 pixel and copy this one add it here let's add hover and we will add the background let's add different background color code that's it so you can see when I move cursor over this button the background will be changed it is working next we will add the footer on this card page so again come back to the index.html file which is the homepage and here we have added the footer tag just copy this one add it in the cart. HTML file Above This closing body tag let's open the cart page so you can see here we have this footer and here we need some space above this footer so let's come back and in this footer we will add a class name footer cart and copy this class name add it here in this CSS file here we will add margin from the top 50 pixel save the changes now you can see we have space above this footer on this cart page now we have successfully created the cart page of our Amazon clone website after completing the cart page now we will create the signin page and sign up page so let me come back to the code file here I will create a new file so I will click on this icon and write the file name signin HTML here we will add the basic HTML structure and we will provide the title for this page so let me add the title signin now for this signin page we will create a new CSS file so let's create a new file with the name signin do CSS and let's add this CSS file in this HTML file so we will add the link tag re Styles it and here we will add the file name that is signin do CSS in this signin page we will not use the normal header and footer that we have used in the other pages in The signin page the header and footer will be different that's why I will not use the main CSS file which is style. CSS so I will not use that we will add all the Cs for the signin page in this signin do CSS file so in this CSS file first let me add the import link for the Google font after this we will add the default CSS properties so let me copy it from here and add it in this signin do CSS file now for this page let's add the CSS properties for the body and here we will add the background it will be white then text align will be Center so all the contents in this sign in page will be horizontally centered then we will add the font family we will use this outfit after that we will add the minimum height it will be 100 VH now we have to open this file which is signin HTML so we can write this signin HTML in this browser but I want to add this new page Link in this text so that when people will click on this signin Link in the navigation bar that will open the signin page so let me come back and we will open this cart. HTML file here in this navigation bar you can see we have the text called hello sign in so in this one we will add the a tag and place this code inside this a tag that's it and in this HD we will add/ signin do HTML so whenever we will click on this text hello signin it will open the signin page so let's check this one we will come back to the web browser and click on this hello sign in so you can see it will open the signin page right now this page is blank and you can see the title here in this browser tab now if I click on go back it will open the card page similarly we will add this link in other pages also like we have the homepage here also we will add that link so if we click on this link it will open the signin page and we will add this on this product page also so let me come back copy this and open this home page and here also we will add this code update it and now we will open the product. HTML here also we have this hello signin just update this line save the changes now let's come back to the browser go to homepage click on the sign in it will open the signin page so now we will add some HTML elements on this signin page so just come back close these files and here we have the signin HTML page so in this one first we will add One logo so we will use the a tag and on this logo there will be a link that will take you to the homepage so we will add hdf SL and inside this a tag we will add the IMG tag and uh we will provide the file path so the image file is in the assets folder write the file name Amazon logo dark.png and with this image we will add a class name also so we will add a class name called logo that's it and for this logo we will Define the width so the width will be 100 pixel after this a we will add one div with the class name signin container in this signin container there will be one title so we will add the H1 tag and the title is sign in and in this H1 we will add a class name sign in title that's it after adding this we will open the web page here we have this Amazon logo and the text sign in next we will add the CSS properties so let's come back copy this class name logo and open this CSS file which is sign in. CSS so here we will add this logo and for this one we will add the margin from the top that will be 20 pixel after that here we have the class name signin container use this class name here for this sign in container we will add the maximum width then border margin will be Auto so that it will be aligned in center now we will add the margin from the top 20 pixel and let's add the padding that will be space inside this box border radius will be 8 pixel and text align left so after adding this we will open the browser you can see here we have this box and in this one we have this title next we will add the CSS properties for this title which is sign in so let's use this class name sign in title we will add the font size and font weight now this font size is looking good for this text next we will add one more text below this text so open this HTML file and here we will add H5 and in this one we will add a text email or mobile phone number and for this one we will provide a class name that is input label and after this text there will be one input field where people can enter the email ID or phone number input type will be text then there will be one continue button so we will use the button tag and the but button text is continue after that we will add one P tag where we will add the text so we have added this text about terms and condition and privacy policy notice after adding this we will open the web page here you can see the text one input field then continue button and these text now we will Design these contents so we will apply the CSS so let's come back and use this class name input label add it here so for this one we will provide the space from the top so there will be margin top of 20 pixel after that we will add the sign in container and in this one we have added the input tag so for this input we will add the width it will be 100% height will be 32 pixel then margin from the top 5 pixel and padding 3 pixel from top and bottom 7 pixel from left and right side after that we will add the Border radius 3 pixel then we will add the border of 1 pixel solid and one color code we will update the font size it will be 12 pixel after that you can see the input field width is 100% you can see when I click in this input field it becomes dark black so we will change the color of this input field when it is focused so copy this one paste it here and here we will add focus in this one we will add the outline it will be 3 pixel solid and one color code now if I click on this input field the outline color looks good after that we will add the CSS properties for this button so let's come back here we have this signin container in this one we have the button tag so for this button we will provide the width then height and we will provide the margin let's change the background color also B will be none border radius of 8 pixel and cursor pointer next we will add the hover effect on this button so when we will move cursor over this button the background will be changed so we will add the background and a new background color code save the changes open the web page you can see this button is looking good and if I move cursor over this button the background is changing then we have this text so let's add the CSS properties for this text so in this HTML file we have added this text in this P tag so in this P tag let's add one class name that is sign in condition copy this class name add it here for this sign in condition we will add font size 12 pixel and here we have this text called privacy notice and there is one more text called condition of use we will wrap these text in a span tag so that we can change its color so let's add span and close it here we will add one more span tag and we will close it after this notice save the changes now we will open the CSS file write this class name here and then write a span tag here we will update the color save the changes you can see this text condition of use and privacy policy in different color after that we will add one text with the icon so let's come back and uh after closing of this P tag We'll add a new P tag and here we will add the text need help and for this one let's add a class name also that is signin help so you can see this text here need help but before this text we will add one icon so here we will add this HTML code for the icon and you can see this right arrow I icon before this text we will change the color for this text also which is need help so let's wrap it inside the span tag and add the CSS properties for this signin help class name add it here in this CSS file and for this one let's add the font size of 13 pixel then we will add some margin after writing this open the web page again you can see the space around this text we need to change the color of this text which is need help so let me come back and we have added this sign in condition so instead of this we will add sign in container then p and a span tag so after adding this let's open the web page again you can see different color for this text need help next we will add one horizontal line so we will come back and uh after this P we will add one HR tag and then we will add one text in H4 tag and let's add the text buying for work then we will add text in small size so we will add this text and we will add the span tag also so here is the text now in this one we will add the class name so the class name is signin business after adding this open the web page you can see we have this text buying for work soop on Amazon business and uh here we have added this class name sign in business and before that we have added this HR tag and H4 so first We'll add the CSS properties for this HR tag so let's open this here we will add dot signin container and then we will add the HR tag here let's add border none then we will add the height of 1 pixel and we will add the background and in the background we will add one color code after that we have added the H4 tag so let's add sign in container H4 here we will add the margin so there will be a space around this text then we will change the font size you can see this text buying for work is looking good next we will add the CSS for this text which is sop on Amazon business so let's copy this one sign in business add it here and here let's add font size of 13 pixel so this text is also looking good after this box we will add one horizontal line and one text so let's come back open this signin HTML file and after closing of this div here we will create another div so let's add the class name signin bottom in this one we will add one HR for the horizontal line then we will add the P tag and in this P tag we will add the text new to Amazon save the changes you can see this line This horizontal line is taking full width of this screen and here we have this text new to Amazon so let's come back and and we will add the CSS properties for this signin bottom write it here and we will add width so it will be maximum 350 pixel so we will add the max width then we will add the font size so it is 13 pixel let's add the color then we will add the margin so we will add the margin 20 pixel from top and bottom and left right Auto so it will be horizontally Center display will be Flex then align items Center and justify content Center then we will add the Gap 6 pixel so we will get six pixel gap between the horizontal line and text so you can see here it is new to Amazon and we can't see the line so let me come back and here we will add sign in bottom then HR in this one let's copy the previous code from the HR tag and we will add width so the width will be 110 pixel save the changes now you can see see this line here and this text new to Amazon now we will add the same line in the right side also so let's come back after this P again we will add HR save the changes and you can see one horizontal line before this text and after this text now below this text we will add the button that will be create your Amazon account that will will take you to the sign up page so just come back and after closing of this div we will add the button tag and here we will add the button text create your Amazon account and uh let's add the class name in this button so the class name is sign in sign up BTN now we will add the CSS properties for this so add it here and for this button we will add the width 350 pixel then height of 30 pixel then we will add the font size 13 pixel and we'll add the background it will be white then the Border radius it will be 5 pixel now we will add the Border also border of 1 pixel solid and this color code here we have added width 350 so let's make it width 350 now we will add the hover effect on this button so write this class name here then write hover and when we will take cursor over this button we will change the background so just add the background and add different color code save the changes open the web page you can see here we have this button create your Amazon account and when we take cursor over this button the background becomes gray let's come back and here we will add the content on this HTML file so after this button we will add the footer content so we will add the footer tag so in this footer first we will add some links so let's add one div with the class name footer links and here we will add a tag and in this a tag let's add hashtag then we will add the text that is conditions of use let's duplicate it and we will update the text so the next text will be privacy notice and the next text is help and after closing of this di we will add the P tag and in this P tag we will add the copyright text so let's add this text and with this P tag we will add a class name also so let's add the class name footer copyright now we will add the CSS properties for this footer tag so let's add this footer tag here and for this one we will add the width it will be 100% then height will be Auto and let's add the max height it will be 200 pixel then we will add the margin from the top that is 20 pixel and we will add the padding 20 pixel and zero Position will be fixed and bottom zero then we'll add the background and in the background we will add color code so let's add linear gradient to bottom there will be two colors so we'll add two bottom and here we'll add the first color code then comma and second color code that is white then we'll add the Border top it is 2 pixel solid and this color code this will be border then we will change the font size so the font size will be 12 pixel save the changes open web page you can see there's no changes when we added the CSS properties so yeah here we have to remove this dot because it is the footer tag not a class name so we will add this footer only now you can see the changes here we have this color in the footer we have this text in a small size next we will add the CSS properties for these links so let's come back and copy this class name footer links copy this one add it here so for this footer links we will add display Flex justify content Center and gap of 30 pixel then we will add the space at the bottom so margin bottom 20 pixel so these footer links are looking good after that we will change the color of these links and we will remove this underline so let's come back and copy this one here we will add a tag and in this one we'll add the text decoration none and we will change the color so this is the color code so you can see this footer is looking good let me add this footer tag also before this now we have completed this sign-in page next we will create the sign up page where user can create an account so let's come back and here we will click on this new file and write the file name sign up. HTML on this sign up page we will add the basic HTML structure and here we will add the title sign up now to open this sign up page we will add a link in the signin page so you can see here we have the signin page HTML code and we have added this button this button is here create your Amazon account so we will wrap this button inside one a tag so we'll add the a tag and place this button inside this a tag and here with this hdf we will add slash sign up. HTML so when we will click on this button it will open this sign up page so let me open the browser and here you can see this button create your Amazon account if I click on this button you can see it will open the sign up page you can see the title sign up and this page is blank right now so we will add the HTML elements on this signup page so let me come back and open this sign up. HTML file and here we will add the same header that we have added in the signin page so from here let's copy this a tag or let me just copy everything from here copy this and paste it in this sign up. HTML so here the logo will be same then we have this signin container keep it like this only and in this one also we will add the same CSS file so we will use the link tag real Styles seat then SL signin do CSS and now if I open this page which is the sign up. HTML you can see everything is same as the signin page now we will update the content so let's come back and here the logo will be same then we have this div in this one we have the title sign in so instead of this we will add sign up so this is the sign up page then we'll add the label so in this label text we will add your name and then we have this input field so in this input field we will add the placeholder and we will add the text first and last name after that we will add this label again and in this label we will add the text mobile number or email then we will add another input field input type will be text after that we will add another label so just copy this H5 and in this one we will add the label text password and after that we will add one input field where user can enter the password so let's type input type will be password and here also we will add the placeholder so in this placeholder we will add the text at least six characters then we have this continue button and after that we have this text which is the terms and condition and privacy policy notice then we have this need help it will be same and here also we have this text buying for work soop on Amazon business leave it like this don't need to change anything after that here we have new to Amazon here we will update the text here we will type have have an account and uh update the button text also we will add login with Amazon account so we have updated this text and we will update this link also so instead of sign up we will add sign in sign in. HTML that's it then the putter will be same after adding this save the changes and open the web page so you can see here we have the sign up page where you can see your name then mobile number field then password and continue button then we have this have an account login with Amazon account if I click on this button login with Amazon account it will open the signin page and when we click on this create your Amazon account it will open the sign up page and when we click on this logo it will open the homepage now we have completed all the pages which is the homepage then we have this product page then cart page after that we have created this signin page and this sign up page so after creating all the pages now we will make this website responsive so that it will look good in in different screen size first we will make our homepage responsive so let me right click on this web page and select inspect now you can change the screen size so you can see when I change the screen size this navigation bar is not looking good so first we'll make our navigation bar responsive so let me come back open the style. CSS file scroll down at the bottom and we'll add the media queries so first let's add one comment from here we will start writing the media query so let's add media only screen and we will add the condition so we will add the max width of 900 pixel here we will add the CSS properties for the navigation bar so you can see we have added the navigation bar using this nav tag so let's open this CSS file we will add the nav tag and in this s we will add Flex W WP after after that we have the nav search in this one you can see nav search just copy this class name add it here in this media quy so for this nav search we will add the order 7 then we'll add the margin 15 pixel and 0 and 5 pixel then we'll add the main width 300 pixel after adding this let's open the web page and you can see if I decrease the screen width below 900 so this search box is moving in the second line that looks perfect in the first line we have these things logo and delivery location cart icon and in the second line we have this search box now we will add the CSS properties for these boxes where we have added the product category image so let's come back you can see here we have the class name box column so let's add this class name and here we will add Max width 48% so after adding this if I open the web page you can see here we have two images in one row earlier it was four images you can see two images and if I increase the width it will become 4 image and if I reduce it below 900 it will become two images in a row now we will further decrease the width let's say 600 so you can see here this cart icon is going in the second line that is not looking good so we will hide some content from this navigation bar so let me come back and here we will add the another condition for the media quy we will add the maximum width of 600 pixel and in this one we will add the class name that is this one nav country copy this one add it here and we will hide it so simply add display none that's it next we will hide this nav language copy this add it here and here we will add display none so it will be hidden then we have this nav text we will hide this one also so let's add dot nav text display none so it is also hidden after adding this open the web page now you can see in this navigation bar we have the Amazon logo and in the right side we have the cart icon and then we have this search box here you can see in this NAB bottom these t are displaying in two lines so we will fix this one so just come back copy this class name nap bottom add it here so for this naap bottom we will add the font size let's decrease it it will be 13 pixel then we will decrease the Gap 10 pixel and we will add overflow X scroll so we can scroll these contents horizontally and next we have to hide the scroll indicator so we will add the same thing then we will add webkit a scroll bar and just add display none so that a scroll bar will be hidden and in this one we have the P tag so again add this this class name then write p and for these P tag we will add text wrap no wrap that's it now you can see here we have this text all text are aligned in same horizontal line if I reduce the width still we have these text in one line and we can scroll this like this you can see we can scroll these text next you can see we don't have option to go to the login page so for the smaller screen we will add one user icon on the navigation bar so let me come back and open this HTML file here we have this cart so before this cart we will add the space and here we will add one a tag in this a tag we will add one icon so we will use the IMG tag and provide the file path so it will be user.png in this hdf we will add the file path that is signin HTML so that when we will click on this user icon it will open the signin page and here we will add a class name also so the class name is mobile user icon now if I open the web page you can see this icon on the navigation bar and if I open this web page in a smaller screen here also we have this icon on the navigation bar and if I open this web page in large screen still you can see this navigation bar with this icon so we have to hide this icon from the largest screen it will be displayed only in the smaller screen so let me come back and here after this class name we will add the style property a style display none so we have added a style display none save the changes and open the web page now you can see that user icon is hidden from the larger screen and if I reduce the screen size still you can't see the user icon now we have to display that icon in the smaller screen so let me come back to the CSS file here we have added this NAB bottom P so after that we will add that class name that is mobile user icon so copy this one add it here and for this one let's add display display will be flex and we will add important after that we will add Flex 1 so it will use the entire space available in the row then we will add justify content Flex end so it will be aligned in the right side next we have to define the width of this icon so use this class name then write the IMG tag and we will Define the width 25 pixel that's it after adding this open the web page again you can see here we have this user icon on the smaller screen and if I increase the screen size that user icon is hidden and again open it in the smaller screen here we have this user icon and when we click on this user icon it will open the signin page correct if I open the if I click on the logo it will open the homepage next we will hide this text which is cart we will only display the cart icon we will hide this cart text so let's come back and here we will add dot nav cart and H4 just add display none so that text will be hidden you can see here we don't have the cart text we have only cart icon and user icon this cart icon size is looking big so let's come back and here we will add nav cart then IMG tag here also we will add the width of 25 pixel now this user icon and cart icon is looking good in a smaller screen now you can see this next and previous icons on this slider is looking big and the alignment is also not good so we will fix this one so let's come back and uh we will copy this class name which is header slider in this one we have these Arrow icon with the a tag so let's add this here in this media query here we will add header slider then a tag for this one let's add top 24% then we'll add the padding of 2 VH and 1 VW then we'll add the font size it will be 15 pixel that's it after adding this open the web page again you can see small size for this previous and next icon then we have this product category images and here it is displaying two images now I want to display only one image on this smaller screen so let's come back and here we will add that class name that is box column and we will add the max width 100% and width also 100% so you can see only one image is displaying and all images are aligned vertically for the smaller screen next we will see the footer so right now you can see all the content on this homepage is looking perfect in a smaller screen let's check the footer also so in this footer you can see the logo and text are not aligned properly so we will align it vertically so let's come back here we'll add the footer tag in this one we'll add justify content Center then we'll add the flex Direction column and we'll add the font size so the font size is 14 pixel save the changes open the web page again now you can see this footer is also looking good so now we have made our homepage responsive for larger screen and a smaller screen next let's open the product page so let me open one product and you can see if I change the screen size this is not responsive so we will fix this one so let me open the code file and we will open product. HTML and we will open product. CSS in this product. HTML file also we will add the user icon so before this cart here we will add that user icon so let me copy it from the index file you can see here we have added the user icon in this a tag just copy this one add it here in this product. HTML file so we have added this user icon now let's open the product. CSS file here we will add the comment where I'm starting the media queries so let's add this comment and here we will add the media query so we will add this media only screen and Max width 900 pixel so in this product page we have the product display so we'll add product display and we will add the flex wrap rap after adding this let's open the web page and reduce the screen width below 900 so here it is displaying the product images description and this purchase option so these are aligned vertically because we have added the flex wrap now let me reduce the screen width below 600 here we will hide these small product images so let me come back and copy this class name product icons paste it here and we will write it in another media qu condition so copy this one and we will add the condition 600 pixel and within this media qu we will add this product icons and here just add display none so that small icons will be hidden you can see that is hidden next we will set the size for this main image so here we have this class name product main image copy and paste it here then write IMG so for this one we will add the width 100% And we will add the padding also that is 20 pixel so the size for this product main image is looking good then we have these options so we will fix this one so let's come back copy this class name option add it here and here we will add the padding of 6 pixel and 8 pixel in this option we have the text in P tag so we will add p and we will add display none you can see here we have the product variant icon only we don't have the text let me scroll down and here we have this product purchase option which is not displaying in the full width so we will fix it let's come back and copy this class name product D purchase let's copy this one add it here and here we will add the maximum width 90% And we will add the margin also it is 20 pixel Auto and 10 pixel at the bottom save the changes open the web page again you can see this product purchase option is looking good here we have the related products this is the footer so if I scroll the web page you can see this complete web page is looking good in smaller screen so now we have made our product page responsive next we will open the cart page so let's click on this cart icon so this is the cart page if I increase the size you can see here we have this proed to checkout box which is in the right side so this page is not responsive right now so we will will fix this one also so let's come back close this CSS file and from this HTML file we will copy this HTML code where we have added the user icon here it is just copy this one close this and we'll open cart. HTML file this one and uh Above This cart icon let's paste that correct now we will open cart. CSS file scroll down at the bottom and in this cart. CSS file again we will add the media queries so first let's add the comment media query and here we will add the media query for the screen width of Maximum 900 pixel so let's add the class name cart and flex wrap will be tap so if I open the web page reduce the screen size you can see that proced to check out is going below this content so this Flex wrap is working now if I reduce the screen size below 600 you can see it is not looking good so let's come back back and again we will add the media query for 600 pixel so let's copy this class name which is product cart list add it here in this one we will decrease the padding it will be 24 pixel and zero and in this one we have the image also so write this class name again then write IMG tag and we will add the width it is 80 pixel we will display the small image then we have the class name called uh product card title price add it here in this one we will add Flex wrap WP and we will add the font size that is 14 pixel after that you can see we have added the class name product card delivery option so add it here this class name product cart delivery and in this one we will decrease the font size that is 13 pixel open the web page you can see it is looking good in the smaller screen next we will hide these details from from the card page so let me come back and we will add this class name cart list action copy this one add it here and in this ation we will add the class name Aon BTN so from this acction button we will hide the sare this vertical icon again this compare with similar and vertical icon then save for later and vertical ion so we will delete these accent links and vertical line so let's come back and here we will add nth last child one and set display none so you can see The Last Action Link has been removed now we will remove this vertical line duplicate this one and we will provide two let's duplicate again here we will provide three and we will duplicate it one more time and provide four save the changes you can see here we have this delete and save for later now if I open the web page you can see two links has been removed but here we have this vertical line so let me add here you can see we have the HR tag and then we have the Aon BTN then HR then again aent BTN so in this CSS file first we are adding accent BTN a and BN that will remove the last link then we'll add HR then again we will add Aon BTN and here we will add HR like this save the changes now we will open the web page you can see that two links and two vertical lines has been removed now it is looking perfect in this screen size next we will add the CSS properties for this area so let's come back to the HTML file here we have this class name cart right just copy this one add it here and for this one we will add the Min width 100% save the changes open the web page you can see this cart page is also looking perfect in a smaller screen and if I increase the width on full screen also it is perfect so now we have made our homepage product page and cart page responsive for different screen size now let's open the signin page here it is so if I change the screen size you can see it is already responsive we can see this in the smaller screen it is perfect if I open the sign up page so this sign up page is also responsive in smaller screen let's come back to the homepage so now we have created all the pages of our Amazon clone front end website and we have made our website responsive I hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel greatest to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 20,634

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, ecommerce website design

Id: NC0IRIJhFpI

Length: 227min 50sec (13670 seconds)

Published: Mon Mar 25 2024