Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive, best online food ordering websites. Using html5, CSS3, and ES6 JavaScript, this beginner web development project tutorial.
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
<![CDATA[<!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 food website design tutorial</title>
<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>
<header>
<a href="#">food</a>
<nav>
<a href="#home">home</a>
<a href="#speciality">speciality</a>
<a href="#popular">popular</a>
<a href="#gallery">gallery</a>
<a href="#review">review</a>
<a href="#order">order</a>
</nav>
</header>
<section id="home">
<h3>food made with love</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#">order now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home-img.png">
</section>
<section id="speciality">
<h1>our speciality</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-1.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-1.png">
<h3>tasty burger</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-2.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-2.png">
<h3>tasty pizza</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-3.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-3.png">
<h3>cold ice-cream</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-4.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-4.png">
<h3>cold drinks</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-5.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-5.png">
<h3>tasty sweets</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-img-6.jpg">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/s-6.png">
<h3>healty breakfast</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
</section>
<section id="popular">
<h1>most popular food</h1>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-1.jpg">
<h3>tasty burger</h3>
<a href="#">order now</a>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-2.jpg">
<h3>tasty cake</h3>
<a href="#">order now</a>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-3.jpg">
<h3>tasty sweets</h3>
<a href="#">order now</a>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-4.jpg">
<h3>tasty cupcake</h3>
<a href="#">order now</a>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-5.jpg">
<h3>cold drinks</h3>
<a href="#">order now</a>
$5 - $20
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/p-6.jpg">
<h3>cold ice-cream</h3>
<a href="#">order now</a>
</section>
<section>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/step-1.jpg">
<h3>choose your favorite food</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/step-2.jpg">
<h3>free and fast delivery</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/step-3.jpg">
<h3>easy payments methods</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/step-4.jpg">
<h3>and finally, enjoy your food</h3>
</section>
<section id="gallery">
<h1>our food gallery</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-1.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-2.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-3.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-4.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-5.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-6.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-7.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-8.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/g-9.jpg">
<h3>tasty food</h3>
<p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
<a href="#">ordern now</a>
</section>
<section id="review">
<h1> our customers reviews</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic1.png">
<h3>Jenna deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic2.png">
<h3>Edward deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic3.png">
<h3>lisa deo</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
</section>
<section id="order">
<h1>order now</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/order-img.jpg">
<form action="">
<input type="text" placeholder="name" name="">
<input type="email" placeholder="email" name="">
<input type="number" placeholder="number" name="">
<input type="text" placeholder="food name" name="">
<textarea name="" placeholder="address" id="" cols="30" rows="10"></textarea>
<input type="submit" name="" value="order now">
</form>
</section>
<section>
<a href="#">facebook</a>
<a href="#">twitter</a>
<a href="#">instagram</a>
<a href="#">pinterset</a>
<a href="#">linkedin</a>
<h1> created by dailywebdesign | all rights reserved! </h1>
</section>
<a href="#home" id="scroll-top"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/loader.gif">
<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
<![CDATA[@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--red:#ff3838;
}
*{
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(--red);
color: #fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}
body{
background: #f7f7f7;
}
section{
padding: 2rem 9%;
}
.heading{
text-align: center;
font-size: 3.5rem;
padding: 1rem;
color: #666;
}
.heading span{
color: var(--red);
}
.btn{
display: inline-block;
padding: .8rem 3rem;
border: .2rem solid var(--red);
color: var(--red);
cursor: pointer;
font-size: 1.7rem;
border-radius: .5rem;
position: relative;
overflow: hidden;
z-index: 0;
margin-top: 1rem;
}
.btn::before{
content:'';
position: absolute;
top: 0;
right: 0;
width: 0%;
height: 100%;
background: var(--red);
transition:.3s linear;
z-index: -1;
}
.btn:hover::before{
width: 100%;
left: 0;
}
.btn:hover{
color: #fff;
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 2rem 9%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}
header .logo{
font-size: 2.5rem;
font-weight: bolder;
color: #666;
}
header .logo i{
padding-right: .5rem;
color: var(--red);
}
header .navbar a{
font-size: 2rem;
margin-left: 2rem;
color: #666;
}
header .navbar a:hover{
color: var(--red);
}
#menu-bar{
font-size: 3rem;
cursor: pointer;
color: #666;
border: .1rem solid #666;
border-radius: .3rem;
padding: .5rem 1.5rem;
display: none;
}
.home{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
min-height: 100vh;
align-items: center;
background: url(img/home-bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.home .content{
flex: 1 1 40rem;
padding-top: 6.5rem;
}
.home .img{
flex: 1 1 40rem;
}
.home .img img{
width: 100%;
padding: 1rem;
animation:float 3s linear infinites;
}
@keyframes float{
0%, 100%{
transform: translateY(0rem);
}
50%{
transform: translateY(3rem);
}
}
.home .content h3{
font-size: 5rem;
color: #333;
}
.home .content p{
font-size: 1.7rem;
color: #666;
padding: 1rem 0;
}
.speciality .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.speciality .box-container .box{
flex: 1 1 30rem;
position: relative;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border: .1rem solid rgba(0,0,0,.3);
cursor: pointer;
border-radius: .5rem;
}
.speciality .box-container .box .img{
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
top: -100%;
left: 0;
}
.speciality .box-container .box .content{
text-align: center;
background: #fff;
padding: 2rem;
}
.speciality .box-container .box .content img{
margin: 1.5rem 0;
}
.speciality .box-container .box .content h3{
font-size: 2.5rem;
color: #333;
}
.speciality .box-container .box .content p{
font-size: 1.6rem;
color: #666;
padding: 1rem;
}
.speciality .box-container .box:hover .img{
top: 0;
}
.speciality .box-container .box:hover .content{
transform: translateY(100%);
}
.popular .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.popular .box-container .box{
padding: 2rem;
background: #fff;
box-shadow: 0.5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
text-align: center;
flex: 1 1 30rem;
position: relative;
}
.popular .box-container .box img{
height: 25rem;
object-fit: cover;
width: 100%;
border-radius: .5rem;
}
.popular .box-container .box .price{
position: absolute;
top: 3rem;
left: 3rem;
background: var(--red);
color: #fff;
font-size: 2rem;
padding: .5rem 1rem;
border-radius: .5rem;
}
.popular .box-container .box h3{
color: #333;
font-size: 2.5rem;
padding-top: 1rem;
}
.popular .box-container .box .stars{
color: #F39C12;
font-size: 1.7rem;
padding: 1rem .1rem;
}
.steps{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
padding: 1rem;
}
.steps .box{
flex: 1 1 25rem;
padding: 1rem;
text-align: center;
}
.steps .box img{
border-radius: 50%;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}
.steps .box h3{
font-size: 2.5rem;
color: #333;
padding: 1rem;
}
.gallery .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.gallery .box-container .box{
height: 25rem;
flex: 1 1 30rem;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border-radius: .5rem;
position: relative;
overflow: hidden;
}
.gallery .box-container .box img{
height: 100%;
width: 100%;
object-fit: cover;
}
.gallery .box-container .box .content{
position: absolute;
top: -100%;
left: 0;
height: 100%;
width: 100%;
background: rgba(255,255,255,.9);
padding: 2rem;
padding-top: 5rem;
text-align: center;
}
.gallery .box-container .box .content h3{
font-size: 2.5rem;
color: #333;
}
.gallery .box-container .box .content p{
font-size: 1.5rem;
color: #666;
padding:1rem 0;
}
.gallery .box-container .box:hover .content{
top: 0;
}
.review .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}
.review .box-container .box{
text-align: center;
padding-top: 2rem;
border:1rem solid #fff;
box-shadow: 0.5rem 1rem rgba(0,0,0,.3);
border-radius: .5rem;
flex: 1 1 30rem;
background: #333;
margin-top: 6rem;
}
.review .box-container .box img{
height: 12rem;
width: 12rem;
border-radius: 50%;
border:1rem solid #fff;
margin-top: -8rem;
object-fit: cover;
}
.review .box-container .box h3{
font-size: 2.5rem;
color: #fff;
padding: .5rem 0;
}
.review .box-container .box .stars i{
font-size: 2.5rem;
color: var(--red);
padding: .5rem 0;
}
.review .box-container .box p{
font-size: 1.5rem;
color: #eee;
padding: 1rem 0;
}
.order .row{
padding: 2rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
background: #fff;
display: flex;
flex-wrap: wrap;
gap:1.5rem;
border-radius: .5rem;
}
.order .row .img{
flex: 1 1 30rem;
}
.order .row .img img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: .5rem;
}
.order .row form{
flex: 1 1 50rem;
padding: 1rem;
}
.order .row form .inputBox{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.order .row form .inputBox input,
.order .row form textarea{
padding: 1rem;
margin: 1rem 0;
font-size: 1.7rem;
color: #333;
text-transform: none;
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
width: 49%;
}
.order .row form textarea{
width: 100%;
resize: none;
height: 15rem;
}
.order .row form .btn{
background: none;
}
.order .row form .btn:hover{
background: var(--red);
}
.footer{
background: #000;
text-align: center;
}
.footer .share{
display: flex;
gap:1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.footer .credit{
padding: 2.5rem 1rem;
color: #fff;
font-weight: normal;
font-size: 2rem;
}
.footer .credit span{
color: var(--red);
}
#scroll-top{
position: fixed;
top:-120%;
right: 2rem;
padding:.5rem 1rem;
font-size: 4rem;
background: var(--red);
color: #fff;
border-radius: .5rem;
transition: 1s linear;
z-index: 1000;
}
#scroll-top.active{
top:calc(100% - 12rem);
}
.loader-container{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.loader-container.fade-out{
top: -120%;
}
/*media queries*/
@media(max-width: 991px){
html{
font-size: 55%;
}
header{
padding: 2rem;
}
section{
padding: 2rem;
}
}
@media(max-width: 768px){
#menu-bar{
display: initial;
}
header .navbar{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #f7f7f7;
border-top: .1rem solid rgba(0,0,0,.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
margin: 1.5rem;
padding: 1.5rem;
display: block;
border: .2rem solid rgba(0,0,0,.1);
border-left: .5rem solid var(--red);
background: #fff;
}
}
@media(max-width: 450px){
html{
font-size: 50%;
}
.order .row form .inputBox input{
width: 100%;
}
}]]>
main.js
<![CDATA[let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
if(window.scrollY > 60){
document.querySelector('#scroll-top').classList.add('active');
}else{
document.querySelector('#scroll-top').classList.remove('active');
}
}
function loader(){
document.querySelector('.loader-container').classList.add('fade-out');
}
function fadeOut(){
setInterval(loader, 3000);
}
window.onload = fadeOut();]]>
images
