Online store e commerce responsive website using html css

As our website should be Responsive[A Responsive website is automatically adjusted for different screen sizes and viewports.]

For Example:-Blogger website is also responsive you can easily use comfortably it on a phone[small screens] and PC[big-sized screens].

So when we are using the website there is a problem that it is not able to show all the menu lists on the navbar. Finally, we decided to make a button-operated menu list. So when you click on the menu icon It will open into a menu list which you can see in the next image.

ShoPperZ

Now, the header section is over. Let’s move forward to the main section.

2. Section:-

Section portion which mainly contains the content of a website is divided section mainly into two portions:-

section1 which contains an image-slider contains images. Section2 which contains container class contains different items.

source code for e commerce website in html and css

Now it’s time to add CSS and JAVASCRIPT files to the HTML.So As I am using the external file for the CSS and JAVASCRIPT so I linked it in the HTML code.

   
   
   
     
     
     
   Document  
     
     
   
   
     
     
ShoPperZ
  
     
  
         
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
           
         
     
  
     
  
       
  
         
HOME
  
         
SHOP
  
         
OUR PRODUCTS
  
         
CONTACT US
  
         
ABOUT US
  
       
  
     
  
     
  
         
     
  
     
   
  
     
  
       
  
         
  
             
             
           
           
             
           
           
             
           
           
             
           
           
             
           
       
  
     
  
     
  
       
  
         
Products
  
         
Sell your Products
  
         
Advertise
  
         
Pricing
  
         
Product Buisness
  
       
  
       
  
         
Services
  
         
Return
  
         
Cash Back
  
         
Affiliate Marketing
  
         
Others
  
       
  
       
  
         
Company
  
         
Complaint
  
         
Careers
  
         
Affiliate Marketing
  
         
Support
  
       
  
       
  
         
Get Help
  
         
Help Center
  
         
Privacy Policy
  
         
Terms
  
         
Login
  
       
  
     
  
     
Copyright © 
ShoPperZ
 2021-2028
  
     
     
     
   
   

so the structure of our website is ready.

CSS Code E-commerce website:-

The structure of the website layout is completed but it doesn’t look good without styling. As human skeletal alone can’t look good without skin. So here the work of styling is done with the help of  CSS.

Topics to be known before CSS tutorial:-

50+ Frontend Project Code – Click Me 

1.Flexbox.
2.CSS basics[selectors,color,border-box,etc].
3.pseduo effects[hover, active] and pseudo elements[before].
4.media queries[responsive] and keyframes[animation].  

1. Firstly style the header. Use Flex property to align every flex item in the header in a line.
then use the same for search menu and heading lists as flexbox. then align them in a  horizontal line using properties.
2. set visibility of the menu class and heading class to be hidden because it should appear when the size of the screen is less. [when we are using it in phones or tab].
3. Apply other properties and hover effects[ HOVER effect works when the cursor goes over the tag on which it is applied] to the header files as shown below.
4. Using the keyframe property which is used for the animation [I use for the image slider].
5. Apply styling on the items/products and their classes [flex and some other properties].
6. Similarly, apply some styling on Footer as shown below.
7. Finally when your webpage is ready now it’s time to make it responsive so that it also works fine on small screens[phones].
8. Use media queries property to make it responsive and inside it mention the properties you want to see when the size of a screen is small.
finally, check your website is ready.

