Ecommerce Shopping Website Design Using HTML CSS And JS
Learn How To Create a Ecommerce Shopping Website Using HTML CSS And JavaScript. This Ecommerce Shopping Website is Fully Responsive. I used HTML, CSS, and JavaScript To Create This Ecommerce Website. Follow My Tutorial Step By Step To Make This Beautiful Ecommerce Shopping Website.
I have more than Four years experience in Frontend(HTML, CSS, and JS). I will try to provide you best way to create Ecommerce Shopping Website using HTML CSS And JavaScript.
Make Ecommerce Shopping Website Using HTML CSS And JavaScript
Ecommerce website using HTML, CSS, and JavaScript CollectionFashion Should be Stylish and Fun
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos minus quis illum voluptates laboriosam
Shop Now Hand BagT-ShirtSunglassTopsShoesWatchPopular Dresses
Recent Product
Shoes And Bags
Free ShippingFree Shipping for all US order
Support 24/7We support 24h a day
100% Money BackYou have 30 days to Return
*{ margin: 0px; padding: 0px; font-family: poppins; box-sizing: border-box; scroll-behavior: smooth; } a{ text-decoration: none; } ul{ list-style: none; } :root{ --main-color:#faece1; --main-light:#f9f3ee; --secondary-color:#ff805d; --product-bg-color:#f8f8f8; } /*==main================================*/ #main{ background-color: var(--main-light); min-height: 80vh; position: relative; width: 100%; overflow: hidden; display: flex; flex-direction: column; } /*==nav-bar=============================*/ .header-top{ max-width: 1200px; width: 90%; margin: auto; padding: 15px 0px; border-bottom: 1px solid #e7e7e7; display: flex; justify-content: space-between; align-items: center; } .nav-location{ display: flex; justify-content: center; align-items: center; } .nav-location a{ color: #000000; font-size: 0.8rem; font-weight: 500; } .nav-location a i{ color: var(--secondary-color); margin-right: 5px; font-size: 0.9rem; } .navigation{ display: flex; justify-content: center; align-items: center; max-width: 1200px; width: 90%; margin: auto; padding: 20px 0px; z-index: 101; position: relative; } .logo{ font-size: 1.8rem; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; color: #222222; } .logo img{ max-width: 180px; max-height: 40px; width: 100%; height: 100%; display: flex; align-items: center; object-fit: contain; object-position: center; } .menu{ display: flex; align-items: center; } .menu li a{ margin: 0px 15px; color: #4d4d4d; letter-spacing: 0.5px; font-weight: 500; font-size: 0.8rem; transition: all ease 0.3s; } .menu li a:hover{ color: #181818; } .nav-btns{ display: flex; justify-content: center; align-items: center; grid-gap: 25px; } .nav-btns a{ color: #3f3f3f; } .nav-cart { position: relative; } .nav-cart span{ color: #ffffff; background-color: var(--secondary-color); width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; border-radius: 50%; font-size: 0.6rem; font-weight: 600; position: absolute; right: -8px; top: -12px; } .menu li{ position: relative; } .nav-lable{ padding: 2px 10px; background-color: var(--secondary-color); color: #ffffff; font-weight: 500; display: flex; justify-content: center; align-items: center; font-size: 0.6rem; text-transform: uppercase; position: absolute; top: -15px; right: -20px; } .nav-lable:after{ content: ''; width:0px; height: 0px; border-bottom: 3px solid transparent; border-left: 3px solid transparent; border-top: 5px solid var(--secondary-color); border-right: 3px solid transparent; position: absolute; left: 10%; top: 100%; } header.header-fix{ background-color: #ffffff; position: fixed; left: 0px; top: 0px; width: 100%; z-index: 101; box-shadow: 2px 2px 30px rgba(0,0,0,0.05); animation: navanimation 0.6s; } header.header-fix .header-top{ border-bottom: 1px solid #f7f7f7; } @keyframes navanimation { 0%{ top: -100%; } 100%{ top: 0%; } } /* search */ .search-bar{ width:100%; height: 40vh; background-color: #ffffffbb; backdrop-filter: blur(30px); position: fixed; left: 0px; bottom: 0px; display: none; justify-content: center; box-shadow: 2px 2px 30px rgba(0,0,0,0.05); z-index: 101; animation: search 0.3s; } .search-input{ width:90%; border-bottom: 1px solid #d4d4d4; display: flex; justify-content: center; align-items: center; height: 100px; margin-top: 20px; } .search-bar input{ width:100%; border: none; outline: none; background-color: transparent; font-size: 1.8rem; margin: 0px; } .search-cancel{ color: var(--secondary-color); font-size: 2rem; padding-right: 40px; } .search-bar-active{ display: flex; } @keyframes search{ 0%{ bottom: -300px; } 100%{ bottom: 0px; } } /* login signup */ .form{ width:100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgba(0,0,0,0.2); display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 102; } .login-form, .sign-up-form{ width:420px; padding: 20px 10px; background-color: #ffffff; box-shadow: 2px 2px 30px rgba(0,0,0,0.1); display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 5px; position: relative; } .login-form form, .sign-up-form form{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } .login-form strong, .sign-up-form strong{ color: #272727; font-size: 2rem; margin: 2px 7px 7px 7px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .login-form input, .sign-up-form input{ width:90%; height: 45px; margin: 6px 0px; padding: 0px 10px; border: 1px solid rgba(0,0,0,0.1); outline: none; border-radius: 7px; } .login-form input::placeholder, .sign-up-form input::placeholder{ color: rgba(0,0,0,0.5); } .login-form input[type="submit"], .sign-up-form input[type="submit"]{ background-color: var(--secondary-color); color: #ffffff; border: none; outline: none; text-transform: uppercase; margin-top: 10px; border-radius: 3px; box-shadow: 2px 2px 30px rgba(0,0,0,0.1); } .form-btns{ width: 90%; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .form-btns a{ color: #4d4d4d; font-size: 0.9rem; } .sign-up-btn{ border-bottom: 1px solid #868686; line-height: 16px; } .form-cancel{ position: absolute; right: 20px; top: 10px; color: #868686; } .login-form, .sign-up-form, .form{ display: none; } .login-active, .login-active .login-form{ display: flex; animation: fade 0.3s; } .sign-up-active, .sign-up-active .sign-up-form{ display: flex; animation: fade 0.3s; } @keyframes fade{ 0%{ opacity: 0; } 100%{ opacity: 1; } } /* main content */ .main-content{ display: flex; justify-content: space-between; width: 90%; margin: auto; max-width: 1200px; align-items: center; padding-top: 20px; margin-bottom: 0px; } .main-content-img{ width: 100%; height: 75vh; } .main-content-img img{ width: 100%; height: 100%; object-fit: contain; object-position: center; } .main-content-text strong{ color: var(--secondary-color); text-transform: uppercase; letter-spacing: 10px; font-weight: 600; } .main-content-text h1{ font-size: 3rem; color: #181818; line-height: 3.7rem; font-weight: 600; } .main-content-text p{ color: #5f5f5f; margin: 20px 0px; font-size: 0.9rem; } .main-content-text a{ color: #ffffff; background-color: var(--secondary-color); max-width: 150px; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; } .main-content-text{ display: flex; flex-direction: column; margin-bottom: 80px; } /* category */ #category{ max-width: 1200px; width: 90%; margin: 50px auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 50px; overflow-x: auto; } .category-box{ display: flex; justify-content: center; flex-direction: column; align-items: center; text-align: center; padding-bottom: 25px; transition: all ease 0.3s; } .category-box:hover{ opacity: 0.8; } .category-box-img{ background-color: var(--main-color); border-radius: 50%; padding: 20px; width: 100px; height: 100px; } .category-box-img img{ width: 100%; height: 100%; object-fit: contain; object-position: center; } .category-box strong{ color: #1d1d1d; font-size: 0.9rem; margin-top: 10px; font-weight: 600; } /* popular-dress */ #popular-dress{ max-width: 1200px; width: 90%; margin: 50px auto; } .popular-dress-container{ display: grid; grid-template-columns: 1fr 300px; grid-gap: 50px; margin-top: 20px; } #popular-dress h2, #recent-products h2{ color: #1d1d1d; font-size: 1.6rem; font-weight: 600; } .popular-product-container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; } .product-box{ display: flex; flex-direction: column; width: 100%; } .product-box-img{ width: 100%; max-height: 400px; background-color: var(--product-bg-color); padding: 20px; border-radius: 5px; position: relative; transition: all ease 0.3s; } .product-box-img:hover{ opacity: 0.8; } .product-box-img img{ width: 100%; height: 100%; object-fit: contain; object-position: center; } .product-box-img span{ color: #ffffff; background-color: var(--secondary-color); position: absolute; right: 5px; top: 5px; font-size: 0.8rem; padding: 2px 10px; font-weight: 400; border-radius: 3px; letter-spacing: 0.2px; } .product-box-text{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .product-box-text .product-text-title{ color: #000000; font-size: 1rem; font-weight: 600; margin-top: 10px; } .product-box-text span{ color:var(--secondary-color); font-size: 0.9rem; font-weight: 500; margin: 5px; } .product-box-text span del{ color: #696969; } .product-box-text .product-cart-btn{ border-top: 1px solid #e9e9e9; width: 100%; padding: 10px; color: #1d1d1d; font-size: 0.9rem; font-weight: 500; transition: all ease 0.3s; } .product-box-text .product-cart-btn i{ margin-right: 5px; } .product-box-text .product-cart-btn:hover{ background-color: var(--secondary-color); color:#ffffff; border-top: 1px solid transparent; } .popular-banner{ background-color: var(--main-color); width: 100%; min-height: 500px; } .popular-banner{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 40px 30px; text-align: center; } .popular-banner-text{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .popular-banner-text h3{ font-size: 1.6rem; font-weight: 500; color: #1d1d1d; } .popular-banner-text a{ color: var(--secondary-color); font-weight: 500; margin-top: 10px; } .popular-banner-img{ height: 100%; width: 100%; margin-top: 30px; } .popular-banner-img img{ width: 100%; height: 100%; object-fit: contain; } /* shopping-banner */ #shopping-banner{ max-width: 1200px; width: 90%; margin: 50px auto; background-color: var(--main-color); padding: 30px; border-radius: 10px; } .shopping-banner-container{ display:grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 900px; margin: auto; } .shopping-banner-text{ display: flex; flex-direction: column; max-width: 400px; } .shopping-banner-text strong{ color: var(--secondary-color); text-transform: uppercase; letter-spacing: 10px; font-weight: 500; } .shopping-banner-text h3{ color: #181818; font-size: 1.8rem; } .shopping-banner-text p{ color: #3f3f3f; margin: 10px 0px; } .shopping-banner-text a{ color: #ffffff; background-color: #181818; max-width: 160px; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; margin-top: 10px; } .shopping-banner-img{ height: 300px; display: flex; justify-content: center; } .shopping-banner-img img{ height: 100%; object-fit: contain; object-position: center; } /* recent-products */ #recent-products{ width: 90%; max-width: 1200px; margin: 50px auto; } .recent-product-container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 40px; margin-top: 20px; } /*==partner-logo=================================*/ #partner{ max-width: 1200px; width: 90%; margin: 50px auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 40px; grid-gap: 15px; } #partner img{ height: 50px; object-fit: contain; object-position: center; filter: grayscale(1); opacity: 0.3; transition: all ease 0.3s; } #partner img:hover{ filter: grayscale(0); opacity: 1; transition: all ease 0.3s; } /* services */ .services{ display: flex; width: 90%; justify-content: center; align-items: center; flex-wrap: wrap; margin: auto; max-width: 1200px; } .services-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(0,0,0,0.1); min-width: 250px; padding-bottom: 10px; margin: 15px; flex-grow: 0.7; } .services-box i{ color: var(--secondary-color); font-size: 2rem; margin: 15px; } .services-box span{ color: #222222; font-weight: 600; letter-spacing: 0.5px; font-size: 1rem; } .services-box p{ color: #878787; margin: 0px; font-size: 0.9rem; } /*==footer================================*/ footer{ width: 100%; } .footer-container{ max-width: 1200px; width: 90%; margin: 0px auto; padding: 50px 0px; display:flex; justify-content: space-between; align-items: flex-start; } .footer-company-box, .footer-subscribe{ max-width: 330px; } .footer-company-box .footer-logo{ color: #333333; font-size: 1.8rem; text-transform: uppercase; font-weight: 600; height: 45px; max-width: 150px; display: flex; } .footer-logo img{ width: 100%; height: 100%; object-fit: contain; object-position: center; } .footer-company-box p, .footer-subscribe p{ color: #585858; margin: 5px 0px; } .footer-social{ display: flex; align-items: center; flex-wrap: wrap; } .footer-social a{ margin-top: 10px; margin-right: 10px; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid #e9e9e9; color: #333333; font-size: 0.9rem; transition: all ease 0.3s; } .footer-social a:hover{ background-color: var(--secondary-color); color: #ffffff; border: none; } .footer-link-box strong, .footer-subscribe strong{ font-size: 1.2rem; color: #3b3b3b; font-weight: 600; } .footer-link-box ul{ margin-top: 5px; } .footer-container ul li a{ color: #585858; transition: all ease 0.3s; } .footer-container ul li a:hover{ color: var(--secondary-color); } .subscribe-box{ width: 100%; border: 1px solid #dadada; display: flex; justify-content: center; height: 100%; margin-top: 10px; } .subscribe-box input{ width: 100%; border: none; outline: none; background-color: transparent; padding: 0px 15px; } .subscribe-box button{ border: none; outline:none; background-color: var(--secondary-color); color: #ffffff; text-transform: uppercase; font-weight: 500; height: 40px; padding: 0px 20px; cursor: pointer; } .footer-bottom{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; grid-gap: 10px; border-top: 1px solid #e9e9e9; padding: 20px 0px; max-width: 1200px; width: 90%; margin: auto; } .footer-bottom span{ color: #252525; font-size: 0.9rem; } /*==making-responsive============*/ .menu-icon, .menu-btn{ display: none; } @media(max-width:1200px){ .footer-container{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; } } @media(max-width:1100px){ .popular-dress-container{ grid-template-columns: 1fr; } .popular-banner-img{ max-height: 500px; } } @media(max-width:1024px){ .search-input{ height: 60px; } .search-input input, .search-cancel{ font-size: 1.4rem; } .recent-product-container{ grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;} #partner{ margin-top: 20px; justify-content:center; grid-gap: 30px; } #partner img{ height: 40px;} .main-content{ flex-direction: column-reverse; } .main-content-img{ max-height: 60vh; } .main-content-text{ margin-top: 30px; } .main-content-text h1{ font-size: 2rem; line-height: 2.4rem; } } @media(max-width:850px){ #shopping-banner{ padding: 20px; } .shopping-banner-container{ display:flex; flex-direction: column-reverse; } .shopping-banner-img{ height: auto; width: 90%; } .shopping-banner-img img{ width: 100%; } .shopping-banner-text{ max-width: 90%; margin-top: 30px; } .navigation{ padding: 0px; width: 100%; z-index: 103; } .nav-location{ display: none; } .logo img{ max-height: 30px;} .navigation .menu{ display: none; position: absolute; left: 0px; top:-1px; background-color: var(--main-light); width: 100%; padding: 0px; margin: 0px; box-shadow: 2px 30px 30px rgba(0,0,0,0.05); } header.header-fix .navigation .menu{ background-color: #ffffff; } .navigation .menu li{ width:100%; margin: 0px; padding: 0px; } .navigation .menu li a{ width: 100%; display: flex; align-items: center; margin: 0px; padding: 20px; border-top: 1px solid #e2e2e26e; } .nav-lable{ display: none; } .menu-icon{ display: block; } .menu-icon{ cursor: pointer; float: right; padding: 10px 0px; position: relative; user-select: none; z-index: 106; } .menu-icon .nav-icon{ background-color: #181818; display: block; position: relative; height: 2px; transition: background 0.2s ease-out; width: 20px; } .menu-icon .nav-icon::before, .menu-icon .nav-icon::after{ background-color: #181818; content: ''; position: absolute; height: 100%; transition: all ease-out 0.2s; width: 100%; } .menu-icon .nav-icon::before{ top: 7px; } .menu-icon .nav-icon::after{ top: -7px; } .menu-icon:checked ~ .header-top .menu-icon .nav-icon, .menu-btn:checked ~ .header-top .menu-icon .nav-icon{ background-color: transparent; } .menu-btn:checked ~ .header-top .menu-icon .nav-icon::before{ transform: rotate(-45deg); top: 0px; } .menu-btn:checked ~ .header-top .menu-icon .nav-icon::after{ transform: rotate(45deg); top: 0px; } .menu-btn:checked ~ .navigation .menu{ display: block; } } @media(max-width:724px){ .popular-product-container{ grid-template-columns: 1fr 1fr; grid-gap: 20px; } .recent-product-container{ grid-template-columns: 1fr 1fr;} .footer-container{ grid-template-columns: 1fr; } .login-form, .sign-up-form{ width:90%; } .services{ width:100%; } .services-box{ width:100%; } } @media(max-width:315px){ .nav-user{ display: none; } .recent-product-container{ grid-template-columns: 1fr ;} .popular-product-container{ grid-template-columns: 1fr; } }
Comments