Header Fullscreen
Build stunning website faster than ever
<!--Begin::Header-->
<header class="z-fixed header-absolute-top pt-lg-1 header-transparent">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<!--Logo-->
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo/logo-white.svg" alt="" class="img-fluid">
</a>
<div class="d-flex align-items-center navbar-no-collapse-items py-3 order-last">
<div class="nav-item fullscreen-toggler order-last ms-4">
<!--Fullscreen trigger-->
<a href="#offcanvas-fullscreen" class="nav-link width-3x d-block" data-bs-toggle="offcanvas"
data-bs-target="#offcanvas-fullscreen">
<div class="width-2x mb-1 border-bottom border-white border-2"></div>
<div class="width-2x ms-auto border-bottom border-white border-2"></div>
</a>
</div>
<div class="nav-item ms-3 ms-lg-4">
<a href="#"
class="btn btn-outline-light border-0 rounded-pill btn-sm p-0 width-3x height-3x flex-center">
<i class="bx bxl-facebook fs-5"></i>
</a>
</div>
<div class="nav-item ms-1">
<a href="#"
class="btn btn-outline-light border-0 rounded-pill btn-sm p-0 width-3x height-3x flex-center">
<i class="bx bxl-twitter fs-5"></i>
</a>
</div>
<div class="nav-item ms-1">
<a href="#"
class="btn btn-outline-light border-0 rounded-pill btn-sm p-0 width-3x height-3x flex-center">
<i class="bx bxl-instagram fs-5"></i>
</a>
</div>
<div class="nav-item ms-1">
<a href="#"
class="btn btn-outline-light border-0 rounded-pill btn-sm p-0 width-3x height-3x flex-center">
<i class="bx bxl-linkedin fs-5"></i>
</a>
</div>
</div>
</div>
</nav>
</header>
<!--/end::Header-->
<!--Begin::Fullscreen Offcanvas-->
<div class="offcanvas offcanvas-fullscreen offcanvas-top h-100" id="offcanvas-fullscreen">
<div class="offcanvas-body">
<!--Offcanvas fullscreen close-->
<div class="position-absolute end-0 top-0 mt-3 me-5">
<button class="btn btn-outline-secondary p-0 flex-center width-4x height-4x rounded-circle"
data-bs-dismiss="offcanvas">
<i class="bx bx-x fs-4"></i>
</button>
</div>
<!--Offcanvas fullscreen content-->
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-md-7 mb-5 mb-md-0">
<div class="d-inline-flex">
<ul class="js-hover-img">
<li class="js-hover-img-item mb-4">
<div class="js-hover-img-link display-4">
<a href="#">Index</a>
</div>
<img src="assets/img/projects/1.jpg" alt="Image" class="img">
</li>
<li class="js-hover-img-item mb-4">
<div class="js-hover-img-link display-4">
<a href="#">Who we are</a>
</div>
<img src="assets/img/projects/2.jpg" alt="Image" class="img">
</li>
<li class="js-hover-img-item mb-4">
<div class="js-hover-img-link display-4">
<a href="#">Projects</a>
</div>
<img src="assets/img/projects/3.jpg" alt="Image" class="img">
</li>
<li class="js-hover-img-item mb-4">
<div class="js-hover-img-link display-4">
<a href="#">Services</a>
</div>
<img src="assets/img/projects/4.jpg" alt="Image" class="img">
</li>
<li class="js-hover-img-item">
<div class="js-hover-img-link display-4">
<a href="#">Contact</a>
</div>
<img src="assets/img/projects/5.jpg" alt="Image" class="img">
</li>
</ul>
</div>
</div>
<div class="col-md-5">
<!--Address-->
<h3 class="mb-4 fullscreen-item">1355 Market St, <br> Suite 900,
San Francisco<br>
CA, 94103</h3>
<div class="fullscreen-item">
<!--Phone-->
<a href="#!" class="fs-4 link-hover-underline">+011(1234) 56789</a>
<!--Divider-->
<hr class="bg-transparent border-top my-4 opacity-75">
<!--Email-->
<a href="mailto:mail@domain.agency"
class="fs-4 link-hover-underline">mail@domain.agency</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--::/end offcanvas fullscreen-->
<!-- Bootstrap + Vendor + Theme -->
<link href="assets/css/theme.min.css" rel="stylesheet">
<!-- Bootstrap + Vendor + Theme -->
<script src="assets/css/theme.bundle.js"></script>
<!--Gsap animations-->
<script src="assets/vendor/node_modules/js/gsap.min.js"></script>
<script>
let vw = window.innerWidth || document.documentElement.clientWidth,
maxVw = 320;
vw > maxVw && document.querySelectorAll(".js-hover-img-item").forEach(function (e) {
let t = e,
r = (t.getBoundingClientRect(),
e.querySelector("img")),
a = r.offsetHeight,
l = r.offsetWidth;
e.addEventListener("mouseenter",
s => {
e.classList.contains("is-hover") || e.classList.add("is-hover");
let o = s.clientX - t.offsetLeft - l / 2,
u = s.offsetY - a / 2;
gsap.set(r, {
x: o,
y: u,
})
}),
e.addEventListener("mousemove",
e => {
let s = e.clientX - t.offsetLeft - l / 2,
o = e.offsetY - r.offsetTop - a * .5;
gsap.to(r, {
x: s,
y: o,
rotate: -4,
})
}),
e.addEventListener("mouseleave", () => {
e.classList.contains("is-hover") && e.classList.remove("is-hover")
})
});
</script>