Hi everybody! Using HTML, CSS, and JavaScript, you will learn
how to create a responsive coffee shop web page design website 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
<![CDATA[<!DOCTYPE html>
<html>
<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 coffee shop website design</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="#">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/logo.png">
</a>
<nav>
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#menu">menu</a>
<a href="#products">products</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
<a href="#blogs">blogs</a>
</nav>
<input type="search" id="search-box" placeholder="search here..." name="">
<label for="search-box"></label>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-item-1.png">
<h3>cart item 01</h3>
$15.99/-
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-item-2.png">
<h3>cart item 02</h3>
$15.99/-
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-item-3.png">
<h3>cart item 03</h3>
$15.99/-
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/cart-item-4.png">
<h3>cart item 04</h3>
$15.99/-
<a href="#">Checkout Now</a>
</header>
<section id="home">
<h3>fresh coffee in the morning</h3>
<p>Coffee is a brewed drink prepared from roasted coffee beans,<br /> the seeds of berries from certain Coffea farhan.</p>
<a href="#">get yours now</a>
</section>
<section id="about">
<h1>aboutus</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/about-img.jpeg">
<h3>what makes our coffee special?</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
<a href="#">learn more</a>
</section>
<section id="menu">
<h1>ourmenu</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-1.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-2.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-3.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-4.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-5.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/menu-6.png">
<h3>tasty and healty</h3>
$15.9920.99
<a href="#">add to cart</a>
</section>
<section id="products">
<h1> our products </h1>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-1.png" alt="">
<h3>fresh coffee</h3>
$15.99 $20.99
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-2.png" alt="">
<h3>fresh coffee</h3>
$15.99 $20.99
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-3.png" alt="">
<h3>fresh coffee</h3>
$15.99 $20.99
</section>
<section id="review">
<h1>customer's review</h1>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/quote-img.png">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. farhan sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.png">
<h3>Edward deo</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/quote-img.png">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. farhan sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.png">
<h3>Jenna deo</h3>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/quote-img.png">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. farhan sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.png">
<h3>Kennway deo</h3>
</section>
<section id="contact">
<h1>contact us</h1>
<iframe data-lazyloaded="1" src="about:blank" data-litespeed-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d462560.3011806427!2d54.947543798608436!3d25.076381472700536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f43496ad9c645%3A0xbde66e5084295162!2sDubai%20-%20United%20Arab%20Emirates!5e0!3m2!1sen!2sin!4v1637916677261!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>
<form action="">
<h3>get in touch</h3>
<input type="text" placeholder="name" name="">
<input type="email" placeholder="email" name="">
<input type="number" placeholder="number" name="">
<input type="submit" value="contact now" name="">
</form>
</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.jpeg">
<a href="#">tasty and refreshing coffee</a>
by admin / 12 jan, 2021
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-2.jpeg">
<a href="#">tasty and refreshing coffee</a>
by admin / 12 jan, 2021
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">read more</a>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/blog-3.jpeg">
<a href="#">tasty and refreshing coffee</a>
by admin / 12 jan, 2021
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">read more</a>
</section>
<section>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">menu</a>
<a href="#">products</a>
<a href="#">review</a>
<a href="#">contact</a>
<a href="#">blogs</a>
created by dailywebdesign | all rights 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
<![CDATA[@import url('https://fonts.googleapis.com/css2?family=Estonia&family=Poppins:wght@200;300;400;500;600;700&display=swap');
root{
--main-color: #d3ad7f;
--black:#13131a;
--bg:#010103;
--border:.1rem solid rgba(255,255,255,.3);
}
*{
font-family: 'Estonia', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: .8rem;
}
html::-webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background: #fff;
border-radius: 5rem;
}
body{
background: var(--bg);
}
section{
padding: 2rem 7%;
}
.heading{
text-align: center;
color: #fff;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}
.heading span{
color: var(--main-color);
text-transform: uppercase;
}
.btn{
margin-top: 1rem;
display: inline-block;
padding:.9rem 3rem;
font-size: 1.7rem;
color: #fff;
background: var(--main-color);
cursor: pointer;
font-family: 'Poppins', sans-serif;
}
.btn:hover{
letter-spacing: .2rem;
}
.header{
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 7%;
border-bottom: var(--border);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header .logo img{
height: 6rem;
}
.header .navbar a{
margin: 0 1rem;
font-size: 2.9rem;
color: #fff;
}
.header .navbar a:hover{
color: var(--main-color);
border-bottom: .1rem solid var(--main-color);
padding-bottom: .5rem;
}
.header .icons div{
color: #fff;
cursor: pointer;
font-size: 2.5rem;
margin-left: 2rem;
}
.header .icons div:hover{
color: var(--main-color);
}
#menu-btn{
display: none;
}
.header .search-form{
position: absolute;
top: 155%;
right: 7%;
background: #fff;
width: 50rem;
height: 5rem;
display: flex;
align-items: center;
transform: scaleY(0);
transform-origin: top;
}
.header .search-form.active{
transform: scaleY(1);
}
.header .search-form input{
height: 100%;
width: 100%;
font-size: 1.6rem;
color: var(--black);
padding: 1rem;
text-transform: none;
}
.header .search-form label{
cursor: pointer;
font-size: 2.5rem;
margin-right: 1.5rem;
color: var(--black);
}
.header .search-form label:hover{
color: var(--main-color);
}
.header .cart-items-container{
position: absolute;
top: 100%;
right: -100%;
height: calc(100vh - 9.5rem);
width: 35rem;
background: #fff;
padding: 0 1.5rem;
}
.header .cart-items-container.active{
right: 0;
}
.header .cart-items-container .cart-item{
position: relative;
margin:2rem 0;
display: flex;
align-items: center;
gap:1.5rem;
}
.header .cart-items-container .cart-item .fa-times{
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
color: var(--black);
}
.header .cart-items-container .cart-item .fa-times{
color: var(--main-color);
}
.header .cart-items-container .cart-item img{
height: 7rem;
}
.header .cart-items-container .cart-item .content h3{
font-size: 2rem;
color: var(--black);
padding-bottom: .5rem;
}
.header .cart-items-container .cart-item .content .price{
font-size: 1.5rem;
color: var(--main-color);
}
.header .cart-items-container .btn{
width: 100%;
text-align: center;
}
.home{
min-height: 100vh;
display: flex;
align-items: center;
background:url(img/home-img.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.home .content{
max-width: 60rem;
}
.home .content h3{
font-size: 6rem;
text-transform: uppercase;
color: #fff;
}
.home .content p{
font-size: 3rem;
font-weight: lighter;
line-height: 1.8;
padding: 1rem 0;
color: #eee;
}
.about .row{
display: flex;
align-items: center;
background: var(--black);
flex-wrap: wrap;
}
.about .row .image{
flex:1 1 45rem;
}
.about .row .image img{
width: 100%;
}
.about .row .content{
flex:1 1 45rem;
padding:2rem;
}
.about .row .content h3{
font-size: 4rem;
color: #fff;
}
.about .row .content p{
font-size: 2.6rem;
color: #ccc;
padding: 1rem 0;
line-height: 1.8;
}
.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.menu .box-container .box{
padding: 5rem;
text-align: center;
border: var(--border);
}
.menu .box-container .box img{
height: 10rem;
}
.menu .box-container .box h3{
color: #fff;
font-size: 4rem;
padding: 1rem 0;
}
.menu .box-container .box .price{
color: #fff;
font-size: 2.5rem;
padding: 1rem 0;
font-family: 'Poppins', sans-serif;
}
.menu .box-container .box .price span{
font-size: 1.5rem;
text-decoration: line-through;
font-weight: lighter;
font-family: 'Poppins', sans-serif;
}
.menu .box-container .box:hover{
background: #fff;
}
.menu .box-container .box:hover > *{
color: var(--black);
}
.products .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.products .box-container .box{
text-align: center;
border: var(--border);
padding: 2rem;
}
.products .box-container .box .icons a{
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
border: var(--border);
color: #fff;
margin:.3rem;
}
.products .box-container .box .icons a:hover{
background: var(--main-color);
}
.products .box-container .box .image{
padding: 2.5rem 0;
}
.products .box-container .box .image img{
height: 25rem;
}
.products .box-container .box .content h3{
color: #fff;
font-size: 3.5rem;
}
.products .box-container .box .content .stars{
padding: 1.5rem;
}
.products .box-container .box .content .stars i{
font-size: 1.7rem;
color: var(--main-color);
}
.products .box-container .box .content .price{
color: #fff;
font-size: 2.5rem;
font-family: 'Poppins', sans-serif;
}
.products .box-container .box .content .price span{
text-decoration: line-through;
font-weight: lighter;
font-size: 2.5rem;
}
.review .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.review .box-container .box{
border: var(--border);
text-align: center;
padding: 3rem 2rem;
}
.review .box-container .box p{
font-size: 1.5rem;
line-height: 1.8;
color: #fff;
padding:2rem 0;
font-family: 'Poppins', sans-serif;
}
.review .box-container .box .user{
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .box-container .box h3{
padding: 1rem 0;
font-size: 4rem;
color: #fff;
}
.review .box-container .box .stars i{
font-size: 1.5rem;
color: var(--main-color);
}
.contact .row{
display: flex;
background: var(--black);
flex-wrap: wrap;
gap:1rem;
}
.contact .row .map{
flex:1 1 45rem;
width: 100%;
object-fit: cover;
}
.contact .row form{
flex:1 1 45rem;
padding: 5rem 2rem;
text-align: center;
}
.contact .row form h3{
text-transform: uppercase;
font-size: 3.5rem;
color: #fff;
}
.contact .row form .inputBox{
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--bg);
border: var(--border);
}
.contact .row form .inputBox span{
color: #fff;
font-size: 2rem;
padding-left: 2rem;
}
.contact .row form .inputBox input{
width: 100%;
padding: 2rem;
font-size: 1.7rem;
color: #fff;
text-transform: none;
font-family: 'Poppins', sans-serif;
background: transparent;
}
.blogs .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap:1.5rem;
}
.blogs .box-container .box{
border: var(--border);
}
.blogs .box-container .box .image{
height: 25rem;
overflow: hidden;
width: 100%;
}
.blogs .box-container .box .image img{
height: 100%;
overflow: hidden;
width: 100%;
}
.blogs .box-container .box:hover .image img{
transform: scale(1.2);
}
.blogs .box-container .box .content{
padding: 2rem;
}
.blogs .box-container .box .content .title{
font-size: 3rem;
line-height: 1.5rem;
color: #fff;
}
.blogs .box-container .box .content .title:hover{
color: var(--main-color);
}
.blogs .box-container .box .content span{
color: var(--main-color);
display: block;
padding-top: 1rem;
font-size: 2rem;
}
.blogs .box-container .box .content p{
font-size: 1.6rem;
line-height: 1.8;
color: #ccc;
padding:1rem 0;
font-family: 'Poppins', sans-serif;
}
.footer{
background:var(--black);
text-align: center;
}
.footer .share{
padding: 1rem 0;
}
.footer .share a{
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
color: #fff;
border: var(--border);
margin: .3rem;
border-radius: 50%;
}
.footer .share a:hover{
background-color: var(--main-color);
}
.footer .links{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 2rem 0;
gap:1rem;
}
.footer .links a{
padding: .7rem 2rem;
color: #fff;
border: var(--border);
font-size: 3rem;
}
.footer .links a:hover{
background-color: var(--main-color);
}
.footer .credit{
font-size: 4rem;
color: #fff;
font-weight: lighter;
padding: 1.5rem;
}
.footer .credit span{
color: var(--main-color);
}
/*media queries*/
@media(max-width: 991px){
html{
font-size: 55%;
}
.header{
padding: 1.5rem 2rem;
}
section{
padding: 2rem;
}
}
@media(max-width: 768px){
#menu-btn{
display: inline-block;
}
.header .navbar{
position: absolute;
top: 100%;
right: -100%;
background:#fff;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar.active{
right: 0;
}
.header .navbar a{
color: var(--black);
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
.header .search-form{
width: 90%;
right: 2rem;
}
.home{
background-position: left;
justify-content: center;
text-align: center;
}
.home .content h3{
font-size: 4.5rem;
}
.home .content p{
font-size: 1.5rem;
}
}
@media(max-width: 450px){
html{
font-size: 50%;
}
}]]>
main.js
<![CDATA[let navbar = document.querySelector('.navbar');
document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.toggle('active');
searchForm.classList.remove('active');
cartItem.classList.remove('active');
}
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () =>{
searchForm.classList.toggle('active');
navbar.classList.remove('active');
cartItem.classList.remove('active');
}
let cartItem = document.querySelector('.cart-items-container');
document.querySelector('#cart-btn').onclick = () =>{
cartItem.classList.toggle('active');
navbar.classList.remove('active');
searchForm.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
searchForm.classList.remove('active');
cartItem.classList.remove('active');
}]]>
images
