Coffee Shop Website using HTML, CSS & JavaScript
Introduction :
This project is a website for coffee house business. It uses HTML for the structure, CSS to style the pages, and JavaScript for making the site interactive. The site includes several sections like a landing page with a banner and an image slider, areas to show services, a menu, and animated counters that display important business stats. If you are having a coffee shop you can take the advantage of this website and customize this according to your requirement to showcase coffee shop services and items
The design is responsive, which means it works well on any device such as phones, tablets, or desktops.
Structure :
HTML :
Head Section :
Links to external resources, including stylesheets from Google Fonts, Font Awesome for icons, and Swiper.js for the image slider.
Body Section :
Contains the core components of the webpage:
- Navbar: A fixed navigation bar that provides links to different sections of the site.
- Landing Section: Features a welcome message and a call-to-action button, alongside a Swiper image slider.
- About Section: Highlights key business features like ease of ordering, fast delivery, and quality coffee.
- Menu Section: Displays a brief description of the coffee house’s menu with associated images.
- Business Data Section: Displays business statistics, like the number of branches and awards.
CSS :
Global Styles :
Font settings, margins, padding, and box-sizing are reset for consistency across browsers. html is set to font-size: 62.5% for easier scaling and responsiveness.
Container and Navbar :
The container spans the full width and height, providing a base layout. The navbar is styled with a fixed position, making it always visible, and it transitions smoothly into a sticky mode when scrolling, shrinking its height.
Landing Section :
The banner text is centered with the use of absolute positioning and is styled to stand out with fonts from Google. Call-to-action buttons have hover effects that change colors and borders for interactivity.
Swiper Slider :
Custom pagination styles are applied to the Swiper bullets, and images are set to cover the entire viewport for an immersive experience
Responsive Design :
The website is built to be responsive, ensuring that the layout and images adjust properly on different screen sizes. The use of percentages and flexible units like rem helps achieve this.
JavaScript Logic :
Swiper Functionality :
The Swiper.js library is used to create an image slider that transitions between images with a fade effect.
Autoplay :
The images change automatically every 4 seconds (delay: 4000) without disabling the autoplay when the user interacts with the slider (disableOnInteraction: false).
Looping :
The slider loops indefinitely (loop: true), ensuring continuous movement without breaks.
Pagination
Bullet-style pagination allows users to navigate between slides manually, with the pagination bullets being clickable (clickable: true).
Purpose of Functions
Swiper Slider Initialization :
Initializes the image slider and controls its behavior, ensuring smooth transitions between images, autoplay, and user interaction via pagination.
Scroll Event Listener :
This function checks the user’s scroll position in real-time and applies two important changes:
- Sticky Navbar: Adds/removes the
stickyclass when the user scrolls down to keep the navigation visible while compact. - Trigger Counters: When the user scrolls past the menu section, the counters for business data start incrementing.
startCount Function :
This function controls the increment of each business data counter. It starts counting from 0 to the target value and stops when the target is reached.The counting process is paced by setting the interval dynamically based on the target value, ensuring the numbers increment at a consistent speed.
<!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>Coffee House</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Josefin+Sans:wght@300;400;700&family=Poppins:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="logo">
<i class="fa-solid fa-mug-saucer"></i>
<div class="logo-text">
<span>Coffee</span>
<span>House</span>
</div>
</div>
<div class="navigation">
<a href="#">Home</a>
<a href="#">Menu</a>
<a href="#">Blog</a>
<a href="#">About</a>
<a href="#">Shop</a>
<a href="#">Contact</a>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</nav>
<section class="landing">
<div class="banner">
<h3 class="main-heading">Welcome</h3>
<h1>Amazing taste & beautiful place</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae
ipsa harum minima repellat nostrum consequatur!
</p>
<button type="button" class="banner-btn banner-btn-1">
Order Now
</button>
<button type="button" class="banner-btn banner-btn-2">
View Menu
</button>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image1.jpg" /></div>
<div class="swiper-slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image2.jpg" /></div>
<div class="swiper-slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image3.jpg" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="landing-contact">
<div class="details">
<i class="fa-solid fa-phone"></i>
<div>
<span>000 (123) 456 7890</span>
<span
>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Itaque, sed.</span
>
</div>
</div>
<div class="details">
<i class="fa-solid fa-location-dot"></i>
<div>
<span>123 Main Street</span>
<span
>203 Fake St. Mountain View, San Francisco, California,
USA</span
>
</div>
</div>
<div class="details">
<i class="fa-solid fa-clock"></i>
<div>
<span>Open Monday-Friday</span>
<span>Please Join Us, We are Available --> 8:00am - 9:00pm</span>
</div>
</div>
</div>
</section>
<section class="about">
<div>
<i class="fa-solid fa-mobile"></i>
<h1>Easy to Order</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
suscipit, quod quidem cumque rerum.
</p>
</div>
<div>
<i class="fa-solid fa-truck"></i>
<h1>Fastest Delivery</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
suscipit, quod quidem cumque rerum.
</p>
</div>
<div>
<i class="fa-solid fa-mug-hot"></i>
<h1>Quality Coffee</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam ut
suscipit, quod quidem cumque rerum.
</p>
</div>
</section>
<section class="menu">
<div class="menu-left">
<h3 class="main-heading">Discover</h3>
<h1>Our Menu</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
accusantium vitae fugiat perferendis. Inventore rem debitis
consequatur dolorum voluptatum. Repudiandae?
</p>
<button type="button" class="menu-btn">View Full Menu</button>
</div>
<div class="menu-right">
<div class="menu-right-images">
<div class="menu-img-wrapper">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image4.jpg" />
</div>
<div class="menu-img-wrapper">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image5.jpg" />
</div>
<div class="menu-img-wrapper">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image6.jpg" />
</div>
<div class="menu-img-wrapper">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/image7.jpg" />
</div>
</div>
</div>
</section>
<section class="data">
<div>
<div class="icon-wrapper">
<i class="fa-solid fa-mug-hot"></i>
<span class="icon-bg"></span>
</div>
<span class="num" data-val="350">0</span>
<span class="info">Coffee Branches</span>
</div>
<div>
<div class="icon-wrapper">
<span class="icon-bg"></span>
<i class="fa-solid fa-mug-hot"></i>
</div>
<span class="num" data-val="90">0</span>
<span class="info">Number of Awards</span>
</div>
<div>
<div class="icon-wrapper">
<span class="icon-bg"></span>
<i class="fa-solid fa-mug-hot"></i>
</div>
<span class="num" data-val="2540">0</span>
<span class="info">Happy Customers</span>
</div>
<div>
<div class="icon-wrapper">
<span class="icon-bg"></span>
<i class="fa-solid fa-mug-hot"></i>
</div>
<span class="num" data-val="750">0</span>
<span class="info">Staff</span>
</div>
</section>
<section class="customers">
<div class="customers-banner">
<h3 class="main-heading">Testimony</h3>
<h1>Customers Say</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda
doloribus qui nemo earum perspiciatis fugiat quae a numquam
quibusdam asperiores.
</p>
</div>
<div class="clients">
<div class="client">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Veritatis eos, maiores commodi sint voluptatum atque iusto itaque.
Voluptates, asperiores delectus!
</p>
<div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/client1.jpg" />
<span>John Smith</span>
</div>
</div>
<div class="client">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil et,
quam repudiandae facere nulla nobis rerum quasi commodi ratione,
ducimus sapiente debitis illum similique eveniet numquam provident
tempore sed architecto!
</p>
<div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/client2.jpg" />
<span>Nick Brown</span>
</div>
</div>
<div class="client">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore,
illo! Architecto autem voluptatibus eum iste neque dolores vitae.
Animi, eius?
</p>
<div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/client3.jpg" />
<span>david Jones</span>
</div>
</div>
<div class="client">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero,
recusandae.
</p>
<div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/client4.jpg" />
<span>Ann Smith</span>
</div>
</div>
<div class="client">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore,
illo! Architecto autem voluptatibus eum iste neque dolores vitae.
Animi, eius?
</p>
<div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/client5.jpg" />
<span>Mary Brown</span>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="contact-left"></div>
<div class="contact-right">
<form>
<h1>Book a Table</h1>
<div class="input-group">
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
</div>
<div class="input-group">
<input type="email" placeholder="Email Address" />
<input type="text" placeholder="Phone" />
</div>
<div class="input-group">
<textarea placeholder="Message"></textarea>
<button type="button" class="contact-btn">Appointment</button>
</div>
</form>
</div>
</section>
<footer>
<p class="copyright">
© All Rights Reserved. 2023. Made by Code And Create
</p>
</footer>
</div>
<script type="litespeed/javascript" data-src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <script type="litespeed/javascript" data-src="script.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://codewithcurious.com/wp-content/litespeed/js/498f68a5eb4ec694db8478345e6b6a23.js?ver=971c1"></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>
CSS (style.css)
/* Default Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
font-family: "Poppins", sans-serif;
}
html {
font-size: 62.5%;
}
/* End of Default Styles */
/* Container */
.container {
width: 100%;
height: 100%;
}
/* Navigation */
.navbar {
width: 100%;
height: 10rem;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
justify-content: space-evenly;
align-items: center;
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.1);
z-index: 300;
transition: all 0.5s;
}
.sticky.navbar {
height: 8rem;
background-color: #000;
}
.logo {
display: flex;
align-items: center;
cursor: pointer;
}
.logo i {
font-size: 4rem;
-webkit-text-stroke: 0.1rem #fff;
color: transparent;
margin-right: 1rem;
}
.logo-text {
display: flex;
flex-direction: column;
text-align: center;
}
.logo-text span:nth-child(1) {
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #fff;
}
.logo-text span:nth-child(2) {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
color: #eee;
margin-top: -0.7rem;
}
.navigation a {
font-size: 1.4rem;
text-transform: uppercase;
color: #eee;
margin-right: 3rem;
letter-spacing: 0.2rem;
position: relative;
transition: color 0.3s;
}
.navigation a:hover {
color: #c49b63;
}
.navigation a:nth-child(1) {
color: #c49b63;
}
.navigation a:last-child {
font-size: 1.8rem;
}
.navigation a:last-child::after {
content: "1";
width: 2.5rem;
height: 2.5rem;
background-color: #ffc107;
border-radius: 50%;
position: absolute;
top: -1.5rem;
left: 1rem;
display: flex;
justify-content: center;
align-items: center;
color: #222;
font-size: 1.2rem;
}
/* End of Navigation */
/* Landing */
.landing {
width: 100%;
height: 95vh;
position: relative;
}
.banner {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
text-align: center;
}
.main-heading {
font-family: "Great Vibes", cursive;
font-size: 4rem;
font-weight: 300;
color: #c49b63;
}
.banner h1 {
font-family: "Josefin Sans", sans-serif;
font-size: 6rem;
font-weight: 400;
text-transform: uppercase;
color: #fff;
margin: 2rem 0;
line-height: 1.5;
letter-spacing: 0.2rem;
}
.banner p {
font-size: 1.5rem;
font-weight: 300;
color: #fff;
width: 60rem;
margin: 0 auto 2rem auto;
letter-spacing: 0.1rem;
}
.banner-btn {
width: 12rem;
height: 5.5rem;
cursor: pointer;
margin: 0.1rem;
font-size: 1.4rem;
transition: all 0.3s;
}
.banner-btn-1 {
background-color: #c49b63;
border: none;
color: #222;
}
.banner-btn-1:hover {
background-color: transparent;
color: #c49b63;
border: 0.1rem solid #c49b63;
}
.banner-btn-2 {
background-color: transparent;
color: #c49b63;
border: 0.1rem solid #fff;
color: #fff;
}
.banner-btn-2:hover {
background-color: #c49b63;
color: #222;
border: 0.1rem solid #c49b63;
}
.swiper {
width: 100%;
height: 85%;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
span.swiper-pagination-bullet {
width: 2rem;
height: 2rem;
opacity: 1;
margin-right: 1.5rem !important;
background-color: #aaa;
position: relative;
}
span.swiper-pagination-bullet::after {
content: "";
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: 0.2rem solid #aaa;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fff;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
border: 0.2rem solid #fff;
}
.landing-contact {
position: absolute;
top: 85%;
left: 0;
width: 100%;
height: 15vh;
background-color: #000;
display: flex;
justify-content: space-evenly;
align-items: center;
color: #fff;
}
.details {
display: flex;
}
.details i {
font-size: 2rem;
color: #c49b63;
margin-right: 2rem;
}
.details div {
display: flex;
flex-direction: column;
font-family: "Josefin Sans", sans-serif;
}
.details div span:nth-child(1) {
font-size: 1.6rem;
color: #fff;
margin-bottom: 0.5rem;
}
.details div span:nth-child(2) {
font-size: 1.4rem;
color: #bbb;
width: 30rem;
}
/* End of Landing */
/* About */
.about {
width: 100%;
height: 60vh;
background-color: #c49b63;
display: flex;
align-items: center;
justify-content: center;
}
.about div {
width: 30rem;
height: 35rem;
margin: 0 3rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.about i {
width: 9rem;
height: 10rem;
font-size: 4rem;
-webkit-text-stroke: 0.2rem #2a2727;
color: transparent;
border: 0.1rem solid #2a2727;
display: flex;
justify-content: center;
align-items: center;
}
.about h1 {
font-size: 2rem;
font-weight: 400;
text-transform: uppercase;
color: #2a2727;
}
.about p {
font-size: 1.5rem;
font-weight: 300;
color: #2a2727;
}
/* End of About */
/* Menu */
.menu {
width: 100%;
height: 70vh;
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)),
url(images/image8.jpg) center no-repeat;
background-size: cover;
display: flex;
align-items: center;
}
.menu-left {
text-align: right;
margin-right: 3rem;
width: 50%;
}
.menu-left .main-heading {
font-size: 6rem;
}
.menu-left h1 {
font-size: 6rem;
font-weight: 300;
text-transform: uppercase;
color: #fff;
margin-top: -4rem;
}
.menu-left p {
font-size: 1.4rem;
color: #777;
width: 50rem;
margin: 2rem 0 4rem auto;
line-height: 1.2;
}
.menu-btn {
width: 15rem;
height: 5.5rem;
cursor: pointer;
margin: 0.1rem;
font-size: 1.3rem;
background-color: transparent;
border: 0.1rem solid #c49b63;
color: #c49b63;
text-transform: uppercase;
transition: all 0.3s;
}
.menu-btn:hover {
background-color: #c49b63;
color: #222;
}
.menu-right {
margin-left: 3rem;
width: 50%;
}
.menu-right-images {
width: 60rem;
display: flex;
flex-wrap: wrap;
}
.menu-img-wrapper {
width: 25rem;
height: 25rem;
margin: 2rem;
overflow: hidden;
}
.menu-right-images img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: transform 0.6s;
}
.menu-img-wrapper:hover img {
transform: scale(1.3);
}
/* End of Menu */
/* Data */
.data {
width: 100%;
height: 50vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
url(images/image7.jpg) center no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.data > div {
width: 25rem;
height: 30rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.icon-wrapper {
width: 8rem;
height: 8rem;
position: relative;
cursor: pointer;
}
.icon-bg {
display: block;
width: 100%;
height: 100%;
border: 0.1rem solid #c49b63;
transition: all 0.3s;
}
.data i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
-webkit-text-stroke: 0.2rem #c49b63;
color: transparent;
transition: all 0.3;
z-index: 100;
}
.icon-wrapper:hover .icon-bg {
background-color: #c49b63;
-webkit-text-stroke: 0.2rem #2a2727;
transform: rotateZ(135deg);
}
.icon-wrapper:hover i {
-webkit-text-stroke: 0.2rem #2a2727;
}
.num {
font-size: 3rem;
color: #c49b63;
}
.info {
font-size: 1.8rem;
color: #999;
}
/* End of Data */
/* Customers */
.customers {
width: 100%;
height: 70vh;
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8)),
url(images/image8.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.customers-banner {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.customers-banner .main-heading {
font-size: 6rem;
position: relative;
z-index: 10;
}
.customers-banner h1 {
font-size: 6rem;
font-weight: 300;
text-transform: uppercase;
color: #fff;
margin-top: -4rem;
}
.customers-banner p {
font-size: 1.6rem;
color: #777;
margin-top: 4rem;
line-height: 1.2;
}
.clients {
position: absolute;
bottom: 0;
display: flex;
align-items: flex-end;
}
.client {
width: 25%;
height: 25rem;
background-color: #c49b63;
padding: 2rem;
color: #fff;
position: relative;
}
.client:nth-child(2) {
height: 31rem;
}
.client:nth-child(4) {
height: 21rem;
}
.client:nth-child(even) {
opacity: 0.9;
}
.client img {
width: 5rem;
height: 5rem;
object-fit: cover;
border-radius: 50%;
margin-right: 2rem;
}
.client p {
font-size: 1.6rem;
margin-bottom: 2rem;
}
.client div {
display: flex;
align-items: center;
position: absolute;
bottom: 2rem;
}
.client div span {
font-size: 1.4rem;
text-transform: uppercase;
}
/* End of Customers */
/* Contact */
.contact {
width: 100%;
height: 60vh;
background-color: #000;
display: flex;
}
.contact-left {
width: 50%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)),
url(images/image1.jpg) center no-repeat;
background-size: cover;
}
.contact-right {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-right h1 {
font-size: 4rem;
font-weight: 300;
color: #fff;
margin: 0 0 3rem 2rem;
}
.input-group {
display: flex;
}
.input-group input,
textarea {
width: 30rem;
height: 5rem;
padding: 1rem 1rem 2rem 0;
margin: 2rem;
background-color: transparent;
border: none;
border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
color: #fff;
}
.input-group textarea {
resize: none;
height: 5rem;
}
textarea::-webkit-scrollbar {
display: none;
}
.input-group input::placeholder,
.input-group textarea::placeholder {
color: #fff;
}
.contact-btn {
width: 30rem;
height: 6rem;
background-color: #c49b63;
color: #2a2727;
margin: 1rem 2rem;
border: none;
cursor: pointer;
}
/* End of Contact */
/* Footer */
footer {
width: 100%;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #262626;
}
.copyright {
font-size: 1.6rem;
color: #999;
}
/* End of Footer */
/* End of Container */
/* Responsive */
@media (max-width: 1500px) {
html {
font-size: 55%;
}
}
@media (max-width: 1300px) {
html {
font-size: 50%;
}
}
@media (max-width: 1100px) {
html {
font-size: 45%;
}
.menu-img-wrapper {
width: 18rem;
height: 18rem;
}
.customers {
height: 120vh;
}
.clients {
flex-direction: column;
}
.client {
width: 100%;
height: 15rem;
}
.client:nth-child(2) {
height: 15rem;
}
.client:nth-child(4) {
height: 15rem;
}
.contact-left {
display: none;
}
.contact-right {
width: 100%;
}
.input-group input,
textarea,
.contact-btn {
width: 40rem;
}
}
@media (max-width: 900px) {
.landing-contact div span:nth-child(2) {
display: none;
}
.menu-right {
display: none;
}
.menu-left {
width: 100%;
text-align: center;
margin-right: 0;
}
.menu-left p {
margin: 2rem auto 4rem auto;
}
.customers {
height: 140vh;
}
.customers-banner p {
width: 60rem;
}
.client {
height: 18rem;
}
.client:nth-child(2) {
height: 18rem;
}
.client:nth-child(4) {
height: 18rem;
}
.contact {
height: 80%;
}
.input-group {
flex-direction: column;
}
.input-group input,
textarea,
.contact-btn {
width: 60rem;
}
}
@media (max-width: 600px) {
html {
font-size: 35%;
}
.landing-contact {
height: 19rem;
flex-direction: column;
align-items: center;
}
.details div {
width: 20rem;
}
.about {
height: 80vh;
flex-direction: column;
}
.about div {
width: 60rem;
margin: 0 2rem;
}
.customers {
height: 110vh;
}
}
@media (max-width: 450px) {
.logo {
display: none;
}
.input-group input,
textarea,
.contact-btn {
width: 50rem;
}
}
/* End of Responsive */
JavaScript (script.js)
const swiper = new Swiper(".swiper", {
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
effect: "fade",
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
let menu = document.querySelector(".menu");
let nums = document.querySelectorAll(".num");
let start = false;
window.addEventListener("scroll", () => {
const navbar = document.querySelector(".navbar");
navbar.classList.toggle("sticky", window.scrollY > 0);
if (window.scrollY >= menu.offsetTop) {
if (!start) {
nums.forEach((num) => {
startCount(num);
});
}
start = true;
}
});
const startCount = (el) => {
let max = el.dataset.val;
let count = setInterval(() => {
el.textContent++;
if (el.textContent === max) {
clearInterval(count);
}
}, 2000 / nums);
};
Your download is starting now...
Output :
Conclusion :
This project uses a combination of HTML for structure, CSS for aesthetic design, and JavaScript for interactivity to create a modern, responsive interior design (or coffee house) website. The key features include a sticky navigation bar, an autoplaying image slider with Swiper.js, and animated counters that engage users as they scroll through the site. The JavaScript functions ensure smooth transitions and interactions, contributing to a rich user experience.
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
Find More Projects
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Digital and Analog Clock using HTML CSS and JavaScript Introduction : This project is a digital clock and stopwatch system, which allows …
Coffee Shop Website using HTML, CSS & JavaScript Introduction : This project is a website for coffee house business. It uses HTML …
More HTML CSS JS Projects
Get Huge Discounts
