aliascss
Version:
AliasCSS is a CSS post processor.
121 lines (103 loc) • 7.22 kB
HTML
<html lang="en" dir="ltr" class="_all[m-0,p-0,bsbb,ff-poppins]">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sticky NavBar</title>
<!-- <link rel="stylesheet" href="./style.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body class="mh-100vh">
<header class="pf t-0 l-0 w-100p df jcsb aic p-20px-100px z-index-999 tn-all-0d6s [class~=sticky][bgc-c50e1a,p-15px-100px]">
<a href="" class="brand fs-30px c-ffffff fw7 tt-uppercase tdn letter-spacing-2px">Branding</a>
<div class="menu pr df jcc aic _a[fs-16px,fw6,tdn,c-ffffff,m-0px-30px,p-5px-15px,tt-uppercase,br-15px,tn-all-0d3s,transition-property-color__background]
_a--h-c-000 _a--h-bgc-ffffff
-lg-[class~=active]-right-0px
-lg-[class~=btn]-db -lg-[class~=close-btn]-[pa,t-0px,l-0px,m-25px] -lg_a[db,fs-16px,m-20px,p-0px-15px]
-lg-[pf,bgc-a81b24,fdc,mw-400px,h-100vh,t0px,r--100p,transition-property-right,transition-duration-0d5s]
">
<div class="btn dn -lg-db">
<span class="close-btn c-ffffff fwb stroke-width-2px cp -lg-[pa,t-0px,l-0px,m-25px]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
</span>
<!-- <i class="fas fa-times close-btn"></i> -->
</div>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Prices</a>
<a href="#">Booking</a>
<a href="#">Contact</a>
</div>
<div class="fs-25px cp c-ffffff btn dn -lg-db">
<span class="menu-btn ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu">
<path d="M4 12h16" />
<path d="M4 18h16" />
<path d="M4 6h16" />
</svg>
</span>
<!-- <i class="fas fa-bars menu-btn"></i> -->
</div>
</header>
<section class="section-main pr w-100p mh-100vh df aic jcc bgpc bgsc bgi--bg-url bgrn --bg-url:url(../bg.jpg) p-20px-100px">
<h1 class="fs-60px fw8 tt-uppercase letter-spacing-2px color-2552552550d5 xs-fs-50px xs-lh-60px">Sticky Navigation Navbar</h1>
</section>
<section class="section-two bgc-222 p-20px-100px _h2-[fs-50px,fw7,tt-uppercase,m-30px-0px,c-2552552550d8] _p[fs-18px,m-30px-0px,c-2552552550d5]">
<h2 class="">Branding Elements</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem beatae similique unde consectetur numquam
et, doloremque eius facere sit esse commodi obcaecati laborum incidunt fuga fugiat nostrum distinctio.
Repellendus, veniam eveniet, explicabo sapiente doloremque debitis saepe maiores sint sit esse quibusdam,
dolorem quo? Impedit, similique. Blanditiis similique illum consequatur debitis neque nisi reiciendis quis
earum quaerat at ducimus veniam incidunt, deserunt voluptatibus harum possimus. Dolores laborum dolorem
quibusdam cum unde tempore similique laboriosam enim corrupti. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem beatae similique unde consectetur numquam
et, doloremque eius facere sit esse commodi obcaecati laborum incidunt fuga fugiat nostrum distinctio.
Repellendus, veniam eveniet, explicabo sapiente doloremque debitis saepe maiores sint sit esse quibusdam,
dolorem quo? Impedit, similique. Blanditiis similique illum consequatur debitis neque nisi reiciendis quis
earum quaerat at ducimus veniam incidunt, deserunt voluptatibus harum possimus. Dolores laborum dolorem
quibusdam cum unde tempore similique laboriosam enim corrupti. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem beatae similique unde consectetur numquam
et, doloremque eius facere sit esse commodi obcaecati laborum incidunt fuga fugiat nostrum distinctio.
Repellendus, veniam eveniet, explicabo sapiente doloremque debitis saepe maiores sint sit esse quibusdam,
dolorem quo? Impedit, similique. Blanditiis similique illum consequatur debitis neque nisi reiciendis quis
earum quaerat at ducimus veniam incidunt, deserunt voluptatibus harum possimus. Dolores laborum dolorem
quibusdam cum unde tempore similique laboriosam enim corrupti. </p>
<h2>Typography</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem beatae similique unde consectetur numquam
et, doloremque eius facere sit esse commodi obcaecati laborum incidunt fuga fugiat nostrum distinctio.
Repellendus, veniam eveniet, explicabo sapiente doloremque debitis saepe maiores sint sit esse quibusdam,
dolorem quo? Impedit, similique. Blanditiis similique illum consequatur debitis neque nisi reiciendis quis
earum quaerat at ducimus veniam incidunt, deserunt voluptatibus harum possimus. Dolores laborum dolorem
quibusdam cum unde tempore similique laboriosam enim corrupti. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem beatae similique unde consectetur numquam
et, doloremque eius facere sit esse commodi obcaecati laborum incidunt fuga fugiat nostrum distinctio.
Repellendus, veniam eveniet, explicabo sapiente doloremque debitis saepe maiores sint sit esse quibusdam,
dolorem quo? Impedit, similique. Blanditiis similique illum consequatur debitis neque nisi reiciendis quis
earum quaerat at ducimus veniam incidunt, deserunt voluptatibus harum possimus. Dolores laborum dolorem
quibusdam cum unde tempore similique laboriosam enim corrupti. </p>
</section>
<script>
//Javascript for Navigation effect on scroll
window.addEventListener("scroll", function () {
var header = document.querySelector("header");
header.classList.toggle('sticky', window.scrollY > 0);
});
//Javascript for responsive navigation sidebar Nav
var menu = document.querySelector('.menu');
var menuBtn = document.querySelector('.menu-btn');
var closeBtn = document.querySelector('.close-btn');
menuBtn.addEventListener("click", () => {
menu.classList.add('active');
});
closeBtn.addEventListener("click", () => {
menu.classList.remove('active');
});
</script>
</body>
<script src="/js/aliascss.js"></script>
</html>