D a i l y W e b D e s i g n s
Pricing
Contact
Contact Us

Grocery shopping website Design Using HTML CSS And JAVASCRIPT With Source Code

  Hi everybody! Using HTML, CSS, and JavaScript, you will learn how to create responsive websites that deliver groceries using HTML CSS, And JAVASCRIPT in thi
Grocery shopping website Design Using HTML CSS And JAVASCRIPT With Source Code

 

Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create responsive websites that deliver groceries using HTML CSS, And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Grocery Website Design Tutorial</title>
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<section>
    <a href="#"> grocery </a>
     <nav>
        <a href="#home">home</a>
        <a href="#features">features</a>
        <a href="#products">products</a>
        <a href="#categories">categories</a>
        <a href="#review">review</a>
        <a href="#blogs">blogs</a>
     </nav>
     <form action="">
        <input type="search" id="search-box" placeholder="search here...">
        <label for="search-box"></label>
    </form>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-img-1.png">
                <h3>watermelon</h3>
                $5.99/-
                qty : 1
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-img-2.png">
                <h3>onion</h3>
                $5.99/-
                qty : 1
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-img-3.png">
                <h3>chicken</h3>
                $5.99/-
                qty : 1
         total : $17.97/-
        <a href="#">checkout</a>
     <form action="">
        <h3>login now</h3>
        <input type="email" placeholder="enter your email">
        <input type="password" placeholder="enter your password">
        <p>forget password <a href="#">click here</a></p>
        <p>don't have an account <a href="#">create how</a></p>
        <input type="submit" value="login now" name="">
     </form>
</section>


<section id="home">
        <h3>fresh and organic products for your</h3>
        <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
        <a href="#">shop now</a>
</section>


<section id="features">
    <h1> our features</h1>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/feature-img-1.png">
            <h3>fresh and organic</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <a href="#">read more</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/feature-img-2.png">
            <h3>free delivery</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <a href="#">read more</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/feature-img-3.png">
            <h3>easy payment</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <a href="#">read more</a>
</section>


<section id="products">
    <h1> our products </h1>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-1.png" alt="">
                <h3>fresh orange</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-2.png" alt="">
                <h3>fresh onion</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-3.png" alt="">
                <h3>fresh meat</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-4.png" alt="">
                <h3>fresh cabbage</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-5.png" alt="">
                <h3>fresh potato</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-6.png" alt="">
                <h3>fresh avocado</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-7.png" alt="">
                <h3>fresh carrot</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-8.png" alt="">
                <h3>green lemon</h3>
                 $5.99/- - 10.99/-
                <a href="#">add to cart</a>
</section>


<section id="categories">
    <h1> product categories</h1>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cat-1.png">
            <h3>vegitables</h3>
            <p>upto 45% off</p>
            <a href="#">shop now</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cat-2.png">
            <h3>fresh fruits</h3>
            <p>upto 45% off</p>
            <a href="#">shop now</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cat-3.png">
            <h3>dairy product</h3>
            <p>upto 45% off</p>
            <a href="#">shop now</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cat-4.png">
            <h3>fresh meat</h3>
            <p>upto 45% off</p>
            <a href="#">shop now</a>
</section>


<section id="review">
    <h1> customer's review</h1>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>Edward Bey</h3>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>jenna Bey</h3>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>Edward Bey</h3>
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-4.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>lisa Bey</h3>
</section>


<section id="blogs">
    <h1> our blogs</h1>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-1.jpg">
                    <a href="#">  by user</a>
                    <a href="#">  1st jan, 2022</a>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#">read more</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-2.jpg">
                    <a href="#">  by user</a>
                    <a href="#">  1st jan, 2022</a>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#">read more</a>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-3.jpg">
                    <a href="#">  by user</a>
                    <a href="#">  1st jan, 2022</a>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#">read more</a>
</section>


<section>
            <h3>grocery </h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            <h3>contact info</h3>
            <a href="#"> +123-443-5678</a>
            <a href="#"> +444-222-6789</a>
            <a href="#"> shaikhfarhan@gmail.com</a>
            <a href="#"> mumbai, india - 401203</a>
            <h3>quick links</h3>
            <a href="#"> home</a>
            <a href="#"> features</a>
            <a href="#"> products</a>
            <a href="#"> categories</a>
            <a href="#"> review</a>
            <a href="#"> blogs</a>
            <h3>newsletter</h3>
            <p>subscribe for latest update</p>
            <input type="email" placeholder="enter your emai" name="">
            <input type="submit" value="subscribe" name="">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/payment.png">
     created by dailywebdesign || all right reserved