1:  *{  
2:    margin: 0;  
3:    padding: 0;  
4:    box-sizing: border-box;  
5:  }  
6:  header{  
7:  display: flex;  
8:  justify-content: space-evenly;  
9:  align-items: center;  
10:  height:60px;  
11:  width:100%;  
12:  background:black;  
13:  }  
14:  .heading ul{  
15:    display:flex;  
16:    }  
17:  .logo a{  
18:    color:white;  
19:    transition-duration: 1s;  
20:    font-weight: 800;  
21:  }  
22:  .logo a:hover{  
23:    color:rgb[240, 197, 6];  
24:    transition-duration: 1s;  
25:  }  
26:  .heading ul li{  
27:    list-style: none;  
28:  }  
29:  .heading ul li a{  
30:    margin:5px;  
31:    text-decoration: none;  
32:    color:black;  
33:    font-weight: 500;  
34:    position:relative;  
35:    color:white;  
36:    margin:2px 14px;  
37:    font-size: 18px;  
38:    transition-duration: 1s;  
39:  }  
40:  .heading ul li a:active{  
41:    color:red;  
42:  }  
43:  .heading ul li a:hover{  
44:    color:rgb[243, 168, 7];  
45:    transition-duration: 1s;  
46:  }  
47:  .heading ul li a::before{  
48:    content:'';  
49:    height:2px;  
50:    width:0px;  
51:    position:absolute;  
52:    left:0;  
53:    bottom:0;  
54:    background-color: white;  
55:    transition-duration: 1s;  
56:  }  
57:  .heading ul li a:hover::before{  
58:    width:100%;   
59:    transition-duration: 1s;  
60:    background-color:rgb[243, 168, 7];  
61:  }  
62:  #input{  
63:    height:30px;  
64:    width:300px;  
65:    text-decoration: none;  
66:    border:0px;  
67:    padding:5px;  
68:  }  
69:  .logo a{  
70:    color: white;  
71:    font-size: 35px;  
72:    font-weight: 500;  
73:    text-decoration:none;  
74:  }  
75:  ion-icon{  
76:    width:30px;  
77:    height:30px;  
78:    background-color: white;  
79:    color:black;  
80:  }  
81:  ion-icon:hover{  
82:    cursor: pointer;  
83:  }  
84:  .search a{  
85:    display:flex;  
86:  }  
87:  header a ion-icon{  
88:    position:relative;  
89:    right:3px;  
90:  }  
91:  .img-slider img{  
92:    height:720px;  
93:    width:1080px;  
94:  }  
95:  @keyframes slide{  
96:    0%{  
97:      left:0px;  
98:    }  
99:    15%{  
100:      left:0px;  
101:    }  
102:    20%{  
103:      left:-1080px;  
104:    }  
105:    32%{  
106:      left:-1080px;  
107:    }  
108:    35%{  
109:      left:-2160px;  
110:    }  
111:    47%{  
112:      left:-2160px;  
113:    }  
114:    50%{  
115:      left:-3240px;  
116:    }  
117:    63%{  
118:      left:-3240px;  
119:    }  
120:    66%{  
121:      left:-4320px;  
122:    }  
123:    79%{  
124:      left:-4320px;  
125:    }  
126:    82%{  
127:      left:-5400px;  
128:    }  
129:    100%{  
130:      left:0px;  
131:  }}  
132:  .img-slider{  
133:    display:flex;  
134:    float:left;  
135:    position:relative;  
136:    width:1080px;  
137:    height:720px;  
138:    animation-name:slide;  
139:    animation-duration: 10s;  
140:    animation-iteration-count: infinite;  
141:    transition-duration:2s ;  
142:  }  
143:  .heading1 {  
144:    opacity:0;  
145:  }  
146:  .search{  
147:    display:flex;  
148:    position: relative;  
149:  }  
150:  .section1{  
151:    width:1080px;  
152:    overflow:hidden;  
153:    justify-content: center;  
154:    align-items: center;  
155:    margin:0px auto;  
156:  }  
157:    .section2 .container{  
158:      display:flex;  
159:      width:100%;  
160:      height:max-content;  
161:      flex-wrap: wrap;  
162:      justify-content:center;  
163:      margin:10px auto;  
164:    }  
165:    .section2 .container .items{  
166:      margin: 10px;  
167:      width:200px;  
168:      height: 300px;  
169:      background-color:white;  
170:      border:2.5px solid black;  
171:      border-radius: 12px;  
172:    }  
173:    .section2 .container .items .name{  
174:  text-align:center;  
175:  background-color:rgb[240, 197, 6];  
176:  height:25px;  
177:  padding-top:4px;  
178:  color:white;  
179:  margin: 0;  
180:    }  
181:    .section2 .container .items .price{  
182:  float:left;  
183:  padding-left:10px;  
184:  display: block;  
185:  width:100%;  
186:  color:rgb[255, 0, 0];  
187:  font-weight: 650;  
188:    }  
189:    .section2 .container .items .info{  
190:      padding-left:10px;  
191:      color:rgb[243, 168, 7];  
192:    }  
193:    .section2 .container .items .img img{  
194:  width:200px;  
195:  height:200px;  
196:  margin: 0;  
197:  padding: 0;  
198:  border-radius:12px;  
199:  transition-duration:0.8s;  
200:    }  
201:    .section2 .container .items .img {  
202:      overflow: hidden;  
203:      margin: 0;  
204:    }  
205:    .section2 .container .items:hover .img img{  
206:      transform: scale[1.2];  
207:      transition-duration:0.8s;  
208:      border-radius:12px;  
209:    }  
210:  footer{  
211:    display:flex;  
212:    flex-direction: column;  
213:   background-color: black;  
214:    align-items: center;  
215:    color:white;  
216:  }  
217:  .footer1{  
218:    display:flex;  
219:  flex-direction: column;  
220:  align-items: center;  
221:  color:white;  
222:  margin-top:15px;  
223:  }  
224:  .social-media{  
225:    display:flex;  
226:    justify-content: center;  
227:    color:white;  
228:    flex-wrap: wrap;  
229:  }  
230:  .social-media a{  
231:    color:white;  
232:    margin:20px;  
233:    border-radius: 5px;  
234:    margin-top:10px;  
235:    color:white;  
236:  }  
237:  .social-media a ion-icon{  
238:    color:white;  
239:    background-color: black;  
240:  }  
241:  .social-media a:hover ion-icon{  
242:    color:red;  
243:    transform: translateY[5px];  
244:  }  
245:  .footer2{  
246:    display: flex;  
247:    width:100%;  
248:    justify-content:space-evenly;  
249:    align-items: center;  
250:    text-decoration: none;  
251:    flex-wrap: wrap;  
252:  }  
253:  .footer0{  
254:    font-weight:1200;  
255:    transition-duration: 1s;  
256:  }  
257:  .footer0:hover{  
258:    color:rgb[243, 168, 7];  
259:  }  
260:  .footer2 .heading {  
261:    font-weight: 900;  
262:    font-size: 18px;  
263:  }  
264:  .footer3 {  
265:    margin-top:60px;  
266:    margin-bottom: 20px;  
267:    display:flex;  
268:    flex-wrap: wrap;  
269:    justify-content: center;  
270:  }  
271:  .footer2 .heading:hover{  
272:    color:rgb[243, 168, 7] ;  
273:  }  
274:  .footer2 .div:hover{  
275:  transform: scale[1.05];  
276:  }  
277:  .footer3 h4{  
278:    margin:0 10px;  
279:  }  
280:  .footer2 div{  
281:    margin:10px;  
282:  }  
283:  .menu{  
284:    visibility:hidden;  
285:  }  
286:  .heading1 .ham:active{  
287:    color: red;  
288:  }  
289:  .items{  
290:    overflow:hidden;  
291:  }  
292:  .ham,.close{  
293:  cursor:pointer;  
294:  }  
295:  @media screen and [max-width:1250px]{  
296:    .heading ul li{  
297:      display:none;  
298:    }  
299:    .items{  
300:      transform:scale[0.9];  
301:    }  
302:    .img-slider img{  
303:      height:60vw;  
304:      width:80vw;  
305:      }  
306:    .ham:active {  
307:       color:red;  
308:     }   
309:      .menu {  
310:      display:flex;  
311:      flex-direction: column;  
312:      align-items: center;  
313:      }    
314:      .menu a ion-icon{  
315:        position: absolute;  
316:      }  
317:     @keyframes slide1{  
318:      0%{  
319:        left:0vw;  
320:      }  
321:      15%{  
322:        left:0vw;  
323:      }  
324:      20%{  
325:        left:-80vw;  
326:      }  
327:      32%{  
328:        left:-80vw;  
329:      }  
330:      35%{  
331:        left:-160vw;  
332:      }  
333:      47%{  
334:        left:-160vw;  
335:      }  
336:      50%{  
337:        left:-240vw;  
338:      }  
339:      63%{  
340:        left:-240vw;  
341:      }  
342:      66%{  
343:        left:-320vw;  
344:      }  
345:      79%{  
346:        left:-320vw;  
347:      }  
348:      82%{  
349:        left:-400vw;  
350:      }  
351:      100%{  
352:        left:0vw;  
353:    }}  
354:    .menu ul{  
355:      display:flex;  
356:      flex-direction:column;  
357:      position: absolute;  
358:      width:100vw;  
359:      height:100vh;  
360:      background-color: black;  
361:      left:0;  
362:      top:0;  
363:      z-index:11;  
364:      align-items: center;  
365:      justify-content: center;  
366:      opacity:1;  
367:      }  
368:  .close{  
369:  z-index:34;      
370:    color:white;  
371:  background-color: black;  
372:  }  
373:  .close:active{  
374:    color:red;  
375:  }  
376:    .menu ul li{  
377:      list-style: none;  
378:      margin: 20px;  
379:      border-top:3px solid white;  
380:      width:80%;  
381:      text-align:center;  
382:      padding-top:10px;  
383:     }  
384:     .menu ul li a{  
385:  text-decoration: none;  
386:  padding-top: 10px;  
387:  color:white;  
388:  font-weight: 900;  
389:     }  
390:     .menu ul li a:hover{  
391:       color:rgb[240, 197, 6];  
392:     }  
393:    .img-slider{  
394:      display:flex;  
395:      float:left;  
396:      position:relative;  
397:      width:80%;  
398:      height:60%;  
399:      animation-name:slide1;  
400:      animation-duration: 10s;  
401:      animation-iteration-count: infinite;  
402:      transition-duration:2s ;  
403:    }  
404:    .section1{  
405:      width:80%;  
406:      overflow:hidden;  
407:      justify-content: center;  
408:      align-items: center;  
409:      margin:0px auto;  
410:    }  
411:  .heading1{  
412:  opacity: 1;  
413:  position:relative;  
414:  bottom:8px;  
415:    }  
416:    .search a{  
417:      display:flex;  
418:      flex-wrap: nowrap;  
419:    }  
420:  .heading1 .ham{  
421:      background-color: black;  
422:      color:white;  
423:    }  
424:    #input{  
425:      width:200px;  
426:      flex-shrink:2;  
427:    }  
428:    header{  
429:      height:150px;  
430:    }  
431:  }  
432:  @media screen and [max-width:550px]{  
433:    .heading ul li{  
434:      display:none;  
435:     }  
436:     .heading1{  
437:      opacity: 1;  
438:      bottom:8px;  
439:      }  
440:      header{  
441:        height:250px;  
442:      flex-wrap: wrap;  
443:      display: flex;  
444:      flex-direction: column;  
445:          }  
446:    #input{  
447:      width:150px;  
448:    }  
449:    .close{  
450:  z-index:34;}  
451:  .search a{  
452:    display:flex;  
453:    flex-wrap: nowrap;  
454:  }  
455:  }  

