How To Make Ecommerce Website Using HTML And CSS Step By Step - Create e-commerce website

hi everyone welcome back to our new tutorial  hope you guys are well so today in this tutorial   i'm going to show you how to create a complete  responsive ecommerce website using html and css   and also we are going to use bootstrap for making  our website responsive so let me show you what we   are going to create in this tutorial so this is  the ecommerce website which we are going to create   in this tutorial here you can see that on the  top left we have a logo and in the top right we   have our navigation links and some photos of icons  and here we have added some beautiful hover effect   and here you can see that if we now scroll down  here you can see that our navigation is not moving   it means scrolling the website not affecting  our navigation bar it means our navigation bar   is fixed and here underneath this navigation  bar here you can see that we have a simply   a small box shadow and this box shadow  is making our navigation bar more alive   and then we have our home section and in this  home section we have a background image we have   our text we have our button and we have also added  some hover effect on this button if we now scroll   down here you can see that we have a brand section  and inside this brand section we have added some   brand logo or company logos and this section is  also looking so beautiful and underneath this   here you can see that we have a new section and  we have added this section for attracting our   customers our visitors towards the website so that  we can tell the visitors about our products about   our websites and here in this section we have  three box and inside this box we have some images   and we have also added some hover effect and  then we have our heading and a button here also and then we have our feed chart section and inside  this feature section we have added four product   we have added this beautiful four  products with a beautiful hover effect   underneath this here you can see that  we have a beautiful banner section   and inside this banner section we have added a  background image and we have set this background   image as a parallax background and this parallax  effect is so beautiful and looking so attractive   and then we have our heading and we have our  button here also underneath this here you can see   that we have another section for our products and  then we have our another section for best watches   and then we have another section for our running  shoes and we have added hover effect here also and then at the last we have our beautiful  footer section and in this footer section we   have added four column here and this background  is actually looking so beautiful for our footer   here you can see that we have our logo a little  bit of description we have our featured section   with some links here and then we have our  contact us details and some instagram images   underneath this here you can see that  we have our payment system and then we   have our copyright section and we have our social  media links here with some beautiful hover effect   and also in our website if i click on  the shop page and in this shop page we   have a heading we have our paragraph here  and then we have a list of products here and we have also added beautiful  hover effect to all of these products and underneath this here you can see that we  have a pagination option also so that we can   add multiple product page in this website and now  let's see a single product so this is our first   product now i will click on this product and here  you can see that we have a particular product page and this product page is looking so beautiful in  the last section we have a gallery here we have   a simple javascript gallery we have a big image  and underneath is we have some a smaller image and   then here we have our heading our pricing section  our size section here you can see that we have   multiple options so that we can select and then  we have added a quantity option and then we have   added a card and product details and now let's see  our this gallery here you can see that currently   we have our this image if i now click on this  white t-shirt this t-shirt is now showing in our   main image and if i now click on this red image  we can see our red image if i click on our this   image we can see our this image so this gallery  is looking so beautiful and it is increasing   our visual effect and underneath this here you  can see that we have some related product page   and also this website is completely responsive  we can have this website in multiple devices in   multiple screen size devices so let me show you  the responsive mode if i now inspect our website   here you can see that now we are in our mobile  screen device and in our mobile screen device   we don't have any navigation links here  instead of our navigation links we have a   beautiful hamburger menu and if we click on this  hamburger menu we can see our navigation menus   in the left side in one column and if i now scroll  down here you can see that we have our product   we have our banners we have our product list with  our hover effect and then we have our footer also   so in our small screen device this home page is  looking fantastic now let's go to our shop page   so this is our shop page and here you can  see that in our shop page we have all of our   products we have our list of products and this  page is looking also beautiful and also amazing that's it now let's go to our single product  page so this is the product now i will click   on this product and here you can see that we have  our gallery here and this page is also responsive   and it is looking amazing in our small screen  device if i now click on these images here you   can see that we can have a preview of that images  and this section is looking so beautiful and if   when i scroll down here you can see that we have  our heading our pricing section our select option   quantity option our cart section and our product  details and then we have our related product here   and this page is also responsive and looking so  beautiful so guys here you can see that in this   tutorial we are going to create this complete  e-commerce responsive website using html and css   and also we are going to use bootstrap for making  our website responsive and more eclectic in small   screen devices and in this tutorial i am going  to show you every process a step by step from the   beginning to the ending point so for this reason  this tutorial might be longer than other tutorials   that's why i have divided this tutorial into some  parts so this is our first part and in this first   part we will create our this home page and  we will make this home page responsive so   that it looks good in our small screen device  and i will request you guys if you're watching   this tutorial then watch this complete tutorials  watch every part because this tutorial is going   to be so interesting and after watching this  complete tutorials after watching all the parts   you will create your own ecommerce website  using html and css and in a few moments we   will create this home page using html and css  but before we get started please please guys   if you are new in my channel and if you didn't  subscribe to my channel yet then please please   subscribe like this video and press the bell  icon for the future videos and if you guys   have any question about this video you guys can  comment below so that's it guys let's get started now i'm in my file directory and here you can see  that i have a image folder a index.html file and   a style sheet and inside this image folders i  have some separate folders here for each of the   particular sections here for our banner section i  have some particular images for our brand clothes   featured etc etc so i have all of these folders  for particular sections and here you can see that   i have a background image and i have two logo  here and then i have a payment.png image also   so now first we have to open our index.html file   and then now from here we have to create our  simple html boilerplate so for creating this   one i will just type that's it now here we have  to give a title and the title will be tutorial   that's it and then now we have to link our  style sheet so that's why link and here we   have to give our path file name and it will  be a style.css that's it so since we are   using bootstrap for creating our this e-commerce  website so now we have to link the boost of cdn   and the jquery and javascript files to our html  file so for doing this let's go to our chrome and then create a new tab and search for  booster from here click on the first link   and then click on the get a started button and here you can see that we have a css so i will  simply copy this css link from here and then go to   our style sheet and then paste it here that's it  so after this one now we have to link our jquery   file and our jazz file also so here you can see  that we have two separate file and i will simply   copy these two script from here so copy and go to  our code editor and bottom of our body tag just   paste this code that's it so guys here you can  see that we have successfully linked bootstrap   to our html file now second thing we have to do  in our website you can see that we have actually   so many icons from draw some icons so that's  why we have to link the font awesome cdn link   also to our html file so for doing this create  a new tab and the search for font awesome ctn now from here click on the first link and if we  now scroll down here you can see that we have a   link tag here so i simply copy this link tag from  here and then go to our html file and then paste   it that's it so now here you can see that we  have successfully linked our phone to some icon   and our bootstrap file to our  html now if i go to our website here you can see that first we have  to create our this navigation bar   and inside this navigation bar we have a logo  and in the right side we have some navigation   links and some icons here so for creating this  navigation bar we have to go to our bootstrap   and here we have to click on our components  and from here we have to select never and if we now scroll down here you can see that  we have a one kind of a styling we have one kind   of navbar if when i scroll down here you can see  that we have another kind of network and so on   you can select any of them but i will see like  the first one from here which is this one so i   need to copy this code so for copying this code we  just have to click on this copy button and then go   to our html file and in the body here first i  will create a comment and it will be navigation that's it and then i will paste the navigation  code that's it now save and if i now go to our   website here you can see that we have a navigation  bar for our logo we have nav bar and then we have   some navigation links and then we have a search  option and a search button here so now we have to   install this navigation bar like this one so for  doing this first you have to go to our code here   here you can see that we have a network class  never expand large never light and busy light   now if i go to our website here you can see that  our navigation bar is actually have some extra   padding from top and bottom but in our website we  don't have any padding here so i want to increase   the padding of this navigation bar so for doing  this let's go to our nav here and here we have   to add a bootstrap class which is p y and it will  be five it means padding from top and bottom five   okay now save and go to our website here you can  see that we have padding from top and bottom five   but now i want to decrease the size of this  padding so for doing this we can actually   adjust the value highest value is 5 we can  actually decrease the value so i will give 3   padding from top and bottom will be 3. now save  and go to our website and here you can see that we   have increased our padding from top and bottom  now next thing i will do i will simply add a   logo here here you can see that we have  a text but instead of text i want to add   image logo so for doing this here you can see  that we have an anchor tag and we have our network   so now i will delete this one and simply i will  create an image tag and here i will give the logo   file path and we have image folder and inside  this image folder we have a logo one dot png   now save and if you now go to our website  here you can see that we have our logo   in our real website our navigation links  is actually in the right side but here   our navigation links is actually in the left  side so now i want to change the align i want   this navigation bar to be in the right  side so for doing this let's go to our code   and here you can see that we have another  list and inside this another list we have   all our navigation links and here in the  another list we have some bootstrap class   one is never never and the one is ami  auto margin bottom from 2 margin large 0.   so i will simply delete this class  because we don't need these classes   and here instead of all of these classes i  will add another booster class which is ml   auto it means margin from left auto now save  go to our website and refresh and here you   can see that all are the navigation links is  actually pushed to the left side but i want this   navigation list to the right side so for fixing  this problem we have to simply create a new tab   and here we have to search for aztec path  bootstrap now click on the first link from here   and here you can see that we have a css  file we just have to copy this css file   and go to our code here and instead of our this  boost of cdn we just have to replace the link   that's it if we now go to our  website and if we now go to our   tutorial and here you can see that our all  navigation links is now in the right side   now in our real website here you can see that we  have our home shop blog about and contact us and   to icon now i want to change this navigation  links for doing this go to our code here   and inside this another list  we have our all list tags   so first thing i will do i will simply  delete this one and delete all of this   till this form okay now delete now save so i will  simply copy this one and then paste it four times and this one will be for our home  this one will be for our shop   and this one will be block it will be about it  will be contact us now save and go to our website here you can see that we have our  home shop blog about and contact us   now i want to add some font or some icons like  these two one is search option and one is cut   so we have to add these options into our tutorial  so for adding this one just go to our font awesome   icon website and from here click the icons  and here we have to search for our search icon   so i want this icon so click on this icon just  copy this html copy this list tag and then paste   it here and here instead of anchor tag now  we have to paste our font awesome icon link   that's it so after this search icon i want another  icon which is cut copy this one and paste it here   now we have to simply change the class  name so for shopping cart it will be   shopping back that's it now save and go to our  website here you can see that we have two icon one   is our search icon and one is our shopping cart  so guys here you can see that we have successfully   created our html template for our this navigation  link now we have to install this navigation link   so that it can be look like this one so for doing  this let's go to our html now if i go to our style   sheet here you can see that we have a google font  link and in our app store we have margin zero pad   in zero and boxes in border box and then in our  body we have defined the google font name and   here you can see that we have some h1 s2 s3 h4 and  h56 tag okay and for each of this particular text   we have some different styling so now these are  actually global text here you can see that for   our h1 i gave font size 2.5 gram and font to  it 700 for our s2 font size 1.8 ram from 2600   for our h3 font size 1.4 font to it 800 for our  h4 font size 1.1 ram font weight 600 and for our   h5 font size 1 ram from 2400 and the color will  be this one and for our h6 color will be this one   so if i go to our website first thing i will do i  will increase the font size of our this navigation   links so for doing this we have to go to our  style sheet and then go to our index.html file   we have a class which is never so i will simply  copy this class from here and then paste it here   that's it so first thing i will do i'll give you  a font size and the font size will be 16 pixel   that's it now save and go to our website here  you can see that we have increased our font size   and then here you can see that  we have actually a little bit of   a space between two navigation links now  i want some extra pairing between these   navigation links so for doing this let's go to  our astro sheet again now if i go to our html   here you can see that we have a class name  which is never light i will simply copy this   never light from here and then paste it here then  we have another list and inside this another list   we have a class name which is never nav copy  this network nav and then paste it here again   and here we can see that we have some class  names inside our anchor tag so i will simply   copy this nav link class from here and then paste  it here so first i will do i will give a padding   padding from top and bottom will be zero  but from left and right it will be 20 pixel   then i will give a color of our  fonts and our color will be black   i will give a transition so that we can add some  hover effects and this transition would be 0.3   second is that's it now save and go to our website  here you can see that we have some extra spacing   between these navigation links now we have to add  some hover effects for our this navigation links   so for doing this just copy this one  and then paste it here so first thing   i will do i will add hover that's it and the  second thing i will do i will add active class that's it and whenever i will hover  on our nav links i want to change the   color and the color will be coral now save  and go to our website and if you know over   on our nav links here you can see that  our nav links font color is now changing   so after this navigation links now  we have to install our these icons   so for doing this go to our style sheet copy  this network from here and then paste it here   then i want to target our itegs here i will  give a font size and it will be 1.2 ram   then i will give a padding here and the padding  from top and bottom will be 0 but from left and   right it will be 7 pixel then i'll give  a cursor and the cursor will be pointer   then i will give you font width  and the phone 20 will be 500 then i will give a transition and transition will  be 0.3 second yes now safe we're going to go to   our website here you can see that we have now  changed our font awesome icon size now i want   some hover effect in our icon also like our this  navigation links so for adding this hover effects   we will simply copy this one and then paste it  here first thing i will do i will add a hover   again we have to paste our nav i and then i will  add active plus now save and go to our website and   if you know over here you can see that our  phone also icons is now changing its color   so here you can see that our navigation link is  actually done but i want some extra space from   left and from our right side so for adding this  space we have to go to our html and here you can   see that we have a div here and inside this  div we have a class which is container fluid   okay for using this class we have actually some  space here you can see that we have a little   bit space from left and right side but i want to  increase the space so for increasing the space we   have to simply change the class name and it will  be actually only container not container fluid   now save and if we go to our website here you  can see that we have much space from left and   from our right side so guys here you can see  that we have done with our navigation menu so   after this navigation menu now we have to create  our this home section we have to add a background   image and then we have to add some text and a  button also so for doing this let's go to our   html here first thing i will do i will simply  collapse this one that's it and here i will add   a section here and inside this section i will  create a id and the id will be home that's it   and here first i will create a div tag and for  this div tag i will add a class name okay we can   add this class later so first thing i will do i  will get a h5 and inside this h5 i will simply   go to our website and copy this text from here and  then paste it there so after this h5 now you have   to create a h1 tag and inside this h1 tag i will  just copy this one and then paste it here here you   can see that our best price and our this year is  not actually in the same color so for adding this   different color we have to add a span tag and  here before our best we have to add aspen tag   that's it and inside this s pen i  will place our best price that's it   so after this h1 now we have to create a paragraph  tag and then for our paragraph i will simply copy   this one and then paste it here and here you can  see that after our comfortable time we have a   line break so i want to break this line into two  line so for doing this we have to add a break tag   that's it and then now we have to create a bottom  type and follow this button it will be shop now now save go to our website here you can see that  we have our h6 our h1 our paragraph and our button   so now we have to extract these things into our  structure so for doing this let's go to our start   sheet from our index i will simply copy this id  which is home and then paste it here then i will   target our s pen tag which we have created for our  h1 now i want to give a different color for this   s pen tag and the color will be coral now save  go to our website here you can see that we have   our best price in a different color so after this  one now we have to install our this button and i   will create this button as a global tag because we  have actually we have to add more buttons into our   code into our website so i don't want to write  this course again again so that's why i will   declare this button as a global tag and here  underneath this a6 let's create a button that's it   first thing i will do i will give a font  size and the font size will be 0.8 ram and then i'll give a font width and the front  to it will be 700 then i'll give the outline   because i don't want any outline then i will  give a border also and the border will also none   now i will give a background color and the  background color will be this one then i will   give a color and the color will be this one  which is l is blue then i will give a padding   and the padding from top and bottom will be 13  pixel and from left and right it will be 30 pixel   then text transformation will be uppercase now  save and go to our website here you can see   that we have successfully cleared our button but  here you can see that our button is not actually   a clickable button so that's why i have to add  a cursor here and the cursor will be pointer   so after this button if i now hover on this  button i want to change the background color   so for doing this simply copy this  button from here and then paste it here   now i want to add hover effect so if i hover on  this button i want to change the background color   and the background color will be this one and  then i will add a transition into our bottom   and transition will be 0.3 second yes now  save and go to our website and if i know   over here you can see that our button  is now changing its background color   so after this one now i have to add the background  image into our background so for adding this one   let's go to our style sheet and here you can  see that we have a home id i will simply copy   this home id and then paste it here so for  our home i will add a background image first   and we have to type url and here we have to type  the image file name and my background image file   name is back dot jpg and this file is actually  inside our image folder now save and go to our   website here you can see that we have our  background image now our background image   size is actually tiny so now we have to define  some width and height for our background image   so which will be 100 and then i will give  a height also and our height will be 100 vh and background size will be covered now  save and go to our website here you can   see that our image is now taking hundred percent  within height but here you can see that our main   focus should be actually this image our this  model so i want this model to be actually here   so for doing this we have to add background  position let's add a background position here and   the background position will be from top i want  to actually put down this image from top 60 pixel   and from left and right it will be center now  save go to our website so guys here you can see   that our this image is now actually taking from  the left and right it is now center but from   the top and bottom it is actually 860 pixel  so now let's remove the 60 pixel from here   and save go to our website here you can see  that now our image is now taking perfect with   a knight now next thing i will do here you can  see that our this text is actually on the top   left i want this text to be in the center so  for doing this we have to add our display flags   and then we have to add our flags direction  and it will be column justify content will be   center then we have to add a line item and it will  be flex start now save go to our website and here   you can see that our this text is now actually  in the center now i want some space from the   left side here you can see that we don't have any  space now i want to take the exact space like this   one here you can see that we have some space here  now i want this exact space for our this section   also so for doing this let's go to our index.html  file and here we have actually class and then now   i will add a class and it will be container now  save go to our website so guys here you can see   that our this text is now taking some space from  left side and from our right side as well now here   you can see the refiner scroll down our navigation  is actually not showing i want this navigation bar   to be actually fixed on the top here so that we  can see this navigation bar if we scroll down   like this one if i just go down here you  can see that we can see our navigation bar   so for doing this we have to go to our html  and here you can see that we have our nav here   and here we have to add a class and the bootstrap  class will be fixed top that's it fixed top is   actually a booster class so after adding this  fixed top we have to go to our star sheet and   we have to go down nav here and here in the nav we  have to add a top value and it will be zero and we   have to add a left value also and it will be also  zero now save and go to our website so guys here   you can see that we have now our this navigation  bar and then we have actually removed the scroll   bar and now this section this navigation bar  is actually fixed top but now this background   image is actually underneath this so now i want  to put this background image a little bit from   the bottom side so for doing this we have to go to  our home and here we have to add 60 pixel from top   now save go to our website and now here you  can see that our this image is now a little bit   towards the bottom side so guys here you can  see that we have successfully created our   this section our navigation section and our this  home section now i want to see our this section   and our this home section is actually responsive  or not so if we now decrease the screen size   here you can see that our navigation  bar is actually completely responsive   and our this section is also responsive  so now if i click on this hamburger menu   here you can see that we have our navigation links  now i want to install this button and i want to   restart these things a little bit so for starting  these things we have to go to our style sheet if i   go to our index.html file if i now expand our nav  here and here you can see that we have a button   and inside this button we have aspen tag and  inside this aspen tag we have a class which   is never tuglar icon and this icon is actually for  our this hamburger icon so now i i don't want this   hamburger icon i want a custom icon from our font  awesome icon so for adding this icon we have to   go to our font awesome and here we have to search  for bar and now i will simply add this bar to our   website so for adding this bar we have to first  go to our html i will simply delete this class   and then we have to go to our bar just copy  this html and then paste it here next thing   i will do i will add an id here and the id will  be bar now save and if i now go to our website and if i now decrease our screen size here you  can see that we have now our navigation bar   okay so now we have to install this navigation bar  so for doing this we have to go to our style sheet   and go to our navier into our nav section we have  to comment out first and it will be mobile nav that's it so for our mobile nav first thing i will  do i will simply remove the border and outline   from this button so for doing this now if i go  to our html and here you can see that we have a   class which is actually never light i will simply  copy this class name from here and then paste it   here then we have to copy a class which is never  too clear this one so copy this network toggle and then paste it here so i don't want any  border so that's why border will be none   and then i don't want any outline and outline  will be also none now save and here you can   see that we don't have any outline and border so  to this one now i want to style our this button   so for add installing inside this button we  have to go to our html here you can see that   we have id for our this icon so i'll simply copy  this bar icon from here and then paste it here first thing i will do i'll give a font  size and the font size will be 1.5 ram   and then i will add a padding and the padding from  top and bottom left and right it will be 7 pixel   then i want to add a cursor and the cursor  will be pointer then we have to give a font   width and it will be 500 then i will add  a transition and it will be 0.3 second is then i want a color and our color will be black  now save and here you can see that we have   changed our this hamburger menu so now we have  to add some over effect on this hamburger menu   so for adding hopper effect i will  simply copy this bar id from here paste it here then i will add hover next  thing i will do i will add active class so whenever i will hover on this bar or active   i will just change the color  and the color will be white now if i hover on this hamburger menu  here you can see that our menu is actually   changing its color and it is turning into  white now if i hover on our this hamburger   menu here you can see that our background  color is actually changing to a black color   now i want to change this color so for changing  this color we have to actually inspect our website   and here you can see that now we are in our  mobile screen device so i will simply select   this button here here you can see that i have  selected this button so i simply select this one   and we have selected a tag here so i will simply  copy this tag i will simply copy the selector   from this section so for copy this selector  we have to just click right and go to our copy   section and go to our copy and click on our copy  selector now go to our style sheet and here we   have to write media query so for adding media  query we have to import our media only screen and now we have to add a max width  and our max which will be 991 pixel   that's it and here we have to paste the selector  so i want to change the background color whenever   i will hover on this button and i want to change  the background color whenever i will focus   on our bottom okay so background color  and the background color will be now save here you can see that whenever i will click on  this button our background color is now changing   okay so now we have to add another thing  we have to go to our style sheet and   from here we have to just copy this  one again and then paste it here   so i want to add our bar also our bar id from our  hover and for our focus also and i want to change   the color and the color will be white now save  and go to our website now if i hover or focus here   you can see that we have changed our background  color and then we have changed our bottom color   also so after this one i have to add some styling  i have to add some spacing from top and bottom   for our this navigation links so for doing this  we just have to select again now select this one   and we just have to copy the  selector and go to our style sheet   and then paste it here so i will simply keep our  this one that's it now i want to actually add some   margin from everywhere so let's take a margin  and emerging from everywhere it will be one ram   then i will add justify content and it will be  flex end because i want this section to be in the   flex and in the right side and then align items  will be flex and here then text align will be   right now save and go to our website and here you  can see that everything is now actually in the   right section and then here you can see that our  this section is actually taking some extra pairing   from our this right side so i want to destroy this  padding so for doing this we just have to select   one section that's it and then we  have to copy the selector from here   go to our style sheet and then paste it here  and here you can see that our dc vector is   actually targeting our first element but i want to  target our all elements so that's why it will be m   and here i will add a padding here and the  padding from top and bottom will be 10 pixel   and from left and right will be zero now save go  to our website here you can see that we have now   a space here from top and bottom and we have  actually less space from our right side so   guys here you can see that we have successfully  done with our this hamburger menu and we have   styled our this navigation links also and this  is looking so beautiful so after this one after   our navigation bar and our this home section  now we have to create our this brand section   here you can see that we have six image  into a section here so now we have to add   this brand section into our website so for  doing this let's go to our english.html file   first let's collapse this navbar and our this home  section also and then let's create another section   and then let's take a id also and the id will  be brand that's it now let's take a deep here   now let's take a class and because i want this  image to be actually in one row everyone to be   in one row so that's why we have to take a boost  type class and it will be low that's it and inside   this row we have to insert our images and then  my image is actually inside our image folder   inside our image folder we have a brand folder  and inside this brand folder we have a one dot png   let's see now save and go to our website here  you can see that we have our first image now i   want six image here but before we do that here  you can see that in the bottom we have a slider   i don't want this slider i want to remove this  slider so for removing this slider we have to   create a class here into our section and it will  be container now save go to our website here you   can see that we have removed our slider from the  bottom and then we have added some space from left   side and from the right side as well now i want  to add some classes for this image so now let's   go to our image and then let's take a class and in  our bootstrap we have a class which is image fluid   and this image fluid class is actually so  important because this image fluid class will make   your image responsive okay so that's why we have  to write image fluid that's it and i hope you guys   know that bootstrap actually follows 12 standard  grid columns it means bootstrap is actually divide   the website into 12 columns so that it can  make this website responsive for different   devices we can actually we can give some columns  we can give some a specific column we can declare   some column to a specific part it means i want  to give this image some columns for our larger   screen for our medium screen and for our small  screen okay so that's why let's take a column here   now in our large screen i want to take this image  only to column okay and in our medium screen   i want to take this image four column and in  our small screen i want to take this image   six column okay here you can see that our this  image will take two column in our larger screen   four column in our medium screen and  the sixth column in our small screen   that's it now i will simply copy this image  from here and then paste it five times that's it and then i want to change the images  and it will be two three four five and six   now save and go to our website here you can see  that we have our six images in one row okay and   if we now decrease our screen size here you can  see that in our response screen our this image is   taking 6 column it means from our 12 column this  one taking 6 column this one is also taking c's   column it means 6 column plus 6 column equal to 12  column okay it means this row is taking 12f column   if we now increase our screen size  and go to our medium screen device   here you can see that however this column is  taking four column this image is taking four   column and this image is taking four column it  means four plus four plus 4 equal to 12 f column   okay and in our large screen it it is taking two  column now here you can see that we don't have   any space from top and bottom of this section so  now i want to take some spacing so for doing this   into a row first thing i will do i will give  margin 0 because i don't want any margin   and i want to take padding from top and bottom 5  that's it now save and go to our website and here   you can see that our this section is now taking  five from top and bottom so our brand section is   also done now if i go to our website here you  can see that we have this section which is our   new section so here you can see that we have three  blocks inside this box we have some images and on   the top of these images we have a background hover  effect and then we have a text and the button   but in our this first box this text is actually  aligned in the left side in our center box this   text is actually in the center in our right box  this text is actually aligning the right side   so we have to remember these orders so  for creating this section let's go to our   code here first let's call up this one now let's  take a section here again and then let's take a   id and the first id will be new because it is a  new section and then let's take a diff and i am   taking this div because inside this div i want  these three images to be in one row so that's   why we have to take a class here and it will be  row and then we have to create another div tag   and let's give a class name of this first div  tag and it will be one that's it and inside   this detect first we will take a image and  my image is actually inside our image folder   in the inside our image folder we have a new  folder and then i want to take the first image   that's it and i will add some classes here  because i want to make this section responsive   i want to make this image responsive so  that's why we have to take image fluid   and then let's create another div tag here  and let's create a class and this class will   be details and inside this details class  i will put our heading and our button here   so for our heading i will take a s2 and the  follower is 2 i'll simply copy this one from here   and then paste it here and then i will  create a button and this one will be shop now and i want these tags to be uppercase so  that's why we have to create a class here   class name will be text uppercase   that's it now save and go to our website and  go to our website here you can see that we have   our section here we have our image and we have  our this text and we have our button here also   now here you can see that we have a  slider again and i don't want any slider   so for removing this slider into our section  we have to create a class and i will give with   hundred percent and then inside this class  i will give padding zero and margin zero now   save go to our website here you can see that we  have removed our this slider also from the bottom   now i want to define some columns for this  particular image for this particular section   so let's go to our one here and then i will  take column from large in our large section   in our large device i want to take this image  four column and in our medium screen device i   want to take this image 12 column and in our small  screen device i want to take this image 12 column   and then i don't want any padding from anywhere so  that's why it will be zero now save and go to our   site there you can see that we have our image  now we have to add two more so for doing this   so for adding two more images i will simply copy  this d from here and then paste it two more time   and then i will simply change the images  and it will be two and it will be three   now save and go to our website here you  can see that we have now three images   and now i will simply copy this text from here and  then paste it here this one also and then paste it   here now save go to our website and here you can  see that we have changed our these sections here   and now here you can see that our these images  is not taking actually same with and height so   now we have to fix this one into our style sheet  so for doing this let's go to our html and then   copy this new id from here and then paste it here  that's it and then if we put our html here you can   see that we have a class for our this div so copy  this one class from here and then paste it here then i want to target our image because i want to  fix the image issue and here i want to give the   width and it will be 100 and then i will give a  height also and the height will be also 100 then i   want to give a background position and it will be  center and the center then background repeat and   i don't want any repeat so that's why it will be  no repeat and the background size will be cover   and then i will add position relative now save and  go to our website here you can see that this image   is now taking same width and height and then now  we have to copy this class again and then paste   it here then we have to target our details here  you can see that you have a details class copy   this class from here and then paste it here here  you can see that our this section this text and   button is actually underneath this image i want  this text to be actually inside this image on   in the center so for doing this we have to add  position absolute then we have to give a width   here and it will be 100 percent then we have  to give a height and a height of 300 percent   then we have to give a top value and  it will be zero and we have to give   a left value as well and it will go to  zero then we have to add a transition and transition will be 0.3 second is now save go to our website and here you can see  that our this text is now actually inside our   this images and here now i want to add a hover  effect however i will hover on our these images   i want to change the background color so for  doing this i will simply copy this one from here   and then paste it here however i will hover on  our one class then i want to change the background   color of our details so first thing i will do  i will add a cursor and the cursor is pointer   then i will add a background color and  the background color will be a rgb value   and here it will be 245 and this value will be 178   and this one will be also 178 and the alpha  will be 0.7 now save go to our website   and here you can see that whenever i will hover  on this card this background color is now changing   okay so after this one now we have to align  this text okay for this card i want this text   to be left side for this card i want this text in  the center for this card i want this text in the   right side so now let's go to our star sheet  again first thing i will do i will actually   install our button copy and paste it here because  here you can see that our button is not actually   like this one so that's why we have to establish  button differently so for doing this we have to   remove this over and then we have to target our  button first thing i will do i will add display   and it will be inline block then i will give a  font size and it will be a 14 pixel we have to   give a font to it point to it will be 500 then i  want to give a color here and the color will be   this one and i want to remove the background  and that's why background color will be none   and the text transform will be upper case and i want border from the bottom that's my border  bottom and it will be one pixel and the color will   be solid this one then i want to give a padding  here and padding from everywhere it will be 2.5   pixel and then i want to add a transform and it  will be translate why because i want these buttons   to be actually a little bit to the bottom side  so that's why it will be translate why 70 pixel   and then i will add a transition  and it will be 0.3 second is   that's it now save and go to our website  here you can see that we have changed our   buttons now we have to add some hover effect for  this button also for doing this let's go to our   button and then paste it here and then we have  to add hover whenever i will hover on this button   i want to change the color and our color will be  white and then i want to change the border bottom and the border bottom color will  be one pixel solid white now save   and if you know over on this button here you can  see that our button is now changing to white color   now here you can see that for this  card this text is actually on the top   left i want this one to be in the center  left so for targeting this specific card   we have to add pseudo element so for doing  this just copy this one and then paste it here and here we have to add sudo  element so that's why i'm using nth   child so i want to target our first card so that's  why it will be one and here i will add display   and it will be justify content will be  center flex direction will be column   align items will be flex start and then text  align will be a start okay now save and go to our   website here you can see that our this text is now  actually in the center left here now after this   one now we have to target our this one and for  this one i want to change this aligning i want to   take this text and i and place this into the  center so for doing this simply copy this one   and then paste it here and now we have to target  our sudo 11 2 it brings our card 2 so for our card   our align items will be center and our text  term will be center then i want to actually   target our card num3 so it will be 3 allen items  will be flex and and then text align will be right   now save and go to our website and here you can  see that we have changed our this one and this   one also but this one is not changed  we have to go to our star sheet again   okay text alone will be end not right and the  align item should be flex end now save and go   to our website we have placed this text into the  right section so our this section is also done so after this section if i now  go to our website here you can   see that after our new section we have to  now create our this our featured section   we have a heading we have a horizontal line here  and then we have our paragraph and then we have   our four card here so for creating this one let's  go to our html first collapse this one that's it   and let's create a section again and  let's get id and the id will be featured now let's get a deep tag and inside this jit  tag we have to create a s3 for our heading   and let's copy this h3 from here copy and paste  it here then we have to create a horizontal line   that's why hr then we have to create a paragraph  so for this paragraph copy this line from here   and then paste it here now save and go to our  website here you can see that we have our heading   and we have a horizontal line and then we have  a paragraph so now we have to create our four   cards we have to create our product cards so  for doing this let's go to our section here   and here we have to create another div tag okay  first thing i will do i will create a class here   and i will add container because i want some  space from left and right so that's why it   will be container and i want this text to be  centered so that's why it will be text center   and then i want to take some margin from top and  it will be 5 and i want to take a padding from top   and bottom it will be five now save and go to our  website here you can see that we have everything   in the center and then we have some space from  top and bottom okay let's go to our class here   and here i will add a class and i want some  more space from top and bottom so that's why i   will add margin from top and bottom it will be  five and the padding from bottom will be five   now save go to our website and here you can see  that we have now much space from top and bottom   so now we have to add our product card so  for doing this let's create a class here and   it will be low because i want four product  in one row so that's why class will be low   and then first we have to create our first product   and for our product let's create a class and  it will be product so for our product first we   will target our image we will add an image so  my image is actually inside our image folder   and then we have to enter inside our feature and  then we have to target our one dot jpg that's it   so after this image now we have to add our details  our product details like name price etc etc so   after this image if we now go to our website here  you can see that after our image we have some   stars here so this is actually font awesome  icons so we have to add these as stars so for   doing this let's go to our font awesome icon  web page and here we have to search for a star   so i will take this one and copy this html  go to our html here and let's get a div tag and we have to create a class also  and the class name will be a star   and here we have to paste the i tag  and we have to paste this i five times   that's it so after this star now we have to  create a h5 for our product name and let's   create a class here also and this class name  will be product name and the product name will be export shoes copy this one and then paste it  here that's it now let's get a h4 for our price   now let's create a class also  and it will be product price and the price will be dollar 92 now let's get  a button here and the button will be buy now   and the class name of this button will be buy  button that's it now save go to our website and   here you can see that we have our first product we  have our five star we have our name here and then   price and then button and then we have again we  have a slider we have to remove this slider first   so for removing this slider here in the row class  we have to add another classes and it will be mx   auto mx auto means margin from left and right side  auto and then i will add container fluid because i   want a little bit of a space from left and right  side now save and go to our website and here   you can see that we have removed our slider from  the bottom and now i want this tags to be center   so that's why let's go to our product here  and here i will add text center because i want   every text to be center and then i will add our  column here i will define some columns for this   specific card for this specific product  so let's take column for our large screen and for our large screen it will take three column  for our medium screen it will take four column   and for our smaller screen it will take 12 column  now save and go to our website and here you can   see that you have now a space from the left side  and from the right side as well now i want some   space underneath this image here so that's why  let's go to our image here and here we have to   add a boost type class which is margin bottom and  the margin from bottom would be three that's it   now save go to our website and here you can see  that we have some space here from merchant bottom   from this image so after this one card now we  have to add three more we have to add three   more product so that's why just copy this  one and then paste it three times that's it   and let's change the images it will be  four it will be three and it will be two   now save and go to our website here you can  see that we have four cards here now we have   to install these things we have to install our  stars we have tested our heading price and button   section and we will also add hover effect  so for doing this just go to our style sheet   comment out first and it will be products that's it so first thing i will do i will simply  go to our product section inside this feature we   have a product here so copy this product class  from here and then paste it here that's it so   first thing i will do i will make it a clickable  product so that's why cursor will be pointed   and then i will take margin from bottom to rem so  now we have to add our hover effect to our image   here you can see that whenever i will hover  on this image we have changed the opacity of   our image so for doing this just go to and copy  this product from here and then paste it here   then we have to target our image and let's add  a transition here and the transition will be 0.3   second all again copy this one and then paste  it here so whenever i will hover on our product   i want to decrease the opacity of our image  so as well as the capacity and it will be 0.7   now save and go to our website and if you know  over here you can see that we have changed the   opacity of our images so after this one now we  have to actually establish this button because   our primary button is actually black background  but this product button background should be   different so that's why let's go to our product  here and copy this product and paste it here   and we have actually created a different class  for our buttons so copy this by button from here   and then paste it here so first thing  i will do i will change the background   and the background color will be this one and  if i now go to our website here you can see that   initially we don't have any button but whenever  i will hover our button is actually popping from   the bottom so that's why we have to add this  effect so initially we have to hide this button   so that's why we have to add a transform and we  have to add a translate y and it will be 20 pixel   and then i will hide this button  so that's why opacity will be zero   let's add a transition here and  transition will be 0.3 second   all now save and go to our website here  you can see that our button is now gone   because whenever i will hover on this card  our button will be popping up from the bottom   so for doing this let's copy this one and then  paste it here so we have to add hover effect   to our product because whenever i will hover on  this product i want this button from popping up   to the bottom so for doing this i don't want  to change the background here again and then   remove this transition but the y value would be  zero and the opposite will be one now save and go   to our website and if i know however on this card  here you can see that our button is now actually   popping up from the bottom and  this effect is looking so beautiful   so after this one here you can see that we  have a horizontal line now i want to start   this horizontal line in our website here you  can see that we have a horizontal line here also   here also and here also so i don't want to write  this code for this horizontal line again and again   so i want to declare this horizontal line as  a global tag so let's go to our global section   and let's get a hr for our horizontal line we have  to give a width here and which will be 30 pixel   and then i will give a height and the  height will be 2 pixel then i will add   a background color and the background color  will be this one now save go to our website   here you can see that we have our horizontal  line but this horizontal line is actually in   the left side i want this one to be in in the  center so for doing this let's go to our html   and go to our horizontal  line let's get a class here   and this class will be margin from left and right  it will be auto now save and here you can see that   our this horizontal line is now in the center okay  so after this horizontal line now i want to change   the color of these stars so for changing the  color of this star let's go to our html and   here you can see that we have a class which  is a star so copy this star and then go to our   global section and then paste it here  then i want to target our eye tag   first thing i will do i will give a font  size and the font size would be 0.8 ram   then i will give a color and the color will be  gold this one now save and go to our website and   here you can see that we have changed our color  for this ester but now i want some space from   top and bottom so for doing this copy this star  and then paste it here then i will add a padding   padding from top and bottom will be 10  pixel from left and right it will be zero   here you can see that now we have  added some space from top and bottom   so guys here you can see that we have successfully  done with our featured section so now i want to   say this section is responsive or not  so now let's decrease the screen size and here you can see that in our median screen  device this section is taking three column   for each of the card for each of the product card   and if you now decrease again here you  can see that now it is taking one column so after this our featured section now if we go  to our website here you can see that we have a   banner here we have a paradox background so  now we have to add this paradox background   and this text and button into our website  also so for doing this let's go to our html and then here let's create a section now we  have to create a id and the id will be banner   that's it now inside this section let's create  a div and let's create a class also now i will   create a bootstrap class okay we will decide  this class later now we have to create a h4   for our heading our smaller heading copy  this heading from here and then paste it here   then we have to create a h1 tag and for  our h1 let's copy this heading from here   and then paste it here and i need a line  break after autumn collection so that's why   i will take a break tag and then let's create  a button and the button name will be shop now now i want to make this text uppercase  so that's where let's take a class   and here we have to take a bootstrap  class which will be text uppercase this one now save and go to our website and here you can see that we have our heading  and we have our button here so now we have   to put a background image and we have to make  this background image as a parallax background   so for making this we have to go to our style  sheet first let's copy this banner id from here   and then paste it here so for banner styling  property we will go to the top here and we have   a home section so this is the home section  i will simply copy this code from here   from this home section and then paste it here  that's it so now first thing i will do i will   change the background image and inside  our image folder we have a banner folder   and inside this banner folder we have to take this  2 dot jpg that's it and which will be 100 percent   and now i will give a height and it will be 60  vh and background size will be covered and the   background position will be top 70 pixel  and from left and right it will be center   and then i have to add another property  and it will be background repeat   and it will be no repeat that's it and then we  have to make this background image as a parallax   background that's why we have to add background  attachment so that's why it will be fixed that's it and the display will reflect  flags direction will be column justify   content will be center and the align items will  be flags start now save and go to our website   and here you can see that we have created our  image as in parallax background so now here you   can see that for our this heading and button  we don't have any space from the left side   so i want some space from the left side so that's  why let's go to our html and here you can see   that we have a class and this class section is now  empty now i will add a bootstrap class here and it   will be container because i want some space from  left and right so that's why it will be container   now save go to our website and here you can see  that we have now a space from left side and from   the right side as well and now we have to style  our this heading and our this h1 also so for doing   this let's go to our style sheet and copy this  banner id from here and then paste it here now   we have to target our h4 for our smaller heading  and i will change the color and our color will be   this one and also i will change the font color of  our heading h1 so let's copy this one and paste   it here and it will be h1 and our heading color  will be white that's it and then i will change   the background of this button also so for doing  this copy this one and then paste it here and   instead of h1 it will be button because we have a  button tag and i will change the background color   and background color will be this one now save  and go to our website and here we consider we   have changed our smaller heading our h1 and then  we have changed our this background color of this   button also and after adding this styling  now i want some spacing from the top and   from the bottom here because we don't  have any space from top and bottom   so for adding space let's go to our index.html  and then inside this section let's create a class   and i will take some booster classes so first  one i will take m y it means margin from top and   bottom and it will be five and then i will take  tui it means padding from top and bottom five   now save and go to our website and here you can  see that now we have a space from top and bottom   and we have successfully created our banner  section also so after our this banner section   if we go to our real website here you can  see that we have our address and jump suits   and i don't have to write codes for this section  because we have actually written these codes   into our feature section so i will simply copy  this feature section code and then paste it here   then i will simply change the images so now  let's go to our code editor and here you can   see that we have our feature section so i'll  simply copy this feature section collapse this   one and then paste it here that's it and now  let's change the id here and it will be closed   that's it and for our spacing from top and bottom  i will keep this margin y and i will delete this   padding bottom and for our heading it will  be actually this one dresses and jumpsuits   that's it now we will simply change the images  so inside this image folder i have a folder   named clothes and inside this close i have to  take one dot jpg that's it now copy this one   and then paste it here and this will be  close two dot jpg now copy this close from   here and then paste it here and here that's  it now save and if you now go to our website here we can see that we have created our dresses  and jumpsuits and we have our fourth product here   and we didn't have to write a single line of  code for this section so after our dressers and   jump source now we have to create our this best  watches section and also we don't have to write   a single line of code for this section because  we have already code for our this section i will   simply copy this code from here and then paste  it here okay so now let's go to our code here   first i will collapse this one and copy this one  from here and then paste it here that's it and   let's change the id and it will be watches and  now we have to change the heading and it will be   best watches that's it and now we have to simply  change the images so now here it will be watches   because i have a watches folder inside our  image folder that's it now i will simply copy   this folder name and then paste it here here and  then here now save and if we now go to our website and here you can see that we have our best watches  section also so after our best watches section now   we have another section called our running shoes  and again we don't have to write code for this   section because we have already written for this  one so i will simply copy this one and then paste   it for this section now close this section copy  this one again and then paste it here now let's   change the id here and it will be shows that's  it and now here i will add a padding bottom and   it will be five because i want some spacing from  the bottom and now we have to change the heading   for our heading it will be running shoes and then  paste it here that's it and now we have to change   the images we have to change the image  folder and inside these images we have   shoes and then i want to take this one that's it  now copy this path file and then paste it here   and it will be seven and it will be six and  it will be five now save and go to our website and if you now scroll down and here you can  see that after our best watches we have our   running shoes section and now here you can  see that we have created our three or four   section for our products so i think  our this product section is enough now   after this one after this product sections now  we have to create our this beautiful footer   so for creating this one let's go to our html  collapse this one and then let's get a footer   and for our footer let's create a class and i want  some classes here so first one will be margin top   because i want some spacing from top that's why  it will be five and then i will take from padding   bottom and top it will be also five that's it and  inside this footer let's get a div tag now let's   create a class and the class will be row because  if we go to our website here you can see that   we have actually four column first column second  column third column and four column so here you   can see that each of this column is actually in  one row so that's why i want to keep these things   in one row in order this website also so that's  why we have to use bootstrap class which is row   that's it and then inside this div we  have to create another d for our first row   so let's create a class here and let's  create a class name also and it will be   footer one that's it and then i will define  our responsive mode also because i want to   specify some columns for each of these sections   so that's why our this section our this column  will take in our large screen three column   and in our medium screen it will take six column  and in our small screen it will take 12 column   that's it so here you can see  that in our website we have   we have our logo here and then we have some text  here so now we have to clear this section first   so for creating this one first we have to take our  image section and here we have to give the source   and my logo is actually inside my image folder  and then i have a logo two dot png file that's it   and then we have to create a paragraph for  our paragraph so copy this paragraph from here   and then paste it here that's it now  save and if you now go to our website here you can see that we have our  logo and then we have our text here   so we have created our first column now we have  to create others also create another div tag for our class i will simply copy these  classes from here and then paste it here   so first thing i will do we have to take  a heading so that's why i will take h5   and this one will be featured that's it and then  we have to create another list and inside this   another list we have to create some list and we  have to create some anchor tag also that's it   and it will be hash and inside this  anchor tag it will be for our man so i will simply copy this one and  they paste it four or five times   and now i have to change the names here so now here you can see that we have created  another list and inside this another list   we have some list text and inside this  list tags we have some anchor tags also   so now save and go to our website here you can see that we have our feature section  so after this section we have to create two more   but before we go i want this text to be  uppercase so that's why i have to take a class   a booster class and it will be text  uppercase and then i don't want any   bullet points so that's why it will be list  under style now save and go to our website   here you can see that now all text are now in  uppercase and we don't have any bullet points and after this feature section i want to take  some spacing because we don't have any space here   so that's why let's create a class here also and  this class will be padding bottom two now save go   to our website here you can see that now we have  a space underneath this section underneath this h5   and here we can see that we have actually a slider  in the bottom here and i don't want this slider   so let's remove this one in our row i want to take  a container because i want some spacing from left   and right and i will give mx auto and then i will  take a padding from top and it will be five that's   it now save and go to our website and here you  can see that now we have no slider in the bottom   and then we have some spacing from top and  bottom so now let's create other two columns   so for our next column i will  simply copy this column from here   and then paste it here that's it  and our heading will be contact us that's it and here instead of  another list i will create a div tag   and inside this div tag we have to create  a h6 and i want to transform this text   into uppercase so as well as take a  class and it will be text uppercase and here it will be address and underneath  this h6 we have to create a paragraph tag   and for our paragraph let's go to  our and copy this one from here that's it so you simply copy this div tag again  and then paste it here this time it will be phone   and let's copy this phone number  from here and then paste it here   that's it now copy this div from here again and  then paste it here and this one will be email and i copy this email address from here   and then paste it here that's it now save and go  to our website and if you now scroll down here   you can see that we have our contact us section  so after our contact us section now we have to   create our this instagram section we have actually  five images here inside this instagram section   so for creating this one i will  simply copy this div from here and then paste it here that's it and the heading   will be instagram and here we have to  create div tag instead of another list   and then let's create a class and the class  will be row because i want these images to be   in one row and then let's create an image tag for  inserting our image so inside our image folder i   have a insta folder and let's take our first  one that's it and let's create some classes   because i want to make this images responsive  so that's why it will be image fluid also let's   give some width and it will be 25 and i will  give a height also and our height will be 100 and then i will give some margin from  all around so that's why it will be two   that's it now save and go to our website and  here you can see that we have our instagram image   now copy this image stack from here and then paste  it four times that's it and this one will be two now save and go to our website now here  you can see that we have our five images   inside of this instagram section so after  our this setting now we have to create our   this payment section and we have to create our  this copyright and then we have to create this   font awesome icons also so for creating this one  let's go to our html and underneath this div tag   let's create another detect and let's get a  class also and the class name will be copyright   that's it and then i want some spacing from margin  top so that's why it will be five and inside this   dip tag let's create another div tag and let's  create some classes also and then now the class   would be row because i want to keep these things  in one row so that's why it will be low and then   for avoiding the slider from the bottom i want  to take container and then mx auto that's it   so now let's get our first div  and let's create some class also   and now i want to define some columns for this div  because i want to make this section responsive so   that's why this div will take in our large  screen three column and in our medium screen   it will take six column and in our  small screen it will take 12 column   and the first one will be our image because  i want to insert the payment image and this   image is actually inside our image folder  and we have a payment dot png that's it   sort of this section let's copy  this one and then paste it here   and then here instead of image  we have to create a paragraph tag   and then we have to copy this copyright text from  here and then paste it here that's it and now i   want to change the column for our large screen and  it will be four that's it now copy this one again   and then paste it here for our social media icons  and instead of p we have to create a anchor tag   and it will be hash and inside our anchor  tag we have to take our facebook icon first   so that's why let's go to our icon webpage  and here we have to search for facebook now i want to add this icon so that's why click on  this icon and then copy this html and then paste   it here that's it now copy this one and then paste  it here now i want to add our twitter icon also   and it will be twitter and then  i want our linkedin icon also   that's it now save and go to our website and here you can see that we have our facebook  twitter and the linkedin icon here and   this section is actually breaking the line here  but i don't want to break this line i want this   section to be in one line always and we have to  fix this one so for doing this let's go to our   copyright section and here we have to create  a class and this class will be text no wrap   that's it now save and go to our website  so guys here you can see that now we have   created our footer also and we have done with  our html for this footer now we have to style   this one so for doing this let's go to our style  sheet first let's copy this footer from here   and then go to our style sheet and then paste it  here that's it and for our footer first thing i   will do i will add a background color and our  background color will be this one now save go   to our website and here you can see that we have  changed our background color now here we can't see   our text now we have to change the color of this  text also so copy this one again and then paste   it here so first i will target our h5 it means  our headings and then i will add some colors   and our color will be this one and then i will  give a font to it and our phone to it will be 700   then i will give phone size and our phone size  will be 1.2 ram now save and go to our website   now here you can see that we can see our this  feature contact us and in instagram section so   now you have to change the color of our this text  so for doing this let's copy over this one again   and then paste it here so now we have to target  our list here first and let's get a padding   bottom here and it will be four pixel now copy  this one again and paste it here then we have to   target our anchor tag and then now let's create  a font size and the phone size will be 0.8 ram   and the color will be let's see this one that's it  and now we have to add some hover effect because   whenever i will hover on our list i want to change  something so that's why it will be over and i will   change the color and it will be this one now  delete this one and save and go to our website   and if you know over here you can see that our  this section is now changing so after our list   tag now we have to target our paragraph text  we have to change the color of our paragraph   so for this one just copy this footer and then  paste it here and then target our paragraph so first i will give a color and our color will  be this one and then i'll give you a font size   and our font size would be 0.8  ram now save and go to our website   and here you can see that now we can see our  this section so we can see our paragraph here   so after all this paragraph and our this  heading and text now we have to install   our this icons so for doing this let's copy  this one footer again and then paste it here and then we have to target our anchor tags and  this anchor text is actually inside our copyright   section that's it so first thing i will do i'll  give some color and our color will be black and i will give a width here and our width  will be 38 pixel and i will give a height and   the height will be also 38 pixel and let's give a  background color and our initial background color   will be white and the display will be inline  block and the texture line will be center line height will be 38 pixel now let's give  some border radius and the border radius will be   50 percent and i have to give a transition  because i want to add hobart effect here and   it will be 0.3 second is and then let's create a  margin here and the margin from top and bottom it   will be zero but from left and right it will be  five pixel now save and go to our website here   you can see that now we have changed our this  icon here now i want to add some over effect so   for doing this copy this class from here and  then paste it here and then let's add hover so i will change the color first and the color  will be white and then i want to change the   background color and the background color will be  this one now save and go to our website and if i   now hover here you can see that our background  color and our text color is now changing   so guys here you can see that our this section  our this copyright section is also done but in   our this section here you can see that underneath  this image we don't have any space here but now i   want some spacing so for doing this let's go to  our html and let's go to our image section here   and here in the paragraph let's get a class and  i will take padding from top and it will be three   now save and go to our website and here  you can see that now we have some space   underneath this image so now we have  created our footer also now i want to   see our this photo section is responsive or  not so now let's decrease the screen size   and here you can see that this photo section is  completely responsive now here you can see that   we have our logo and our text here it means our  this one is our first column this is our second   column and our third column and fourth column  but now i want some spacing after one column   so for doing this let's go to our  code here now let's go to our second   column and here i will take some margin bottom  and the margin bottom will be 3 for this section   and for our this section i will take also margin  bottom 3 and now let's go to our copyright section   and in our copyright section we have three column  here now in our first column i want to add some   margin here and margin bottom will be four and  then i will add some margin here also and it will   be margin bottom two that's it now save and go to  our website and here you can see that now we have   some spacing underneath these sections here so  guys here you can see that we have successfully   create our this home page and this homepage  is looking so beautiful now everything is   taking one column so that it looks in perfect  with an height and it is looking so beautiful   but now i want to do another thing here you can  see that this is our navigation bar and i want   to change the color of this navigation bar this is  not actually white i want to change the background   color of this navigation bar and it will be  white so that's why let's go to our navigation   and here you can see that we have  a booster class which is bg light   now i want to change the class and it will be busy  white that's it now save and go to our website and   here you can see that our background color is  now white color and then i want to do another   thing underneath this background underneath  this navigation bar i want to add some box   shadow so that it looks beautiful so that's why i  go to our style sheet and let's go to our navbar and here in our navbar i will give a box shadow  and from the x value it will be 0 and from the y   value it will be 5 pixel and for the blur radius  it will be 10 pixel and i will give rgb a color   and rgb color will be 0 0 0 and 0.1 that's it  now save and go to our website and here you   can see that we have a simply a small box shadow  underneath this navigation bar and this is looking   so beautiful guys so now let's increase the screen  size and let's see what we have created here you   can see that we have created our navigation bar  we have added some box shadow we have our logo and   then we have our navigation links here and then  we have our these icons our font awesome icons   then we have a background image we have some  headings and we have a button here also and if we   now scroll down here you can see that we have our  brand section and this brand section is looking   amazing here you can see that we have six image  in one row and then we have a feature we have a   new section here so that it attracts users towards  the website so here you can see that we have three   image and we have some hover effect here also  and then here we have our feature section here   you can see that in our feature section we have  four product image and if you hover on a product   here you can see that our this button is actually  popping up from the bottom and this transaction is   looking so beautiful and if you scroll down here  you can see that we have a parallax background   and this background is looking so beautiful  we have a background image we have our heading   and button here and if you scroll down we have  another section we have another product section   and this product section is looking also beautiful  we have our best watches our running shoes and   then we have our beautiful footer here and inside  this footer we have four section one is our logo   and text and one is our feature section our  contact us section and our instagram section   and then we have our this social media icons our  copyright section and our this payment section   and now let's see this website is responsive  or not now let's decrease the screen size   and now here you can see that we are in our tablet  screen and here you can see that in our tablet   screen we don't have any navigation links instead  of our navigation links we have a beautiful   handbiker menu with some hover effect if i now  click on this hamburger menu here you can see   that our navigation links is coming from the top  and it is now in one column and this section is   looking awesome and here you can see that we have  our background image and then we have our this   text here and our button here and here you can see  that in our large screen this section was taking   actually one row and now it is taking two row here  and here we have three images in each row and then   we have our this section and this section is  taking hundred percent within height this one is   also taking hundred percent width and height and  then we have our feature section and this feature   section is looking also beautiful here you can  see that this feature section is also responsive   and then we have our banner section about this  product section another product section and then   we have our footer here so now let's decrease the  screen size mode and go to our small screen device   here you can see that we are now in our small  screen device and this is looking awesome   everything is taking hundred percent within  height and it is also looking so beautiful   and so responsive and taking perfect within height and everything is now in one column  and it is looking so beautiful   so guys here you can see that we have simply  created our e-commerce website using html css   and bootstrap and this is our first episode of our  e-commerce website using html css and bootstrap   and inside this first episode we have  created our complete responsive home page   and in our next episode which is our part two  we will create our shop page this one we will   add product and we will add some pagination and  then we will create this whole section responsive so i hope you guys enjoyed this tutorial  and if you guys really enjoyed this tutorial   and learned something new then please please  subscribe like this video and press the bell   icon for the future videos and don't forget  to watch complete series of this e-commerce   website using html css and javascript  that's it guys let's see you in our next episode   you

Channel: Tech2 etc

Views: 82,450

Keywords: tech2 etc, Ecommerce Website Using HTML And CSS, How To Make Ecommerce Website, How To Make Ecommerce Website Using HTML And CSS, ecommerce website html css, ecommerce website html css javascript, ecommerce website html css bootstrap, ecommerce website html css js, create ecommerce website, html, css, html and css, create ecommerce website html css, responsive ecommerce website, create responsive ecommerce website, create online shopping, create shopping website

Id: 37KohMnlP7Q

Length: 96min 55sec (5815 seconds)

Published: Thu May 06 2021