</section>
 <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/244880a5cd603cb893a0eb3de05dc9c7.js?ver=59974"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
:root{
    --orange:#ff7800;
    --black:#130f40;
    --lighting-color: #666;
    --border-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
    --border:.2rem solid rgba(0,0,0,.1);
    --outline:.1rem solid rgba(0,0,0,.1);
    --outline-hover:.2rem solid var(--black);
}
*{
    font-family: 'Poppins', sans-serif;
    margin:0;
    padding:0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top:7rem;
}
body{
    background: #eee;
}
section{
    padding: 2rem 9%;
}
.heading{
    text-align: center;
    padding: 2rem 0;
    padding-bottom: 3rem;
    font-size: 3.5rem;
    color: var(--black);
}
.heading span{
    background: var(--orange);
    color: #fff;
    display: inline-block;
    padding:.5rem 3rem;
    clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
.btn{
    margin-top: 1rem;
    display: inline-block;
    padding: .8rem 3rem;
    font-size: 1.7rem;
    border-radius: .5rem;
    border: .2rem solid var(--black);
    color: var(--black);
    cursor: pointer;
    background: none;
}
.btn:hover{
    background: var(--orange);
    color: #fff;
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:2rem 9%;
    background: #fff;
    box-shadow: var(--box-shadow);
}
.header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: var(--black);
}
.header .logo i{
    color: var(--orange);
}
.header .navbar a{
    font-size: 1.7rem;
    margin:0 1rem;
    color: var(--black)
}
.header .navbar a:hover{
    color: var(--orange);
}
.header .icons div{
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    border-radius: .5rem;
    background: #eee;
    color: var(--black);
    font-size: 2rem;
    margin-left: .3rem;
    text-align: center;
}
.header .icons div:hover{
    background: var(--orange);
    color: #fff;
}
#menu-btn{
    display: none;
}
.header .search-form{
    position: absolute;
    top:110%; right:-110%;
    width: 50rem;
    height:5rem;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
}
.header .search-form.active{
    right: 2rem;
    transition: .4s linear;
}
.header .search-form input{
    height: 100%;
    width: 100%;
    background: none;
    text-transform: none;
    font-size: 1.6rem;
    color: var(--black);
    padding: 0 1.5rem;
}
.header .search-form label{
    font-size: 2.2rem;
    padding-right: 1.5rem;
    color: var(--black);
    cursor: pointer;
}
.header .search-form label:hover{
    color: var(--orange);
}
.header .shopping-cart{
    position: absolute;
    top:110%; right:-110%;
    padding:1rem;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    width:35rem;
    background: #fff;
}
.header .shopping-cart.active{
    right: 2rem;
    transition: .4s linear;
}
.header .shopping-cart .box{
    display: flex;
    align-items: center;
    gap:1rem;
    position: relative;
    margin: 1rem 0;
}
.header .shopping-cart .box img{
    height: 10rem;
}
.header .shopping-cart .box .fa-trash{
    font-size: 2rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    cursor: pointer;
    color: var(--lighting-color);
    transform: translateY(-50%);
}
.header .shopping-cart .box .fa-trash:hover{
    color: var(--orange);
}
.header .shopping-cart .box .content h3{
    color: var(--black);
    font-size: 1.7rem;
    padding-bottom: 1rem;
}
.header .shopping-cart .box .content span{
    color: var(--lighting-color);
    font-size: 1.6rem;
}
.header .shopping-cart .box .content .quantity{
    padding-left: 1rem;
}
.header .shopping-cart .total{
    font-size: 2.5rem;
    padding: 1rem 0;
    text-align: center;
    color: var(--black);
}
.header .shopping-cart .btn{
    display: block;
    text-align: center;
    margin: 1rem;
}
.header .login-form{
    position: absolute;
    top: 110%;
    right: -110%;
    width: 30rem;
    box-shadow: var(--box-shadow);
    padding: 2rem;
    border-radius: .5rem;
    background: #fff;
    text-align: center;
}
.header .login-form.active{
    right: 2rem;
    transition: .4s linear;
}
.header .login-form h3{
    font-size: 2.5rem;
    text-transform: uppercase;
    color: var(--black);
}
.header .login-form .box{
    width: 100%;
    margin: .7rem 0;
    background: #eee;
    border-radius: .5rem;
    padding: 1rem;
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
}
.header .login-form p{
    font-size: 1.4rem;
    padding: .5rem 0;
    color: var(--lighting-color);
}
.header .login-form p a{
    color: var(--orange);
    text-decoration: underline;
}
.home{
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(img/banner-bg.webp) no-repeat;
    background-position: center;
    box-sizing: cover;
    padding-top: 17rem;
    padding-bottom: 10rem;
}
.home .content{
    text-align: center;
    width: 60rem;
}
.home .content h3{
    color: var(--black);
    font-size: 3rem;
}
.home .content h3 span{
    color: var(--orange);
}
.home .content p{
    color: var(--lighting-color);
    font-size: 1.7rem;
    padding:1rem 0;
    line-height: 1.8;
}
.features .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}
.features .box-container .box{
    padding: 3rem 2rem;
    background: #fff;
    outline: var(--outline);
    outline-offset: -1rem;
    text-align: center;
    box-shadow: var(--box-shadow);
}
.features .box-container .box:hover{
    outline: var(--outline-hover);
    outline-offset: 0rem;
}
.features .box-container .box img{
    margin: 1rem 0;
    height: 15rem;
}
.features .box-container .box h3{
    font-size: 2.5rem;
    line-height: 1.8;
    color: var(--black);
}
.features .box-container .box p{
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--lighting-color);
    padding: 1rem 0;
}
.products .product-slider{
    padding:1rem;
}
.products .product-slider:first-child{
    margin-bottom: 2rem;
}
.products .product-slider .box{
    background: #fff;
    border-radius: .5rem;
    text-align: center;
    padding:3rem 2rem;
    outline-offset: -1rem;
    outline: var(--outline);
    box-shadow: var(--box-shadow);
    transition: .2s linear;
}
.products .product-slider .box:hover{
    outline-offset: 0rem;
    outline: var(--outline-hover);
}
.products .product-slider .box img{
    height:20rem;
}
.products .product-slider .box h3{
    font-size: 2.5rem;
    color:var(--black);
}
.products .product-slider .box .price{
    font-size: 2rem;
    color:var(--light-color);
    padding:.5rem 0;
}
.products .product-slider .box .stars i{
    font-size: 1.7rem;
    color:var(--orange);
    padding:.5rem 0;
}
.categories .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
    gap:1.5rem;
}
.categories .box-container .box{
    padding: 3rem 2rem;
    border-radius: .5rem;
    background: #fff;
    box-shadow: var(--box-shadow);
    outline: var(--outline);
    outline-offset: -1rem;
    text-align: center;
}
.categories .box-container .box:hover{
    outline: var(--outline-hover);
    outline-offset: 0rem;
}
.categories .box-container .box img{
    margin: 1rem 0;
    height: 15rem;
}
.categories .box-container .box h3{
    font-size: 2rem;
    color: var(--black);
    line-height: 1.8;
}
.categories .box-container .box p{
    font-size: 1.7rem;
    color: var(--lighting-color);
    line-height: 1.8;
    padding: .5rem 0;
}
.review .review-slider{
    padding: 1rem;
}
.review .review-slider .box{
    background: #fff;
    border-radius: .5rem;
    text-align: center;
    padding: 3rem 2rem;
    outline-offset: -1rem;
    outline: var(--outline);
    box-shadow: var(--box-shadow);
    transition: .2s linear;
}
.review .review-slider .box:hover{
    outline: var(--outline-hover);
    outline-offset: 0rem;
}
.review .review-slider .box img{
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
}
.review .review-slider .box p{
    padding: 1rem 0;
    line-height: 1.8;
    color: var(--lighting-color);
    font-size: 1.5rem;
}
.review .review-slider .box h3{
    padding-bottom: .5rem;
    color: var(--black);
    font-size: 2.2rem;
}
.review .review-slider .box .stars i{
    color: var(--orange);
    font-size: 1.7rem;
}
.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}
.blogs .box-container .box{
    overflow: hidden;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    background: #fff;
}
.blogs .box-container .box img{
    height: 25rem;
    width: 100%;
    object-fit: cover;
    transition: transform 2s;
}
.blogs .box-container .box img:hover{
    transform: scaleX(1.2);
}
.blogs .box-container .box .content{
    padding: 2rem;
}
.blogs .box-container .box .content .icons{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: var(--border);
}
.blogs .box-container .box .content .icons a{
    color: var(--lighting-color);
    font-size: 1.5rem;
}
.blogs .box-container .box .content .icons a:hover{
    color: var(--black);
}
.blogs .box-container .box .content .icons a i{
    color: var(--orange);
    padding-right: .5rem;
}
.blogs .box-container .box .content h3{
    line-height: 1.8;
    color: var(--black);
    font-size: 2.2rem;
    padding-right: .5rem 0;
}
.blogs .box-container .box .content p{
    line-height: 1.8;
    color: var(--lighting-color);
    font-size: 1.5rem;
    padding-right: .5rem 0;
}
.footer{
    background: #fff;
}
.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}
.footer .box-container .box h3{
    font-size: 2.5rem;
    color: var(--black);
    padding: 1rem 0;
}
.footer .box-container .box h3 i{
    color: var(--orange);
}
.footer .box-container .box .links{
    display: block;
    font-size: 1.5rem;
    color: var(--lighting-color);
    padding: 1rem 0;
}
.footer .box-container .box .links i{
    color: var(--orange);
    padding-right: .5rem;
}
.footer .box-container .box .links:hover i{
    padding-right: 2rem;
}
.footer .box-container .box p{
    line-height: 1.8;
    font-size: 1.5rem;
    color: var(--lighting-color);
    padding: 1rem 0;
}
.footer .box-container .box .share a{
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    border-radius: .5rem;
    font-size: 2rem;
    color: var(--black);
    margin-left: .2rem;
    background: #eee;
    text-align: center;
}
.footer .box-container .box .share a:hover{
    background: var(--orange);
    color: #fff;
}
.footer .box-container .box .email{
    width: 100%;
    margin: .7rem 0;
    padding: 1rem;
    border-radius: .5rem;
    background: #eee;
    font-size: 1.6rem;
    color: var(--black);
    text-transform: none;
}
.footer .box-container .box .payment-img{
    margin-top: 2rem;
    height: 3rem;
}
.footer .credit{
    text-align: center;
    margin-top: 2rem;
    padding:1rem;
    padding-top: 2.5rem;
    font-size: 2rem;
    color: var(--black);
    border-top: var(--border);
}
.footer .credit span{
    color: var(--orange)
}
/*media queries*/
@media (max-width: 991px){
    html{
    font-size: 55%;
}
 .header{
  padding: 2rem;
  }
  section{
    padding: 2rem;
}
}
@media (max-width: 768px){
    #menu-btn{
    display: inline-block;
}
.header .search-from{
    width: 90%;
}
    .header .navbar{
        position: absolute;
        top: 110%;
        right: -110%;
        width: 30rem;
        box-shadow: var(--box-shadow);
        border-radius: .5rem;
        background:#fff;
    }
    .header .navbar.active{
        right: 2rem;
        transition: .4s linear;
    }
    .header .navbar a{
        font-size: 2rem;
        margin:2rem 2.5rem;
        display: block;
    }
}
@media (max-width: 450px){
    html{
    font-size: 50%;
}
   .heading{
    font-size: 2.5rem;
   }
   .footer{
    text-align: center;
   }
}

