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

how to create responsive web designer for e-commerce 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 sea food website design</title>

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

    
    <link rel="stylesheet" href="style.css">

</head>
<body>



<header>
    <div class="header1">
        <a href="#" class="logo"><i class="fas fa-shopping-basket"></i>seafood</a>

        <form action="" class="search-box-container">
            <input type="search" id="search-box" placeholder="search here...">
            <label for="search-box" class="fas fa-search"></label>
        </form>
    </div>
    <div class="header2">
        <div id="menu-bar" class="fas fa-bars"></div>
        <nav class="navbar">
            <a href="#home">home</a>
            <a href="#category">category</a>
            <a href="#product">product</a>
            <a href="#deal">deal</a>
            <a href="#contact">contact</a>
        </nav>
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-user-circle"></a>
        </div>
    </div>
</header>



<section class="home" id="home">
    <div class="img">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="home-img.png" alt="">
    </div>
    <div class="content">
        <span>fresh and organic</span>
        <h3>your daily fresh fish</h3>
        <a href="#" class="btn">get started</a>
    </div>
</section>



<section class="banner-container">

    <div class="banner">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="banner-1.jpg" alt="">
        <div class="content">
            <h3>special offer</h3>
            <p>upto 45% off</p>
            <a href="#" class="btn">check out</a>
        </div>
    </div>

    <div class="banner">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="banner-2.jpg" alt="">
        <div class="content">
            <h3>limited offer</h3>
            <p>upto 50% off</p>
            <a href="#" class="btn">check out</a>
        </div>
    </div>

    <div class="banner">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="banner-3.jpg" alt="">
        <div class="content">
            <h3>premium offer</h3>
            <p>upto 50% off</p>
            <a href="#" class="btn">check out</a>
        </div>
    </div>


</section>



<section class="category" id="category">
    <h1 class="heading">shop by <span>category</span></h1>
    <div class="box-container">

        <div class="box">
            <h3>fish fry</h3>
            <p>upto 50% off</p>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="category-1.jpg" alt="">
            <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
            <h3>fish curry</h3>
            <p>upto 44% off</p>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="category-2.jpg" alt="">
            <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
            <h3>sea prawn</h3>
            <p>upto 35% off</p>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="category-3.jpg" alt="">
            <a href="#" class="btn">shop now</a>
        </div>
        <div class="box">
            <h3>sea fish</h3>
            <p>upto 12% off</p>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="category-4.jpg" alt="">
            <a href="#" class="btn">shop now</a>
        </div>
    </div>
</section>



<section class="product" id="product">
    <h1 class="heading">latest <span>products</span></h1>
    <div class="box-container">

        <div class="box">
            <span class="discount">-33%</span>
            <div class="icons">
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-share"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-1.jpg" alt="">
            <h3>Sea Fish</h3>
            <div class="stars">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
            </div>
            <div class="price"> $10.50 <span> $13.20</span></div>
        
        <div class="quantity">
            <span>quantity</span>
            <input type="number" min="1" max="1000" value="1">
            <span> /kg </span>
        </div>
        <a href="#" class="btn">add to cart</a>
    </div>


    <div class="box">
        <span class="discount">-52%</span>
        <div class="icons">
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-share"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-2.jpg" alt="">
        <h3>Oysters</h3>
        <div class="stars">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
        </div>
        <div class="price"> $10.50 <span> $13.20</span></div>
    
    <div class="quantity">
        <span>quantity</span>
        <input type="number" min="1" max="1000" value="1">
        <span> /kg </span>
    </div>
    <a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-45%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-3.jpg" alt="">
    <h3>Abalone</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>


<div class="box">
    <span class="discount">-12%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-4.jpg" alt="">
    <h3>Crab</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-20%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-5.jpg" alt="">
    <h3>Lobster</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-29%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-6.jpg" alt="">
    <h3>Sushi</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-55%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-7.jpg" alt="">
    <h3>Herring</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-30%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-8.jpg" alt="">
    <h3>Squid</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

<div class="box">
    <span class="discount">-40%</span>
    <div class="icons">
        <a href="#" class="fas fa-heart"></a>
        <a href="#" class="fas fa-share"></a>
        <a href="#" class="fas fa-eye"></a>
    </div>
    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="product-9.jpg" alt="">
    <h3>Mackerel</h3>
    <div class="stars">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
    </div>
    <div class="price"> $10.50 <span> $13.20</span></div>

<div class="quantity">
    <span>quantity</span>
    <input type="number" min="1" max="1000" value="1">
    <span> /kg </span>
</div>
<a href="#" class="btn">add to cart</a>
</div>

</div>
</section>




