Architectural Website using HTML CSS and JavaScript
Introduction :
This is a Architectural Website using HTML CSS and JavaScript. This website contains modern design, use of animations and navigation. The project is built using Google Fonts, Font Awesome for the icons and a hamburger menu component to make it more responsive. If you are having a business of architectures then you can also take the advantage of this website by customizing as per your products and requirements. The use of HTML and CSS make easy for you to modify it accordingly. We have also made this website responsive means you can also open this website in any type of device. This will help for mobile users to have entire look over website. Sol lets discuss the project in the form of structure, code explanation etc.
Structure :
HTML :
The document starts with a!DOCTYPE declaration <;! It will start with , meaning it is an HTML5 document.
Head: Information regarding the application such as meta tags for character set and viewport setting which makes sure site works across different devices. The head also has links to various CSS files for styling as well as font and icon libraries.
Body Section:
Container – A content area for all website contents
Navbar The navbar includes the branding on the left, which is constructed from an image (split into three different divs for styling), then in revealing section of search bar and hamburger menu. The navigation includes — Home, About, Projects, Blog etc. sections
Banner: Hero section with a primary banner image and an oversized prominent call to action (CTA) button. With the “Dream House” concept targeted at potential households.
The About Section: That sees a header that presents the company, then what you are about (your values) and introduces your call to action. This uses images as scores to comply with the ext, emphasizing architectural motif.
Projects Section: Showcasing of various architectural projects with images and short brief using project cards gallery.
CSS :
Global Styles:
Reset the browser defaults to normalize padding and margins(*) With the box-sizing: border-box;, you can be relieved to not have to worry about width and height including padding, making layout management easier. It uses a clean and modern font, “Abel”.
font-size: 62.5%; // a common practice to simplify font-sizing (1rem = 10px)
Container Styling: The container class stretches the full width and height of the view port, with a dark gray (#202020) background color to present an appropriate neutral professional backdrop for architectural contents.
Navbar Styling: The Navbar fixed top scrolled visible We give it a height of 10rem and background color same as the container.
Logo Design The brand creates the logo using a stacked box effect for. logo1,. logo2, and. logo3. They are concentric squares (one within another)—each with its own set of dimensions and borders to give a layered appearance. The span includes the brand with a sans-serif font.
Search Bar: Right-justified with a slightly padded text input (hello readability) and placeholder text that is only slightly lighter (@#ccc).
Graziadio offers you to stay logged in on hamburger menu: three lines lined up vertically |. line). The animations are done with the, changing it on a click. change class. It flips and slides the lines to make an “X”, showing that the menu is open.
Navigation Styling:
The. public class navigation {//this is a utility classes. it can contain many static methods in singleclass or multiple… Firstly, it is hidden off-screen by using top: -100vh;; and secondly once the. Applying a change class (when the Toggle is clicked) slides it smoothly into view. The first-time the inside of the navigation bar is built up by fading in links one-by-one using staggered animation.
Styling for the Landing and About Section
The. landing-img and. These banner images will intend to be visually appealing with large graphics and emphasize the title were meant. The site starts of straight, putting the architecture in a focus. The button gives users the possibility to interact or discover more related content.
There are two columns, outlined in a creative frame on the right so that it is separated from text while still being part of about section with its experience and vision.
JavaScript Logic :
The JavaScript for the website is to be interactive, mainly the hamburger menu and navigation-slot. Here is a detailed explanation of the logic —
Hamburger Menu Animation:
The menu-icon itself toggles the state of whether or not to display navigation menu that comes out from within hidden. JavaScript toggles the. update class on menu icon and navigation bar.
Click and translate the css to make the lines appear as an “X” Meanwhile, the navigation links will slide onto view one by one with a delay on each to create an animation that follows_ staggered.
Purpose of Functions:
Hamburger Toggle Function : This function is listening for a click event on the class hamburger. After it has been triggered, it adds/removes. change class to the. menu-icon and. navigation. This is very important to deliver a mobile-responsive experience where initially the navigation menu will be visible only on click.
Source Code :
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Architecture</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css">
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" 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>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="brand navbar-brand">
<div class="logo1"></div>
<div class="logo2"></div>
<div class="logo3"></div>
<span>ARCHITECTURE</span>
</div>
<div class="search-bar">
<input type="text" placeholder="What are you looking for?">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<div class="hamburger-menu">
<div class="menu-icon">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<div class="navigation">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">PROJECTS</a>
<a href="#">BLOG</a>
<a href="#">CUSTOMERS</a>
<a href="#">CONTACT</a>
</div>
</div>
</nav>
<section class="landing">
<div class="landing-img">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/landing-bg.jpg">
</div>
<div class="banner">
<h1 class="banner-heading"><span>DREAM</span> HOUSE</h1>
<div class="banner-content">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore, eveniet culpa numquam </p>
<button>READ MORE</button>
</div>
</div>
</section>
<section class="about">
<div class="about-left">
<h1>WE ARE CREATIVE BUILDING - DESIGN COMPANY</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione placeat et similique facere expedita voluptates, fuga accusamus quasi hic recusandae.</p>
<button>READ MORE</button>
</div>
<div class="about-right">
<div class="frame"></div>
<div class="about-img-wrapper">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/about.jpg" >
</div>
</div>
<div class="experience section-bottom">
<h1>20 YEARS</h1>
<h3>EXPERIENCE WORKING</h3>
</div>
</section>
<section class="projects">
<h1 class="projects-heading">LATEST PROJECTS</h1>
<div class="cards">
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/card1.jpg">
<div class="card-content">
<h1>Your Dream House is here</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, vero?</p>
</div>
</div>
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/card2.jpg">
<div class="card-content">
<h1>Your Dream House is here</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, vero?</p>
</div>
</div>
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/card3.jpg">
<div class="card-content">
<h1>Your Dream House is here</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, vero?</p>
</div>
</div>
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/card4.jpg">
<div class="card-content">
<h1>Your Dream House is here</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, vero?</p>
</div>
</div>
<div class="card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/card5.jpg">
<div class="card-content">
<h1>Your Dream House is here</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, vero?</p>
</div>
</div>
</div>
<div class="designs section-bottom">
<h1>AWESOME</h1>
<h3>DESIGNS</h3>
</div>
</section>
<section class="customers">
<h1 class="customers-heading">CUSTOMERS</h1>
<div class="customers-content">
<div class="customers-card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/customer1.jpg" >
<div class="customers-card-content">
<h1>John Smith</h1>
<h3>Co-manager associated</h3>
<i class="fa-solid fa-quote-left"></i>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, illo velit ullam nam deleniti nisi?</p>
</div>
</div>
<div class="customers-card">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="images/customer2.jpg">
<div class="customers-card-content">
<h1>Ann White</h1>
<h3>Co-manager associated</h3>
<i class="fa-solid fa-quote-left"></i>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus, illo velit ullam nam deleniti nisi?</p>
</div>
</div>
</div>
<div class="client section-bottom">
<h1>CLIENT</h1>
<h3>SAYS</h3>
</div>
</section>
<section class="contact">
<div class="contact-content">
<div class="contact-left">
<h1>Stay tuned and get the latest updates</h1>
</div>
<div class="contact-right">
<input type="email" placeholder="Enter your e-mail address">
<i class="fa-solid fa-paper-plane"></i>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-content">
<div class="brand brand-footer">
<div class="logo1"></div>
<div class="logo2"></div>
<div class="logo3"></div>
<span>ARCHITECTURE</span>
</div>
<div class="copyright">
<p>© All Rights Reserved. Made by Code And Create</p>
</div>
</div>
</footer>
<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=4c99c"></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;
font-family: "Abel", sans-serif;
text-decoration: none;
outline: none;
}
html {
font-size: 62.5%;
}
/* End of Default Styles */
/* Container */
.container {
width: 100%;
height: 100%;
background-color: #202020;
}
/* Navbar */
.navbar {
width: 100%;
height: 10rem;
background-color: #202020;
position: fixed;
top: 0;
z-index: 100;
}
.brand {
display: flex;
position: absolute;
top: 50%;
left: 8rem;
transform: translateY(-50%);
}
.logo1 {
width: 6rem;
height: 6rem;
border: .4rem solid #dba81b;
}
.logo2 {
width: 5rem;
height: 5rem;
background-color: #202020;
position: absolute;
top: 1rem;
left: 1rem;
/* z-index: 10; */
}
.logo3 {
width: 5rem;
height: 5rem;
border: .4rem solid #dba81b;
background-color: #202020;
position: absolute;
top: 2rem;
left: 2rem;
/* z-index: 20; */
}
.brand span {
font-size: 3rem;
color: #fff;
letter-spacing: .3rem;
margin: 1.5rem 0 0 3rem;
}
.search-bar {
position: absolute;
top: 50%;
right: 15rem;
transform: translateY(-50%);
}
.search-bar input {
width: 45rem;
height: 4rem;
background-color: #3e3e41;
border: none;
padding: 2rem 2rem 2rem 4rem ;
font-size: 1.6rem;
color: #fff;
border-radius: .5rem;
}
.search-bar input::placeholder {
color: #ccc;
}
.search-bar i {
position: absolute;
top: 50%;
left: 1.5rem;
transform: translateY(-50%);
font-size: 1.6rem;
color: #ccc
}
.menu-icon {
width: 4rem;
height: 2.5rem;
position: absolute;
top: 50%;
right: 8rem;
transform: translateY(-50%);
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 100;
}
.line {
width: 4rem;
height: .2rem;
background-color: #ccc;
transition: all .3s;
}
.change .line-1 {
width: 55%;
transform: rotateZ(-15deg) translate(-.2rem, .8rem);
}
.change .line-3 {
width: 55%;
transform: rotateZ(15deg) translate(-.2rem, -.8rem);
}
.navigation {
width: 100%;
height: 100vh;
background-color: #0b0b14;
position: absolute;
top: -100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all .3s;
/* z-index: 50; */
}
.change .navigation {
top: 0;
}
.navigation a {
font-family: 'Alfa Slab One', cursive;
font-size: 5rem;
color: #fff;
letter-spacing: .3rem;
margin-bottom: 1rem;
position: relative;
opacity: 0;
visibility: hidden;
}
.change .navigation a:nth-child(1) {
transition: all .3s .3s;
}
.change .navigation a:nth-child(2) {
transition: all .3s .4s;
}
.change .navigation a:nth-child(3) {
transition: all .3s .5s;
}
.change .navigation a:nth-child(4) {
transition: all .3s .6s;
}
.change .navigation a:nth-child(5) {
transition: all .3s .7s;
}
.change .navigation a:nth-child(6) {
transition: all .3s .8s;
}
.change .navigation a {
opacity: 1;
visibility: visible;
}
.navigation a::before {
content: "";
width: 15rem;
height: .5rem;
background-color: #dba81b;
position: absolute;
top: 50%;
left: -17rem;
transform: translateY(-50%);
transform: scale(0);
transform-origin: right;
transition: transform .3s;
}
.navigation a:hover::before {
transform: scale(1);
}
.navigation a::after {
content: "";
width: 15rem;
height: .5rem;
position: absolute;
background-color: #dba81b;
top: 50%;
right: -17rem;
transform: translateY(-50%);
transform: scale(0);
transform-origin: left;
transition: transform .3s;
}
.navigation a:hover::after {
transform: scale(1);
}
/* End of Navbar */
/* Landing */
.landing {
width: 100%;
height: 90vh;
position: relative;
}
.landing-img {
position: absolute;
top: 11rem;
left: 50%;
transform: translateX(-50%);
width: 92%;
height: 70vh;
}
.landing-img img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .3;
}
.banner {
position: absolute;
bottom: 15rem;
left: 20rem;
}
.banner-heading {
font-size: 9rem;
color: #fff;
}
.banner-heading span {
font-family: 'Alfa Slab One', cursive;
font-size: 8rem;
color: #dba81b;
letter-spacing: .5rem;
}
.banner-content {
display: flex;
align-items: center;
}
.banner-content p {
width: 45rem;
font-size: 2rem;
color: #fff;
margin-right: 2rem;
}
.banner-content button {
width: 15rem;
height: 5rem;
background-color: transparent;
border: .3rem solid #fff;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
cursor: pointer;
}
/* End of Landing */
/* About */
.about {
width: 100%;
height: 75vh;
background-color: #313133;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.about-left {
/* margin-right: 20rem; */
}
.about-left h1 {
font-size: 5rem;
color: #fff;
width: 50rem;
margin-bottom: 6rem;
}
.about-left p {
font-size: 2rem;
color: #fff;
width: 50rem;
margin-bottom: 5rem;
}
.about-left button {
width: 18rem;
height: 5rem;
background-color: transparent;
border: .2rem solid #dba81b;
color: #dba81b;
font-size: 1.8rem;
letter-spacing: .1rem;
cursor: pointer;
}
.frame {
width: 50rem;
height: 35rem;
border: 3rem solid #555;
position: absolute;
top: 15rem;
right: 40rem;
}
.about-img-wrapper {
width: 50rem;
height: 35rem;
position: absolute;
top: 8rem;
right: 33rem;
}
.about-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.section-bottom {
position: absolute;
bottom: 2rem;
right: 33rem;
height: 12rem;
border-right: 1rem solid #dba81b;
text-align: right;
padding-right: 2rem;
}
.section-bottom h1 {
font-family: 'Alfa Slab One', cursive;
font-size: 6rem;
color: #555;
letter-spacing: .5rem;
}
.section-bottom h3 {
font-size: 2.5rem;
color: #fff;
}
/* End of About */
/* Projects */
.projects {
width: 100%;
height: 100vh;
position: relative;
}
.projects-heading {
font-size: 8rem;
color: #fff;
margin: 7rem 0 10rem 9rem;
letter-spacing: .2rem;
}
.cards {
width: 90%;
margin: auto;
display: flex;
}
.card {
width: 32rem;
height: 50rem;
margin-right: 2.5rem;
cursor: pointer;
position: relative;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: background-color .6s;
}
.card:hover .card-content {
background-color: rgba(0, 0, 0, .9);
}
.card-content::before {
content: "";
width: 92%;
height: .1rem;
background-color: #dba81b;
position: absolute;
left: 0;
top: 2rem;
transform: scale(0);
transform-origin: left;
transition: transform .8s;
}
.card:hover .card-content::before {
transform: scale(1)
}
.card-content::after {
content: "";
width: .1rem;
height: 94%;
background-color: #dba81b;
position: absolute;
left: 2rem;
top: 0;
transform: scale(0);
transform-origin: top;
transition: transform .8s;
}
.card:hover .card-content::after {
transform: scale(1)
}
.card-content h1 {
font-size: 2rem;
color: #fff;
position: absolute;
top: 4rem;
left: 4rem;
width: 15rem;
opacity: 0;
visibility: hidden;
transition: all .5s;
}
.card:hover .card-content h1 {
opacity: 1;
visibility: visible;
transition: all .5s .6s;
}
.card-content p {
font-size: 1.6rem;
color: #fff;
position: absolute;
top: 13rem;
left: 4rem;
width: 17rem;
opacity: 0;
visibility: hidden;
transition: all .5s;
}
.card:hover .card-content p {
opacity: 1;
visibility: visible;
transition: all .5s .6s;
}
.designs {
right: 12rem;
}
/* End of Projects */
/* Customers */
.customers {
width: 100%;
height: 80vh;
background-color: #313133;
padding-top: 7rem;
position: relative;
}
.customers-heading {
font-size: 8rem;
color: #fff;
margin: 0 0 10rem 9rem;
letter-spacing: .2rem;
}
.customers-content {
width: 80%;
margin: auto;
display: flex;
justify-content: space-evenly;
}
.customers-card {
position: relative;
}
.customers-card img {
width: 20rem;
position: absolute;
top: -5rem;
right: 2rem;
border-radius: .5rem;
box-shadow: 0 .5rem .5rem rgba(0, 0, 0, .1);
}
.customers-card-content {
width: 50rem;
height: 22rem;
background-color: #777;
border-radius: .5rem;
box-shadow: 0 1rem 1rem rgba(0, 0, 0, .2);
padding: 2rem ;
}
.customers-card-content h1 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 1rem;
}
.customers-card-content h3 {
font-size: 1.8rem;
color: #ccc;
margin-bottom: 3rem;
}
.customers-card-content i {
font-size: 2rem;
color: #fff;
}
.customers-card-content p {
font-size: 1.6rem;
color: #fff;
}
/* End of Customers */
/* Contact */
.contact {
width: 100%;
height: 25rem;
display: flex;
justify-content: center;
align-items: center;
}
.contact-content {
width: 80%;
display: flex;
justify-content: space-evenly;
}
.contact-content h1 {
font-size: 3rem;
text-transform: uppercase;;
color: #ccc;
}
.contact-content input {
width: 45rem;
height: 4rem;
background-color: transparent;
padding: 1.5rem 1.5rem 2.2rem 0;
border: none;
border-bottom: .1rem solid #777;
font-size: 1.8rem;
color: #ccc;
transition: all .3s;
}
.contact-content input:focus {
border-bottom: .1rem solid #dba81b;
}
.contact-content input::placeholder {
color: #ccc;
letter-spacing: .1rem;
}
.contact-right {
position: relative;
}
.contact-right i {
font-size: 1.8rem;
position: absolute;
top: 20%;
right: 0;
color: #ccc;
cursor: pointer;
}
/* End of Contact */
/* Footer */
.footer {
width: 100%;
height: 7rem;
background-color: #202020;
border-top: .1rem solid #3e3e41;
position: relative;
}
.brand-footer {
position: absolute;
top: 3.5rem;
left: 20%;
}
.brand-footer .logo1 {
width: 3rem;
height: 3rem;
border: .2rem solid #dba81b;
}
.brand-footer .logo2 {
width: 2.5rem;
height: 2.5rem;
background-color: #202020;
top: .7rem;
left: .7rem;
}
.brand-footer .logo3 {
width: 2.5rem;
height: 2.5rem;
border: .2rem solid #dba81b;
background-color: #202020;
top: 1.3rem;
left: 1.3rem;
}
.brand-footer span {
font-size: 2rem;
margin-top: .5rem;
}
.copyright {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20%;
font-size: 1.6rem;
color: #ccc;
}
/* End of Footer */
/* End of Container */
/* Responsive */
@media(max-width: 1700px) {
.banner {
left: 12rem;
}
.about-right {
margin-right: 20rem;
}
.frame {
width: 45rem;
height: 30rem;
right: 20rem;
}
.about-img-wrapper {
width: 45rem;
height: 30rem;
right: 13rem;
}
.experience {
right: 20rem;
}
.projects {
height: 100%;
}
.cards {
width: 80%;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 25rem;
}
.card {
margin: 1.5rem;
}
.customers-content {
width: 90%;
}
.client {
right: 20rem;
}
.contact-content {
width: 90%;
}
.brand-footer {
left: 16%;
}
.copyright {
right: 16%;
}
}
@media(max-width: 1400px) {
html {
font-size: 55%;
}
.frame {
width: 40rem;
height: 25rem;
right: 15rem;
}
.about-img-wrapper {
width: 40rem;
right: 8rem;
height: 25rem;
}
.experience {
right: 12rem;
}
}
@media(max-width: 1200px) {
html {
font-size: 49%;
}
.about-left p {
width: 40rem;
}
.customers-content {
width: 100%;
}
.client {
right: 10rem;
}
.contact-content {
width: 100%;
}
.brand-footer {
left: 10%;
}
.copyright {
right: 10%;
}
}
@media(max-width: 900px) {
html {
font-size: 45%;
}
.search-bar input {
width: 30rem;
}
.banner-heading {
font-size: 7rem;
}
.banner-heading span {
font-size: 7rem;
}
.banner-content p {
font-size: 1.7rem;
width: 35rem;
}
.about-left h1 {
font-size: 3rem;
width: 35rem;
}
.about-left p {
width: 35rem;
font-size: 1.7rem;
}
.frame {
width: 30rem;
height: 15rem;
border: 1.5rem solid #555;
right: 10rem;
}
.about-img-wrapper {
width: 30rem;
right: 7rem;
top: 12rem;
height: 15rem;
}
.experience {
right: 7rem;
}
.customers {
height: 100%;
padding-bottom: 12rem;
}
.customers-content {
flex-direction: column;
align-items: center;
}
.customers-card {
margin: 8rem;
}
.contact-content {
flex-direction: column;
align-items: center;
}
.contact-left {
margin-bottom: 4rem;
}
}
@media(max-width: 600px) {
html {
font-size: 35%;
}
.navbar-brand span {
display: none;
}
.navigation a {
font-size: 3rem;
}
.navigation a::before, .navigation a::after {
width: 10rem;
}
.navigation a::before {
left: -13rem;
}
.navigation a::after {
right: -13rem;
}
.banner {
left: 5rem;
bottom: 18rem;
}
.banner-heading {
font-size: 5rem;
}
.banner-heading span {
font-size: 4rem;
}
.about {
justify-content: center;
height: 100%;
padding: 10rem 0 25rem 0;
}
.about-left {
text-align: center;
margin-right: 0;
}
.about-right {
display: none;
}
.projects-heading {
font-size: 6rem;
}
}
/* End of Responsive */
JavaScript (script.js)
const menuIcon = document.querySelector(".menu-icon");
const navbar = document.querySelector(".navbar");
menuIcon.addEventListener("click", () => {
navbar.classList.toggle("change")
})
Your download is starting now...
Output :
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