main.js

				
					let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () =>{
    searchForm.classList.toggle('active');
    shoppingCart.classList.remove('active');
    loginForm.classList.remove('active');
    navbar.classList.remove('active');
}
let shoppingCart = document.querySelector('.shopping-cart');
document.querySelector('#cart-btn').onclick = () =>{
    shoppingCart.classList.toggle('active');
    searchForm.classList.remove('active');
    loginForm.classList.remove('active');
    navbar.classList.remove('active');
}
let loginForm = document.querySelector('.login-form');
document.querySelector('#login-btn').onclick = () =>{
    loginForm.classList.toggle('active');
    searchForm.classList.remove('active');
    shoppingCart.classList.remove('active');
    navbar.classList.remove('active');
}
let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () =>{
    navbar.classList.toggle('active');
    searchForm.classList.remove('active');
    shoppingCart.classList.remove('active');
    loginForm.classList.remove('active');
}
window.onscroll = () =>{
    searchForm.classList.remove('active');
    shoppingCart.classList.remove('active');
    loginForm.classList.remove('active');
    navbar.classList.remove('active');
}
var swiper = new Swiper(".product-slider", {
    loop:true,
    spaceBetween: 20,
    autoplay: {
        delay: 7500,
        disableOnInteraction: false,
    },
    centeredSlides: true,
    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 2,
      },
      1020: {
        slidesPerView: 3,
      },
    },
});
var swiper = new Swiper(".review-slider", {
    loop:true,
    spaceBetween: 20,
    autoplay: {
        delay: 7500,
        disableOnInteraction: false,
    },
    centeredSlides: true,
    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 2,
      },
      1020: {
        slidesPerView: 3,
      },
    },
});

images

grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website

< /table>

grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website

grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website
grocery shopping website

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Daily Web Designs

Email

contact@dailywebdesigns.com

Quick Links

User Login

Resources

Social

©2025. All Rights Reserved .

By Daily Web Designs