<section class="deal" id="deal">
    <div class="content">
        <h3 class="title">deal of the day</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam possimus voluptates commodi laudantium! 
            Doloribus sint voluptatibus quaerat farhan suscipit nulla?</p>

            <div class="count-down">
                <div class="box">
                    <h3 id="day">00</h3>
                    <span>day</span>
                </div>
                <div class="box">
                    <h3 id="hour">00</h3>
                    <span>hour</span>
                </div>
                <div class="box">
                    <h3 id="minute">00</h3>
                    <span>minute</span>
                </div>
                <div class="box">
                    <h3 id="second">00</h3>
                    <span>second</span>
                </div>
            </div>
            <a href="#" class="btn">check the deal</a>
    </div>
</section>



<section class="contact" id="contact">
    <h1 class="heading"> <span>contact</span> us </h1>
    <form action="">
        <div class="inputBox">
            <input type="text" placeholder="name">
            <input type="email" placeholder="email">
        </div>

        <div class="inputBox">
            <input type="number" placeholder="number">
            <input type="text" placeholder="subject">
        </div>
        <textarea placeholder="message" name="" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="send message" class="btn">
    </form>
</section>




<section class="newsletter">
    <h3>subscribe us for latest updates</h3>
    <form action="">
        <input class="box" type="email" placeholder="enter your email">
        <input type="submit" value="Subscribe" class="btn">
    </form>
</section>



<section class="footer">
    <div class="box-container">
        <div class="box">
            <a href="" class="logo"><i class="fas fa-shopping-basket"></i></a>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam possimus voluptates commodi laudantium! 
                Doloribus sint voluptatibus quaerat farhan suscipit nulla?</p>
                <div class="share">
                    <a href="#" class="btn fab fa-facebook-f"></a>
                    <a href="#" class="btn fab fa-twitter"></a>
                    <a href="#" class="btn fab fa-instagram"></a>
                    <a href="#" class="btn fab fa-linkedin"></a>
                </div>
        </div>

        <div class="box">
            <h3>our location</h3>
            <div class="links">
                <a href="#">USA</a>
                <a href="#">india</a>
                <a href="#">dubai</a>
                <a href="#">turkey</a>
                <a href="#">azerbaijan</a>
            </div>
        </div>

        <div class="box">
            <h3>quick links</h3>
            <div class="links">
                <a href="#">home</a>
                <a href="#">category</a>
                <a href="#">product</a>
                <a href="#">deal</a>
                <a href="#">contact</a>
            </div>
        </div>

        <div class="box">
            <h3>download app</h3>
            <div class="links">
                <a href="#">google play</a>
                <a href="#">window 10</a>
                <a href="#">app store</a>
            </div>
        </div>
    </div>
    <h1 class="credit"> created by <span> Dailywebdesign </span> || all rights reserved! </h1>
</section>


     <script type="litespeed/javascript" data-src="main.js"></script> <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/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></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=Nunito:wght@200;300;400;600;700&display=swap');

:root{
    --green:#27ae60;
    --black:#2c2c54;
    --darkgreen:#1E8349;
}

body{
    background: var(--green);
}