Heyyy……… wait one more second! what you said is your website is not working properly when the size of the screen is small. You can not able to open the menu list.
we will solve this problem using Javascript. So, Let’s move on to the Javascript portion.

Javascript codes for Responsive Ecommerce Website:-

A website with only structure and styling is like a person is sleeping [It can’t perform any functions]. So for the well functioning of the website we use Javascript.

Topics you should know before implementing javascript code:-

1. DOM [Document Object Model] Manipulation.
2. Javascript basics.

So firstly we want that when we click on the menu icon shown in the below first image then the menu list should be opened as shown in the next figure and when we click on the close icon then again we are back to the first page as shown in the first figure.

The idea is clear now it’s time to implement it in code.

1:  const close=document.querySelector[".close"];  
2:  const open=document.querySelector[".ham"];  
3:  const menu=document.querySelector[".menu"]  
4:  close.addEventListener["click",[]=>{  
5:    menu.style.visibility="hidden";  
6:  }]  
7:  open.addEventListener["click",[]=>{  
8:    menu.style.visibility="visible";  
9:  }]  

Firstly I selected the close, ham and menu named classes using the query selector.

then use the addEventListener[a function that allows us to run functions when some certain events are performed].

I chose the click event for both close class and ham class so when you click on the icons of close and menu it will perform the code written inside that function which is supposed to run.

When we click on the close icon it sets the visibility of the menu class to be hidden [this makes the code written inside the menu class to be hidden means they are not going to run anymore.]

While when we click on the menu icon[ham class] it sets the visibility of the menu list to visible[so now we can see the code snippet running that is written inside the menu class].

I hope you have liked your e-commerce website Wait, Did you still not implement it So why are you waiting, go and implement it now and enjoy your shopping😎.

If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

Written by @Himanshu Singh.

Can we create ecommerce website using HTML and CSS?

How do I make my ecommerce website Responsive?

What is CSS in e