*{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

*::selection{
    background:var(--green);
    color: #fff;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 6.5rem;
    scroll-behavior: smooth;
}

section{
    padding: 2rem 9%;
}

.btn{
    display:inline-block;
    margin-top:1rem;
    background: var(--darkgreen);
    color: #fff;
    padding: .8rem 3rem;
    font-size:1.7rem;
    text-align:center;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.btn:hover{
    background: var(--black);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.heading{
    text-align: center;
    color: var(--black);
    text-transform: uppercase;
    padding:1rem;
    font-size: 3.5rem;
    padding-bottom:2rem;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}

.heading span{
    color: #ffffff;
    text-transform: uppercase;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}

.header1{
    background:#1E8349;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:2rem 9%;
    border-bottom: 0.1rem solid rgba(0,0,0,0.7);
}

.logo{
    color: #ffffff;
    font-weight: bold;
    font-size: 3rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.logo i{
    padding-right: .5rem;
    color: var(--black);
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.header1 .search-box-container{
    display: flex;
    height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.header1 .search-box-container #search-box{
    height:100%;
    width: 100%;
    padding: 1rem;
    font-size: 2rem;
    color: #333;
    border: .1rem solid rgba(0,0,0,0.3);
    text-transform: none;
}

.header1 .search-box-container label{
    height: 100%;
    width:8rem;
    font-size: 2.5rem;
    line-height: 5rem;
    color: #fff;
    background:var(--green);
    text-align: center;
    cursor: pointer;
}

.header1 .search-box-container label:hover{
    background: var(--black);
}

.header2{
    background:#fff;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:2rem 9%;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.header2.active{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 10000;
}

.header2 .navbar a{
    padding:.5rem 1.5rem;
    font-size: 2rem;
    border-radius: .5rem;
    color: var(--green);
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.header2 .navbar a:hover{
    background: var(--darkgreen);
    color: #fff;
}

.header2 .icons a{
    font-size:2.5rem;
    color: var(--darkgreen);
    padding-left: 1rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.header2 .icons a:hover{
    color: var(--black);
}

#menu-bar{
    font-size:2.5rem;
    border-radius: .5rem;
    border: .1rem solid var(--black);
    padding: .8rem 1.5rem;
    color: var(--darkgreen);
    cursor: pointer;
    display:none;
}

.home{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.home .img{
    flex: 1 1 40rem;
    padding-top: 5rem;
}

.home .img img{
    width: 100%;
}

.home .content{
    flex: 1 1 40rem;
}

.home .content span{
    font-size: 3rem;
    color: #fff;
}

.home .content h3{
    font-size:5rem;
    color: var(--black);
}

.banner-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.banner-container .banner{
    flex: 1 1 35rem;
    height:25rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.banner-container .banner img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.banner-container .banner .content{
    position: absolute;
    top: 50%;
    left: 4%;
    transform: translateY(-50%);
}

.banner-container .banner .content h3{
    font-size: 3rem;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.banner-container .banner .content p{
    font-size: 2rem;
    color: var(--darkgreen);
}

.banner-container .banner:hover img{
    transform:scale(1.2) rotate(-5deg);
}

.category .box-container{
    display: flex;
    gap:1.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
}

.category .box-container .box{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    border-radius: .5rem;
    text-align: center;
    padding: 2rem;
    flex: 1 1 25rem;
}

.category .box-container .box img{
   width: 100%;
   object-fit: cover;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
   border:0.1rem solid rgba(0,0,0,0.7);
}

.category .box-container .box img:hover{
    transform:scale(1.2) rotate(5deg);
}

.category .box-container .box h3{
    font-size: 3.5rem;
    color: var(--black);
}

.category .box-container .box p{
    font-size: 2rem;
    color: #fff;
    padding:.5rem 0;
}

.category .box-container .box .btn{
    display: block;
}

.product .box-container{
    display:flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1rem;
}

.product .box-container .box{
    flex: 1 1 30rem;
    text-align: center;
    padding:2rem;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.product .box-container .box img{
    height: 20rem;
    width:100%;
    object-fit:cover;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.product .box-container .box img:hover{
    transform:scale(1.2) rotate(5deg);
}

.product .box-container .box .discount{
    position: absolute;
    top: 1rem;
    left:1rem;
    background:var(--darkgreen);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    color:#fff;
    padding:.7rem 1rem;
    font-size:2rem;
}

.product .box-container .box .discount:hover{
    background: var(--black);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.product .box-container .box .icons{
    position: absolute;
    top: .5rem;
    right: -6rem;
}

.product .box-container .box:hover .icons{
    right:1rem;
}

.product .box-container .box .icons a{
    display: block;
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    color: #ffffff;
    background: var(--darkgreen);
    border-radius: 50%;
    margin-top: .7rem;
}

.product .box-container .box .icons a:hover{
    background: var(--black);
    color: #fff;
}

.product .box-container .box h3{
    color: var(--black);
    font-size: 2.5rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.product .box-container .box .stars i{
    padding: 1rem .1rem;
    font-size: 1.7rem;
    color:gold;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.product .box-container .box .price{
    font-size:2rem;
    color:#000;
    padding: .5rem 0;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.product .box-container .box .price span{
    font-size: 1.5rem;
    color: #fff;
    text-decoration: line-through;
}

.product .box-container .box .quantity{
    display:flex;
    align-items: center;
    justify-content:center;
    padding-top: 1rem;
    padding-bottom:.5rem;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.product .box-container .box .quantity span{
    padding: 0 .7rem;
    font-size: 1.7rem;
}

.product .box-container .box .quantity input{
    border: .1rem solid rgba(0,0,0,0.3);
    font-size: 1.5rem;
    font-weight: bolder;
    color: var(--black);
    padding: .5rem;
    background:rgba(0,0,0,.05);
}

.product .box-container .box .btn{
    display: block;
}

.deal{
    background:url(deal-bg1.jpg) no-repeat;
    background-position: center;
    background-size:cover;
    padding-top: 7rem;
    padding-bottom:7rem;
}

.deal .content{
    max-width: 50rem;
}

.deal .content .title{
    font-size: 4rem;
    color:#fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.deal .content p{
    font-size: 1.7rem;
    padding:1rem 0;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}

.deal .content .count-down{
    display: flex;
    gap: 1rem;
    padding: .5rem 0;
}

.deal .content .count-down .box{
    width:9rem;
    text-align: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.deal .content .count-down .box h3{
    color: var(--black);
    background:#fff;
    height:7rem;
    line-height: 7rem;
    width: 100%;
    font-size: 5rem;
}

.deal .content .count-down .box span{
    display: block;
    background: var(--black);
    color:#fff;
    width: 100%;
    padding: .5rem;
    font-size: 2rem;
}

.contact form{
    text-align: center;
    padding: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.contact form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact form .inputBox input,
.contact form textarea{
    padding: 1rem;
    font-size:1.7rem;
    background:#ffffff;
    text-transform: none;
    margin: 1rem 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    width:49%;
}

.contact form textarea {
    height: 20rem;
    resize:none;
    width: 100%;
}

.newsletter{
    background: url(newsletter-bg.jpg) no-repeat;
    background-size:cover;
    background-position:center;
    text-align: center;
    padding:5rem 2rem;
}

.newsletter h3{
    font-size: 3rem;
    color:var(--black);
}

.newsletter form{
    max-width: 55rem;
    display: flex;
    align-items: center;
    margin: 1rem auto;
    padding:1.5rem;
    background: rgba(0,0,0,.1);
}

.newsletter form .box{
    width: 100%;
    padding: .7rem 1.5rem;
    font-size: 1.7rem;
    color:var(--black);
    text-transform: none;
}

.newsletter form .btn{
    margin-top: 0;
}

.footer .box-container{
    display: flex;
    gap:1.5rem;
    flex-wrap: wrap;
}

.footer .box-container .box{
    padding:1rem 0;
    flex: 1 1 25rem;
}

.footer .box-container .box .share a{
    padding: 0;
    height:4rem;
    width: 4rem;
    line-height: 4rem;
    text-align: center;
}

.footer .box-container .box h3{
    font-size: 2.5rem;
    color: var(--black);
}

.footer .box-container .box p{
    font-size: 1.3rem;
    color:#000;
    padding: .7rem 0;
}

.footer .box-container .box .links{
    padding: 1rem 0;
}

.footer .box-container .box .links a{
    display:block;
    padding: .5rem 0;
    font-size: 1.7rem;
    color: #000;
}

.footer .box-container .box .links a:hover{
    text-decoration: underline;
    color:#fff;
}

.footer .credit{
    padding: 2.5rem 1rem;
    border-top:.1rem solid rgba(0,0,0,0.7);
    margin-top: 1rem;
    text-align:center;
    font-size: 2rem;
}

.footer .credit span{
    color:var(--black);
}



/* media queries */

@media(max-width:1200px) {
    html{
        font-size: 55%;
    }
}

@media(max-width:991px) {
    .header1,
    .header2{
        padding: 2rem;
    }
    section{
        padding: 2rem;
    }
}

@media(max-width:768px) {
    #menu-bar {
        display:initial;
    }
    .header2 .navbar{
        position:absolute;
        top: 100%;
        left: 0;
        right: 0;
        background:var(--darkgreen);
        padding:1rem 2rem;
        display:none;
    }

    .header2 .navbar.active{
       display:initial;
    }

    .header2 .navbar a{
        font-size: 2.5rem;
        display:block;
        text-align: center;
        background:#fff;
        padding:1rem;
        margin: 1.5rem 0;
    }
    .home .content{
        text-align:center;
    }
    .home .content h3{
        font-size:4rem;
    }
    .deal{
        background-position: left;
    }
    .deal .content{
        max-width: 100%;
        text-align:center;
    }
    .deal .content .count-down{
        justify-content: center;
    }
    .contact form .inputBox input{
        width: 100%;
    }
    .newsletter{
        font-size: 2.2rem;
    }

}

@media(max-width:450px) {
    html{
        font-size: 50%;
    }
    .header1{
        flex-flow: column;
    }
    .header1 .search-box-container{
        width:100%;
        margin-top:2rem;
    }
    .logo{
        font-size:4rem;
    }
    .deal .content .count-down .box h3{
        font-size: 4rem;
    }
    .deal .content .count-down .box span{
        font-size: 1.5rem;
    }
}

main.js

				
					let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let header = document.querySelector('.header2');

menu.addEventListener('click', () =>{
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
});

window.onscroll = () =>{
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');

    if(window.scrollY > 150){
        header.classList.add('active');
    }else{
        header.classList.remove('active');
    }
}

let countDate = new Date('june 12, 2022 00:00:00').getTime();

function CountDown(){

    let now = new Date().getTime();
    gap = countDate - now;

    let second = 1000;
    let minute = second * 60;
    let hour = minute * 60;
    let day = hour * 24;

    let d = Math.floor(gap / (day));
    let h = Math.floor((gap % (day)) / (hour));
    let m = Math.floor((gap % (hour)) / (minute));
    let s = Math.floor((gap % (minute)) / (second));

    document.getElementById('day').innerHTML = d;
    document.getElementById('hour').innerHTML = h;
    document.getElementById('minute').innerHTML = m;
    document.getElementById('second').innerHTML = s;

}

setInterval(function(){
    CountDown();
}, 1000)